/* _static/css/app.css — общие деловые стили админки */

:root {
    /* палитра */
    --bg:            #ffffff;
    --bg-panel:      #f7f8fa;
    --bg-zebra:      #fafbfc;
    --bg-hover:      #d8e6fb;
    --bg-header:     #f0f2f5;
    --text:          #1f2933;
    --text-muted:    #6b7280;
    --border:        #dde1e7;
    --border-strong: #c3c9d2;
    --accent:        #2563eb;
    --accent-hover:  #1d4ed8;
    --accent-soft:   #e8f0fe;
    --danger:        #dc2626;
    --ok:            #16a34a;

    /* семантические индикаторы в таблицах — единые значения вместо хардкода по
       страницам. Фон: насыщенный (подсветка строки/ячейки) и мягкий (бейджи,
       фоновые пометки). Для текста брать --danger / --ok / --accent. */
    --ind-ok-bg:     #40d525;  /* зелёный насыщенный: активно / клоакинг / занято */
    --ind-ok-soft:   #e6f7e6;  /* зелёный мягкий: в очереди / ок-пометка */
    --ind-bad-bg:    #ffc8c8;  /* красный насыщенный: плохо / внимание / спам */
    --ind-bad-soft:  #fdecec;  /* красный мягкий: бейдж / фоновая пометка */
    --ind-warn-bg:   #ffd867;  /* жёлтый: внимание / изменено / Cloudflare */
    --ind-info-bg:   #96c0f5;  /* синий: вторичное состояние / «текущая строка» */

    /* типографика */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "Roboto Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --fs-base: 14px;
    --fs-sm:   12px;
    --fs-h2:   20px;

    /* геометрия */
    --radius:    6px;
    --radius-sm: 4px;
    --gap:       12px;
    --pad:       8px;
    --pad-cell:  6px 10px;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    margin: 0;
    padding: 0 16px;
    line-height: 1.45;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    margin: 16px 0 12px;
    color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- панель фильтров ---------- */
.form-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    /* панель фильтров/формы занимает по содержимому, не растягиваясь на весь экран;
       при большом числе фильтров упирается в 100% и переносит (flex-wrap) как раньше */
    width: fit-content;
    max-width: 100%;
}
.form-panel table { border: 0; background: none; }
.form-panel th {
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 10px 6px 0;
    white-space: nowrap;
}
.form-panel td { padding: 0 10px 0 0; vertical-align: top; }

