/* visual-v2.css — фаза 2 плана Астры (11.09.2026): постепенное приближение
   оформления к её прототипу. Всё в этом файле ВЫКЛЮЧЕНО по умолчанию —
   правила активируются только явными атрибутами data-ui-* на <html>,
   каждый флаг независим (data-ui-typography, data-ui-controls,
   data-ui-surfaces, далее по плану — data-ui-shell, data-ui-layout на
   конкретных #panel-*). Сняли/выключили атрибут — вернулся прежний вид,
   ничего в HTML/JS менять не нужно. Подключать ПОСЛЕ tokens.css и
   components.css.

   Сейчас (шаги 1-4 фазы 2) флаги data-ui-typography="v2",
   data-ui-controls="v2" и data-ui-surfaces="v2" включаются автоматически
   только для тестовой клиники — по clinic_id из /auth/login и /auth/me
   (applyUiV2FlagsForTestClinic() в shell.js; v158 — переключено с
   clinic_name на clinic_id по замечанию Астры: название клиники
   редактируется и может совпасть у двух клиник, id — первичный ключ, не
   редактируется и не задваивается). URL-слаг НЕ годится для этого
   (проверено живьём: слаг в адресе не совпадает с тем, под каким аккаунтом
   реально вошли). Флаги явно сбрасываются при выходе и ошибке авторизации
   (resetUiV2Flags()), чтобы не пережить смену аккаунта в одной вкладке без
   перезагрузки. На проде (TDI и остальные) ничего не меняется. */

/* ======================= Шаг 2 — типографика (Onest/Manrope) =======================
   Только смена шрифтовых семейств. Размеры/веса/отступы/line-height —
   прежние (см. предупреждение Астры: не добавлять body{font-size:14px;
   line-height:1.5} в этом же релизе — сейчас они не заданы явно). */
:root[data-ui-typography="v2"] {
  --font-body: "Onest", "Segoe UI", Arial, sans-serif;
  --font-heading: "Onest", "Segoe UI", Arial, sans-serif;
  --font-brand: "Manrope", "Onest", "Segoe UI", Arial, sans-serif;
}

/* ======================= Шаг 3 — контракт кнопок/полей (.btn/.control) =======================
   Перенесённый и исправленный блок v137, под флагом data-ui-controls="v2".
   Правки по ревью Астры: .tsel-native исключён явно (иначе новые
   display/height правила сломали бы его скрытую геометрию); touch-медиа
   теперь корректно поднимает .small до 44px (было: .small специфичнее и
   выигрывал 28px даже на touch); .small.icon — отдельная явная комбинация;
   textarea.control не превращается в кнопку, сохраняет resize:vertical;
   добавлены quiet/danger, focus-visible, disabled. */
