/* ============================================================================
   Шрифт Inter — локально, без обращения к внешним CDN
   ----------------------------------------------------------------------------
   Прежний стек ("Segoe UI", system-ui…) на Windows давал Segoe UI, а на
   Linux/macOS деградировал в Arial/Helvetica: панель выглядела по-разному у
   разных сотрудников, метрики строк и таблиц не совпадали.
   Файлы лежат в app/static/fonts (латиница + кириллица, 4 насыщенности,
   ~140 КБ всего). Интернет приложению не нужен — это принцип проекта
   (Chart.js и Quill тоже локальные).
   font-display: swap — текст виден сразу, без «пустого» кадра.
============================================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-500-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-600-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-700-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================================================================
   Shmailer — дизайн-токены (слой 1 из 3)
   ----------------------------------------------------------------------------
   Порядок подключения: tokens.css → ui.css → style.css
   Здесь ТОЛЬКО переменные, ни одного селектора компонента.

   Правила игры:
   1. Компоненты обращаются к СЕМАНТИЧЕСКИМ токенам (--surface-card,
      --fg-muted, --danger-bg), а не к сырым цветам. Тёмная тема тогда
      сводится к переопределению одного блока переменных, а не к правкам
      в 40 местах (раньше в style.css было ~30 захардкоженных rgba(), которые
      на тёмной теме не реагировали).
   2. Легаси-имена (--text, --card-bg, --bg-soft, --green …) сохранены в конце
      файла как алиасы: в шаблонах есть инлайновые style="" и старые правила,
      которые на них опираются. Удалять их нельзя, пока не вычищены шаблоны.
   3. Всё, что не цвет (радиусы, тени, отступы, типографика, z-index), тоже
      здесь — чтобы «ритм» интерфейса задавался в одном месте.
============================================================================ */

