/* ============================================================
   Цветовые темы через CSS-переменные.
   :root = тёмная тема (значения по умолчанию, из проекта hb1).
   Чтобы добавить светлую тему — переопредели эти же переменные
   в блоке :root[data-theme="light"] { ... } (следующий шаг).
   Структура классов — как во втором проекте (mail_admin).
   ============================================================ */
:root {
    /* Поверхности */
    --bg:              #2b3138;   /* фон страницы */
    --surface:         #333843;   /* панели, шапка, попапы, плеер, zag-строки */
    --surface-2:       #464f5a;   /* поля ввода, вторичные кнопки */
    --surface-2-hover: #555e69;
    --row-even:        #383f48;
    --row-odd:         #2f353d;
    --border:          #2b3138;   /* границы ячеек таблиц (в тёмной теме = фон) */
    --border-2:        #464f5a;   /* границы попапов/полей */

    /* Текст */
    --text:        #4db6bc;   /* основной текст (в тёмной теме совпадает с акцентом) */
    --text-muted:  #b4b5b6;   /* ссылки, вторичный текст */
    --text-dim:    #6a7078;   /* третичный/подсказки */
    --text-bright: #eeeeee;   /* текст в полях ввода */
    --text-strong: #ffffff;   /* самый яркий текст на поверхности (играющая строка) */

    /* Акценты */
    --accent:       #4db6bc;
    --accent-hover: #5cc7cd;
    /* Текст на СВЕТЛЫХ заливках (акцент, голубой, оранжевый). Тёмные чернила, а не
       белый: белый на #4db6bc даёт контраст 2.4:1 против нормы 4.5:1 — надпись
       расплывается. С этими чернилами 7.0:1 в тёмной теме и 5.1:1 в светлой. */
    --on-accent:    #0d1f26;
    --on-danger:    #ffffff;   /* текст на ТЁМНЫХ заливках (красная, синяя) — там белый читаем */
    --chip-posture-bg:   #6ba6d9;
    --chip-substance-bg: #e6a04d;
    --share:        #4a7bc7;
    --share-hover:  #5a8bd7;
    --danger:       #b64d4d;
    --danger-hover: #c75c5c;

    /* Семантические подсветки (loudness / битрейт / overflow) */
    --hl-cool:       #6ba6d9;   /* тихо / низкий битрейт (синий) */
    --hl-cool-deep:  #3d5a8c;   /* очень низкий битрейт (тёмно-синий) */
    --hl-warm:       #e6a04d;   /* громко / высокий битрейт (оранжевый) */
    --hl-good:       #5cb85c;   /* битрейт в норме (зелёный) */
    --hl-over:       #c74d5c;   /* переполнение / очень высокий битрейт (красный) */
    --hl-over-first: #c48a3a;   /* первый переполнивший (тусклый оранжевый) */
}

/* ── Светлая тема ──────────────────────────────────────────
   Значения применяются либо по явному выбору (data-theme="light"),
   либо по системной теме, если юзер не выбрал явно (data-theme отсутствует).
   Один и тот же набор переменных продублирован в двух селекторах. */
:root[data-theme="light"] {
    --bg:              #f4f5f7;
    --surface:         #ffffff;
    --surface-2:       #e7e9ee;
    --surface-2-hover: #dadde4;
    --row-even:        #eef0f3;
    --row-odd:         #f7f8fa;
    --border:          #e2e4e9;
    --border-2:        #d5d8df;

    --text:        #2b3138;
    --text-muted:  #5a6270;
    --text-dim:    #8a909a;
    --text-bright: #1f2430;
    --text-strong: #000000;

    --accent:       #2e9ba1;
    --accent-hover: #38aeb4;
    --on-accent:    #0d1f26;
    --on-danger:    #ffffff;
    /* В светлой теме hl-cool (#3b7fc4) слишком тёмный: тёмные чернила на нём дают
       3.9:1. Подложка чипа берётся светлее самого hl-cool, тогда 6.3:1. */
    --chip-posture-bg:   #6ba6d9;
    --chip-substance-bg: #c98a2a;
    --share:        #3f6fb8;
    --share-hover:  #4f80cb;
    --danger:       #c0392b;
    --danger-hover: #d0483a;

    --hl-cool:       #3b7fc4;
    --hl-cool-deep:  #2f4a78;
    --hl-warm:       #b9791b;
    --hl-good:       #3d9140;
    --hl-over:       #c0392b;
    --hl-over-first: #b06f1e;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg:              #f4f5f7;
        --surface:         #ffffff;
        --surface-2:       #e7e9ee;
        --surface-2-hover: #dadde4;
        --row-even:        #eef0f3;
        --row-odd:         #f7f8fa;
        --border:          #e2e4e9;
        --border-2:        #d5d8df;

        --text:        #2b3138;
        --text-muted:  #5a6270;
        --text-dim:    #8a909a;
        --text-bright: #1f2430;
        --text-strong: #000000;

        --accent:       #2e9ba1;
        --accent-hover: #38aeb4;
        --on-accent:    #0d1f26;
        --on-danger:    #ffffff;
        /* В светлой теме hl-cool (#3b7fc4) слишком тёмный: тёмные чернила на нём дают
           3.9:1. Подложка чипа берётся светлее самого hl-cool, тогда 6.3:1. */
        --chip-posture-bg:   #6ba6d9;
        --chip-substance-bg: #c98a2a;
        --share:        #3f6fb8;
        --share-hover:  #4f80cb;
        --danger:       #c0392b;
        --danger-hover: #d0483a;

        --hl-cool:       #3b7fc4;
        --hl-cool-deep:  #2f4a78;
        --hl-warm:       #b9791b;
        --hl-good:       #3d9140;
        --hl-over:       #c0392b;
        --hl-over-first: #b06f1e;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: sans-serif;
    margin: 0;
}
h1, h2, h3, h4, p {
    background: transparent;
    color: var(--accent);
}
h2, h3 { padding: 6px 12px; }