html[data-ui-controls="v2"] :is(.btn, .control:not(.tsel-native)) {
  --ui-size: var(--control-h); /* 36px */
  box-sizing: border-box;
  min-height: var(--ui-size);
  height: auto;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 20px;
  vertical-align: middle;
}
html[data-ui-controls="v2"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  white-space: normal;
  font-weight: var(--fw-medium);
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border-control);
  cursor: pointer;
}
html[data-ui-controls="v2"] .btn:not(:disabled):hover {
  background: var(--selection-bg);
}
html[data-ui-controls="v2"] .btn.primary {
  background: var(--action-bg);
  color: var(--action-fg);
  border-color: transparent;
}
html[data-ui-controls="v2"] .btn.primary:not(:disabled):hover {
  background: var(--action-hover);
}
html[data-ui-controls="v2"] .btn.quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
html[data-ui-controls="v2"] .btn.quiet:not(:disabled):hover {
  background: var(--selection-bg);
}
html[data-ui-controls="v2"] .btn:is(.danger, .danger-soft) {
  background: var(--money-bad-soft);
  color: var(--money-bad-ink);
  border-color: transparent;
}
html[data-ui-controls="v2"] .btn:is(.danger, .danger-soft):not(:disabled):hover {
  background: var(--money-bad-soft);
  color: var(--money-bad-ink);
  border-color: currentColor;
}
html[data-ui-controls="v2"] .control:not(.tsel-native) {
  display: block;
  min-width: 0;
  background: var(--card);
  color: var(--ink);
  border-color: var(--border-control);
  font-weight: var(--fw-normal);
}
/* Только видимый trigger; скрытый native (.tsel-native) остаётся прежним. */
html[data-ui-controls="v2"] .tsel-trigger.control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: var(--sp-2);
}
html[data-ui-controls="v2"] textarea.control:not(.tsel-native) {
  min-height: 96px;
  resize: vertical;
}
html[data-ui-controls="v2"] :is(.btn.small, .control.small:not(.tsel-native)) {
  --ui-size: var(--control-h-sm); /* 28px */
  padding: 3px 8px;
  font-size: var(--fs-caption);
}
html[data-ui-controls="v2"] .btn.icon,
html[data-ui-controls="v2"] .btn.small.icon {
  width: var(--ui-size);
  min-width: var(--ui-size);
  padding: 0;
  flex: none;
}
html[data-ui-controls="v2"] .btn.icon svg {
  width: 16px;
  height: 16px;
  flex: none;
}
html[data-ui-controls="v2"] :is(.btn, .control:not(.tsel-native)):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Обычные контролы этого этапа — на светлых поверхностях. Для тёмной
   навигации (сайдбар) отдельный focus-цвет понадобится на шаге 4
   (--nav-ink), пока там .btn/.control не применяются. */
html[data-ui-controls="v2"] :is(.btn, .control:not(.tsel-native)):disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (pointer: coarse) {
  html[data-ui-controls="v2"] :is(.btn, .control:not(.tsel-native)),
  html[data-ui-controls="v2"] :is(.btn.small, .control.small:not(.tsel-native)) {
    --ui-size: var(--control-h-touch); /* 44px, включая small */
  }
}

/* ======================= Шаг 4 — поверхности и навигация =======================
   Два независимых куска под один флаг data-ui-surfaces="v2":
   (а) уточнённые --border по всем 7 палитрам (найдены при сравнении с
       tokens.css прототипа Астры, 11.09.2026 — см. project doc,
       раздел "План Астры для Фазы 2"); --paper/--card НЕ трогаем — точных
       значений от Астры нет, только --border были явно сверены;
   (б) сайдбар/вкладки переведены с --dark-bg/--dark-text/--dark-text-soft
       на --nav-bg/--nav-ink/--nav-muted (эти токены объявлены ещё в v135,
       слой 1, но не были никуда применены до сих пор). Дашборд
       (.header-card/.hero-card/.segmented — тоже сейчас на --dark-bg) НЕ
       трогаем здесь — это шаг 5 по плану Астры, отдельная задача. */