:root {
    /* ───────────────────────── Бренд (Fluent 2 ramp) ───────────────────────
       Было #0078D4 (Fluent 1). #0F6CBD — та же семья, но глубже: на белой
       карточке кнопка читается как кнопка, а не как подсвеченная ссылка. */
    --brand:            #0f6cbd;
    --brand-hover:      #115ea3;
    --brand-pressed:    #0c3b5e;
    --brand-fg:         #ffffff;   /* текст на брендовой заливке */
    --brand-bg:         #ebf3fc;   /* мягкая подложка (выделенный пункт меню) */
    --brand-bg-hover:   #dbeafd;
    --brand-border:     #b4d6fa;
    --brand-text:       #115ea3;   /* бренд как ЦВЕТ ТЕКСТА на светлом фоне */

    /* ───────────────────────── Поверхности ─────────────────────────────────
       4 уровня: фон приложения → карточка → врезка внутри карточки →
       наведение. Раньше уровней было два (--bg / --card-bg), поэтому
       «плитка внутри карточки» каждый раз изобреталась заново. */
    --surface-app:      #f5f5f4;
    --surface-card:     #ffffff;
    --surface-inset:    #faf9f8;   /* плитки, thead, блоки кода */
    --surface-sunken:   #f0efee;   /* дно: полосы прогресса, скроллы */
    --surface-hover:    #f3f2f1;
    --surface-active:   #ebeae9;
    --surface-nav:      #ffffff;   /* сайдбар */
    --surface-overlay:  rgba(0, 0, 0, .45);  /* фон под модальным окном */

    /* ───────────────────────── Текст ───────────────────────────────────────
       4 уровня вместо прежних 4 несогласованных (--text/--text-2/--muted/
       --muted-2). Контраст к --surface-card: fg 15:1, muted 5.9:1,
       subtle 4.6:1 — все проходят WCAG AA для своих размеров. */
    --fg:               #1b1a19;
    --fg-strong:        #0f0e0e;   /* цифры KPI, заголовки страниц */
    --fg-muted:         #5d5b59;   /* подписи, вторичный текст */
    --fg-subtle:        #797775;   /* placeholder, отключённое */
    --fg-on-accent:     #ffffff;

    /* ───────────────────────── Границы ─────────────────────────────────────  */
    --border:           #e6e4e2;   /* разделители, рамки карточек */
    --border-strong:    #d1cfcd;   /* рамка нейтральной кнопки */
    --border-input:     #8a8886;   /* рамка поля ввода (Fluent: тёмная) */
    --border-focus:     var(--brand);

    /* ───────────────────────── Семантика ───────────────────────────────────
       У каждой роли 4 токена: -text (на светлом), -bg (подложка),
       -border, -solid (заливка кнопки/полосы графика). */
    --success:          #0e700e;
    --success-text:     #0b5a08;
    --success-bg:       #dff6dd;
    --success-border:   #9fd89f;
    --success-solid:    #107c10;

    --warning:          #bd6800;
    --warning-text:     #8a4c00;
    --warning-bg:       #fff4ce;
    --warning-border:   #f2c661;
    --warning-solid:    #f7a521;

    --danger:           #c50f1f;
    --danger-text:      #a4262c;
    --danger-bg:        #fdf3f4;
    --danger-border:    #eeacb2;
    --danger-solid:     #c50f1f;
    --danger-hover:     #a4262c;
    --danger-pressed:   #8a1d23;

    --info:             #0f6cbd;
    --info-text:        #115ea3;
    --info-bg:          #ebf3fc;
    --info-border:      #b4d6fa;
    --info-solid:       #0f6cbd;

    --neutral-bg:       #f3f2f1;
    --neutral-border:   #d1cfcd;
    --neutral-solid:    #8a8886;

    /* Палитра вердиктов проверки адресов. Раньше эти четыре цвета были
       продублированы ТРИЖДЫ: в .verdict-bar .v-*, в .seg-*::before и
       инлайновыми style="background:#22a06b" в recipient_detail.html. */
    --verdict-high:     #107c10;
    --verdict-medium:   #f7a521;
    --verdict-low:      #c50f1f;
    --verdict-unknown:  #8a8886;

    /* Палитра графиков (Chart.js берёт их через getComputedStyle) */
    --chart-1:          #0f6cbd;
    --chart-2:          #107c10;
    --chart-3:          #f7a521;
    --chart-4:          #c50f1f;
    --chart-5:          #8764b8;
    --chart-grid:       #ebeae9;

    /* ───────────────────────── Геометрия ───────────────────────────────────
       Радиусы подросли: 4px (Fluent 1) на 14px-шрифте выглядит «остро».
       Контролы 6px, карточки 10px — так карточка читается как поверхность,
       а не как рамка вокруг текста. */
    --radius-sm:        4px;
    --radius:           6px;
    --radius-md:        8px;
    --radius-lg:        10px;
    --radius-xl:        14px;
    --radius-pill:      999px;

    /* Шкала отступов, кратная 4. Инлайновые margin-top:8px/10px/12px в
       шаблонах появились именно потому, что шкалы не было. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

    /* ───────────────────────── Тени ────────────────────────────────────────
       Fluent depth, но мягче по альфе: на --surface-app #f5f5f4 старые тени
       давали заметную серую кайму вокруг каждой карточки. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .08);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .08);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-4: 0 24px 56px rgba(0, 0, 0, .20), 0 4px 12px rgba(0, 0, 0, .12);
    --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand);

    /* ───────────────────────── Типографика ────────────────────────────────
       Inter подключается локально (static/fonts), Segoe UI Variable — для
       Windows. Интернет панели не нужен: шрифт лежит рядом с приложением.  */
    --font-sans: "Inter", "Inter var", "Segoe UI Variable Text", "Segoe UI",
                 system-ui, -apple-system, BlinkMacSystemFont, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace,
                 SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 13px;   /* подписи, таблицы */
    --text-md:   14px;   /* базовый размер интерфейса */
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;
    --text-4xl:  36px;   /* KPI на дашборде */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Ширина колонки текста: абзацы-пояснения в панели растягивались на
       1200px, и глаз терял строку. */
    --measure: 78ch;

    /* ───────────────────────── Раскладка ──────────────────────────────────  */
    --sidebar-w:        240px;
    --sidebar-w-min:    64px;    /* свёрнутый режим (только иконки) */
    --appbar-h:         56px;
    --content-max:      1320px;
    --content-pad:      24px;

    /* ───────────────────────── Анимация ───────────────────────────────────  */
    --dur-fast:   .12s;
    --dur:        .18s;
    --dur-slow:   .28s;
    --ease:       cubic-bezier(.33, 0, .2, 1);
    --ease-out:   cubic-bezier(0, 0, .2, 1);

    /* ───────────────────────── Слои (z-index) ─────────────────────────────
       Раньше числа (50, 1000) стояли прямо в правилах, и «что выше чего»
       выяснялось экспериментом. */
    --z-sticky:   10;
    --z-appbar:   30;
    --z-sidebar:  40;
    --z-drawer:   50;
    --z-dialog:   60;
    --z-toast:    70;
}