A          { color: var(--text-muted); text-decoration: none; }
A:visited  { color: var(--text-muted); }
A:active   { color: var(--text-muted); }
A:hover    { color: var(--accent); }

/* ============ Формы ============ */
form input[type=text],
form input[type=url],
form input[type=password],
form input[type=number] {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}
/* :not(.btn) — обязательно. Без него это правило перебивает фон у кнопок с классом
   .btn-secondary / .btn-danger (селектор с элементом и атрибутом специфичнее класса),
   и кнопка получала бирюзовую заливку с чужим цветом текста. */
form input[type=submit]:not(.btn) {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 4px 12px;
    cursor: pointer;
}
form input[type=submit]:not(.btn):hover { background: var(--accent-hover); border-color: var(--accent-hover); }

select, form select {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 3px 6px;
}
form textarea, textarea {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}

/* ============ Таблицы ============ */
TR.even   { background: var(--row-even); color: var(--accent); }
TR.noeven { background: var(--row-odd);  color: var(--accent); }
TR.zag    { background: var(--surface);  color: var(--text-muted); font-size: large; font-weight: bold; }
TR.rr, TR.zh, TR.gg { background: var(--bg); }

/* ============ Верхнее меню / sidebar (структура из проекта 2) ============ */
#gormenutbl {
    background: var(--surface);
    border-bottom: 1px solid var(--bg);
}
#gormenutd    { padding-right: 12px; }
#gormenuul td { padding: 0 6px; }
#gormenuul a  { color: var(--text-muted); padding: 6px 12px; border-radius: 4px; display: inline-block; }
#gormenuul a:hover  { color: var(--accent); }
#gormenuul a.active { color: var(--accent); background: var(--bg); }
#tdname       { color: var(--text-muted); padding-right: 12px; }
#tdexit a     { color: var(--text-muted); }
#tdexit a:hover { color: var(--accent); }

.greyblock0 { padding: 8px 12px; }
.greyblock1 {
    background: var(--surface);
    border-radius: 6px;
    padding: 8px 12px;
}
.greyblock1 h3 { margin: 4px 0; font-size: 15px; }
.greyblock1 h4 { margin: 2px 0; font-size: 14px; font-weight: normal; }

#mainblock    { padding: 10px 20px; }
#mainblockdiv { min-height: 200px; }

/* ============ Bootstrap-подобные классы для login.php ============ */
body.text-center { text-align: center; }
.form-signin {
    display: inline-block;
    width: 100%;
    max-width: 340px;
    padding: 30px 20px;
    margin-top: 80px;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: left;
}
.form-signin h1 {
    text-align: center;
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 20px;
}
.form-control {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--surface-2) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--surface-2) !important;
    border-radius: 5px;
    font-size: 14px;
}
.btn { display: inline-block; padding: 6px 14px; border-radius: 5px; cursor: pointer; text-decoration: none;
       background: var(--surface-2); color: var(--text-bright); border: 1px solid var(--surface-2); }
.btn-primary   { background: var(--accent); color: var(--on-accent) !important; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger    { background: var(--danger); color: var(--on-danger) !important; border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text-bright) !important; border: 1px solid var(--surface-2); }
.btn-secondary:hover { background: var(--surface-2-hover); border-color: var(--surface-2-hover); color: var(--text-bright) !important; }
/* Кнопка share (расшарено кому-то) — синий, отличный от бирюзового btn-primary */
.btn-share-active       { background: var(--share); color: var(--on-danger) !important; border: 1px solid var(--share); }
.btn-share-active:hover { background: var(--share-hover); border-color: var(--share-hover); }

