/* ============================================================================
   NovoAbrasive CRM — Deep Navy Premium SaaS — Фаза 1: фундамент дизайн-системи.
   Завантажується ОСТАННІМ → перевизначає токени поверх style.css/cabinet.css.
   Підхід adapt-in-place: мапимо НАЯВНІ var-імена на палітру Deep Navy (зміна значень
   розходиться по всьому порталу, бо багато стилів через var()), + додаємо --novo-* / --font-* /
   --space-* для нових компонентів. Спека: docs/design/deep-navy-design-spec.md.
   Дарк-тему НЕ чіпаємо (Deep Navy = світла робоча зона + темний sidebar).
   ========================================================================== */

:root, [data-theme="light"] {
    /* ── палітра Deep Navy (нові імена для нових компонентів) ── */
    --novo-navy-950: #0F172A; --novo-navy-900: #111827; --novo-navy-850: #162033; --novo-navy-800: #1E293B;
    --novo-brand-navy: #1E3A5F;
    --novo-blue-600: #2563EB; --novo-blue-500: #3B82F6; --novo-blue-100: #DBEAFE;
    --novo-gold-500: #F5A623; --novo-gold-100: #FEF3C7;
    --novo-bg: #F8FAFC; --novo-surface: #FFFFFF; --novo-surface-soft: #F1F5F9;
    --novo-border: #E2E8F0; --novo-border-strong: #CBD5E1;
    --novo-text: #0F172A; --novo-text-secondary: #475569; --novo-text-muted: #64748B; --novo-text-disabled: #94A3B8;

    /* ── мапимо НАЯВНІ токени порталу → Deep Navy (так палітра змінюється всюди, де var()) ── */
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg: var(--bg-secondary);
    --bg-tertiary: #F1F5F9;
    --bg-hover: #F1F5F9;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --border-light: #F1F5F9;
    --border: var(--border-color);
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;
    --btn-primary: #2563EB;
    --btn-primary-hover: #1D4ED8;
    --success: #16A34A; --success-light: #DCFCE7;
    --warning: #F59E0B; --warning-light: #FEF3C7;
    --danger: #DC2626; --danger-light: #FEE2E2;
    --info: #06B6D4; --info-light: #CFFAFE;
    --bday: #7C3AED; --bday-light: #EDE9FE;

    /* ── sidebar Deep Navy ── */
    --sidebar-bg: #0F172A;
    --sidebar-text: #CBD5E1;
    --sidebar-active: #3B82F6;
    --sidebar-hover: rgba(255,255,255,0.06);

    /* ── мʼякі тіні Deep Navy ── */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 4px 12px rgba(15,23,42,0.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.05);
    --shadow-lg: 0 16px 40px rgba(15,23,42,0.10);
    --shadow-card: 0 8px 24px rgba(15,23,42,0.04);
    --shadow-popover: 0 16px 40px rgba(15,23,42,0.14);
    --shadow-modal: 0 24px 80px rgba(15,23,42,0.22);

    /* ── радіуси ── */
    --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px;

    /* ── типографіка (8px-шкала розмірів) ── */
    --font-xs: 12px; --font-sm: 13px; --font-base: 14px; --font-md: 15px; --font-lg: 16px; --font-xl: 18px; --font-2xl: 24px; --font-3xl: 32px; --font-4xl: 40px;

    /* ── spacing 8px-grid ── */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

    --transition: 160ms ease;
}

/* ── робоча зона ── */
body { background: var(--bg-primary); color: var(--text-primary); }

/* ── Sidebar: темно-синій градієнт ── */
.sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #111827 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.sidebar .nav-item { border-radius: 10px; transition: background var(--transition), color var(--transition); }
.sidebar .nav-item:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.sidebar .nav-item.active {
    background: rgba(37,99,235,0.16);
    color: #FFFFFF;
    border-left: 3px solid #3B82F6;
}

/* ── Картки: радіус 16 + мʼяка тінь ── */
.card, .cck-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}

/* ── Primary-кнопки (обидві системи: легасі .btn-primary + .cck-btn--primary) ── */
.btn-primary, .cck-btn--primary {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary:hover, .cck-btn--primary:hover {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37,99,235,0.22);
}
.btn-primary:active, .cck-btn--primary:active { transform: translateY(0); box-shadow: none; }

/* ── Поля вводу: фокус-кільце Deep Navy ── */
.form-input:focus, .cck-sheet__inp:focus, input.form-input:focus, textarea.form-input:focus, select.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    outline: none;
}

