/* =========================================================================
   МЕДКОНСУЛЬТАЦИЯ — DESIGN TOKENS (design-tokens.css)
   =========================================================================
   Аддитивный слой поверх style.css. Переопределяет ТОЛЬКО цвет, тень,
   типографику и границы — геометрию/расположение элементов не трогает
   (за это отвечает responsive.css). DOM, ID, обработчики не меняются.

   Порядок подключения:
     style.css  ->  design-tokens.css  ->  responsive.css

   Все контрасты ниже посчитаны по формуле WCAG 2.1 (относительная
   яркость + (L1+0.05)/(L2+0.05)), не «на глаз». Итоговые цифры — в
   сопроводительной таблице.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. ШРИФТ
   Inter c CDN (Google Fonts) + надёжный системный фолбэк, который сам
   по себе выглядит хорошо, если CDN недоступен (San Francisco / Segoe UI /
   Roboto — тоже гуманистические гротески с отличной читаемостью цифр).
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {

    /* ---------------------------------------------------------------------
       1. ПОВЕРХНОСТИ (Surface Elevation)
       --------------------------------------------------------------------- */
    --surface-app:        #F1F5F9;  /* фон страницы — мягкий серо-голубой */
    --surface-card:       #FFFFFF;  /* карточки/контейнеры — чистый белый */
    --surface-card-sunken:#F8FAFC;  /* «утопленные» вложенные панели (скелетон, info-column) */
    --surface-input:      #F8FAFC;  /* фон полей ввода — на 1 ступень темнее card */
    --surface-input-hover:#FFFFFF;
    --surface-input-focus:#FFFFFF;
    --surface-input-disabled: #F1F5F9;
    --surface-overlay:    rgba(15, 23, 42, 0.55); /* подложка модалок */

    /* ---------------------------------------------------------------------
       2. ГРАНИЦЫ
       border-default специально темнее интуитивного #CBD5E1/#D1D5DB:
       у этих двух контраст к белому — 1.48:1 и 1.66:1, что НЕ проходит
       WCAG 1.4.11 (Non-text Contrast, ≥3:1 для границ функциональных
       элементов). #8493A8 ниже даёт ровно ту же лёгкость на глаз, но
       реально различим и проходит норму (3.13:1).
       --------------------------------------------------------------------- */
    --border-subtle:  #E2E8F0;  /* декоративная (обводка карточки на app-bg), не несёт функции идентификации */
    --border-default: #8493A8;  /* рабочая граница input/textarea/select — 3.13:1 */
    --border-hover:   #64748B;  /* наведение — 4.76:1 */
    --border-strong:  #475569;  /* активное состояние без фокус-кольца */
    --border-focus:   #2563EB;  /* фокус — 5.17:1 */
    --border-error:   #DC2626;  /* 4.83:1 */
    --border-success: #16A34A;  /* 3.30:1 (крупный элемент, ok по 1.4.11) */
    --border-warning: #D97706;

    /* ---------------------------------------------------------------------
       3. ТИПОГРАФИКА — ЦВЕТ ТЕКСТА
       --------------------------------------------------------------------- */
    --text-primary:     #0F172A;  /* 17.85:1 на белом — заголовки, значения полей */
    --text-secondary:   #334155;  /* 10.35:1 — подписи, второстепенный текст */
    --text-muted:       #64748B;  /*  4.76:1 — хинты, мета-текст (AA даже для обычного текста) */
    --text-disabled:    #94A3B8;  /*  2.56:1 — ТОЛЬКО disabled-элементы (WCAG 1.4.3 их не требует) */
    --text-placeholder: #64748B;  /* плейсхолдеры держим на уровне AA, а не «еле видно» */
    --text-inverse:     #FFFFFF;
    --text-link:        #1D4ED8; /*  6.70:1 */

    /* ---------------------------------------------------------------------
       4. АКЦЕНТНЫЕ / ФУНКЦИОНАЛЬНЫЕ ЦВЕТА
       --------------------------------------------------------------------- */
    --color-primary:        #1D4ED8;  /* сдержанный клинический индиго — главные действия */
    --color-primary-hover:  #1E40AF;
    --color-primary-active: #1E3A8A;
    --color-primary-subtle: #EFF6FF;  /* фон бейджей/подсветки */

    --color-accent:         #0D9488;  /* бирюзовый — вторичный акцент (калькуляторы, ссылки) */
    --color-accent-hover:   #0F766E;
    --color-accent-subtle:  #F0FDFA;

    --color-neutral:        #475569;  /* второстепенные действия/кнопки */
    --color-neutral-hover:  #334155;
    --color-neutral-subtle: #F1F5F9;

    --color-success:        #16A34A;
    --color-success-subtle: #F0FDF4;
    --color-success-text:   #166534;  /* 6.81:1 на success-subtle */

    --color-warning:        #D97706;
    --color-warning-subtle: #FFFBEB;
    --color-warning-text:   #92400E;  /* 6.84:1 на warning-subtle */

    --color-danger:         #DC2626;
    --color-danger-subtle:  #FEF2F2;
    --color-danger-text:    #991B1B;  /* 7.60:1 на danger-subtle */

    --color-info:           #2563EB;
    --color-info-subtle:    #EFF6FF;
    --color-info-text:      #1E40AF;

    /* ---------------------------------------------------------------------
       5. ТЕНИ (elevation)
       --------------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 20px -5px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);

    --ring-primary: 0 0 0 4px rgba(37, 99, 235, 0.16);
    --ring-error:   0 0 0 4px rgba(220, 38, 38, 0.16);
    --ring-success: 0 0 0 4px rgba(22, 163, 74, 0.16);

    /* ---------------------------------------------------------------------
       6. РАДИУСЫ (совместимы с существующими --radius-sm/md/lg)
       --------------------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* ---------------------------------------------------------------------
       7. ТИПОГРАФИЧЕСКАЯ ШКАЛА
       --------------------------------------------------------------------- */
    --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs:   0.75rem;    /* 12px — бейджи, аптечные подписи (uppercase eyebrow) */
    --text-sm:   0.8125rem;  /* 13px — второстепенный UI-текст, шапки таблиц */
    --text-base: 0.9375rem;  /* 15px — базовый UI: кнопки, инпуты, компактные элементы */
    --text-body: 1rem;       /* 16px — длинный клинический текст (textarea, заключения) */
    --text-lg:   1.0625rem;  /* 17px — подзаголовки разделов ("Лечение", "Диагноз") */
    --text-xl:   1.25rem;    /* 20px — заголовки модалок */
    --text-2xl:  1.5rem;     /* 24px — крупные заголовки (редко используется) */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --leading-tight:  1.25;  /* заголовки */
    --leading-snug:   1.4;   /* UI-лейблы, кнопки */
    --leading-normal: 1.6;   /* основной текст */
    --leading-relaxed:1.7;   /* плотный клинический текст в textarea */

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em; /* uppercase-подписи полей */
}

