/* ═══════════════════════════════════════════════════════════════
 * tokens.css — Design System tokens для платформи QAAIFY
 * Єдине місце де визначаються кольори, тіні, радіуси, відступи,
 * типографія. Змінити зовнішній вигляд усього застосунку = змінити
 * значення тут і перезібрати tailwind.css (npm run build:css) —
 * жоден із 86+ шаблонів не потребує правок.
 *
 * Як це працює технічно (важливо, якщо редагуєте пізніше):
 * tailwind.config.js МАПИТЬ стандартні палітри Tailwind (slate,
 * indigo, emerald, amber, rose, blue, orange) на ЦІ САМІ CSS-змінні
 * (через rgb(var(--color-xxx) / <alpha-value>)) — тобто коли
 * шаблон пише class="bg-indigo-600", браузер насправді підставляє
 * значення --color-indigo-600 звідси. Це і дає "одне місце змінити,
 * все підхопилось" — без цього кожен колір був би заморожений у
 * скомпільованому CSS назавжди.
 *
 * Ребрендинг 2026 (QAAIFY): основний акцент — синій, похідний від
 * логотипного градієнта #47C3E3 → #0F70E1 (--primary-muted —
 * світліший край, --primary/--primary-dark — темніший). Другий,
 * "фірмовий" градієнт жовтий/помаранчевий #FFD200 → #FF6B35
 * зберігається окремими --secondary-* змінними для акцентних CTA/
 * hero-елементів (не замінює семантику success/warning/danger —
 * ті лишились впізнаваними зеленим/золотим/теракотовим, щоб не
 * плутати статус-кольори з фірмовим брендингом).
 * ═══════════════════════════════════════════════════════════════ */