:root[data-palette="beige"][data-ui-surfaces="v2"]     { --border: #d8cbc0; }
:root[data-palette="cream"][data-ui-surfaces="v2"]     { --border: #d9ccb5; }
:root[data-palette="green"][data-ui-surfaces="v2"]     { --border: #cbdcdd; }
:root[data-palette="darkgreen"][data-ui-surfaces="v2"] { --border: #c4d3bd; }
:root[data-palette="blue"][data-ui-surfaces="v2"]      { --border: #c4d1e0; }
:root[data-palette="red"][data-ui-surfaces="v2"]       { --border: #dfc9bf; }
:root[data-palette="burgundy"][data-ui-surfaces="v2"]  { --border: #dbc4cc; }

html[data-ui-surfaces="v2"] .sidebar { background: var(--nav-bg); color: var(--nav-ink); }
html[data-ui-surfaces="v2"] .tab-btn { color: var(--nav-muted); }
html[data-ui-surfaces="v2"] .tab-btn:hover {
  background: color-mix(in srgb, var(--nav-ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--nav-ink) 20%, transparent);
  color: var(--nav-ink);
}
html[data-ui-surfaces="v2"] .tab-btn.active {
  background: color-mix(in srgb, var(--nav-ink) 15%, transparent);
  border-color: color-mix(in srgb, var(--nav-ink) 22%, transparent);
  color: var(--nav-ink); font-weight: var(--fw-medium);
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-ui-surfaces="v2"] #current-user-name { color: var(--nav-ink); }
/* .sidebar-foot button ("Сменить пароль"/"Выйти") — остаётся обычной
   акцентной/secondary кнопкой, не частью этого шага. */

/* «Powered by Anexis» (.powered-by-anexis) изначально жёстко задан светлым
   rgba(244,246,245,0.4) в расчёте на тёмный сайдбар (см. комментарий в
   components.css) — не перекрашивается темой клиники намеренно. Но на
   палитре cream сайдбар (--nav-bg) светлый (#f0e9db), и та же светлая
   надпись становится нечитаемой. Точечный фикс только для cream — тёмный
   эквивалент того же приёма (жёсткий цвет, не завязан на --accent), а не
   общее правило через --nav-muted, чтобы подпись платформы всё ещё не
   "перекрашивалась" под акцент клиники на остальных 6 палитрах. */
html[data-ui-surfaces="v2"][data-palette="cream"] .powered-by-anexis {
  color: rgba(58,48,36,0.55);
}

/* ======================= Шаг 5 (v159) — новый дашборд по системе Астры =======================
   Флаг на самом #panel-dashboard (data-ui-layout="v2"), не на <html> — так
   можно включать layout по одной панели независимо от остальных (patient/
   finance получат свой флаг тем же путём позже, см. applyAnexisLayoutFlags()
   в shell.js). Разметка/классы — 1:1 из прототипа Астры (уточнения по
   дашборду, переписка 12.09.2026), проверено на отсутствие коллизий имён
   классов с существующим CSS (см. project doc). Иконки — .icon, локальный
   словарь прототипа (не Feather/Lucide, см. её пояснение), 20px по
   умолчанию/16px в компактных кнопках, объявлено ниже глобально — сам
   класс нигде раньше не использовался, конфликтов нет. .pill/.textbtn —
   тоже объявлены глобально (нужны и на карточке пациента/др. панелях в
   будущем, и уже сейчас — чип фильтра «должники» на «Пациентах», см. ниже),
   остальное — специфика раскладки дашборда, оставлено под флагом. */

/* Живая проверка на тестовой клинике (12.09.2026) нашла ДВА слоя одного
   бага: (1) флаг data-ui-layout="v2" на #panel-dashboard выставлялся
   корректно, но само переключение видимости #dash-v2/#dash-legacy нигде не
   было прописано; (2) первая попытка исправить это правилом ниже не
   сработала, потому что #dash-v2 в HTML имел инлайн-атрибут
   style="display:none" — инлайн-стиль всегда перебивает любое правило из
   внешнего файла независимо от специфичности селектора, даже это. Убрали
   инлайн-стиль из admin.html, скрытие по умолчанию перенесено сюда же
   (#dash-v2 без атрибута [data-ui-layout] на #panel-dashboard). */
#dash-v2 { display: none; }
#panel-dashboard[data-ui-layout="v2"] #dash-legacy { display: none; }
#panel-dashboard[data-ui-layout="v2"] #dash-v2 { display: block; }

.icon { width: 20px; height: 20px; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn.compact .icon, .btn.small .icon { width: 16px; height: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; background: var(--selection-bg); color: var(--action-bg);
}
.pill.bad { background: var(--money-bad-soft); color: var(--money-bad-ink); }
.pill.good { background: var(--money-good-soft); color: var(--money-good-ink); }

.textbtn { padding: 0; background: transparent; border: 0; color: inherit; text-align: left; font-weight: 600; min-height: 28px; cursor: pointer; font: inherit; }
.textbtn:hover { color: var(--action-bg); text-decoration: underline; }

#panel-dashboard[data-ui-layout="v2"] .card { padding: 0; box-shadow: none; }
#panel-dashboard[data-ui-layout="v2"] .page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
#panel-dashboard[data-ui-layout="v2"] .page-heading h1 { font-size: var(--fs-xl); margin: 0; }
#panel-dashboard[data-ui-layout="v2"] .page-heading p { color: var(--ink-soft); margin: 6px 0 0; font-size: var(--fs-sm); }
#panel-dashboard[data-ui-layout="v2"] .metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
#panel-dashboard[data-ui-layout="v2"] .metric { padding: 20px 22px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; }
#panel-dashboard[data-ui-layout="v2"] .metric .label { color: var(--ink-soft); font-size: var(--fs-sm); }
#panel-dashboard[data-ui-layout="v2"] .metric .value { font-size: 26px; letter-spacing: -0.8px; font-weight: 600; line-height: 1.4; margin: 8px 0 2px; overflow-wrap: anywhere; }
#panel-dashboard[data-ui-layout="v2"] .metric .value small { font-size: var(--fs-sm); font-weight: 400; }
#panel-dashboard[data-ui-layout="v2"] .metric .note { font-size: var(--fs-caption); color: var(--ink-soft); }
#panel-dashboard[data-ui-layout="v2"] .metric.featured { background: var(--selection-bg); border-color: var(--border); }
#panel-dashboard[data-ui-layout="v2"] .split { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(290px,1fr); gap: var(--sp-6); }
#panel-dashboard[data-ui-layout="v2"] .split > * { min-width: 0; }
#panel-dashboard[data-ui-layout="v2"] .stack { display: flex; flex-direction: column; gap: 20px; }
#panel-dashboard[data-ui-layout="v2"] .cardhead { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
#panel-dashboard[data-ui-layout="v2"] .cardhead h2 { font-size: var(--fs-md); margin: 0; }
#panel-dashboard[data-ui-layout="v2"] .cardhead p { margin: 2px 0 0; }
#panel-dashboard[data-ui-layout="v2"] .tablewrap { overflow: auto; }
#panel-dashboard[data-ui-layout="v2"] table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--fs-base); }
#panel-dashboard[data-ui-layout="v2"] th { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-caption); background: color-mix(in srgb, var(--paper) 60%, var(--card)); white-space: nowrap; }
#panel-dashboard[data-ui-layout="v2"] th, #panel-dashboard[data-ui-layout="v2"] td { padding: 14px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#panel-dashboard[data-ui-layout="v2"] tr:last-child td { border-bottom: 0; }
#panel-dashboard[data-ui-layout="v2"] td small { display: block; color: var(--ink-soft); font-size: var(--fs-caption); margin-top: 2px; }
#panel-dashboard[data-ui-layout="v2"] tbody tr:hover { background: color-mix(in srgb, var(--selection-bg) 30%, var(--card)); }
#panel-dashboard[data-ui-layout="v2"] .listitem { padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
#panel-dashboard[data-ui-layout="v2"] .listitem:last-child { border-bottom: 0; }
#panel-dashboard[data-ui-layout="v2"] .listitem p { font-size: var(--fs-caption); color: var(--ink-soft); margin: 4px 0 0; }
#panel-dashboard[data-ui-layout="v2"] .grow { flex: 1 1 0%; min-width: 0; }
#panel-dashboard[data-ui-layout="v2"] .avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); background: var(--selection-bg); color: var(--action-bg); }
#panel-dashboard[data-ui-layout="v2"] .amount-bad { color: var(--money-bad-ink); }
#panel-dashboard[data-ui-layout="v2"] .loadbar { height: 5px; background: var(--selection-bg); border-radius: 4px; overflow: hidden; margin-top: 8px; }
#panel-dashboard[data-ui-layout="v2"] .loadbar span { display: block; height: 100%; background: var(--action-bg); border-radius: 4px; }
#panel-dashboard[data-ui-layout="v2"] .chart {
  height: 140px; display: flex; align-items: flex-end; gap: 10px; padding: 0 0 24px; position: relative; margin-top: 28px;
  background: repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--border) 40px, transparent 41px);
}
#panel-dashboard[data-ui-layout="v2"] .chart .bar { position: relative; flex: 1 1 0%; background: var(--action-bg); border-radius: 4px 4px 0 0; min-width: 12px; max-width: 60px; margin: 0 auto; }
#panel-dashboard[data-ui-layout="v2"] .chart .bar span { position: absolute; top: 100%; padding-top: 6px; width: 100%; text-align: center; font-size: var(--fs-micro); color: var(--ink-soft); }
/* v163 — контракт мини-графика (Астра, 12.09.2026): месяц с нулевой выручкой
   раньше рисовался принудительным минимумом 4% высоты (визуально неотличим
   от маленького, но реального значения) — теперь высота честная (0%), а
   тонкая базовая линия (.zero) + подпись "0" над ней (.bar b) показывают,
   что это именно ноль, а не отсутствие данных. Текущий (незавершённый)
   месяц выделяется пунктирной рамкой (.current), без изменения формулы. */
#panel-dashboard[data-ui-layout="v2"] .chart .bar b { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: 4px; text-align: center; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-soft); }
#panel-dashboard[data-ui-layout="v2"] .chart .bar.zero { height: 2px !important; background: var(--border); }
#panel-dashboard[data-ui-layout="v2"] .chart .bar.current { outline: 1.5px dashed var(--action-bg); outline-offset: 2px; }
#panel-dashboard[data-ui-layout="v2"] .empty-hint { padding: 20px 24px; color: var(--ink-soft); font-size: var(--fs-sm); }

/* Breakpoints — точные значения от Астры (уточнение 12.09.2026):
   >1200 — 4 колонки/1.9fr; 1001-1200 — 4 колонки/1.5fr(min 260); ≤1000 —
   2 колонки/.split в 1 колонку; ≤480 — добавили сами (её демо держало 2
   плитки в ряд на телефоне, для рабочей версии длинные суммы не помещались,
   она согласилась на доп. порог для продакшена). */
@media (max-width: 1200px) {
  #panel-dashboard[data-ui-layout="v2"] .split { grid-template-columns: minmax(0,1.5fr) minmax(260px,1fr); }
  #panel-dashboard[data-ui-layout="v2"] .metrics { gap: var(--sp-3); }
}
@media (max-width: 1000px) {
  #panel-dashboard[data-ui-layout="v2"] .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #panel-dashboard[data-ui-layout="v2"] .split { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  #panel-dashboard[data-ui-layout="v2"] .metrics { gap: var(--sp-2); }
}
@media (max-width: 480px) {
  #panel-dashboard[data-ui-layout="v2"] .metrics { grid-template-columns: minmax(0,1fr); }
}

/* ======================= Шаг 6 (v160) — карточка пациента, компоновка по README Астры =======================
   Источник — её "anexis-v158-layout/README.md" (раздел «2. Пациент: вкладки
   сохраняются»), присланный вместе с уточнениями по дашборду 12.09.2026 и
   явно подтверждённый как всё ещё актуальный. 8 вкладок и их id/data-pc-tab/
   обработчики НЕ менялись (см. admin.html/patient.js) — здесь только layout
   и визуал внутри уже существующей структуры, под тем же паттерном флага,
   что и дашборд (data-ui-layout="v2" на самом #modal-patient-card). */

/* .ui-table-scroll — БЕЗ флага display:contents (не добавляет блок в старую
   раскладку, как и просила Астра), под флагом — обычный блок с горизонтальной
   прокруткой для широких таблиц на узких экранах. Общий класс — им же
   пользуется #panel-finance ниже (шаг 7). */
.ui-table-scroll { display: contents; }
#modal-patient-card[data-ui-layout="v2"] .ui-table-scroll,
#panel-finance[data-ui-layout="v2"] .ui-table-scroll,
/* 23.09.2026, найдено при проходе по мобильной вёрстке/scroll-контейнерам
   (приёмка Астры) — вкладка «Клиника» (clinic-v3.css/clinic-v3.js) уже
   заворачивала свои широкие таблицы («Сотрудники» — min-width:790px,
   «Расписание» — 1100px, «Журнал» — 860px) в этот же общий .ui-table-scroll,
   но флаг вкладки — [data-ui-clinic="v3"], а не data-ui-layout="v2" (это два
   разных, несвязанных гейта разных этапов редизайна — см. applyAnexisLayoutFlags()
   в shell.js, где #panel-clinic вообще не участвует). Из-за этого класс
   оставался display:contents на «Клинике» и НЕ давал горизонтальную прокрутку
   — на узких экранах эти таблицы распирали всю страницу по ширине вместо
   локального скролла (тот же класс проблем, что у doctors-v3.css, которая
   решила это СВОИМ .docv3-tablewrap{overflow-x:auto} — см. её же комментарий
   там, не пострадавший от этого гейта, т.к. не пользовался общим классом). */
[data-ui-clinic="v3"] .ui-table-scroll {
  display: block;
  overflow-x: auto;
}

#modal-patient-card[data-ui-layout="v2"] .ui-patient-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
#modal-patient-card[data-ui-layout="v2"] .pc-tab-btn {
  min-height: var(--control-h);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  text-align: center;
}
#modal-patient-card[data-ui-layout="v2"] .pc-tab-btn.active-period {
  background: var(--selection-bg);
  color: var(--ink);
  border-bottom-color: var(--action-bg);
}
@media (pointer: coarse) {
  #modal-patient-card[data-ui-layout="v2"] .pc-tab-btn { min-height: var(--control-h-touch); }
}
@media (max-width: 560px) {
  #modal-patient-card[data-ui-layout="v2"] .ui-patient-tabs { grid-template-columns: repeat(2, 1fr); }
}

#modal-patient-card[data-ui-layout="v2"] .ui-patient-balance {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
#modal-patient-card[data-ui-layout="v2"] #pc-panel-overview .summary-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
#modal-patient-card[data-ui-layout="v2"] #pc-panel-overview .summary-tile {
  padding: 20px;
}
@media (max-width: 560px) {
  #modal-patient-card[data-ui-layout="v2"] #pc-panel-overview .summary-grid { grid-template-columns: 1fr; }
}

#modal-patient-card[data-ui-layout="v2"] .ui-patient-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
#modal-patient-card[data-ui-layout="v2"] .ui-patient-fields .ui-field-wide {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  #modal-patient-card[data-ui-layout="v2"] .ui-patient-fields { grid-template-columns: 1fr; }
}

/* Шаг 7 (v161) — «Финансы»: компоновка по README Астры (горизонтальная
   навигация вкладок, расширенная рабочая область, таблицы со скроллом).
   Формулы/расчёты не менялись — только расположение. Правило
   #fin-table-body td { height: 100px; ... } (components.css) намеренно НЕ
   трогается — Астра явно попросила сохранить текущую компоновку строки
   сотрудника (3 кнопки действий в ячейке) как есть. */

#panel-finance[data-ui-layout="v2"] .ct-layout {
  flex-direction: column;
}
#panel-finance[data-ui-layout="v2"] .ui-fin-tabs {
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  position: static;
  gap: var(--sp-2);
}
#panel-finance[data-ui-layout="v2"] .ui-fin-tabs .ct-tab-btn {
  width: auto;
  text-align: center;
}
#panel-finance[data-ui-layout="v2"] .ct-content {
  max-width: none;
}

