/* Expert Web Panel — custom overrides on top of Tailwind */

/* Global dark color-scheme — Chrome native UI (datetime-local placeholder
   "дд.мм.гггг, --:--", calendar picker, scrollbar) переходит на тёмную тему. */
:root, html {
  color-scheme: dark;
}

/* Smooth scrollbar for dark theme */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #111827;
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Audio player dark theme */
audio {
  color-scheme: dark;
  height: 24px;
}

/* Table row hover */
tr.hover-row:hover td {
  background-color: rgba(31, 41, 55, 0.5);
}

/* v126: rowspan-ячейка «Лимит города» в таблице клиник /settings.
   Фон + боковые границы заданы прямо на <td>, поэтому visually это
   один сплошной блок на N строк (а не «полоска вокруг input»).
   ``!important`` оберегает фон от Tailwind hover:bg-* у строки клиники
   (``<tr ... hover:bg-gray-600/40>``): иначе при наведении на любую
   строку группы фон ячейки лимита смешивался бы с hover-цветом и
   терял контраст с соседями.
   v127: добавлены top/bottom-границы (тот же цвет/толщина, что left/right)
   — теперь каждый город обрамлён с 4 сторон, и между городами появляется
   явный визуальный разрыв; раньше все 14 клиник сливались в одну
   вертикальную серую полосу.  Совместно с ``tr.clinic-group-last``
   (последняя строка клиники в группе → ``border-bottom`` на её td)
   получаем единую рамку «город + его клиники». */
td.city-cap-cell {
  background-color: rgba(55, 65, 81, 0.5) !important;
  border-top: 2px solid rgba(75, 85, 99, 0.6);
  border-bottom: 2px solid rgba(75, 85, 99, 0.6);
  border-left: 2px solid rgba(75, 85, 99, 0.6);
  border-right: 2px solid rgba(75, 85, 99, 0.6);
  height: 100%;
}

/* v127: bottom-граница на последней строке клиники каждого города —
   ``data-group-last="true"`` ставит роутер
   (src/web/routers/settings.py, поле ``is_last_in_group``).  Цвет/толщина
   совпадают с ``td.city-cap-cell``, чтобы рамка вокруг города была
   единым прямоугольником.  Это даёт визуальный сепаратор между группами
   клиник разных городов. */
tr.clinic-group-last > td {
  border-bottom: 2px solid rgba(75, 85, 99, 0.6);
}

/* htmx request indicator */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline;
}

/* v106: датовые / время-датовые инпуты «От» / «До» на /history,
   /statistics, /monitoring. Дефолтный placeholder браузера («дд.мм.гггг,
   --:--» / «дд.мм.гггг») рисуется тёмно-серым и нечитаем на фоне
   bg-gray-900 / bg-gray-800. Принудительно делаем тёмную color-scheme
   (системный picker сразу подстраивается под тёмную тему) и красим все
   подсекции -webkit-datetime-edit-* в светло-серый. Иконку календаря
   инвертируем — чёрная по умолчанию глифа становится белой.
   v107: все правила цвета через !important — Tailwind base / user-agent
   stylesheet перебивали (визуально текст в инпуте всё равно был тёмным).
   Также явно красим background-color и placeholder. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: dark !important;
  color: #e5e7eb !important;
  background-color: #1f2937 !important;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  color: #e5e7eb !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 1 !important;
  cursor: pointer;
}
input::placeholder {
  color: #9ca3af !important;
}