:root {
    /* color-scheme: без цього мобільні браузери (передусім iOS Safari)
       рендерять НАТИВНІ/непокриті нашим CSS ділянки (фон під час
       overscroll-відскоку, системні кастомні контроли) за СИСТЕМНОЮ
       темою телефона, ігноруючи те, яку тему реально показує сторінка —
       звідси "темний фон під наш світлий UI, але блоки лишаються
       світлими" (світлі картки мають явний CSS-фон, порожній простір
       навколо — ні). Прив'язано до :root[data-theme], того самого
       атрибута, що вже виставляє JS нижче (localStorage-preference АБО
       system preference, з коректним пріоритетом) — не до голого
       @media, щоб ручний перемикач теми теж це коректно відображав. */
    color-scheme: light;

    /* ── Primary (синій, похідний від лого-градієнта 47C3E3→0F70E1) ── */
    --primary:          #0F70E1;
    --primary-hover:    #0B5BB8;
    --primary-dark:     #0A4A93;
    --primary-light:    #E8F4FD;
    --primary-muted:    #47C3E3;
    --primary-border:   #A9D9F0;

    /* ── Secondary (фірмовий жовто-помаранчевий градієнт лого,
         акцент для CTA/hero — не для звичайного UI) ── */
    --secondary:            #FF8A1E;
    --secondary-start:      #FFD200;
    --secondary-end:        #FF6B35;
    --brand-gradient:           linear-gradient(135deg, #47C3E3 0%, #0F70E1 100%);
    --brand-gradient-secondary: linear-gradient(135deg, #FFD200 0%, #FF6B35 100%);

    /* ── Surface & Background (чистий білий — ребрендинг QAAIFY, замінює
         попередній теплий кремовий фон) ── */
    --surface:          #FFFFFF;
    --surface-raised:   #F8FAFC;
    --surface-sunken:   #F1F5F9;

    /* ── Border ── */
    --border:           #E2E8F0;
    --border-strong:    #CBD5E1;
    --border-focus:     #0F70E1;

    /* ── Text (холодний нейтральний, замінює теплий) ── */
    --text-base:        #0F172A;
    --text-secondary:   #334155;
    --text-muted:       #64748B;
    --text-subtle:      #94A3B8;
    --text-on-primary:  #ffffff;

    /* ── Semantic ── */
    --success:          #227A3E;
    --success-light:    #EDF7EE;
    --warning:          #B9791F;
    --warning-light:    #FBF3E4;
    --danger:           #A23D25;
    --danger-light:     #FBEEEA;
    --info:             #3D6989;
    --info-light:       #EAF1F5;

    /* ── Diff (Prompt Lab) ── */
    --diff-add-bg:      #EDF7EE;
    --diff-add-border:  #227A3E;
    --diff-remove-bg:   #FBEEEA;
    --diff-remove-border: #A23D25;

    /* ── Overlay ── */
    --overlay-bg:       rgba(15, 23, 42, 0.45);

    /* ── Shadow (холодний нейтральний відтінок) ── */
    --shadow-sm:   0 1px 2px 0 rgb(15 23 42 / 0.06);
    --shadow:      0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
    --shadow-md:   0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
    --shadow-lg:   0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.06);

    /* ── Radius (трохи м'якіше, сучасніше — не гострі кути 2020-х) ── */
    --radius-sm:   8px;
    --radius:      10px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;

    /* ── Spacing scale (8px base) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;

    /* ── Max-width сторінки — основна скарга, яку виправляємо:
       деякі сторінки з таблицями/широкими формами впирались у
       вузький контейнер. 1600px — досить широко для щільних таблиць
       (all_evaluations, superadmin), але не "на всю ширину монітора"
       (рядок тексту не розтягується до нечитабельної довжини). */
    --page-max-width: 1600px;

    /* ── Typography (Fraunces для заголовків/акцентів — той самий
         шрифт, що на публічному лендінгу; Work Sans для щільного,
         легко читабельного тексту в таблицях/формах) ── */
    --font-sans:    'Work Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --text-xs:     11px;
    --text-sm:     12.5px;
    --text-base:   14px;
    --text-md:     15px;
    --text-lg:     17px;
    --text-xl:     20px;
    --text-2xl:    24px;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* ── Motion (свідомо стримано — мікро-взаємодії, не "ефекти") ── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration:      220ms;
    --duration-slow: 380ms;
}

/* ═══════════════════════════════════════════════════════════════
 * Глобальна типографія + фон — base.html підключає цей файл скрізь.
 * ═══════════════════════════════════════════════════════════════ */

/* html { background } окремо від body { background }: на мобільних
   Safari зона overscroll-відскоку (тягнеш екран вище/нижче контенту)
   показує фон САМЕ <html>, не <body> — без цього рядка вона лишалась
   би непофарбованою (типово білою) навіть коли color-scheme/тема вже
   коректно темні, бо browser-default для "непокритого CSS" простору
   не обов'язково точно збігається з нашим --surface-sunken. */
html {
    background: var(--surface-sunken);
}

body {
    font-family: var(--font-sans);
    background: var(--surface-sunken);
}

/* Заголовки — Fraunces, трохи стиснутий трекінг для впевненого,
   "видавничого" тону замість типового geometric-sans SaaS вигляду.
   Свідомо НЕ на кожен h1-h6 глобально — лише клас + h1/h2, щоб не
   ламати іконки/бейджі, де інші h-теги іноді використовують для
   розмітки без наміру на "заголовковий" шрифт. */
.font-display,
h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ── Мікро-взаємодії (навмисно мало — 2026 тренд: кожна анімація має
     заслужити місце, не "ефекти заради ефектів") ── */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}

/* Картки/кнопки: легкий, швидкий відгук на ховер — не "стрибок",
   ледь відчутний ліфт + тінь, підказка що елемент інтерактивний. */