/* ============================================================================
   Тёмная тема
   ----------------------------------------------------------------------------
   Два одинаковых блока — это осознанно: `:root[data-theme="dark"]` для
   явного выбора пользователя, media-query для системной темы. Слить их в
   один селектор нельзя (media-query не комбинируется списком селекторов), а
   style-queries пока без поддержки в Firefox.
   Переопределяются ТОЛЬКО значения, набор имён общий со светлой темой.
============================================================================ */

:root[data-theme="dark"] {
    --brand:            #479ef5;
    --brand-hover:      #62abf5;
    --brand-pressed:    #2886de;
    --brand-fg:         #06182b;
    --brand-bg:         #0c2d4a;
    --brand-bg-hover:   #123b5e;
    --brand-border:     #1d5a91;
    --brand-text:       #7cc0fa;

    --surface-app:      #141413;
    --surface-card:     #1f1e1d;
    --surface-inset:    #292827;
    --surface-sunken:   #121211;
    --surface-hover:    #2d2c2b;
    --surface-active:   #373635;
    --surface-nav:      #1a1918;
    --surface-overlay:  rgba(0, 0, 0, .65);

    --fg:               #f3f2f1;
    --fg-strong:        #ffffff;
    --fg-muted:         #c8c6c4;
    --fg-subtle:        #a19f9d;
    --fg-on-accent:     #06182b;

    --border:           #333231;
    --border-strong:    #4a4847;
    --border-input:     #6b6968;

    --success:          #54b054;
    --success-text:     #92c353;
    --success-bg:       #10290f;
    --success-border:   #2c5a2c;
    --success-solid:    #3aa03a;

    --warning:          #e6a935;
    --warning-text:     #f3c669;
    --warning-bg:       #2e2206;
    --warning-border:   #6b5210;
    --warning-solid:    #e6a935;

    --danger:           #f1707b;
    --danger-text:      #ff9aa3;
    --danger-bg:        #2b1215;
    --danger-border:     #6b2a30;
    --danger-solid:     #d13438;
    --danger-hover:     #e05055;
    --danger-pressed:   #b32b2f;

    --info:             #479ef5;
    --info-text:        #7cc0fa;
    --info-bg:          #0c2d4a;
    --info-border:      #1d5a91;
    --info-solid:       #479ef5;

    --neutral-bg:       #2d2c2b;
    --neutral-border:   #4a4847;
    --neutral-solid:    #8a8886;

    --verdict-high:     #3aa03a;
    --verdict-medium:   #e6a935;
    --verdict-low:      #d13438;
    --verdict-unknown:  #797775;

    --chart-1:          #479ef5;
    --chart-2:          #54b054;
    --chart-3:          #e6a935;
    --chart-4:          #f1707b;
    --chart-5:          #a17fd6;
    --chart-grid:       #333231;

    /* Тени в тёмной теме почти не видны — работают как «толще край» */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-3: 0 10px 24px rgba(0, 0, 0, .55);
    --shadow-4: 0 28px 60px rgba(0, 0, 0, .70);
    --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:            #479ef5;
        --brand-hover:      #62abf5;
        --brand-pressed:    #2886de;
        --brand-fg:         #06182b;
        --brand-bg:         #0c2d4a;
        --brand-bg-hover:   #123b5e;
        --brand-border:     #1d5a91;
        --brand-text:       #7cc0fa;

        --surface-app:      #141413;
        --surface-card:     #1f1e1d;
        --surface-inset:    #292827;
        --surface-sunken:   #121211;
        --surface-hover:    #2d2c2b;
        --surface-active:   #373635;
        --surface-nav:      #1a1918;
        --surface-overlay:  rgba(0, 0, 0, .65);

        --fg:               #f3f2f1;
        --fg-strong:        #ffffff;
        --fg-muted:         #c8c6c4;
        --fg-subtle:        #a19f9d;
        --fg-on-accent:     #06182b;

        --border:           #333231;
        --border-strong:    #4a4847;
        --border-input:     #6b6968;

        --success:          #54b054;
        --success-text:     #92c353;
        --success-bg:       #10290f;
        --success-border:   #2c5a2c;
        --success-solid:    #3aa03a;

        --warning:          #e6a935;
        --warning-text:     #f3c669;
        --warning-bg:       #2e2206;
        --warning-border:   #6b5210;
        --warning-solid:    #e6a935;

        --danger:           #f1707b;
        --danger-text:      #ff9aa3;
        --danger-bg:        #2b1215;
        --danger-border:    #6b2a30;
        --danger-solid:     #d13438;
        --danger-hover:     #e05055;
        --danger-pressed:   #b32b2f;

        --info:             #479ef5;
        --info-text:        #7cc0fa;
        --info-bg:          #0c2d4a;
        --info-border:      #1d5a91;
        --info-solid:       #479ef5;

        --neutral-bg:       #2d2c2b;
        --neutral-border:   #4a4847;
        --neutral-solid:    #8a8886;

        --verdict-high:     #3aa03a;
        --verdict-medium:   #e6a935;
        --verdict-low:      #d13438;
        --verdict-unknown:  #797775;

        --chart-1:          #479ef5;
        --chart-2:          #54b054;
        --chart-3:          #e6a935;
        --chart-4:          #f1707b;
        --chart-5:          #a17fd6;
        --chart-grid:       #333231;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
        --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
        --shadow-3: 0 10px 24px rgba(0, 0, 0, .55);
        --shadow-4: 0 28px 60px rgba(0, 0, 0, .70);
        --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand);
    }
}

