/* ═══════════════════════════════════════════════════════════════════════════ Agency Platform — система дизайну. ОДНЕ джерело правди для всього фронту. ЧОМУ ВОНА ЗʼЯВИЛАСЬ: у продукті жили дві незалежні дизайн-мови — кокпіт у рожево-синій гамі адмінки AML, редактор у navy+помаранч Godan. Перехід між вкладками міняв бренд цілком. Плюс 82 унікальні hex-кольори й 87 інлайнових style="" — кожен модуль малював власну картку, кнопку й бейдж. ПРИНЦИП: платформа МУЛЬТИКЛІЄНТСЬКА (Godan, AD Garage, AML), тому каркас продукту нейтральний, а колір клієнта приходить токеном --accent. Ставиш — і акцент стає фірмовим. Через це нову вітрину клієнта не треба перефарбовувати руками. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── каркас продукту: однаковий у всіх клієнтів ── */ --ink: #1b2440; --muted: #6b7186; --faint: #98a0b3; --bg-1: #eef1f8; --bg-2: #e6eaf4; --surface: #ffffff; --surface-2: #f6f8fc; --surface-3: #eef1f8; --line: #e4e8f1; --line-2: #eef0f6; /* ── акцент клієнта (перевизначається нижче за data-client) ── */ --accent: #2b8fc4; --accent-700: #1f6f9b; --accent-2: #e75a7f; --on-accent: #ffffff; /* ── семантика станів: ОДИН набір на весь продукт ── Раніше ці ж кольори були втричі продубльовані в calendar.js, cockpit-plan.js і plan.js — трьома різними наборами значень. */ --ok: #166534; --ok-bg: #f0fdf4; --ok-line: #bbf7d0; --info: #1d4ed8; --info-bg: #eff6ff; --info-line: #c7dbff; --warn: #b45309; --warn-bg: #fff7ed; --warn-line: #fcd9ae; --danger: #b91c1c; --danger-bg: #fef2f2; --danger-line: #fecaca; /* ── радіуси, тіні, ритм ── */ --rs: 9px; --r: 12px; --rl: 16px; --rx: 20px; --rr: 999px; --sh-sm: 0 1px 2px rgba(16, 24, 40, .06); --sh: 0 4px 14px rgba(27, 36, 64, .08); --sh-lg: 0 18px 44px rgba(27, 36, 64, .14); --ring: 0 0 0 3px rgba(43, 143, 196, .18); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* ── типографіка: один стек на весь продукт ── */ --font: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Space Grotesk', ui-monospace, monospace; } /* Акценти клієнтів. Нового клієнта додаєш одним блоком — решта UI підхоплює сама. */ body[data-client="godan-serwis"] { --accent: #232F68; --accent-700: #1b2450; --accent-2: #F37A20; --ring: 0 0 0 3px rgba(243, 122, 32, .18); } body[data-client="ad-garage"] { --accent: #0C1320; --accent-700: #05080f; --accent-2: #F37A20; --ring: 0 0 0 3px rgba(243, 122, 32, .18); } body[data-client="alex-media-lab"] { --accent: #2b8fc4; --accent-700: #1f6f9b; --accent-2: #e75a7f; } /* ── сумісність зі старими іменами ── Редактор і кокпіт написані на власних назвах змінних (--navy, --orange, --red, --blue, --bg1/--bg2). Замість того щоб перелопачувати ~90 місць і ризикувати зламати верстку, лишаємо мости: старі імена вказують на нові токени. Продукт стає одноманітним одразу, а перейменування можна робити поступово, файл за файлом. ⚠️ Аліаси оголошені на body, а НЕ на :root. Кастомна властивість обчислюється там, де оголошена: `:root{--navy:var(--accent)}` взяв би дефолтний акцент, бо клієнтський приходить лише на body — і фірмовий колір не доїхав би. */ body { --navy: var(--accent); --navy-700: var(--accent-700); --orange: var(--accent-2); --orange-600: var(--accent-700); --red: var(--accent-2); --blue: var(--accent); --bg: var(--bg-1); --bg1: var(--bg-1); --bg2: var(--bg-2); } /* ── база ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box } .ds-scope { font-family: var(--font); color: var(--ink) } a { color: inherit; text-decoration: none } /* ── кнопки ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--rs); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; line-height: 1.2; cursor: pointer; box-shadow: var(--sh-sm); transition: background .15s, border-color .15s, color .15s; } .btn:hover { border-color: #cfd6e6; background: var(--surface-2) } .btn:disabled { opacity: .45; cursor: default; box-shadow: none } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 2px 8px rgba(27, 36, 64, .22) } .btn-primary:hover { background: var(--accent-700); border-color: var(--accent-700) } .btn-accent { background: var(--accent-2); color: #fff; border-color: var(--accent-2) } .btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--muted) } .btn-ghost:hover { color: var(--ink); background: var(--surface-3) } .btn-danger { color: var(--danger); border-color: var(--danger-line) } .btn-danger:hover { background: var(--danger-bg); border-color: var(--danger) } .btn-warn { color: var(--warn); border-color: var(--warn-line) } .btn-warn:hover { background: var(--warn-bg); border-color: var(--warn) } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--s2) } .btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center } /* ── поверхні ─────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm) } .card-p { padding: var(--s4) } .card-hover { transition: box-shadow .15s, border-color .15s, transform .15s } .card-hover:hover { box-shadow: var(--sh); border-color: #d4dbea; transform: translateY(-1px) } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rl); padding: var(--s4) } /* ── заголовки секцій ─────────────────────────────────────────────────────── */ .sec { display: flex; align-items: center; gap: var(--s2); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: var(--s5) 0 11px; padding-top: var(--s4); border-top: 1px solid var(--line-2); } .sec:first-child { border-top: none; padding-top: 0; margin-top: 0 } .sec-note { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--faint) } .colh { display: flex; align-items: center; gap: var(--s2); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 2px 0 var(--s3); } .colh::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--accent-2) } /* ── поля вводу ───────────────────────────────────────────────────────────── */ .field { margin-bottom: 11px } .field > label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px } .input, input[type=text], input[type=url], input[type=datetime-local], select, textarea { width: 100%; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--rs); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); background: var(--surface); transition: border-color .12s, box-shadow .12s; } .input:hover, select:hover { border-color: #cfd6e6 } .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--ring) } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px } /* ── сегменти й перемикачі ────────────────────────────────────────────────── */ .seg { display: flex; gap: 3px; background: var(--surface-3); padding: 3px; border-radius: 10px; border: 1px solid var(--line-2) } .seg button { flex: 1; padding: 8px 6px; border: none; border-radius: var(--s2); background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .13s } .seg button:hover { color: var(--ink) } .seg button.on { background: var(--surface); color: var(--accent); box-shadow: var(--sh-sm) } .toggles { display: flex; flex-wrap: wrap; gap: 7px } .tg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--rs); border: 1px solid var(--line-2); background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; user-select: none } .tg.on { background: var(--surface); color: var(--accent); border-color: var(--accent); box-shadow: var(--sh-sm) } .tg input { margin: 0; accent-color: var(--accent-2); cursor: pointer } /* ── вкладки ──────────────────────────────────────────────────────────────── */ .tabs { display: inline-flex; gap: 3px; background: var(--surface-3); padding: 4px; border-radius: var(--r); border: 1px solid var(--line-2) } .tab { display: flex; align-items: center; gap: 6px; padding: 7px 15px; border: none; border-radius: var(--rs); background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s } .tab:hover { color: var(--ink) } .tab.on { background: var(--surface); color: var(--accent); box-shadow: var(--sh-sm) } /* ── статуси: єдині на весь продукт ───────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--rr); font-size: 11.5px; font-weight: 800; letter-spacing: .01em } .chip-ok { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line) } .chip-info { color: var(--info); background: var(--info-bg); border: 1px solid var(--info-line) } .chip-warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line) } .chip-danger { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line) } .chip-mute { color: var(--muted); background: var(--surface-3); border: 1px solid var(--line-2) } .dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--rr); flex: none } .dot-ok { background: var(--ok) } .dot-info { background: var(--info) } .dot-warn { background: var(--warn) } .dot-danger { background: var(--danger) } /* ── допоміжне ────────────────────────────────────────────────────────────── */ .muted { color: var(--muted) } .faint { color: var(--faint) } .mono { font-family: var(--font-mono) } .empty { padding: var(--s5); text-align: center; color: var(--muted); font-size: 13px } .stack { display: flex; flex-direction: column; gap: var(--s3) } .hstack { display: flex; align-items: center; gap: var(--s3) } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) } .scroll-x { overflow-x: auto; max-width: 100% } ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrollbar-thumb { background: #cfd6e6; border-radius: var(--s2); border: 2px solid transparent; background-clip: content-box } ::-webkit-scrollbar-thumb:hover { background: #b9c2d8; background-clip: content-box }