.card-hover {
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .animate-in, .card-hover { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * DARK MODE — overrides via @media (prefers-color-scheme: dark)
 * Активується автоматично або через data-theme="dark" на <html>.
 * ═══════════════════════════════════════════════════════════════ */

/* Навмисно НЕМАЄ окремого `@media (prefers-color-scheme: dark) { :root
   {...змінні...} }` блоку тут — це й був корінь бага "світла тема
   бере темні системні кольори, але лише фон, не блоки" (2026-08-02):
   такий блок спрацьовував за СИСТЕМНОЮ темою НАПРЯМУ, незалежно від
   атрибута data-theme нижче — тобто коли юзер (чи JS з localStorage)
   свідомо обирав світлу тему, а система була темною, --surface/
   --text-* усе одно йшли в темні значення (бо @media сам по собі
   не питає JS), а Tailwind-класи карток (.bg-white тощо, нижче)
   лишались світлими — бо ЇХНІ override-и прив'язані ЛИШЕ до
   [data-theme="dark"], не до @media. Два неузгоджені джерела
   істини = "темний фон, світлі блоки". JS (base.html, виконується
   СИНХРОННО в <head> до першого рендеру) вже сам коректно вирішує
   light/dark (localStorage-переважає, інакше system preference) і
   виставляє data-theme — тож єдиний потрібний селектор нижче. */
@media (prefers-color-scheme: dark) {
    :root { --dark-mode: 1; }
}

/* ── Manually toggled via JS (клас на <html>) ── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary:          #47C3E3;
    --primary-hover:    #78D6EC;
    --primary-dark:     #A9D9F0;
    --primary-light:    #0A4A93;
    --primary-muted:    #A9D9F0;
    --primary-border:   #0B5BB8;
    --secondary:            #FFA13D;
    --secondary-start:      #FFD200;
    --secondary-end:        #FF6B35;
    --surface:          #111827;
    --surface-raised:   #0B1220;
    --surface-sunken:   #0A0F1A;
    --border:           #23303F;
    --border-strong:    #33455A;
    --border-focus:     #78D6EC;
    --text-base:        #F1F5F9;
    --text-secondary:   #CBD5E1;
    --text-muted:       #94A3B8;
    --text-subtle:      #64748B;
    --text-on-primary:  #ffffff;
    --success:          #4FAE6C;
    --success-light:    #123C20;
    --warning:          #DFA347;
    --warning-light:    #4F3413;
    --danger:           #CC6448;
    --danger-light:     #451A10;
    --info:             #6FA3C4;
    --info-light:       #1B3A4A;
    --diff-add-bg:      #123C20;
    --diff-add-border:  #4FAE6C;
    --diff-remove-bg:   #451A10;
    --diff-remove-border: #CC6448;
    --overlay-bg:       rgba(0, 0, 0, 0.65);
    --shadow-sm:        0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow:           0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md:        0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg:        0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* ---------------------------------------------------------------
 * DARK MODE Tailwind overrides
 * Перехоплюємо hardcoded bg-white / bg-slate-* і т.п. класи —
 * без зміни HTML-шаблонів.
 * --------------------------------------------------------------- */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] [class*="bg-white"] {
    background-color: var(--surface) !important;
    color: var(--text-secondary);
}

:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: var(--surface-raised) !important;
}

:root[data-theme="dark"] .bg-slate-100,
:root[data-theme="dark"] .hover\:bg-slate-100:hover {
    background-color: var(--surface-sunken) !important;
}

:root[data-theme="dark"] .bg-slate-200,
:root[data-theme="dark"] .hover\:bg-slate-200:hover {
    background-color: var(--border) !important;
}

:root[data-theme="dark"] .bg-slate-700,
:root[data-theme="dark"] .bg-slate-800,
:root[data-theme="dark"] .bg-slate-900 {
    background-color: var(--surface-sunken) !important;
}

/* Світлі семантичні bg-{color}-50/100 (rose/emerald/amber/blue) —
   у 76+ шаблонах їх часто поєднують із text-slate-700/800 (напр.
   рядки "Топ-5 помилок/сильних сторін" на /dashboard). Без цього
   перехоплення фон лишається статичним світлим (Tailwind-палітра
   тут — фіксовані hex у tailwind.config.js, не CSS-змінні), а
   text-slate-700/800 вище вже темнішає ЛИШЕ в світлій темі, у
   темній — світлішає (var(--text-secondary)/var(--text-base)) —
   світлий текст на світлому фоні, нечитабельно. Перевикористовуємо
   вже наявні dark-adjusted --success/--warning/--danger/--info
   -light змінні (той самий підхід, що вже застосований для
   bg-slate та bg-white вище). */
:root[data-theme="dark"] .bg-emerald-50,
:root[data-theme="dark"] .bg-emerald-100,
:root[data-theme="dark"] .hover\:bg-emerald-100:hover {
    background-color: var(--success-light) !important;
}

:root[data-theme="dark"] .bg-amber-50,
:root[data-theme="dark"] .bg-amber-100,
:root[data-theme="dark"] .hover\:bg-amber-100:hover {
    background-color: var(--warning-light) !important;
}

:root[data-theme="dark"] .bg-rose-50,
:root[data-theme="dark"] .bg-rose-100,
:root[data-theme="dark"] .hover\:bg-rose-100:hover {
    background-color: var(--danger-light) !important;
}

:root[data-theme="dark"] .bg-blue-50,
:root[data-theme="dark"] .bg-blue-100,
:root[data-theme="dark"] .hover\:bg-blue-100:hover {
    background-color: var(--info-light) !important;
}

/* Парні text-{color}-600/700/800 — типово поєднуються з bg-{color}-50/100
   вище (напр. badge score_badge(): "bg-emerald-100 text-emerald-800").
   Без цього перехоплення текст лишається ЗАФІКСОВАНИМ темним відтінком
   (Tailwind-палітра тут — статичний hex, не CSS-змінна) — на щойно
   затемненому фоні (var(--success-light) і т.п. вище, у темній темі
   це ТЕМНИЙ відтінок) виходить темний текст на темному фоні,
   нечитабельно. Перевикористовуємо ті самі яскраві --success/--warning/
   --danger/--info, що вже призначені для темної теми. */