/* Итоги по длительности сторон под таблицей треков */
.tracks-totals { margin: 4px 0 14px; font-size: 12px; color: var(--text-muted); }
.tracks-totals b { color: var(--accent); font-weight: normal; }

/* Тумблер стороны кассеты — две кнопки без промежутка (segmented control) */
.side-switch { display: inline-flex; }
.side-switch .btn { border-radius: 0; padding: 4px 12px; }
.side-switch .btn:first-child { border-radius: 5px 0 0 5px; }
.side-switch .btn:last-child  { border-radius: 0 5px 5px 0; }
.btn:disabled, button.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; }
.btn.busy { opacity: 0.7; pointer-events: none; cursor: wait; }

/* Спиннер для «идёт долгая операция» — вращающееся кольцо в цвете кнопки */
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; vertical-align: middle;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Кнопка с одной иконкой (без текста) — убираем правый отступ у SVG */
.btn-icon      { padding: 4px 8px; }
.btn-icon svg  { margin-right: 0 !important; display: block; }

/* action-bar — все элементы на одной линии по центру */
.action-bar        { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-bar form   { margin: 0; }

.btn-lg { padding: 8px 16px; font-size: 15px; }
.btn-block { display: block; width: 100%; box-sizing: border-box; }

/* Flash-уведомление: фиксировано в правом нижнем углу, не сдвигает контент. */
.flash-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    padding: 5px 12px;
    background: var(--surface);
    color: var(--accent);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 1000;
    transition: opacity 0.5s;
}
.flash-toast.fade-out { opacity: 0; pointer-events: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-muted { color: var(--text-dim); text-align: center; font-size: 12px; }
.mt-5 { margin-top: 24px; }
.mb-3 { margin-bottom: 12px; }

/* ============ hb2: специфика HRV-платформы ============ */

/* Таблица замеров: компактная, много числовых колонок. */
.data-table            { border-collapse: collapse; font-size: 13px; }
.data-table td, .data-table th { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table tr.zag td  { font-weight: bold; font-size: 13px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.data-table tr:hover td { background: var(--surface); }
.data-table .num       { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .dim       { color: var(--text-dim); }
.data-scroll           { max-height: 70vh; overflow: auto; }
/* Укороченный вариант: на десять строк ниже обычного. Нужен там, где под списком
   сразу выводится подробность выбранной записи (функциональные пробы) — при полной
   высоте список занимал экран целиком, и стадии пробы оказывались под сгибом.
   Строка .data-table при font-size 13px и padding 4px занимает ~24px, отсюда 240px.
   min-height не даёт списку выродиться в пару строк на низких экранах. */
.data-scroll.data-scroll-short { max-height: calc(70vh - 240px); min-height: 180px; }

/* Флаги качества записи. Плохой замер должен быть виден сразу: интерпретировать
   его нельзя, и это ограничение важнее любых красивых цифр в строке. */
.q-good    { color: var(--hl-good); }
.q-caution { color: var(--hl-warm);  font-weight: bold; }
.q-poor    { color: var(--hl-over);  font-weight: bold; }

/* Поза — тот же принцип: подписана явно, потому что без неё числа HRV не читаются. */
.posture-lying    { color: var(--hl-cool); }
.posture-sitting  { color: var(--text-muted); }
.posture-standing { color: var(--hl-warm); }
.posture-none     { color: var(--danger); }   /* поза неизвестна — нормировать нечем */

/* Теги замера — чипы. Цвет по смыслу тега (kind). */
.tag-chip { display: inline-block; padding: 1px 7px; margin: 1px 2px; border-radius: 9px;
            font-size: 11px; background: var(--surface-2); color: var(--text-muted); }
.tag-posture   { background: var(--chip-posture-bg);   color: var(--on-accent); }
.tag-state     { background: var(--surface-2); color: var(--text-bright); }
.tag-activity  { background: var(--accent);   color: var(--on-accent); }
.tag-substance { background: var(--chip-substance-bg); color: var(--on-accent); }
.tag-env       { background: var(--surface-2-hover); color: var(--text-bright); }

/* Карточка замера: плитки метрик. */
.metric-grid  { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; }
.metric-tile  { background: var(--surface); border-radius: 6px; padding: 8px 14px; min-width: 108px; }
.metric-tile .mv { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.metric-tile .mk { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.metric-tile .mu { font-size: 11px; color: var(--text-dim); }

/* Блоки-предупреждения (нет baseline, шумный замер, конфаундер позы). */
.note      { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 4px;
             padding: 8px 12px; margin: 10px 0; font-size: 13px; color: var(--text-muted); max-width: 900px; }
.note.warn { border-left-color: var(--hl-warm); }
.note.bad  { border-left-color: var(--hl-over); }
.note b    { color: var(--text-bright); font-weight: normal; }

/* Свободный комментарий испытуемого — единственный доступный self-report. */
.subj-comment { background: var(--surface); border-radius: 6px; padding: 8px 12px; margin: 8px 0;
                font-size: 13px; color: var(--text-bright); white-space: pre-wrap; max-width: 900px; }

/* Вердикт rule-based движка — визуально отделён от исходных данных. */
.engine-verdict { font-size: 12px; color: var(--text-muted); }
.engine-verdict .norm-tag { display: inline-block; padding: 0 6px; border-radius: 3px;
                            background: var(--surface-2); color: var(--text-dim); font-size: 11px; margin-right: 6px; }

/* График RR-интервалов (инлайновый SVG, без внешних библиотек). */
.rr-chart { background: var(--surface); border-radius: 6px; padding: 8px; margin: 10px 0; overflow-x: auto; }
.rr-chart svg { display: block; }

/* Стенд промптов: три-четыре textarea рядом. */
.bench-grid   { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bench-col    { display: flex; flex-direction: column; gap: 4px; }
.bench-col > label { font-size: 12px; color: var(--text-dim); }
.bench-col textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; }
.bench-row    { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* Фильтры над таблицами. */
.filter-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.filter-bar label { font-size: 11px; color: var(--text-dim); display: block; }
.filter-bar .fb-item { display: flex; flex-direction: column; gap: 2px; }

/* Свёртываемая памятка (<details>/<summary>) — нативное поведение, без JS.
   Используется для справки, которая нужна редко и не должна занимать экран:
   по умолчанию закрыта, состояние переключается кликом по заголовку. */
details.memo {
    margin: 18px 12px;
    max-width: 940px;
    background: var(--surface);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
}
details.memo > summary {
    cursor: pointer;
    padding: 10px 14px;
    color: var(--accent);
    font-size: 15px;
    font-weight: bold;
    list-style: none;          /* убираем стандартный треугольник, рисуем свой */
    user-select: none;
}
details.memo > summary::-webkit-details-marker { display: none; }
details.memo > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    color: var(--text-dim);
    transition: transform 0.15s;
}
details.memo[open] > summary::before { transform: rotate(90deg); }
details.memo > summary:hover { color: var(--accent-hover); }
details.memo > summary:hover::before { color: var(--accent); }
/* Внутренние .note не дублируют фон и рамку внешнего блока. */
details.memo .memo-body { padding: 0 14px 12px; }
details.memo .memo-body > .note { background: transparent; margin: 8px 0; padding: 6px 0 6px 10px; }
details.memo .memo-body table { margin-bottom: 10px; }

/* Контрастные поправки по итогам аудита (норма 4.5:1 для мелкого текста).
   Раньше все три опирались на приглушённые цвета и на тёмной подложке
   surface-2 давали 1.7–4.1:1. */
.engine-verdict .norm-tag { color: var(--text-bright); }   /* было text-dim: 1.66:1 → 7.16:1 */
.tag-chip                 { color: var(--text-bright); }             /* было text-muted: 4.05 → 7.16 */

/* ============ Раздел «Помощь» ============ */
#mainblockdiv p, #mainblockdiv ul { max-width: 940px; }
#mainblockdiv p  { padding: 0 12px; line-height: 1.5; color: var(--text-muted); }
#mainblockdiv ul { padding-left: 32px; line-height: 1.55; color: var(--text-muted); }
#mainblockdiv li { margin-bottom: 5px; }
#mainblockdiv p b, #mainblockdiv li b { color: var(--text-bright); font-weight: bold; }
.help-where { font-size: 12px; color: var(--text-dim) !important; margin-top: 0; }
.help-where code, #mainblockdiv code {
    background: var(--surface-2);
    color: var(--text-bright);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}
/* Таблицы «что нажать → что произойдёт» и «колонка → что означает»: текст в них
   длинный, поэтому переносы разрешены, а ширина ограничена читаемой строкой. */
.help-clicks { max-width: 940px; margin: 6px 12px 16px; }
.help-clicks td.hc-what { white-space: normal; width: 260px; vertical-align: top; color: var(--text-bright); }
.help-clicks td.hc-res  { white-space: normal; vertical-align: top; color: var(--text-muted); line-height: 1.45; }