/* ============================================================================
   Легаси-алиасы
   ----------------------------------------------------------------------------
   Старые имена из первой версии style.css. На них опираются:
   - инлайновые style="" в шаблонах (45 штук),
   - dashboard.html (Chart.js читает --muted и --border),
   - неотрефакторенные правила в style.css.
   Плюс здесь закрыты ДЫРЫ, из-за которых часть интерфейса не работала:
   --fg (использовался в .tab.is-on) и --card-alt (в .pf-item) вообще не
   были определены ни в одной теме.
============================================================================ */

:root {
    --accent:        var(--brand);
    --accent-hover:  var(--brand-hover);
    --accent-pressed: var(--brand-pressed);
    --accent-soft:   var(--brand-bg);
    --accent-border: var(--brand-border);

    --bg:            var(--surface-app);
    --bg-soft:       var(--surface-inset);
    --card-bg:       var(--surface-card);
    --card-alt:      var(--surface-inset);   /* было не определено */
    --code-bg:       var(--surface-inset);

    --text:          var(--fg);
    --text-2:        var(--fg);
    --fg-legacy:     var(--fg);
    --muted:         var(--fg-muted);
    --muted-2:       var(--fg-subtle);

    --green:         var(--success-solid);
    --green-hover:   var(--success-text);
    --green-soft:    var(--success-bg);
    --red:           var(--danger-solid);
    --red-hover:     var(--danger-text);
    --red-soft:      var(--danger-bg);
    --amber:         var(--warning);
    --amber-soft:    var(--warning-bg);
    --blue:          var(--info);
    --blue-soft:     var(--info-bg);

    --focus:         var(--brand);

    --depth-4:       var(--shadow-1);
    --depth-8:       var(--shadow-2);
    --depth-16:      var(--shadow-3);
    --depth-64:      var(--shadow-4);
    --shadow:        var(--shadow-1);
    --shadow-sm:     var(--shadow-1);
    --shadow-lg:     var(--shadow-3);

    --radius-legacy: var(--radius);
}