/* =========================================================================
   ТЁМНАЯ ТЕМА
   Контраст пересчитан отдельно относительно существующего --surface
   тёмной темы (#1e293b), а не унаследован «на глаз» от светлой.
   ========================================================================= */
[data-theme="dark"] {

    --surface-app:         #0F172A;
    --surface-card:        #1E293B;
    --surface-card-sunken: #17212F;
    --surface-input:       #16202E;   /* чуть темнее card — граница даёт основную читаемость */
    --surface-input-hover: #1B2636;
    --surface-input-focus: #1B2636;
    --surface-input-disabled: #131C29;
    --surface-overlay:     rgba(2, 6, 23, 0.65);

    /* В тёмном интерфейсе тени неразличимы на тёмном фоне — глубину карточек
       здесь даёт тонкая граница, а не box-shadow. */
    --border-subtle:  #26344A;
    --border-default: #64748B;   /* 3.07:1 к card */
    --border-hover:   #94A3B8;   /* 5.71:1 */
    --border-strong:  #CBD5E1;
    --border-focus:   #38BDF8;   /* существующий акцент темы — 6.83:1 */
    --border-error:   #F87171;
    --border-success: #4ADE80;
    --border-warning: #FBBF24;

    --text-primary:     #F1F5F9;  /* 13.35:1 */
    --text-secondary:   #CBD5E1;  /*  9.85:1 */
    --text-muted:       #94A3B8;  /*  5.71:1 */
    --text-disabled:    #64748B;
    --text-placeholder: #94A3B8;
    --text-inverse:     #0F172A;
    --text-link:        #38BDF8;

    --color-primary:        #38BDF8;
    --color-primary-hover:  #7DD3FC;
    --color-primary-active: #0EA5E9;
    --color-primary-subtle: rgba(56, 189, 248, 0.12);

    --color-accent:         #2DD4BF;
    --color-accent-hover:   #5EEAD4;
    --color-accent-subtle:  rgba(45, 212, 191, 0.12);

    --color-neutral:        #CBD5E1;
    --color-neutral-hover:  #F1F5F9;
    --color-neutral-subtle: rgba(148, 163, 184, 0.12);

    --color-success:        #4ADE80;
    --color-success-subtle: rgba(74, 222, 128, 0.12);
    --color-success-text:   #86EFAC;

    --color-warning:        #FBBF24;
    --color-warning-subtle: rgba(251, 191, 36, 0.12);
    --color-warning-text:   #FCD34D;

    --color-danger:         #F87171;
    --color-danger-subtle:  rgba(248, 113, 113, 0.12);
    --color-danger-text:    #FCA5A5;

    --color-info:           #38BDF8;
    --color-info-subtle:    rgba(56, 189, 248, 0.12);
    --color-info-text:      #7DD3FC;

    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);

    --ring-primary: 0 0 0 4px rgba(56, 189, 248, 0.22);
    --ring-error:   0 0 0 4px rgba(248, 113, 113, 0.22);
    --ring-success: 0 0 0 4px rgba(74, 222, 128, 0.22);

    /* Обратная совместимость: остальной style.css всё ещё читает старые
       переменные (--bg-gray/--surface/--primary-blue и т.д.) — держим
       их синхронизированными с новыми токенами, см. раздел 8 ниже. */
}