#panel-finance[data-ui-layout="v2"] .ui-fin-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 560px) {
  #panel-finance[data-ui-layout="v2"] .ui-fin-toolbar { grid-template-columns: 1fr; }
}


/* ======================= Шаг 6 (v166) — топбар (хлебная крошка/поиск/профиль) =======================
   Новый флаг data-ui-shell="v2" на <html>, выставляется в той же точке, что
   остальные флаги Фазы 2 (applyUiV2FlagsForTestClinic() в shell.js), пока
   только для тестовой клиники (UI_V2_TEST_CLINIC_IDS). Разметка .topbar
   добавлена в admin.html безусловно (как и .pt-* реестр пациентов v3) —
   без этого флага полностью скрыта (display:none), ничего не меняется на
   проде. По образцу прототипа Astra (топбар на макете Календаря,
   заявка пользователя 05.10.2026). */
.topbar { display: none; }
html[data-ui-shell="v2"] .topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 14px 24px; background: var(--paper); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 60;
}
.topbar-crumb { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-crumb-sep { opacity: 0.5; }
#topbar-crumb-section { color: var(--ink); font-weight: var(--fw-bold); }
.topbar-search {
  flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 7px 12px; color: var(--ink-muted);
}
.topbar-search:focus-within { border-color: var(--accent); }
.topbar-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.topbar-search input {
  flex: 1; border: none; background: transparent; outline: none; font-size: var(--fs-base); color: var(--ink); min-width: 0;
}
.topbar-search-kbd {
  font-size: var(--fs-micro); font-family: inherit; color: var(--ink-muted);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 6px; flex-shrink: 0;
}
.topbar-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }
.topbar-profile:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-base);
}
.topbar-profile-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-profile-name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); }
.topbar-profile-clinic { font-size: var(--fs-caption); color: var(--ink-muted); }
@media (max-width: 1200px) {
  html[data-ui-shell="v2"] .topbar { gap: var(--sp-3); padding: 12px 18px; }
  .topbar-search { max-width: 220px; }
  .topbar-profile-text { display: none; }
}
@media (max-width: 760px) {
  html[data-ui-shell="v2"] .topbar { display: none; }
}