/* ── Фокус-кільце для доступності (кнопки/посилання за клавіатурою) ── */
.btn:focus-visible, .cck-btn:focus-visible, a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* ============================================================================
   Фаза 2 — КОМПОНЕНТИ (єдиний вигляд кнопок/полів/бейджів). Лише appearance, без зміни розмітки.
   ========================================================================== */

/* ── Кнопки: спільна основа (радіус/вага/перехід; висоту НЕ нав'язуємо, щоб не ламати щільні тулбари) ── */
.btn { border-radius: var(--radius-md); font-weight: 600; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn-sm, .cck-btn { border-radius: var(--radius-sm); }

/* secondary / outline — біла поверхня, нейтральна рамка */
.btn-outline, .btn-secondary {
    background: var(--novo-surface);
    border: 1px solid var(--novo-border-strong);
    color: var(--text-primary);
}
.btn-outline:hover, .btn-secondary:hover {
    background: var(--novo-surface-soft);
    border-color: #94A3B8;
}

/* ghost — прозора, проявляється на hover */
.btn-ghost, .cck-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover, .cck-btn--ghost:hover {
    background: var(--novo-surface-soft);
    color: var(--text-primary);
}

/* семантичні */
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }
.btn-success, .cck-btn--success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover, .cck-btn--success:hover { background: #15803D; border-color: #15803D; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background: #D97706; border-color: #D97706; }

/* ── Поля вводу/select: єдиний радіус + рамка ── */
.form-input, input.form-input, textarea.form-input, select.form-input, .cck-sheet__inp {
    border-radius: var(--radius-md);
    border: 1px solid var(--novo-border-strong);
    background: var(--novo-surface);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder, .cck-sheet__inp::placeholder { color: var(--novo-text-disabled); }

/* ── Статус-бейджі (pill) — єдина шкала кольорів (нові класи для майбутніх розділів) ── */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.badge-new { background: #E2E8F0; color: #334155; }
.badge-contacted, .badge-progress { background: #EDE9FE; color: #6D28D9; }
.badge-replied, .badge-won, .badge-success { background: #DCFCE7; color: #15803D; }
.badge-negotiation, .badge-warning { background: #FEF3C7; color: #B45309; }
.badge-lost, .badge-danger { background: #FEE2E2; color: #B91C1C; }
.badge-on-hold, .badge-muted { background: #F1F5F9; color: #64748B; }
.badge-hot { background: var(--novo-gold-100); color: #B45309; }

/* ── Топбар: уніфіковані кнопки навігації (були «веселка» хардкод-кольорів інлайном → нейтральні Deep Navy).
   !important бо стилі задані інлайном у index.html; емодзі-іконка лишається для впізнаваності. ── */
/* ⚠ Топбар БІЛИЙ → кнопки роблю СІРИМИ (surface-soft) з видимою рамкою, інакше біле-на-білому = «зникають». */
.topbar-nav-btn, .topbar-meet-btn {
    background: var(--novo-surface-soft) !important;   /* #F1F5F9 — світло-сіра пілюля, видима на білому топбарі */
    border: 1px solid var(--novo-border-strong) !important;  /* #CBD5E1 — чітка рамка */
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
}
.topbar-nav-btn:hover, .topbar-meet-btn:hover {
    background: #FFFFFF !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ============================================================================
   Фаза 3 — ТАБЛИЦІ (data-table/admin-table вже на токенах Deep Navy; додаємо рафінування зі спеки).
   ========================================================================== */
.data-table th, .admin-table th {
    background: var(--bg-primary);          /* світлий header */
    color: var(--text-muted);
    text-transform: none;                    /* без капсу — чистіше (Linear/Attio-стиль) */
    letter-spacing: 0;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}
.data-table td, .admin-table td { border-bottom: 1px solid var(--border-light); }
.data-table tbody tr:hover, .data-table tr.clickable-row:hover,
.admin-table tbody tr:hover, .admin-table tr:hover td { background: var(--bg-primary); }
/* обрана/підсвічена компанія */
.data-table tbody tr.is-selected, .data-table tbody tr.selected { background: var(--accent-light); }

/* ============================================================================
   Фаза 3 — МОДАЛКИ (преміум-полірування; вже на токенах Deep Navy).
   ========================================================================== */
.modal-content { border-radius: 20px; box-shadow: var(--shadow-modal); }
.modal-overlay { background: rgba(15,23,42,0.45); backdrop-filter: blur(6px); }
.modal-header { border-bottom: 1px solid var(--border-light); }
.modal-header h3 { font-weight: 650; letter-spacing: -0.01em; color: var(--text-primary); }