/* ============================================================ * CRM-ALL Platform — themes.css * * Палітри як data-theme на . Комбінується з data-bs-theme * (платформенний light/dark — НЕ перевизначаємо механізм). * * АРХІТЕКТУРА (рішення користувача 2026-06): * • ДЕНЬ — 4 РІЗНІ палітри: [data-theme="default|corporate|spring|pink"] * (+ елемент-акценти кожної — лише :not([data-bs-theme="dark"])). * • НІЧ — ОДНА спільна для ВСІХ: html[data-bs-theme="dark"] (comfort-navy). * Per-палітрових нічних блоків НЕМАЄ. html-префікс (0,1,1) перебиває * денні [data-theme="X"] (0,1,0) у нічному режимі. * * Підключається ПІСЛЯ components.css, ПЕРЕД модульними CSS. * ============================================================ */ /* FullCalendar 6 читає власні --fc-* змінні (дефолти = білий/сірі, фіксовані бордюри). Мапимо їх на токени теми ТУТ (а не в calendar.css), бо themes.css завжди завантажений у shell → сітка календаря слідує за палітрою навіть на SPA-переході, незалежно від таймінгу calendar.css. Токени --color-background-* дефінуються per-palette нижче + база. */ .fc { --fc-page-bg-color: var(--color-background-primary); --fc-neutral-bg-color: var(--color-background-secondary); --fc-border-color: var(--color-border-tertiary); --fc-today-bg-color: var(--color-background-info, rgba(77,143,204,.10)); --fc-neutral-text-color: var(--color-text-secondary); } /* Явний НЕПРОЗОРИЙ фон КОРЕНЯ календаря + скрол-поверхонь FC: клітинки FC прозорі, тож без цього крізь них просвічує body --board-bg. На corporate (світлий primary #fbfdff vs синій board #c5d6ec) це давало «темну синю сітку» на SPA до релоаду. Фарбуємо і сам #calendar/.fc (корінь), щоб body взагалі не міг просвітити. Тут (themes.css, завжди завантажений) — стабільно на SPA, незалежно від calendar.css. */ .cal-layout, .cal-main, #calendar, .fc, .fc .fc-view, .fc .fc-scrollgrid, .fc .fc-scroller, .fc .fc-daygrid-body, .fc-view-harness { background-color: var(--color-background-primary); } /* ============================================================ * ТЕМА 1: default (базова — explicit override, щоб точно перебити будь-який scroll-down) * ============================================================ */ [data-theme="default"] { /* Kanban / slide-over surface vars — користуються .kb-col-head, .kb-card, .slide-over */ --kb-col-bg: #f4f3ef; --kb-col-head-bg: #e0ddd9; --kb-card-bg: #ffffff; --kb-card-border: rgba(0,0,0,.07); --kb-board-bg: #f4f3ef; --so-bg: #ffffff; --so-border: rgba(0,0,0,.07); --kb-bg-primary: #ffffff; --kb-bg-secondary: #f7f6f3; --kb-bg-board: #f4f3ef; --kb-text-primary: #0f0e0b; --kb-text-secondary: #3a3834; /* насиченіше (типографіка-аудит 2026-07) */ --kb-text-tertiary: #62605a; /* насиченіше — текст на картках/колонках */ --kb-border: #d8d6d0; --kb-border-secondary: #b8b6ae; --kb-color-info: #378ADD; --kb-color-success: #1D9E75; --kb-color-warning: #BA7517; --kb-color-danger: #E24B4A; --surface: #ffffff; --bg-soft: #f7f6f3; --text: #0f0e0b; --muted: #4a4845; --border: #d8d6d0; } /* ============================================================ * ТЕМА 2: corporate (B2B matte — велюрова замшева темно-синя) * * Matte effect: solid muted blue-grey surfaces (без translucency, без * backdrop-filter, без inner highlights). Колір поглинає світло — * відчуття замші/velvet. Borders майже зливаються з фоном, shadows * м'які з low opacity. Раніше була "Liquid Glass" з rgba()+blur, що * провокувало jank на animations. * ============================================================ */ [data-theme="corporate"] { --sb-bg: #1f3050; --board-bg: #c5d6ec; /* body/page bg — clear matte light blue */ --kb-board-bg: #c5d6ec; /* .kb-board контейнер (інша змінна!) — синхр з --board-bg */ --accent: #1a5fbf; --sb-active: rgba(255,255,255,.12); --sb-active-c: #aacaff; /* Matte blue hierarchy: board (saturated blue) → col-head → cards (lightest blue-white). Більше синяви в saturation замість blue-grey desaturated tint. */ --color-background-primary: #fbfdff; /* поверхні (журнали/календар/картки): ~90% до білого, ледь блакитний */ --color-background-secondary: #d6e2f0; /* col-heads — medium blue */ --color-background-tertiary: #c5d6ec; --color-border-secondary: #b8c8de; --color-border-tertiary: #d6e2f0; /* Картки/колонки/текст канбану — раніше падали на default (білі картки, темний текст). Тепер блакитна ієрархія: board #c5d6ec → col #d6e2f0 → card #eaf0f8, текст — navy. */ --kb-col-bg: #d6e2f0; --kb-card-bg: #fbfdff; /* картки: ~90% до білого, ледь-ледь блакитний відтінок */ --kb-card-border: rgba(21,35,58,.12); --kb-text-primary: #15233a; --kb-text-secondary: #43536b; --kb-text-tertiary: #7a8aa0; --kb-border: #b8c8de; --surface: #fbfdff; --bg-soft: #d6e2f0; --text: #15233a; --muted: #5a6a80; --border: #b8c8de; /* Soft matte shadows — низька opacity, великий blur */ --shadow-sm: 0 1px 2px rgba(30,60,120,.04); --shadow-md: 0 4px 12px rgba(30,60,120,.06); --shadow-lg: 0 8px 24px rgba(30,60,120,.08); } /* .kb-col-head на Corporate light — solid matte blue (override базового rgba overlay) для clean blue hierarchy: board → head → card з visible distinction. */ [data-theme="corporate"]:not([data-bs-theme="dark"]) .kb-col-head { background: var(--color-background-secondary); border-color: var(--color-border-tertiary); } /* ============================================================ * ЄДИНА НІЧНА ТЕМА для ВСІХ палітр (рішення: одна ніч, різні дні). * Базована на comfort-corporate (matte navy, м'який off-white текст). * html[data-bs-theme="dark"] (0,1,1) перебиває денні [data-theme="X"] (0,1,0); * per-палітрові нічні блоки ВИДАЛЕНО. Денні палітри лишаються різні. * ============================================================ */ html[data-bs-theme="dark"] { /* НЕЙТРАЛЬНО-темна ніч (Google-style, 2026-07): навʼю замінено на cool-neutral greys. Синій АКЦЕНТ + семантичні кольори лишаються. L-ієрархія board→col→card збережена (кроки ~+5 L для velvet-глибини). */ --sb-bg: #161719; /* sidebar — найтемніший */ --board-bg: #1a1b1d; /* page/board bg */ --kb-board-bg: #1a1b1d; --kb-bg-board: #1a1b1d; --accent: #60aaee; /* синій акцент лишається */ --color-primary: #2f6fd0; /* primary-кнопки вночі — єдині для всіх палітр */ --so-bg: #26272a; --so-border: rgba(255,255,255,.12); --sb-active: rgba(96,170,238,.18); --sb-active-c: #60aaee; --color-background-primary: #2c2d30; /* картки — найсвітліший matte */ --color-background-secondary: #26272a; /* col-heads, secondary surfaces */ --color-background-tertiary: #202123; /* Рамки/сітка — ЧІТКО світліші за поверхні (інакше лінії зливаються з клітинками, як сталося при нейтралізації: #2e2f32 border ≈ #2c2d30 cell → сітки не видно). */ --color-border-secondary: #494b51; --color-border-tertiary: #3b3d42; /* Phase 11.dark: explicit kb-card vars (Corporate інакше fallback'нув на --surface). */ --kb-card-bg: #2c2d30; --kb-card-border: rgba(255,255,255,.14); --kb-col-bg: #202123; --kb-col-head-bg: #26272a; --kb-bg-primary: #2c2d30; /* Soft-white текст (нейтральний, без синього відтінку). */ --color-text-primary: #e6e7ea; --color-text-secondary: #9aa0a6; --color-text-tertiary: #74777d; /* Аліаси + явні --kb-* (щоб світлі значення денних палітр не протекли у ніч). */ --surface: #2c2d30; --bg-soft: #26272a; --text: #e6e7ea; --muted: #9aa0a6; --border: #494b51; --kb-bg-secondary: #26272a; --kb-text-tertiary: #74777d; --kb-border-secondary: #55575e; --kb-text-primary: #e6e7ea; --kb-text-secondary: #9aa0a6; --kb-border: #494b51; /* Matte shadows для dark — м'які, без sharp edges */ --shadow-sm: 0 1px 2px rgba(0,0,0,.20); --shadow-md: 0 4px 12px rgba(0,0,0,.25); --shadow-lg: 0 8px 24px rgba(0,0,0,.30); } /* .kb-col-head на Corporate dark — solid matte (override базового rgba overlay). Inheriting просто rgba(255,255,255,.03) overlay не даватиме чіткої velvet feel, solid color matches matte concept (board → head → card layering). */ [data-bs-theme="dark"] .kb-col-head { background: var(--color-background-secondary); border-color: var(--color-border-tertiary); } /* Corporate accent-specific button tints (як у Spring/Pink). */ [data-theme="corporate"]:not([data-bs-theme="dark"]) .kb-eye-btn.off { background: #dce8f8; border-color: #1a5fbf; color: #0c3a7c; } [data-theme="corporate"]:not([data-bs-theme="dark"]) .kb-pipeline-btn { border-color: #c2d0e8; color: #0d1f3c; } [data-theme="corporate"]:not([data-bs-theme="dark"]) .slide-over-tabs .nav-link.active { color: var(--accent); border-color: var(--accent); } /* ============================================================ * ТЕМА 3: spring (весна, зелений основний) * ============================================================ */ [data-theme="spring"] { --kb-col-bg: #e8f5e8; --kb-col-head-bg: #d4ecd4; --kb-card-bg: #fafefb; /* картки: ~90% до білого, ледь-ледь зелений відтінок */ --kb-card-border: rgba(26,61,40,.12); --kb-board-bg: #edf7ed; --so-bg: #f0f9f0; --so-border: rgba(26,61,40,.12); --kb-bg-primary: #ffffff; --kb-bg-secondary: #f2faf4; --kb-bg-board: #e8f5ec; --kb-bg-info: #ddf0ff; --kb-bg-success: #d0f0dc; --kb-bg-warning: #fff8d0; --kb-bg-danger: #fde8e8; --kb-text-primary: #1a3d28; --kb-text-secondary: #3a6848; --kb-text-tertiary: #6a9870; --kb-text-info: #0a4a7c; --kb-text-success: #0a4028; --kb-text-warning: #5a4006; --kb-text-danger: #8b1c1c; --kb-border: #b0d8b8; --kb-border-secondary: #78b888; --kb-color-info: #2a8a4a; --kb-color-success: #1a7a3a; --kb-color-warning: #e07820; --kb-color-danger: #d93030; --kb-radius-md: 8px; --kb-radius-lg: 14px; --surface: #ffffff; --bg-soft: #f2faf4; --text: #1a3d28; --muted: #3a6848; --border: #b0d8b8; /* СТРУКТУРНІ фони (сайдбар/тіло/--color-*) — БЕЗ них падали на default. */ --sb-bg: #163a24; --accent: #1a9e6f; --color-primary: #1a9e6f; /* +Нова угода / primary-кнопки — зелений (не синій default) */ --sb-active: rgba(255,255,255,.12); --sb-active-c: #9be0b8; --board-bg: #e8f3e8; --color-background-primary: #fafefb; /* поверхні (журнали/календар/картки): ~90% до білого, ледь зелений */ --color-background-secondary: #e0f0e4; --color-background-tertiary: #d4ecd4; --color-border-secondary: #b0d8b8; --color-border-tertiary: #cce8d0; } [data-theme="spring"]:not([data-bs-theme="dark"]) .kb-eye-btn.off, [data-theme="spring"]:not([data-bs-theme="dark"]) .btn-thin.primary, [data-theme="spring"]:not([data-bs-theme="dark"]) .f-btn.won { background: #d0f0dc; border-color: #2a8a4a; color: #0a4028; } [data-theme="spring"]:not([data-bs-theme="dark"]) .slide-over-tabs .nav-link.active { color: #2a8a4a; border-bottom-color: #2a8a4a; } [data-theme="spring"]:not([data-bs-theme="dark"]) .so-badge.stage { background: #d0f0dc; color: #0a4028; } /* ============================================================ * ТЕМА 4: pink (жіноча — рожевий/трояндовий акцент) * ============================================================ */ [data-theme="pink"] { --kb-col-bg: #f9dbe8; --kb-col-head-bg: #f4c8db; --kb-card-bg: #fffafc; /* картки: ~90% до білого, ледь-ледь рожевий відтінок */ --kb-card-border: rgba(120,20,60,.12); --kb-board-bg: #fce4ef; --so-bg: #fce4ef; --so-border: rgba(120,20,60,.12); --kb-bg-primary: #ffffff; --kb-bg-secondary: #fdeff5; --kb-bg-board: #f8e0ec; --kb-bg-info: #e8f0f8; --kb-bg-success: #d8f0e8; --kb-bg-warning: #fdf0d0; --kb-bg-danger: #fde8ee; --kb-text-primary: #4a1228; --kb-text-secondary: #8a3a5a; --kb-text-tertiary: #b06a85; --kb-text-info: #0c4a7c; --kb-text-success: #085041; --kb-text-warning: #633806; --kb-text-danger: #8b1c1c; --kb-border: #f0c0d5; --kb-border-secondary: #d888ac; --kb-color-info: #3f7fbf; --kb-color-success: #1a7a5a; --kb-color-warning: #c07020; --kb-color-danger: #d93030; --kb-radius-md: 6px; --kb-radius-lg: 12px; --surface: #ffffff; --bg-soft: #fdeff5; --text: #4a1228; --muted: #8a3a5a; --border: #f0c0d5; /* СТРУКТУРНІ фони (сайдбар/тіло/--color-*) — БЕЗ них падали на default. */ --sb-bg: #c23b80; /* сайдбар у колір кнопки, але м'якший/світліший (не глибокий темний) */ --accent: #db2777; --color-primary: #db2777; /* +Нова угода / primary — гарячий рожевий (Pink Panther / глянець) */ --sb-active: rgba(255,255,255,.22); /* активний пункт — світліша рожева плашка */ --sb-active-c: #ffffff; /* активний пункт меню — білий (читабельно на рожевому) */ --board-bg: #fce4ef; --color-background-primary: #fffafc; /* поверхні (журнали/календар/картки): ~90% до білого, ледь рожевий */ --color-background-secondary: #f7d6e5; --color-background-tertiary: #f2c2d8; --color-border-secondary: #f0c0d5; --color-border-tertiary: #f8dce8; } [data-theme="pink"]:not([data-bs-theme="dark"]) .kb-eye-btn.off { background: #fce0ec; border-color: #db2777; color: #8b1c4a; } [data-theme="pink"]:not([data-bs-theme="dark"]) .slide-over-tabs .nav-link.active { color: #db2777; border-bottom-color: #db2777; } [data-theme="pink"]:not([data-bs-theme="dark"]) .so-badge.stage { background: #fce0ec; color: #8b1c4a; } [data-theme="pink"]:not([data-bs-theme="dark"]) .kb-col-bar { background: linear-gradient(to right, #db2777, #f9a8d4); } /* Сайдбар Pink світліший (рожевий), тож підсилюємо білий текст меню — інакше напівпрозорі підписи (.55/.28) губляться на рожевому фоні. */ [data-theme="pink"] .crm-sb-item { color: rgba(255,255,255,.9); } [data-theme="pink"] .crm-sb-item:hover { color: #fff; background: rgba(255,255,255,.15); } [data-theme="pink"] .crm-sb-section { color: rgba(255,255,255,.6); } [data-theme="pink"] .crm-sb-tenant { color: rgba(255,255,255,.65); }