/* =========================================================================
   8. МОСТ СОВМЕСТИМОСТИ СО СТАРЫМИ ПЕРЕМЕННЫМИ style.css
   -------------------------------------------------------------------------
   В style.css сотни правил уже используют var(--bg-gray), var(--surface),
   var(--text-main), var(--text-muted), var(--border-color),
   var(--primary-blue), var(--accent-blue), var(--hover-blue).
   Чтобы не переписывать все эти правила (риск регрессий), переопределяем
   САМИ старые переменные новыми значениями. Это и есть механизм, которым
   новая палитра распространяется на всё приложение одним слоем.
   ========================================================================= */
:root {
    --bg-gray:     var(--surface-app);
    --surface:     var(--surface-card);
    --text-main:   var(--text-primary);
    --border-color:var(--border-default);
    --primary-blue: var(--color-primary);
    --accent-blue:  var(--color-accent);
    --hover-blue:   var(--color-primary-subtle);
}
[data-theme="dark"] {
    --bg-gray:     var(--surface-app);
    --surface:     var(--surface-card);
    --text-main:   var(--text-primary);
    --border-color:var(--border-default);
    --primary-blue: var(--color-primary);
    --accent-blue:  var(--color-accent);
    --hover-blue:   var(--color-primary-subtle);
}


/* =========================================================================
   9. ГЛОБАЛЬНАЯ ТИПОГРАФИКА
   ========================================================================= */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--surface-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'tnum' 1, 'cv11' 1; /* табличные цифры — важно для доз/цифр в таблице назначений */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0;
}

h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { line-height: var(--leading-normal); color: var(--text-secondary); }