/* поля ввода */
input[type="text"],
input[type="number"],
select,
textarea {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* чекбоксы группировки */
.form-panel label {
    font-size: var(--fs-sm);
    color: var(--text);
    margin-right: 10px;
    white-space: nowrap;
    cursor: pointer;
}
.form-panel input[type="checkbox"] { margin-right: 3px; vertical-align: middle; cursor: pointer; }

/* ---------- кнопки ---------- */
.btn, input[type="submit"] {
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: 500;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    cursor: pointer;
    transition: background .12s;
}
.btn:hover, input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* кнопки-ссылки <a class="btn"> — глобальный a:hover (color + underline) выше по
   специфичности, чем .btn:hover, и текст сливался с фоном при наведении */
a.btn, a.btn:hover { color: #fff; text-decoration: none; }
a.btn-light, a.btn-light:hover { color: var(--text); text-decoration: none; }

/* ---------- таблицы данных ---------- */
/* width НЕ 100% — таблица по своему контенту (узкие вроде 2fa/VM-reboot не
   растягиваются на весь экран); max-width страхует от вылезания за вьюпорт */
table.sttbl, table.data {
    border-collapse: collapse;
    max-width: 100%;
    background: var(--bg);
    font-size: var(--fs-base);
}
/* базовый вид шапки — работает и на старых таблицах, где заголовок задан
   первой строкой <tr><th> без явного <thead> */
table.sttbl th, table.data th {
    background: var(--bg-header);
    color: var(--text);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--pad-cell);
    border-bottom: 2px solid var(--border-strong);
    white-space: nowrap;
}
/* где <thead> есть — шапка ещё и залипающая */
table.sttbl thead th, table.data thead th { position: sticky; top: 0; z-index: 2; }
table.sttbl td, table.data td {
    padding: var(--pad-cell);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
/* первая колонка (обычно дата/домен) — прижата влево, не переносится */
table.sttbl tbody td:first-child, table.data tbody td:first-child { white-space: nowrap; text-align: left; }

table.sttbl tbody tr:nth-child(even), table.data tbody tr:nth-child(even) { background: var(--bg-zebra); }
table.sttbl tbody tr:hover, table.data tbody tr:hover { background: var(--bg-hover); }

/* Таблицы «форма на строку» (настройки: прокси, хостинги, регистраторы).
   Строки обёрнуты в <form>, поэтому нет tbody и nth-child-зебры — читаемость
   даём горизонтальными разделителями строк и подсветкой при наведении. */
table.rows-table { border-collapse: collapse; max-width: 100%; font-size: var(--fs-base); }
table.rows-table th {
    background: var(--bg-header);
    color: var(--text);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-align: left;
    padding: 4px 6px;
    border-bottom: 2px solid var(--border-strong);
    white-space: nowrap;
}
table.rows-table td { padding: 2px 5px; border-bottom: 1px solid var(--border); }
table.rows-table tr:hover td { background: var(--bg-hover); }

/* Чекбокс-столбец Tabulator (rowHeader) рисует бордер по всем сторонам, а
   обычные ячейки — только боковые. Убираем горизонтальные, чтобы совпадало. */
.tabulator-row .tabulator-cell.tabulator-row-header,
.tabulator .tabulator-header .tabulator-col.tabulator-row-header {
    border-top: none;
    border-bottom: none;
}

/* Холст таблицы — по ширине колонок, чтобы на layout:"fitData" (узкие
   таблицы вроде show-stats-calls) справа не оставался серый пустой хвост.
   max-width:100% страхует широкие fitDataStretch — там колонки и так тянутся
   на весь контейнер, fit-content для них == 100%, вид не меняется. */
.tabulator { width: fit-content; max-width: 100%; }

/* Подсветка строки под курсором (все таблицы Tabulator).
   Проект НЕ подключает модуль selectableRows, поэтому строки не получают класс
   tabulator-selectable, а вендорный hover висит только на нём
   (`.tabulator-row.tabulator-selectable:hover`) — на наших таблицах подсветки
   строки не было вовсе. Вешаем свой hover на любую строку, кроме строк итогов
   (`tabulator-calcs` — top/bottom calc-строки).
   Цвет — токен `--bg-hover` (#d8e6fb, единый для всей админки): заметен и на
   белых, и на зебра-строках (прежний #eef3fb почти не отличался от белого).
   Специфичность (0,3,0) перебивает вендорную зебру `.tabulator-row-even`
   (0,1,0), но НЕ перебивает выделение ячеек: фон выбранных ЯЧЕЕК
   (`.tabulator-range-selected`, #3876ca) рисуется на самой ячейке — слоем выше
   фона строки, а рамка-оверлей (`.tabulator-range-overlay`, z-index:10) — ещё
   выше; выделение целой строки (`…range-selected:not(…):not(…)`, тоже (0,3,0))
   побеждает по порядку подключения — `tabulator.min.css` грузится последним.
   Так подсветка строки не перебивает выделение. А принудительную заливку
   СТРОКИ (`fb-row-err`/`lg-k`/…) ставим с `!important`, чтобы hover её не трогал. */
.tabulator-row:not(.tabulator-calcs):hover { background-color: var(--bg-hover); }

/* Ручка range-выделения (selectableRange) — псевдоэлемент
   `.tabulator-range.tabulator-range-active:after` в вендорном CSS: кружок 6px
   с right/bottom -3px, намеренно выступающий за границы диапазона. Когда
   выделение касается края таблицы, кружок попадает в скролл-зону холдера и
   даёт +2px переполнения (при выделении мышью — по обеим осям). На Linux/Mac
   скроллбары оверлейные, поэтому незаметно; на Windows классический бар
   съедает 15px по своей оси, из-за чего появляется второй бар — они держат
   друг друга, режут последнюю строку и разъезжают шапку с телом.
   Убираем сам выступ, а не режем слой выделения: `overflow: hidden` на
   `.tabulator-range-overlay` переполнение тоже снимал, но заодно срезал рамки
   ниже первого экрана — слой лежит в холдере с `inset: 0`, его бокс равен
   ВИДИМОЙ высоте таблицы, а рамки позиционируются по координатам строки в
   полном холсте. После прокрутки выделение переставало быть видно (само
   выделение при этом работало: счётчик и Ctrl+C — как надо).
   Селектор на класс длиннее вендорного (`.tabulator-ranges` ставит сам
   модуль): `tabulator.min.css` подключается последним и при равной
   специфичности выигрывает. */
.tabulator.tabulator-ranges .tabulator-tableholder .tabulator-range-overlay
    .tabulator-range.tabulator-range-active:after { right: 0; bottom: 0; }

/* Меню видимости колонок (_static/js/column-menu.js): кнопка-иконка в начале
   панели действий над таблицей + выпадающий список чекбоксов. */
.colmenu { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; }
.colmenu-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    line-height: 1;
}
.colmenu-btn svg { fill: currentColor; display: block; }
/* пока всё на месте — иконка «три колонки»; как только что-то скрыто, третий
   столбик гаснет, кнопка подсвечивается акцентом и показывает число скрытых */
.colmenu.has-hidden .colmenu-btn { border-color: var(--accent); color: var(--accent); }
.colmenu.has-hidden .colmenu-bar-last { opacity: .3; }
.colmenu-count { font-size: var(--fs-sm); font-weight: 600; }
.colmenu-box {
    display: none;
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 190px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    text-align: left;
}
.colmenu.is-open .colmenu-box { display: block; }
.colmenu-box label {
    display: block;
    padding: 3px 12px;
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
}
.colmenu-box label:hover { background: var(--bg-hover); }
.colmenu-box input { margin-right: 6px; }
.colmenu-all {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 12px;
    border: none;
    border-top: 1px solid var(--border);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
}
.colmenu-all:hover { background: var(--bg-hover); }

/* числовые колонки — моноширинные, чтобы разряды выравнивались */
td.num, table.sttbl td { font-variant-numeric: tabular-nums; }

/* итоговая строка/значения */
.total-line { font-size: var(--fs-sm); color: var(--text-muted); margin: 8px 0; }
.total-line b { color: var(--text); }

/* ---------- утилиты ---------- */
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

.table-actions { margin: 12px 0 8px; display: flex; gap: 8px; }

.btn-light {
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 5px 14px;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-light:hover { background: var(--bg-hover); border-color: var(--accent); }

.table-actions { margin: 12px 0 8px; display: flex; gap: 10px; align-items: center; }
.sel-info { font-size: var(--fs-sm); margin-right: auto; }
.sel-info b { color: var(--text); font-variant-numeric: tabular-nums; }
/* ---------- панель фильтров: flex-раскладка полей ----------
   Для страниц, где фильтры выложены рядами (show-stats-adwords и т.п.).
   Всё скоуплено под .form-panel — на другие страницы не влияет.
   Тулбар таблицы (Copy/CSV/XLSX + инфо о выделении) использует уже
   существующие .table-actions / .btn-light / .sel-info выше. */
.form-panel .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.form-panel .field { display: flex; flex-direction: column; }

/* подпись поля (мелкая, над контролом) */
.form-panel .fld-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.form-panel .fld-label a { font-weight: 400; }

/* чекбоксы группировки в ряд */
.form-panel .group-box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    min-height: 30px;
}
.form-panel .group-box label { margin-right: 0; } /* отступ даёт gap, не margin */

/* контейнер отчёта Tabulator */
#adw-table { margin-top: 4px; }

/* ---------- вертикальная форма «подпись | поле» ----------
   Редактирование одной записи, где каждая строка — <tr><th>подпись</th>
   <td>контрол</td> (traffic-source-edit, managers-sms и т.п.). Это НЕ таблица
   данных: без зебры и без шапки-строки, th — левая подпись поля. */
table.form-table { border-collapse: collapse; }
table.form-table th {
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 6px 14px 6px 0;
    white-space: nowrap;
    vertical-align: top;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
}
table.form-table td {
    padding: 5px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

/* ---------- зебра для «форма на строку» ----------
   На таких страницах каждая строка обёрнута в <form>, из-за чего между <tr>
   в DOM появляются form-узлы и nth-CHILD сбивается. nth-OF-TYPE считает
   только сами <tr>, игнорируя form между ними — зебра снова работает.
   Красим ячейки (> td), чтобы семантические подсветки на <tr> перебивали. */
table.rows-table tr:nth-of-type(even) > td { background: var(--bg-zebra); }

/* ---------- семантические подсветки ----------
   Перенос из старого styles.css. Имена классов СОХРАНЕНЫ (код ставит их в
   вывод: class="r|gr|k|..."), цвета причёсаны под деловую палитру — пастель,
   но с узнаваемым тоном (зелёный=ок/есть, красный=неактив/плохо, жёлтый/
   голубой=внимание/инфо). Работают И на <tr> (красим его <td>), И на самой
   ячейке/спане (class прямо на <td>/<span>). !important — перебить зебру. */
.gr, .k, tr.gr > td, tr.k > td       { background: #d9f5e1 !important; }  /* ок / есть связь */
.r, tr.r > td                        { background: #fbdcdc !important; }  /* неактивно / плохо */
.y, tr.y > td                        { background: #fde6b8 !important; }  /* внимание */
.gry, tr.gry > td                    { background: #f2e7c4 !important; }  /* внимание (мягче) */
.grb, tr.grb > td                    { background: #d7e6fb !important; }  /* инфо */

/* Наведение на строку должно быть видно ПОВЕРХ семантической подсветки
   (.r/.gr/... идут с !important, поэтому и hover !important, и по ячейкам
   > td — специфичность выше, чтобы перебить и подсветку строки, и ячейки). */
table.rows-table tr:hover > td,
table.sttbl tbody tr:hover > td,
table.data tbody tr:hover > td { background: var(--bg-hover) !important; }

/* ---------- <i> как кликабельная псевдо-кнопка ----------
   В проекте <i> исторически = кликабельный «линк-экшен» (onclick: раскрыть
   форму, выделить всё, удалить), НЕ курсив и НЕ иконочный шрифт. Перенос
   глобального правила из styles.css, чтобы вид кнопок не пропал. */
i {
    display: inline-block;
    font-style: normal;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}
i:hover { color: var(--accent-hover); }
/* Панель быстрых периодов под календарём Flatpickr
   (_static/js/date-presets.js): кнопки «Сегодня / 7 дней / …» подставляют
   диапазон в поле. Живёт внутри поповера календаря, поэтому ширину задаёт
   он — панель просто переносит кнопки по строкам. */
.fp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 8px;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
}
.fp-presets button {
    padding: 3px 9px;
    font-family: var(--font);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.fp-presets button:hover { background: var(--bg-hover); border-color: var(--accent); }
/* второй ряд: ручной ввод дат и сброс */
.fp-presets-manual { align-items: center; }
.fp-presets-manual input {
    width: 84px;
    padding: 3px 4px;
    font-family: var(--font);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.fp-presets-manual .fp-presets-reset-wrap { margin-left: auto; }
.fp-presets-manual .fp-presets-reset { color: var(--text-muted); padding: 3px 6px; }