/* ============================================================
   Цветовые темы через 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); }


/* ============ Кнопки, формы логина, общие классы (из образца) ============ */
/* ============ 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; }
/* Тумблер стороны кассеты — две кнопки без промежутка (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; }

/* ============ Таблица-список ============ */
.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; }


/* ============ Всплывающее уведомление и мелочи ============ */
.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; }

/* ============================================================
   Своё для «Вышки»: шапка, раскладка, адаптив под телефон.
   Сайт ставится на телефон как приложение (PWA), поэтому:
   — учитываем «чёлку» iPhone через safe-area-inset (работает вместе
     с viewport-fit=cover в мета-теге viewport);
   — цели нажатия не меньше 40px;
   — широкие таблицы скроллятся внутри себя, страница по горизонтали не едет.
   ============================================================ */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 17px;
    white-space: nowrap;
}
.topbar .brand img { width: 28px; height: 28px; }
.topbar nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.topbar nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 6px;
    color: var(--text-muted);
}
.topbar nav a svg { width: 20px; height: 20px; }
.topbar nav a:hover  { color: var(--accent); }
.topbar nav a.active { color: var(--accent); background: var(--bg); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    max-width: 40vw;
}
.topbar .who svg    { width: 18px; height: 18px; flex: 0 0 auto; }
.topbar .who span   { overflow: hidden; text-overflow: ellipsis; }
.topbar .who:hover  { color: var(--accent); }
.topbar .who.active { color: var(--accent); background: var(--bg); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
}

/* Карточки будущих разделов (телеметрия, шлюз, отчёты) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
    background: var(--surface);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--text-muted);
}
.card h3 { margin: 0 0 6px; padding: 0; font-size: 16px; }
.card .muted { color: var(--text-dim); font-size: 13px; }
.card.todo { opacity: 0.75; border: 1px dashed var(--border-2); background: transparent; }

/* Любая широкая таблица оборачивается в <div class="tablewrap"> */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Телефон ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .topbar .brand span { display: none; }   /* оставляем только логотип */
    .topbar nav { margin-left: 4px; gap: 2px; }
    .topbar .who { font-size: 12px; max-width: 32vw; padding: 0 4px; }
    .container { padding: 10px 12px calc(20px + env(safe-area-inset-bottom)); }
    h2, h3 { padding: 4px 0; }

    /* Формы: подписи над полями, поля во всю ширину.
       16px у input — чтобы iOS не зумил страницу при фокусе. */
    .form-grid td { display: block; text-align: left !important; padding: 2px 0 !important; }
    .form-grid input[type=text],
    .form-grid input[type=email],
    .form-grid input[type=password],
    .form-grid input[type=number] { width: 100% !important; box-sizing: border-box; font-size: 16px; }
    .btn { padding: 8px 16px; }
    .btn-icon { padding: 8px 12px; }
}

/* В установленном приложении (standalone) шапка чуть плотнее — адресной строки нет */
@media (display-mode: standalone) {
    .topbar { padding-top: calc(6px + env(safe-area-inset-top)); }
}