/* ============================================================
   Цветовые темы через 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;
    --on-accent:    #ffffff;   /* текст на кнопках акцентного цвета */
    --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:    #ffffff;
    --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:    #ffffff;
        --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;
}
form input[type=submit] {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 4px 12px;
    cursor: pointer;
}
form input[type=submit]: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; }
.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-accent) !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-muted) !important; border: 1px solid var(--surface-2); }
.btn-secondary:hover { background: var(--surface-2-hover); border-color: var(--surface-2-hover); color: var(--on-accent) !important; }
/* Кнопка share (расшарено кому-то) — синий, отличный от бирюзового btn-primary */
.btn-share-active       { background: var(--share); color: var(--on-accent) !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; }

/* Поля формы кассеты — одинаковая ширина у input name и textarea description */
.cassette-field { width: 400px; box-sizing: border-box; }

/* Двухколоночная раскладка выбранной кассеты: метаданные слева, треки справа */
.cassette-layout { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.cassette-form   { flex: 0 0 auto; }
.cassette-tracks { flex: 1 1 auto; min-width: 400px; }

/* Таблица треков (выбранных / загруженных) */
.picked-list       { border-collapse: collapse; }
.picked-list td    { padding: 4px 10px; border-bottom: 1px solid var(--border); height: 22px; box-sizing: border-box; }
.picked-list tr.zag td { font-weight: bold; }

/* Скролл-контейнер для таблицы существующих треков — фиксирует высоту в ~20 строк */
.tracks-scroll     { max-height: 550px; overflow-y: auto; margin-bottom: 14px; }
.tracks-scroll .picked-list tr.zag td { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* Popup выбора юзеров для шаринга носителя */
.share-popup {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 12px;
    min-width: 220px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    color: var(--text-bright);
    font-size: 13px;
}
.share-popup .share-header { margin-bottom: 8px; color: var(--text-muted); }
.share-popup .share-user   { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.share-popup .share-user input[type=checkbox] { cursor: pointer; }
.share-popup .share-user:hover { color: var(--accent); }
.share-popup .share-actions { display: flex; gap: 6px; margin-top: 10px; border-top: 1px solid var(--border-2); padding-top: 8px; }
.share-popup .share-empty   { color: var(--text-dim); padding: 8px 0; }

/* Онлайн-плеер под формой кассеты */
.player                { max-width: 400px; padding: 12px; background: var(--surface); border-radius: 6px; }
.player-title          { font-size: 13px; color: var(--text-bright); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-progress       { height: 6px; background: var(--bg); border-radius: 3px; cursor: pointer; margin-bottom: 6px; }
.player-progress-bar   { height: 100%; background: var(--accent); width: 0; border-radius: 3px; transition: width 0.1s linear; pointer-events: none; }
.player-time           { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.player-controls       { display: flex; gap: 4px; }
.player-controls .btn.pl-active,
.player-controls .btn.pl-active:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }

/* Кнопка "играть с этой строки" в первой колонке — маленький акцент */
.trk-play              { cursor: pointer; color: var(--text-dim); text-align: center; padding: 4px 6px; user-select: none; }
.trk-play:hover        { color: var(--accent); }
/* Кнопка "скачать этот трек" — рядом с play */
.trk-download          { color: var(--text-dim); text-align: center; padding: 4px 6px; }
.trk-download a        { color: inherit; display: inline-flex; align-items: center; }
.trk-download a:hover  { color: var(--accent); }
.trk-download svg      { margin-right: 0 !important; }
/* Треки-«хвост» стороны — не влезают в кассету (сумма > duration_min/2 + 1 мин) */
/* Подсвечивается только колонка Название: первый переполнивший — тусклый оранжевый, последующие — красный */
tr.trk-overflow-first .trk-title { color: var(--hl-over-first); }
tr.trk-overflow       .trk-title { color: var(--hl-over); }
/* Подсветка играющей строки в списке (перебивает overflow-цвет и полосу) */
tr.trk-playing td      { background: var(--surface); color: var(--text-strong); }
tr.trk-playing td:first-child { border-left: 3px solid var(--accent); }
tr.trk-playing .trk-play { color: var(--accent); }

/* Drag-handle для реордера строк треков + индикаторы позиции при drop */
.trk-drag         { cursor: grab; color: var(--text-dim); user-select: none; text-align: center; padding: 4px 6px; }
.trk-drag:hover   { color: var(--accent); }
.trk-drag:active  { cursor: grabbing; }
tr.dragging      { opacity: 0.35; }
tr.drop-above td { border-top:    2px solid var(--accent); }
tr.drop-below td { border-bottom: 2px solid var(--accent); }

/* Подсветка выбросов громкости: норма 55..60 — как обычно; ниже — синий (тихо), выше — оранжевый (громко) */
.trk-loudness.loud-low  { color: var(--hl-cool); font-weight: bold; }
.trk-loudness.loud-high { color: var(--hl-warm); font-weight: bold; }

/* Подсветка битрейта: 192 — норма (зелёный), 128-191 — голубой, <128 — тёмно-синий, 193-256 — оранжевый, >256 — красный */
.trk-bitrate                     { color: var(--text-dim); }
.trk-bitrate.bitrate-verylow     { color: var(--hl-cool-deep); font-weight: bold; }
.trk-bitrate.bitrate-low         { color: var(--hl-cool); font-weight: bold; }
.trk-bitrate.bitrate-ok          { color: var(--hl-good); font-weight: bold; }
.trk-bitrate.bitrate-high        { color: var(--hl-warm); font-weight: bold; }
.trk-bitrate.bitrate-veryhigh    { color: var(--hl-over); font-weight: bold; }

/* Inline-редактирование названия трека */
.trk-title         { cursor: text; }
.trk-title:hover   { color: var(--text-strong); }
.trk-title-edit    {
    width: 100%;
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 1px 6px;
    box-sizing: border-box;
    font: inherit;
}

/* Прогресс-бар одного файла */
.trk-progress      { width: 220px; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.trk-progress-bar  { height: 100%; background: var(--accent); width: 0; transition: width 0.15s; }
.trk-status        { font-size: 12px; color: var(--text-dim); }
.trk-status.ok     { color: var(--accent); }
.trk-status.err    { color: var(--danger-hover); }
.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; }