:root[data-theme="dark"] .text-emerald-600,
:root[data-theme="dark"] .text-emerald-700,
:root[data-theme="dark"] .text-emerald-800 {
    color: var(--success) !important;
}

:root[data-theme="dark"] .text-amber-600,
:root[data-theme="dark"] .text-amber-700,
:root[data-theme="dark"] .text-amber-800 {
    color: var(--warning) !important;
}

:root[data-theme="dark"] .text-rose-600,
:root[data-theme="dark"] .text-rose-700,
:root[data-theme="dark"] .text-rose-800 {
    color: var(--danger) !important;
}

:root[data-theme="dark"] .text-blue-600,
:root[data-theme="dark"] .text-blue-700,
:root[data-theme="dark"] .text-blue-800 {
    color: var(--info) !important;
}

:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-slate-500 {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-700 {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-900 {
    color: var(--text-base) !important;
}

:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-100 {
    border-color: var(--border) !important;
}

:root[data-theme="dark"] .border-slate-300 {
    border-color: var(--border-strong) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--surface-sunken) !important;
    color: var(--text-base) !important;
    border-color: var(--border) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--text-subtle) !important;
}

/* ── CSP-харднінг: заміна onmouseover/onfocus/onblur-атрибутів у base.html
   на CSS-псевдокласи (security review) ── */
.icon-btn-hover:hover {
    background: var(--surface-sunken);
}
.global-ticket-search-input:focus {
    border-color: var(--primary) !important;
}
.reeval-cancel-btn:hover {
    background: var(--border) !important;
}
.reeval-confirm-btn:hover {
    background: var(--primary-hover) !important;
}
.mistake-popup-close-btn {
    color: var(--text-subtle);
}
.mistake-popup-close-btn:hover {
    color: var(--text-secondary);
}

/* ── CSP-харднінг: заміна style=""/onclick="" у динамічно вставлюваному
   innerHTML (knowledge_base.js sync-progress bar) на класи + JS property
   assignment (security review) ── */
.kb-sync-progress-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    min-width: 300px;
}
.kb-sync-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.kb-sync-progress-msg {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}
.kb-sync-progress-close {
    font-size: 16px;
    color: #94A3B8;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.kb-sync-progress-track {
    background: #f1f5f9;
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.kb-sync-progress-fill {
    background: linear-gradient(90deg,#0F70E1,#FF6B35);
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}
.kb-sync-progress-fill-pulse {
    animation: pulse-progress 1.5s ease-in-out infinite;
}
.kb-sync-progress-pct {
    font-size: 11px;
    color: #64748B;
}
.kb-sync-progress-done-icon {
    font-size: 18px;
}
.kb-sync-progress-done-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.kb-sync-progress-done-detail {
    font-size: 11px;
    color: #64748B;
}

/* ── CSP-харднінг: заміна .style.cssText = "..." (теж підпадає під style-src,
   на відміну від окремих .style.property =) на CSS-класи (security review,
   notifications_panel.js::_buildNotifItem) ── */
.notif-panel-item {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.notif-panel-item-unread {
    background: var(--surface-sunken);
}
.notif-panel-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.notif-panel-text-wrap {
    min-width: 0;
    flex: 1;
}
.notif-panel-title {
    font-size: 12px;
    color: var(--text-base);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-panel-title-unread {
    font-weight: 600;
}
.notif-panel-title-read {
    font-weight: 400;
}
.notif-panel-body {
    font-size: 11px;
    color: var(--text-subtle);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-panel-time {
    font-size: 10px;
    color: var(--text-subtle);
    margin: 2px 0 0;
}
.notif-panel-unread-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 5px;
}

/* ── CSP-харднінг: заміна .style.cssText = "..." (portal_insights.js
   _openCategoryPopup) на CSS-класи (security review) ── */
.popup-tickets-empty {
    font-size: 12px;
    color: #94A3B8;
    font-style: italic;
}
.popup-ticket-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: background .15s;
}
.popup-ticket-link:hover {
    background: var(--primary-light);
    border-color: var(--primary-border);
}
.popup-ticket-id {
    font-family: monospace;
    font-weight: 700;
    font-size: 13px;
}
.popup-ticket-cta {
    font-size: 12px;
    color: #94A3B8;
}