/* ============================================================================
   theme-modern.css — v9.1.0. Слой дизайн-системы «Графит» ПОВЕРХ app.css.
   Палитры уже унифицированы в app.css (:root / body.light-theme /
   analysis-section) — здесь типографика, геометрия, контролы и плотность.

   Принципы:
     • цвет только со смыслом: статус, интерактив, каналы A/RV/LV;
     • sentence case вместо капса; микро-капс 10–11px допустим только
       для крошечных мета-меток;
     • глубина фоном (surface/alt), а не тенями и рамками;
     • радиусы 8/12, фокус — кольцо var(--glow), никакого неона;
     • ВЕСЬ слой в @media screen — печатная форма не меняется ни на пиксель.
   ============================================================================ */
@media screen {

/* ───────────────────────── База и нативные виджеты ───────────────────── */
:root { color-scheme: dark; }
body.light-theme { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-light); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-alt) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-alt); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Единое фокус-кольцо вместо разнобоя */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none !important;
  border-color: var(--border-focus) !important;
  box-shadow: var(--glow) !important;
}

/* ───────────────────────── Шапка: компактная, деловая ────────────────── */
.page-header {
  padding: 12px 18px 10px;
  border-radius: var(--radius-lg);
  box-shadow: none;
  border: 1px solid var(--border);
}
.page-header .org-name { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.page-header .org-addr { font-size: 11.5px; color: var(--text-muted); }

/* Пилюля режима — фирменный элемент автора, ВОЗВРАЩЕНА (v9.1.1).
   В v9.1.0 я превратил её в серый чип — она потеряла и характер,
   и приглашение к клику. Оставляю авторскую механику (заливка-акцент
   и разворот стрелки на ховере, подъём), цвета — акцент «Графита». */
.page-header h1 { margin: 6px 0 2px; }
.page-header h1 .mode-switcher {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--accent-light);
  border: 1.5px solid var(--accent);
  color: var(--text);
  border-radius: 24px;
  padding: 7px 18px;
  box-shadow: 0 0 0 0 rgba(68,147,248,0), 0 1px 3px rgba(0,0,0,.25);
  transition: all .18s ease;
}
.page-header h1 .mode-switcher .mode-switcher-icon { color: var(--accent); }
.page-header h1 .mode-switcher:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(68,147,248,.35);
}
.page-header h1 .mode-switcher:hover .mode-switcher-icon { color: var(--on-accent); }
body.light-theme .page-header h1 .mode-switcher { background: #fff; color: var(--accent); }
body.light-theme .page-header h1 .mode-switcher:hover { background: var(--accent); color: #fff; }

/* Коачмарк-приглашение «сменить режим» — авторский, оставлен как в app.css
   (акцентная плашка со стрелкой). Слой его больше не приглушает. */

/* ───────────────────────── Типографика: снять капс ───────────────────── */
.field label,
.mt th,
.u-section-subhead,
.doc-group-title,
.sidebar h3,
.org-field-label,
.sc-card-h,
.vp-card-h {
  text-transform: none;
  letter-spacing: .01em;
}

.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.section-header {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  padding: 10px 14px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.section-header .num {
  width: 20px; height: 20px;
  font-size: 11px;
  background: var(--surface-alt);
  color: var(--text-sec);
  border: 1px solid var(--border);
  box-shadow: none;
}
.section-header .chevron { color: var(--text-muted); }

.section { border-radius: var(--radius-lg); box-shadow: none; margin-bottom: 12px; }
.section-body { padding: 14px 16px 16px; }

/* ───────────────────────── Контролы: единые ──────────────────────────── */
input[type="text"], input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="email"], select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13.5px;
  padding: 7px 10px;
  transition: border-color var(--tr), box-shadow var(--tr);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* Селекты: свой шеврон вместо нативного */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa2ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
body.light-theme select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a636d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Числа и измерения — табличные цифры */
input[type="number"], .mt input, .mt select, .dash-kpi-main, .num, .mono {
  font-variant-numeric: tabular-nums;
}

/* Кнопки: без подпрыгивания и свечения */
.btn {
  border-radius: var(--radius);
  font-weight: 500;
  box-shadow: none;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.btn:hover { transform: none; box-shadow: none; filter: brightness(1.08); }

/* ───────────────────────── Таблицы формы ─────────────────────────────── */
.mt th {
  background: var(--surface-alt);
  color: var(--text-sec);
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 10px;
}
.mt td { border-color: var(--border); }

/* ───────────────────────── Плитки дашборда анализа ───────────────────── */
.dash-kpi-main {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* фикс обрезанного «критические н» */
}
.dash-kpi-subs { margin-top: 4px; }
.dash-kpi-sub {
  font-size: 10.5px;
  color: var(--muted, var(--text-sec));
  background: var(--surface-3, var(--surface-alt));
  border: 1px solid var(--line, var(--border));
  border-radius: 5px;
  padding: 1px 6px;
}

/* Баннер критических находок: статус читается, но не «горит» */
.analysis-critical-banner {
  background: var(--crit-bg, var(--danger-bg));
  border: 1px solid rgba(244,112,103,.35);
  border-radius: var(--radius-lg);
}
.analysis-critical-title {
  color: var(--crit, var(--danger));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

/* ───────────────────────── Боковое меню и FAB ────────────────────────── */
/* v9.1.1: закладка «МЕНЮ» остаётся там, где её задумал автор — вертикально
   по центру правого края (перенос в угол откатен по решению автора).
   Обновлены только цвета — токены «Графит» вместо литералов. */
.fab {
  background: var(--surface-alt);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-right: none;
}
.fab:hover {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: -2px 0 14px rgba(68,147,248,.25);
}
/* Левая закладка «СПРАВОЧНИК» — зеркальный близнец правой «МЕНЮ»
   (авторская симметрия, v9.1.2: приведена к тем же токенам, что и .fab) */
.drugref-toggle {
  background: var(--surface-alt);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-left: none;
}
.drugref-toggle:hover {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 2px 0 14px rgba(68,147,248,.25);
}
/* В калькуляторах Сгарбоссы и ВА/PVARP функции сайдбаров не нужны —
   скрыты обе закладки: правая «МЕНЮ» и левая «СПРАВОЧНИК» (иначе левая
   лингерит после сделанного ранее анализа), вместе с самими панелями */
body.mode-sgarbossa .fab,
body.mode-vapvarp   .fab,
body.mode-sgarbossa .sidebar,
body.mode-vapvarp   .sidebar,
body.mode-sgarbossa .sidebar-overlay,
body.mode-vapvarp   .sidebar-overlay,
body.mode-sgarbossa .drugref-toggle,
body.mode-vapvarp   .drugref-toggle,
body.mode-sgarbossa .drugref-drawer,
body.mode-vapvarp   .drugref-drawer,
body.mode-sgarbossa .drugref-overlay,
body.mode-vapvarp   .drugref-overlay { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   v9.2.0 · ДВА САЙДБАРА — ОДНИ ПРАВИЛА.
   Левый «Справочник препаратов» и правый «Действия» рисуются ОДНИМ
   набором селекторов: одинаковый шрифт, кегль, вес, цвета, отступы,
   разделители, ховер. Значения — из авторского справочника, вынесены
   в токены --pnl-* (app.css), поэтому обе панели работают и в светлой теме.
   Соответствие элементов:
     .drugref-title      ↔ .sidebar h3:first-of-type   (заголовок панели)
     .drugref-group      ↔ .sidebar h3                 (подпись группы)
     .drugref-item       ↔ .sidebar-btn / -nav-link    (строка)
     .drugref-item-name  ↔ текст строки
     .drugref-close      ↔ .sidebar-close              (крестик)
   ════════════════════════════════════════════════════════════════════════ */

/* ── контейнер ── */
.sidebar,
.drugref-drawer {
  background: var(--pnl-bg) !important;
  color: var(--pnl-text) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  padding: 0 !important;
  box-shadow: 0 0 28px rgba(0,0,0,.5) !important;
}
.sidebar { border-left: 1px solid var(--pnl-border) !important; border-right: none !important; }
.drugref-drawer { border-right: 1px solid var(--pnl-border) !important; border-left: none !important; }
.sidebar { padding: 14px 16px !important; }

/* ── заголовок панели ── */
.drugref-title,
.sidebar > h3:first-of-type {   /* только «Действия» — заголовки внутри
                                   блоков режимов остаются подписями групп */
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pnl-title) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: none !important;
  margin: 2px 0 12px !important;
  padding: 0 0 0 2px !important;
}

/* ── подпись группы ── */
.drugref-group,
.sidebar h3 {
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--pnl-cap) !important;
  background: var(--pnl-bg) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: none !important;
  margin: 16px 0 4px !important;
  padding: 8px 2px 4px !important;
}

/* ── строка списка ── */
.drugref-item,
.sidebar-btn,
.sidebar-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--pnl-line) !important;
  border-radius: 0 !important;
  color: var(--pnl-title) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  padding: 9px 8px !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.drugref-item:hover,
.sidebar-btn:hover,
.sidebar-nav-link:hover {
  background: var(--pnl-hover) !important;
  color: var(--pnl-title) !important;
  border-color: var(--pnl-line) !important;
  transform: none !important;
}
.drugref-item { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
.drugref-item-name { font-family: var(--font-ui) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pnl-title) !important; }
.drugref-item-sub  { font-family: var(--font-ui) !important; font-size: 11px !important; font-weight: 400 !important; color: var(--pnl-sub) !important; }

/* вторичная строка (навигация по разделам) — как торговое название слева */
.sidebar-nav-link { font-weight: 400 !important; font-size: 12.5px !important; color: var(--pnl-sub) !important; }
.sidebar-nav-link:hover { color: var(--pnl-title) !important; }

.sidebar-btn svg { width: 16px; height: 16px; fill: var(--pnl-sub) !important; flex-shrink: 0; }
.sidebar-btn:hover svg { fill: var(--accent) !important; }
.sidebar-btn[data-action-click="sbClearAll"] { color: var(--danger) !important; }
.sidebar-btn[data-action-click="sbClearAll"] svg { fill: var(--danger) !important; }
.sidebar-sep { background: var(--pnl-border) !important; height: 1px !important; margin: 12px 0 0 !important; }

/* ── крестик ── */
.drugref-close,
.sidebar-close { color: var(--pnl-sub) !important; }
.drugref-close:hover,
.sidebar-close:hover { color: var(--pnl-title) !important; }
.sidebar-close svg { fill: var(--pnl-sub) !important; }
.sidebar-close:hover svg { fill: var(--pnl-title) !important; }

/* ── контролы левой панели: те же рамки, что у полей формы ── */
.drugref-search, .drugref-family, .drugref-tab, .drugref-back {
  font-family: var(--font-ui) !important;
  background: var(--pnl-bg-2) !important;
  border: 1px solid var(--pnl-control) !important;
  color: var(--pnl-title) !important;
}
.drugref-tab { color: var(--pnl-sub) !important; }
.drugref-tab.on { background: var(--accent-light) !important; color: var(--accent) !important; border-color: rgba(45,212,212,.45) !important; }
.drugref-count, .drugref-empty, .drugref-mono-class, .drugref-k { color: var(--pnl-sub) !important; }
.drugref-mono-name { color: var(--pnl-title) !important; }
.drugref-v { color: var(--pnl-text) !important; }
.drugref-head { border-bottom: 1px solid var(--pnl-border) !important; }
.drugref-row { border-bottom: 1px solid var(--pnl-line) !important; }

/* ── подвал правой панели ── */
.sidebar-version { color: var(--pnl-cap) !important; opacity: 1 !important; }
.sidebar-credits { color: var(--pnl-sub) !important; opacity: 1 !important; }

/* ───────────────────────── Светлая тема: добить «Word»-рамки ─────────── */
body.light-theme .page-header { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
body.light-theme .page-header .org-name { color: var(--text); font-weight: 600; }
body.light-theme .page-header .org-addr { color: var(--text-muted); }
body.light-theme .section { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
body.light-theme .section-header { background: transparent; color: var(--text); border-bottom: 1px solid var(--border); font-weight: 600; }
body.light-theme .section-header:hover { background: var(--surface-alt); }
body.light-theme .section-header .num { background: var(--surface-alt); color: var(--text-sec); }
body.light-theme .page-header h1 .mode-switcher { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
body.light-theme .page-header h1 .mode-switcher:hover { border-color: var(--border-focus); background: var(--surface-alt); }

/* ───────────────────────── Анализ: успокоить движение ────────────────── */
.analysis-progress-card.rb-prog-card { animation: rb-fade-in .25s ease; box-shadow: var(--shadow); }
.rb-prog-spin { animation: rb-prog-bob 1.1s ease-in-out infinite; text-shadow: none; color: var(--accent); }

/* Заголовок sticky-шапки анализа */
analysis-section header.top { background: rgba(20,21,23,.85); }
body.light-theme analysis-section header.top { background: rgba(245,246,248,.88); border-bottom: 1px solid var(--line); }
body.light-theme analysis-section nav.sections { background: rgba(245,246,248,.88); }

} /* конец @media screen */

/* ── v9.1.0 (добивка после первого прогона скриншотов) ────────────────── */
@media screen {

/* Заголовки блоков анализа: единый «оверлайн» — маленький, приглушённый */
analysis-section .ac-rhythm-section-title,
analysis-section .analysis-final-title,
analysis-section .analysis-recs-title,
analysis-section .ac-pvc-stats > h4,
analysis-section .ac-pvc-stats > h5 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

/* Пилюля-заголовок анализа: без светящейся точки */
analysis-section .title-pill {
  color: var(--muted);
  border-color: var(--line-2);
  font-size: 11.5px;
}
analysis-section .title-pill .dot { box-shadow: none; background: var(--accent); }

/* Служебная строка «не в архиве»: обычный шрифт, спокойный тон */
analysis-section .analysis-link-none {
  font-family: inherit !important;
  color: var(--warn) !important;
  font-size: 12.5px;
}

/* Ховер секции формы: едва заметное усиление рамки, не синяя обводка */
.section:hover { border-color: #3a3f45; }
body.light-theme .section:hover { border-color: #c3c9d0; }

/* ── v9.1.1: фирменная подпись и возврат авторских элементов ──────────── */

/* Градиентная волосяная линия по верхнему краю окна — фирменный штрих
   (акцент → фиолетовый канала A → затухание). Не перекрывает клики. */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--accent, #4493f8) 0%,
    #a78bfa 42%,
    rgba(167,139,250,0) 88%);
}

/* Номера секций формы — акцентные чипы: ритм и навигация по форме */
.section-header .num {
  background: var(--accent-light);
  color: var(--accent);
  border-color: transparent;
}

/* Точка в заголовке анализа: небольшое живое свечение возвращено */
analysis-section .title-pill .dot {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(68,147,248,.75);
}

/* Подвал сайдбара: вместо полупрозрачности — честные приглушённые цвета,
   регистрация читаема */
.sidebar-version, .sidebar-credits { opacity: 1; color: var(--text-muted); }

/* Регистрация Роспатента в подвале сайдбара */
.sidebar-reg {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: right;
  color: var(--text-sec);
  font-size: 10px;
  line-height: 1.5;
}
.sidebar-reg svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

/* KPI-плитки: компактнее; статус — «пилюля»-полоска слева, а не рамка,
   которая огибала скруглённые углы и рисовала цветную скобку «(» */
analysis-section .dash-cell,
analysis-section .dash-cell.dash-ok,
analysis-section .dash-cell.dash-medium,
analysis-section .dash-cell.dash-high,
analysis-section .dash-cell.dash-critical {
  padding: 12px 14px 12px 18px !important;
  min-height: 78px;
  border: 1px solid var(--ans-border) !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
}
analysis-section .dash-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ans-border-2, #3a3f45);
}
analysis-section .dash-cell.dash-ok::before       { background: var(--ans-ok); }
analysis-section .dash-cell.dash-medium::before   { background: #ffd54f; }
analysis-section .dash-cell.dash-high::before     { background: var(--ans-warn); }
analysis-section .dash-cell.dash-critical::before { background: var(--ans-crit); }
analysis-section .dash-kpi-main { font-size: 19px; font-weight: 600; }

}