/* ===== ModalCRM Design System — MODAL.HTM rebrand ===== */
/* Spec: DESIGN.md (2026-05-06). Migrated from "Linear style on cream paper" (2026-05-05). */
/* Direction: gradient identity (steel blue → wine red), muted plum accent, white surface, system fonts. */

:root {
    /* ===== Brand identity ===== */
    --gradient:       linear-gradient(135deg, #3B7FA8 0%, #A54463 100%);
    --gradient-soft:  linear-gradient(135deg, rgba(59,127,168,0.12) 0%, rgba(165,68,99,0.12) 100%);
    --gradient-hover: linear-gradient(135deg, #2F6B90 0%, #8C3752 100%);
    --gradient-start: #3B7FA8;
    --gradient-end:   #A54463;
    --gradient-vert:  linear-gradient(180deg, #3B7FA8 0%, #A54463 100%);

    /* Solid fallbacks (use when gradient cannot be applied — e.g. text color) */
    --gradient-solid: #564B7D;       /* visual midpoint, also our --accent */
    --brand-deep:     #2F6B90;
    --brand-mid:      #564B7D;
    --brand-warm:     #A54463;

    /* Legacy brand-* aliases (kept for backward compat) */
    --brand-blue:    #3B7FA8;
    --brand-cyan:    #3B7FA8;
    --brand-lavender:#564B7D;
    --brand-50:  #F2EEEE;
    --brand-100: #E0D8DA;
    --brand-200: #C3B5BB;
    --brand-300: #9B8B95;
    --brand-400: #756676;
    --brand-500: #564B7D;       /* accent */
    --brand-600: #544A73;
    --brand-700: #3A334E;
    --brand-800: #2A2538;
    --brand-900: #1A1722;
    --brand-950: #0E0C13;

    /* warm-* scale — kept name, neutralised tones */
    --warm-50:   #FAFAFA;
    --warm-100:  #F5F5F5;
    --warm-200:  #EFEFEF;
    --warm-300:  #E8E8E8;
    --warm-400:  #D0D0D0;
    --warm-500:  #888888;
    --warm-600:  #6B6B6B;
    --warm-700:  #1A1A1A;

    /* Legacy gradient aliases — now actual gradients */
    --brand-gradient:      linear-gradient(135deg, #3B7FA8 0%, #A54463 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(59,127,168,0.12) 0%, rgba(165,68,99,0.12) 100%);
    --brand-gradient-vert: linear-gradient(180deg, #3B7FA8 0%, #A54463 100%);
    --brand-gradient-hover:linear-gradient(135deg, #2F6B90 0%, #8C3752 100%);

    /* ===== Surfaces (clean white) ===== */
    --bg:             #FFFFFF;
    --bg-app:         #FFFFFF;
    --bg-app-base:    #FFFFFF;
    --bg-card:        #FFFFFF;
    --bg-surface:     #FFFFFF;
    --bg-elevated:    #FFFFFF;
    --bg-popup:       #FFFFFF;
    --bg-soft:        #FAFAFA;
    --bg-muted:       #FAFAFA;
    --bg-input:       #F5F5F5;
    --bg-tag:         #F0F0F0;
    --bg-sidebar:     #FFFFFF; /* 2026-08-15: був #F7F5FA (лавандовий півтон, «ні білий ні сірий») — палітра тепер білий/чорний/градієнт */
    --bg-hover:       rgba(0, 0, 0, 0.04);
    --bg-active:      #F0F0F0;
    --bg-list:        #FFFFFF;
    --bg-topbar:      #FFFFFF;
    --bg-primary:     #FFFFFF;
    --bg-secondary:   #FAFAFA;
    --bg-gradient-start: #FFFFFF;
    --bg-gradient-end:   #FAFAFA;
    --bg-mesh: none;

    /* ===== Text =====
       Muted greys darkened a step for legibility (less "washed out"); R=G=B kept truly neutral. */
    --text:           #000000;
    --text-primary:   #000000;
    --text-secondary: #1A1A1A;
    --text-tertiary:  #454545;
    --text-muted:     #454545;
    --text-faint:     #5C5C5C;
    --text-dim:       #5C5C5C;
    --text-2:         #1A1A1A;
    --text-3:         #525252;

    /* ===== Brand semantic ===== */
    --primary:        #564B7D;     /* solid accent for borders/text where gradient unsuitable */
    --primary-hover:  #453B68;
    --primary-light:  rgba(86, 75, 125, 0.14);
    --primary-bg:     rgba(86, 75, 125, 0.14);
    --accent:         #564B7D;
    --accent-light:   rgba(86, 75, 125, 0.14);

    /* Highlight — pure ink fallback for emphasis */
    --highlight:      #1A1A1A;
    --highlight-hover:#000000;
    --highlight-light:rgba(26, 26, 26, 0.08);
    --highlight-bg:   #F0F0F0;

    /* ===== Borders ===== (strengthened a step so cards/inputs/dividers read clearly on white) */
    --border:         #C9C9C9;
    --border-subtle:  #C9C9C9;
    --border-strong:  #ADADAD;
    --border-card:    #C9C9C9;
    --border-soft:    #D9D9D9;
    --border-light:   #D9D9D9;

    /* ===== Semantic — minimalist (only 3 status tones in MODAL.HTM, plus muted greys) =====
       overdue/high → solid black. medium/done → grey. urgent → gradient.
       Success/warning/danger/info still defined for non-tag uses (toasts, alerts, forms). */
    --success:        #2F7A4F;
    --success-light:  rgba(47, 122, 79, 0.14);
    --warning:        #C9922B;
    --warning-light:  rgba(201, 146, 43, 0.16);
    --danger:         #A54463;     /* wine red — matches gradient end */
    --danger-light:   rgba(165, 68, 99, 0.13);
    --info:           #3B7FA8;     /* steel blue — matches gradient start */
    --info-light:     rgba(59, 127, 168, 0.14);

    --accent-amber:   #C9922B;
    --accent-mint:    #2F7A4F;
    --accent-coral:   #A54463;
    --accent-violet:  #564B7D;

    /* ===== AI accent — uses gradient identity ===== */
    --ai-primary:     #564B7D;
    --ai-secondary:   #A54463;
    --ai-gradient:    linear-gradient(135deg, #3B7FA8 0%, #A54463 100%);

    /* ===== Shadows ===== */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:       0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.10);
    --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-brand: 0 8px 24px rgba(101, 90, 140, 0.20);
    --focus-ring:   0 0 0 3px rgba(101, 90, 140, 0.18);

    /* ===== Spacing ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* ===== Radii ===== */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius:      10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* ===== Channel colors (бренди — не міняти) ===== */
    --ch-facebook:  #1877F2;
    --ch-whatsapp:  #25D366;
    --ch-telegram:  #229ED9;
    --ch-instagram: #E1306C;
    --ch-email:     #6B7280;
    --ch-viber:     #7360F2;

    /* ===== Typography (Fixel, self-hosted у fonts.css; fallback — старий стек) ===== */
    /* 2026-08-16: один шрифт на весь продукт — Fixel Text (як на кнопках).
       'Fixel Display' виведений з ужитку: підмінені гліфи робили заголовки
       схожими на інший шрифт. Токен лишений задля сумісності. */
    --font-display: 'Fixel Text', Verdana, Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'Fixel Text', Verdana, Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ===== UI scale (кегль і padding контролів) =====
       Базова шкала кабінету — щільна: 13px контрол, 12px лейбл, 16px шапка картки.
       Значення ті самі, що були захардкожені в base.css; винесені в токени, щоб
       окремий розділ міг перемкнутись на комфортну шкалу (блок нижче), не
       дублюючи правила. Споживачі — тільки base.css: .form-group label,
       .input/select/textarea, .card h3, .btn, .btn-sm, .table. */
    --fs-label:       12px;
    --gap-label:      5px;
    --fs-control:     13px;
    --pad-control:    9px 12px;
    --fs-card-title:  16px;
    --pad-card-title: 16px 22px;
    --fs-btn:         13px;
    --fs-btn-sm:      13px;
    --fs-table-cell:  13px;

    /* ===== Motion ===== */
    --ease: cubic-bezier(.16, 1, .3, 1);
    /* Для виходів: те, що зникає, розганяється, а не гальмує. */
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --dur-fast: 100ms;
    --dur: 180ms;
    --dur-slow: 280ms;

    /* ===== Aliases (світла тема) =====
       Ті самі імена, що й у dark-блоці нижче. Раніше вони існували ТІЛЬКИ там:
       у dark-блок їх додали, щоб полагодити «білі картки на темному», а світлу
       тему свідомо не чіпали — з розрахунку, що кожен компонент має власний
       фолбек. Розрахунок не справдився: 73 оголошення в кабінеті звертаються до
       цих імен БЕЗ фолбека, і в світлій темі вони просто не обчислювались.
       Найгірше з `--border-color` (47 місць: Логістика, Записи, Комунікації):
       `border: 1px solid var(--border-color)` з невизначеною змінною — це
       невалідне скорочення цілком, тобто border-width стає 0. Не «блідий кант»,
       а ВІДСУТНІЙ. Плюс `background: var(--surface|--bg-tertiary|--card*)` →
       прозоро, `color: var(--muted)` → чорний замість сірого.
       Перевірено заміром у браузері 19.08.2026 (світла: border-width 0px,
       фон rgba(0,0,0,0); темна: усе на місці) — звідси й половина відчуття
       «рамок немає, все злипається». */
    --card-bg:        var(--bg-card);
    --card:           var(--bg-card);
    --surface:        var(--bg-card);
    --surface-subtle: var(--bg-soft);
    --surface-hover:  var(--bg-hover);
    --bg-tertiary:    var(--bg-active);
    --sidebar-bg:     var(--bg-sidebar);
    --paper:          var(--bg-soft);
    --border-color:   var(--border);
    --muted:          var(--text-muted);
    --error:          var(--danger);
    --secondary:      var(--brand-warm);
    --primary-dark:   var(--primary-hover);
    --success-bg:     var(--success-light);
    --success-hover:  #276641;   /* темніший за --success #2F7A4F — hover у світлій */
    --accent-warm:       var(--brand-warm);
    --accent-warm-light: var(--danger-light);
}

/* ===== Комфортна шкала (2026-09-03) =====
   Ті самі токени на щабель більші. Обкатано на «Віджеті на сайт» 2026-09-02:
   розділ читають, а не сканують — його бачить кожен новий клієнт, і саме там
   він або налаштовує продукт, або йде. Тепер це не локальний хак розділу, а
   опція: додати id сюди — і розділ перемкнувся, правила лишаються в base.css.

   Вмикається пооб'єктно, а не глобально: у щільних таблицях (Аналітика, Склад,
   Фінанси) підйом кегля ламає ширини колонок. Перша хвиля — конфігураційні
   розділи: там форми, а таблиці дрібні й вузькі.
   Модалки лежать поза <section>, тож лишаються на базовій шкалі — навмисно:
   вони спільні для всього кабінету.
   Автоматизації сюди НЕ входять: полотно конструктора — інструмент, а не форма,
   і automation.css свідомо тримає власну щільнішу шкалу (12px лейбли, 11px
   хінти) у вузькій панелі налаштувань вузла. */
/* 2026-09-20: «Віджет на сайт», Головна, Клієнти й картка клієнта ЗНЯТІ зі списку —
   на робочих екранах збільшена шкала розвалювала таблиці. Вони на базовій шкалі,
   як Замовлення й Органайзер. Лишились тільки суто конфігураційні розділи. */
#section-settings,
#section-integrations,
#section-modules,
#section-documents {
    --fs-label:       14px;
    --gap-label:      7px;
    --fs-control:     15px;
    --pad-control:    10px 12px;
    --fs-card-title:  19px;
    --pad-card-title: 18px 24px;
    --fs-btn:         15px;
    --fs-btn-sm:      14px;
    --fs-table-cell:  14px;
}

/* ===== Dark Theme ===== */
html[data-theme="dark"] {
    --gradient:       linear-gradient(135deg, #4A82A0 0%, #A8475F 100%);
    --gradient-soft:  linear-gradient(135deg, rgba(74,130,160,0.16) 0%, rgba(168,71,95,0.16) 100%);
    --gradient-hover: linear-gradient(135deg, #5A92B0 0%, #B8576F 100%);
    --gradient-start: #4A82A0;
    --gradient-end:   #A8475F;
    --gradient-vert:  linear-gradient(180deg, #4A82A0 0%, #A8475F 100%);
    --gradient-solid: #7A6E94;
    --brand-deep:     #4A82A0;
    --brand-mid:      #7A6E94;
    --brand-warm:     #A8475F;

    --brand-gradient:       linear-gradient(135deg, #4A82A0 0%, #A8475F 100%);
    --brand-gradient-soft:  linear-gradient(135deg, rgba(74,130,160,0.16) 0%, rgba(168,71,95,0.16) 100%);
    --brand-gradient-vert:  linear-gradient(180deg, #4A82A0 0%, #A8475F 100%);
    --brand-gradient-hover: linear-gradient(135deg, #5A92B0 0%, #B8576F 100%);

    --bg:             #0E0E10;
    --bg-app:         #0E0E10;
    --bg-app-base:    #0E0E10;
    --bg-card:        #1A1A1D;
    --bg-surface:     #1A1A1D;
    --bg-elevated:    #232328;
    --bg-popup:       #1A1A1D;
    --bg-soft:        #18181B;
    --bg-muted:       #18181B;
    --bg-input:       #232328;
    --bg-tag:         #2A2A30;
    --bg-sidebar:     #18181B;
    --bg-hover:       rgba(255, 255, 255, 0.05);
    --bg-active:      #2A2A30;
    --bg-list:        #1A1A1D;
    --bg-topbar:      #0E0E10;
    --bg-primary:     #0E0E10;
    --bg-secondary:   #18181B;
    --bg-gradient-start: #0E0E10;
    --bg-gradient-end:   #18181B;
    --bg-mesh: none;

    --text:           #FFFFFF;
    --text-primary:   #FFFFFF;
    --text-secondary: #E5E5E5;
    --text-tertiary:  #B2B2B2;
    --text-muted:     #B2B2B2;
    --text-faint:     #828282;
    --text-dim:       #828282;
    --text-2:         #E5E5E5;
    --text-3:         #B2B2B2;

    --primary:        #7A6E94;
    --primary-hover:  #8C82A6;
    --primary-light:  rgba(122, 110, 148, 0.18);
    --primary-bg:     rgba(122, 110, 148, 0.18);
    --accent:         #7A6E94;
    --accent-light:   rgba(122, 110, 148, 0.18);

    --highlight:      #FFFFFF;
    --highlight-hover:#FFFFFF;
    --highlight-light:rgba(255, 255, 255, 0.08);
    --highlight-bg:   #2A2A30;

    --border:         #37373F;
    --border-subtle:  #37373F;
    --border-strong:  #48484F;
    --border-card:    #37373F;
    --border-soft:    rgba(255, 255, 255, 0.10);
    --border-light:   #2E2E34;

    --success:        #4D8B62;
    --success-light:  rgba(77, 139, 98, 0.18);
    --warning:        #D9A040;
    --warning-light:  rgba(217, 160, 64, 0.18);
    --danger:         #A8475F;
    --danger-light:   rgba(168, 71, 95, 0.18);
    --info:           #4A82A0;
    --info-light:     rgba(74, 130, 160, 0.18);

    --accent-amber:   #D9A040;
    --accent-mint:    #4D8B62;
    --accent-coral:   #A8475F;
    --accent-violet:  #7A6E94;

    --ai-primary:     #7A6E94;
    --ai-secondary:   #A8475F;
    --ai-gradient:    linear-gradient(135deg, #4A82A0 0%, #A8475F 100%);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:       0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-md:    0 6px 16px rgba(0, 0, 0, 0.50);
    --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.60);
    --shadow-card:  0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-brand: 0 0 24px rgba(122, 110, 148, 0.30);
    --focus-ring:   0 0 0 3px rgba(122, 110, 148, 0.30);

    /* ===== Compatibility aliases (dark) =====
       Ті самі імена, що й у :root вище — тут вони перерахований на темні токени.
       Історія: блок з'явився спочатку ТІЛЬКИ тут, щоб полагодити «білі картки
       на темному», а світлу тему лишили без аліасів — вважалось, що компоненти
       мають власні фолбеки. 19.08.2026 з'ясувалось, що не мають (73 місця без
       фолбека), і дзеркальний блок додано в :root. Тримати обидва списки
       синхронними: додав ім'я сюди — додай і туди.
       (var() обчислюється в місці використання, а кастомні властивості
       успадковуються, тож аліас на html[data-theme="dark"] дістає всіх нащадків.) */
    --card-bg:        var(--bg-card);
    --card:           var(--bg-card);
    --surface:        var(--bg-card);
    --surface-subtle: var(--bg-soft);
    --surface-hover:  var(--bg-hover);
    --bg-tertiary:    var(--bg-active);
    --sidebar-bg:     var(--bg-sidebar);
    --paper:          var(--bg-soft);
    --border-color:   var(--border);
    --muted:          var(--text-muted);
    --error:          var(--danger);
    --secondary:      var(--brand-warm);
    --primary-dark:   var(--primary-hover);
    --success-bg:     var(--success-light);
    --success-hover:  #5CA576;
    --accent-warm:       var(--brand-warm);
    --accent-warm-light: var(--danger-light);

    color-scheme: dark;
}