/* ======================= Шаг 7 (v167) — визуал календаря по макету Astra =======================
   Флаг data-ui-layout="v2" на #panel-calendar (тот же механизм, что у
   дашборда/карточки пациента/финансов — applyAnexisLayoutFlags() в
   shell.js), пока только тестовая клиника (UI_V2_TEST_CLINIC_IDS).
   Разметка (чекбокс завершённых приёмов, бейдж «На приёме», подпись
   специализации+часов у врача) добавлена в calendar.js УСЛОВНО — сама
   JS-логика проверяет флаг (const calV2 = ...) и без него просто не
   генерирует новые элементы, так что на проде ничего не меняется даже
   без этого CSS-гейта, но гейт держим для ясности и на случай будущих
   правок. Полоса «Перерыв» со штриховкой из макета — отдельная задача,
   пропущена в этом шаге (нет данных обеда в настройках клиники),
   заявка пользователя 06.10.2026. */
#panel-calendar[data-ui-layout="v2"] .doc-col-subtitle {
  font-size: var(--fs-caption); color: var(--ink-muted); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-calendar[data-ui-layout="v2"] .appt-check {
  position: absolute; top: 4px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--money-good); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
#panel-calendar[data-ui-layout="v2"] .appt-ongoing-badge {
  position: absolute; top: 3px; right: 6px; font-size: 10px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap;
}
#panel-calendar[data-ui-layout="v2"] .appt-block.appt-ongoing {
  border-left: 3px solid var(--accent);
}
#panel-calendar[data-ui-layout="v2"] .appt-block.appt-has-badge .appt-block-time {
  padding-right: 20px;
}