label,
.input-group label {
    font-family: var(--font-family-base);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Длинный клинический текст (заключения, назначения свободным текстом)
   читается заметно легче на 16px/1.7, чем на плотных 13–15px UI-шрифта. */
textarea.main-area,
.item-cell,
.modal-content p {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    font-feature-settings: 'tnum' 1;
}

/* Моноширинный шрифт для «сырых» строк редактора справочников —
   явно сигнализирует «это структурированные данные, не проза». */
.edit-row-input { font-family: var(--font-family-mono); }


/* =========================================================================
   10. КОМПОНЕНТЫ ФОРМ
   -------------------------------------------------------------------------
   Два уровня плотности, оба варианта уже существуют в приложении:
     (а) «Полноразмерные» поля — ФИО пациента, дата, textarea, поля модалок.
     (б) «Плотные» поля — .compact-input в таблице назначений (8 колонок
         в строке, места мало по дизайну).
   Раздельные правила, а не один общий паддинг на все — иначе плотная
   таблица «распухает» и не помещается (сама эта ошибка была допущена
   и исправлена по ходу тестирования, см. историю правок).

   Явно ИСКЛЮЧЕНЫ из обоих уровней: type=time/range/color/file, .time-btn,
   .obs-compact-input — у них уже есть свой узкоспециализированный компактный
   стиль в style.css (например, три поля времени рядом занимают ~100px
   суммарно; полный паддинг формы туда физически не влезает).
   ========================================================================= */

/* --- (а) Полноразмерные поля --- */
input:not([type="radio"]):not([type="checkbox"]):not([type="time"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.time-btn):not(.obs-compact-input):not(.compact-input),
textarea{
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background-color: var(--surface-input);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    box-shadow: var(--shadow-inset);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
}

/* --- (б) Плотные поля таблицы назначений — своя, меньшая шкала отступов.
       Контраст границы не зависит от толщины/паддинга, поэтому все
       WCAG-показатели из таблицы токенов сохраняются и здесь. --- */
.compact-input,
.item-cell[contenteditable="true"] {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background-color: var(--surface-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    padding: 8px 10px;
    box-shadow: var(--shadow-inset);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
}

/* --- Плейсхолдер: видимый, но явно вторичный по весу --- */
input::placeholder,
textarea::placeholder {
    color: var(--text-placeholder);
    opacity: 1; /* Firefox по умолчанию понижает opacity плейсхолдера — фиксируем */
    font-weight: var(--font-weight-regular);
}

select:not(.compact-input) {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background-color: var(--surface-input);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    box-shadow: var(--shadow-inset);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
}

/* --- Hover: граница темнеет, фон становится чисто белым --- */
input:not([type="radio"]):not([type="checkbox"]):not([type="time"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.time-btn):not(.obs-compact-input):hover,
textarea:hover,
select:hover,
.compact-input:hover,
.item-cell[contenteditable="true"]:hover{
    border-color: var(--border-hover);
    background-color: var(--surface-input-hover);
}

/* --- Focus: акцентная граница + фокус-кольцо (focus-visible — не мешает
       мышиному клику, но обязателен для клавиатурной навигации) --- */
input:not([type="radio"]):not([type="checkbox"]):not([type="time"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.time-btn):not(.obs-compact-input):focus,
textarea:focus,
select:focus,
.compact-input:focus,
.item-cell[contenteditable="true"]:focus{
    border-color: var(--border-focus);
    background-color: var(--surface-input-focus);
    box-shadow: var(--ring-primary);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.compact-input:focus-visible,
button:focus-visible,
.control-button:focus-visible,
.section-button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* --- Disabled: приглушено, курсор запрещающий, фокус-кольцо не показываем --- */
input:disabled,
textarea:disabled,
select:disabled,
.compact-input:disabled,
fieldset:disabled input {
    background-color: var(--surface-input-disabled);
    border-color: var(--border-subtle);
    color: var(--text-disabled);
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Карвы-аут: .mode-select-combo имеет фиксированную height:34px
       (responsive.css) — общий вертикальный padding:10px 14px сжимает
       текст по высоте. Возвращаем компактный паддинг под точную высоту,
       границу/цвет/фокус оставляем от общего правила выше. --- */


/* --- Валидация: error / success ---------------------------------------
   Классы-утилиты, готовые к использованию в JS без изменения текущей
   разметки (просто добавить/убрать класс через classList.toggle). */

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--border-error) !important;
    background-color: var(--color-danger-subtle) !important;
}

input[aria-invalid="true"]:focus {
    box-shadow: var(--ring-error) !important;
}


/* --- Нативный :invalid (браузерная валидация required/type/pattern) --- */
input:not(:placeholder-shown):invalid {
    border-color: var(--border-error);
}

/* -------------------------------------------------------------------------
   10.1 ТЁМНАЯ ТЕМА: перехват старого хардкод-правила style.css
   -------------------------------------------------------------------------
   В style.css (стр. ~134) есть [data-theme="dark"] input/textarea/select
   с !important и зашитыми #111827/#4b5563 — это перебивает всё выше.
   Возвращаем контроль тем же уровнем специфичности + !important, уже
   через новые токены, чтобы тёмная тема тоже прошла проверку контраста. */
[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .compact-input,
[data-theme="dark"] .item-cell[contenteditable="true"] {
    background-color: var(--surface-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):hover,
[data-theme="dark"] textarea:hover,
[data-theme="dark"] select:hover,
[data-theme="dark"] .compact-input:hover {
    background-color: var(--surface-input-hover) !important;
    border-color: var(--border-hover) !important;
}
[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .compact-input:focus {
    background-color: var(--surface-input-focus) !important;
    border-color: var(--border-focus) !important;
    box-shadow: var(--ring-primary) !important;
}
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
    background-color: var(--surface-input-disabled) !important;
    color: var(--text-disabled) !important;
    border-color: var(--border-subtle) !important;
}


/* =========================================================================
   11. БЫСТРОЕ УСТРАНЕНИЕ ЭФФЕКТА «СЛИВАЮЩИХСЯ БЕЛЫХ БЛОКОВ»
   -------------------------------------------------------------------------
   Готовые классы/переопределения для мест, где сейчас карточка, поле и
   фон визуально неразличимы (все возьмут новые токены автоматически
   через мост в разделе 8, но здесь — точечные усиления глубины).
   ========================================================================= */

/* Карточки/панели — граница + мягкая тень вместо «плоского» белого пятна */
.modern-card,
.text-area-container,
.modal-content,
#calcModal .modal-content {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

/* Вложенные «утопленные» панели (справа в калькуляторе, скелетон, sidebar) —
   явно light-off от карточки, а не тот же самый белый */

.skeleton-box,
#calc-sidebar {
    background: var(--surface-card-sunken);
    border-color: var(--border-subtle);
}

/* Строка назначения в таблице лечения — тонкая граница вместо
   «невидимого» transparent border, который сливался с карточкой */
.sortable-item {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
}
.sortable-item:hover {
    background: var(--surface-card-sunken);
    border-color: var(--border-default);
}

/* Утилита на случай ручной разметки: добавить класс там, где два белых
   блока сейчас соприкасаются без визуального разделения */