/* ============================================================
   Varta CRM — Design Tokens
   Single source of truth for all colours, spacing, radius,
   shadows and z-indices. Every component references these.
   ============================================================ */

:root {
    /* ── Typography ── */
    --font-heading: 'Upmyth', 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-brand: 'Upmyth', 'Outfit', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Core colour palette (Forest Green) ── */
    --color-primary: #004227;
    /* Forest Green */
    --color-on-primary: #ffffff;
    --color-primary-container: #e8f5e0;
    /* Light green */
    --color-on-primary-container: #004227;
    --color-primary-fixed: #C0FFA5;
    /* Lime Green */
    --color-primary-fixed-dim: #9ef087;
    --color-on-primary-fixed: #001a0e;
    --color-on-primary-fixed-variant: #00351e;
    --color-inverse-primary: #6ad05a;

    --color-secondary: #1a6b48;
    /* Mid Forest Green */
    --color-on-secondary: #ffffff;
    --color-secondary-container: #C0FFA5;
    /* Lime Green */
    --color-on-secondary-container: #004227;
    --color-secondary-fixed: #C0FFA5;
    --color-secondary-fixed-dim: #9ef087;
    --color-on-secondary-fixed: #001a0e;
    --color-on-secondary-fixed-variant: #004227;

    --color-tertiary: #7c3aed;
    /* Violet-600 */
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #f5f3ff;
    /* Violet-50 */
    --color-on-tertiary-container: #5b21b6;
    /* Violet-800 */
    --color-tertiary-fixed: #ede9fe;
    /* Violet-100 */
    --color-tertiary-fixed-dim: #ddd6fe;
    /* Violet-200 */
    --color-on-tertiary-fixed: #4c1d95;
    /* Violet-900 */
    --color-on-tertiary-fixed-variant: #6d28d9;
    /* Violet-700 */

    --color-error: #ef4444;
    /* Red-500 */
    --color-on-error: #ffffff;
    --color-error-container: #fee2e2;
    /* Red-100 */
    --color-on-error-container: #991b1b;
    /* Red-800 */

    /* ── Surface Neutrals (Slate scale) ── */
    --color-background: #f8fafc;
    /* Slate-50 */
    --color-on-background: #0f172a;
    /* Slate-900 */
    --color-surface: #ffffff;
    --color-on-surface: #0f172a;
    /* Slate-900 */
    --color-surface-variant: #f1f5f9;
    /* Slate-100 */
    --color-on-surface-variant: #475569;
    /* Slate-600 */
    --color-surface-bright: #ffffff;
    --color-surface-dim: #e2e8f0;
    /* Slate-200 */
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f8fafc;
    /* Slate-50 */
    --color-surface-container: #f1f5f9;
    /* Slate-100 */
    --color-surface-container-high: #e2e8f0;
    /* Slate-200 */
    --color-surface-container-highest: #cbd5e1;
    /* Slate-300 */
    --color-surface-tint: #004227;
    --color-inverse-surface: #1e293b;
    /* Slate-800 */
    --color-inverse-on-surface: #f8fafc;

    --color-outline: #64748b;
    /* Slate-500 */
    --color-outline-variant: #e2e8f0;
    /* Slate-200 */

    /* ── Status badge tokens ── */
    --badge-hot-bg: #fee2e2;
    --badge-hot-text: #991b1b;
    --badge-warm-bg: #f5f3ff;
    --badge-warm-text: #5b21b6;
    --badge-new-bg: #d1fae5;
    --badge-new-text: #065f46;
    --badge-contacted-bg: #e0e7ff;
    --badge-contacted-text: #1e1b4b;
    --badge-converted-bg: #ccfbf1;
    --badge-converted-text: #115e59;
    --badge-closed-bg: #f1f5f9;
    --badge-closed-text: #475569;
    --badge-pending-bg: #e2e8f0;
    --badge-pending-text: #475569;
    --badge-approved-bg: #d1fae5;
    --badge-approved-text: #065f46;
    --badge-sent-bg: #e0e7ff;
    --badge-sent-text: #1e1b4b;
    --badge-whatsapp-bg: #dcfce7;
    --badge-whatsapp-text: #15803d;
    --badge-profile-created-bg: #f5f3ff;
    --badge-profile-created-text: #5b21b6;

    /* ── Spacing scale ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ── Modern border radius ── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* ── Modern Soft Shadows ── */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.1), 0 1px 2px -1px rgba(15, 23, 42, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);

    /* ── Layout ── */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 68px;
    --header-height: 64px;
    --transition-speed: 0.2s;

    /* ── Z-index ladder ── */
    --z-dropdown: 900;
    --z-header: 940;
    --z-sidebar: 950;
    --z-modal: 9000;
    --z-toast: 9999;

    /* ── Icon chip colour palette (used in stat cards, dashboard, badges) ── */
    --color-icon-indigo-bg: #e0e7ff;
    --color-icon-indigo-fg: #4f46e5;
    --color-icon-green-bg: #dcfce7;
    --color-icon-green-fg: #16a34a;
    --color-icon-blue-bg: #dbeafe;
    --color-icon-blue-fg: #2563eb;
    --color-icon-teal-bg: #d1fae5;
    --color-icon-teal-fg: #059669;
    --color-icon-amber-bg: #fef3c7;
    --color-icon-amber-fg: #d97706;
    --color-icon-red-bg: #fee2e2;
    --color-icon-red-fg: #dc2626;
    --color-icon-purple-bg: #f3e8ff;
    --color-icon-purple-fg: #9333ea;
    --color-icon-orange-bg: #ffedd5;
    --color-icon-orange-fg: #ea580c;
    --color-icon-pink-bg: #fce7f3;
    --color-icon-pink-fg: #db2777;
    --color-icon-yellow-bg: #fef9c3;
    --color-icon-yellow-fg: #ca8a04;
    --color-icon-cyan-bg: #cffafe;
    --color-icon-cyan-fg: #0891b2;

    /* ── Brand colours ── */
    --color-brand-whatsapp: #25D366;
    --color-brand-meta: #1877F2;
    --color-brand-ivr: #f59e0b;

    /* ── Typography scale ── */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    /* ── Custom Scrollbar Tokens (Light Mode) ── */
    --scrollbar-thumb: #004227; /* Dark green line */
    --scrollbar-thumb-hover: #002817; /* Deeper dark green on hover */
    --scrollbar-track: transparent;

    /* ── Additional status badge tokens (call log, webhook events) ── */
    --badge-inbound-bg: #dcfce7;
    --badge-inbound-text: #15803d;
    --badge-outbound-bg: #dbeafe;
    --badge-outbound-text: #1d4ed8;
    --badge-answered-bg: #dcfce7;
    --badge-answered-text: #15803d;
    --badge-missed-bg: #fee2e2;
    --badge-missed-text: #b91c1c;
    --badge-busy-bg: #fef9c3;
    --badge-busy-text: #a16207;
    --badge-no-answer-bg: #fef3c7;
    --badge-no-answer-text: #b45309;
    --badge-active-bg: #dbeafe;
    --badge-active-text: #1d4ed8;
    --badge-source-meta-bg: #dbeafe;
    --badge-source-meta-text: #1d4ed8;
    --badge-source-wa-bg: #dcfce7;
    --badge-source-wa-text: #15803d;
    --badge-source-ivr-bg: #fef3c7;
    --badge-source-ivr-text: #b45309;
    --badge-duplicate-bg: #f3e8ff;
    --badge-duplicate-text: #6d28d9;
    --badge-failed-bg: #fee2e2;
    --badge-failed-text: #b91c1c;
    --badge-rejected-bg: #fee2e2;
    --badge-rejected-text: #b91c1c;
    --badge-normalizing-bg: #dbeafe;
    --badge-normalizing-text: #1d4ed8;
    --badge-normalized-bg: #dcfce7;
    --badge-normalized-text: #15803d;

    /* ── Legacy variable aliases ── */
    --text-primary: var(--color-on-surface);
    --text-secondary: var(--color-on-surface-variant);
    --surface-color: var(--color-surface-container-lowest);
    --border-color: var(--color-outline-variant);
    --primary-color: var(--color-primary);
    --primary-accent: var(--color-primary);
    --font-heading: var(--font-body);
    --bg-color: var(--color-surface-container-low);
    --text-dark: var(--color-on-surface);
    --primary-hover: var(--color-primary);

    /* ── Chat Theme Tokens ── */
    --color-background-chat: #efeae2;
    --bg-image-chat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><circle cx='10' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='10' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='25' cy='25' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='55' cy='25' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='10' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='40' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='25' cy='55' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='55' cy='55' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='10' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='40' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/><circle cx='70' cy='70' r='1.2' fill='%23c9bfb5' opacity='0.55'/></svg>");
    --color-chat-bubble-inbound: #ffffff;
    --color-chat-text-inbound: #111b21;
    --color-chat-time-inbound: #8696a0;
    --color-chat-bubble-outbound: #d9fdd3;
    --color-chat-text-outbound: #111b21;
    --color-chat-time-outbound: #667781;
}

/* ============================================================
   DARK MODE TOKEN OVERRIDES
   Automatically applied when document root has [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
    /* ── Core colour palette overrides ── */
    --color-primary: #6ad05a;
    /* Lime-400 for dark bg */
    --color-on-primary: #001a0e;
    --color-primary-container: #003520;
    /* Deep forest */
    --color-on-primary-container: #C0FFA5;
    /* Lime Green */
    --color-primary-fixed: #003520;
    --color-primary-fixed-dim: #004227;
    --color-on-primary-fixed: #C0FFA5;
    --color-on-primary-fixed-variant: #9ef087;
    --color-inverse-primary: #004227;

    --color-secondary: #9ef087;
    /* Light lime */
    --color-on-secondary: #001a0e;
    --color-secondary-container: #003520;
    --color-on-secondary-container: #C0FFA5;

    --color-tertiary: #a78bfa;
    /* Violet-400 */
    --color-on-tertiary: #0f172a;
    --color-tertiary-container: #4c1d95;
    /* Violet-900 */
    --color-on-tertiary-container: #ede9fe;
    /* Violet-100 */

    --color-error: #f87171;
    /* Red-400 */
    --color-on-error: #7f1d1d;
    --color-error-container: #7f1d1d;
    --color-on-error-container: #fee2e2;

    /* ── Surface Neutrals overrides ── */
    --color-background: #0b0f19;
    /* Very deep dark space */
    --color-on-background: #f8fafc;
    /* Slate-50 */
    --color-surface: #111827;
    /* Slate-900 */
    --color-on-surface: #f8fafc;
    --color-surface-variant: #1f2937;
    /* Slate-800 */
    --color-on-surface-variant: #94a3b8;
    /* Slate-400 */
    --color-surface-bright: #1f2937;
    --color-surface-dim: #0f172a;
    --color-surface-container-lowest: #0e131f;
    /* Clean pitch black-blue */
    --color-surface-container-low: #151c2c;
    --color-surface-container: #1e293b;
    /* Slate-800 */
    --color-surface-container-high: #334155;
    /* Slate-700 */
    --color-surface-container-highest: #475569;
    /* Slate-600 */
    --color-surface-tint: #6ad05a;
    --color-inverse-surface: #f8fafc;
    --color-inverse-on-surface: #0f172a;

    --color-outline: #475569;
    /* Slate-600 */
    --color-outline-variant: #1e293b;
    /* Slate-800, soft borders */

    /* ── Status badge overrides ── */
    --badge-hot-bg: #7f1d1d;
    --badge-hot-text: #fca5a5;
    --badge-warm-bg: #4c1d95;
    --badge-warm-text: #ddd6fe;
    --badge-new-bg: #064e3b;
    --badge-new-text: #a7f3d0;
    --badge-contacted-bg: #1e1b4b;
    --badge-contacted-text: #c7d2fe;
    --badge-converted-bg: #115e59;
    --badge-converted-text: #99f6e4;
    --badge-closed-bg: #334155;
    --badge-closed-text: #cbd5e1;
    --badge-pending-bg: #1e293b;
    --badge-pending-text: #94a3b8;
    --badge-approved-bg: #064e3b;
    --badge-approved-text: #a7f3d0;
    --badge-sent-bg: #1e1b4b;
    --badge-sent-text: #c7d2fe;
    --badge-whatsapp-bg: #14532d;
    --badge-whatsapp-text: #86efac;
    --badge-profile-created-bg: #4c1d95;
    --badge-profile-created-text: #ddd6fe;

    /* ── Icon chip overrides ── */
    --color-icon-indigo-bg: #1e1b4b;
    --color-icon-indigo-fg: #818cf8;
    --color-icon-green-bg: #064e3b;
    --color-icon-green-fg: #4ade80;
    --color-icon-blue-bg: #172554;
    --color-icon-blue-fg: #60a5fa;
    --color-icon-teal-bg: #115e59;
    --color-icon-teal-fg: #2dd4bf;
    --color-icon-amber-bg: #451a03;
    --color-icon-amber-fg: #fbbf24;
    --color-icon-red-bg: #450a0a;
    --color-icon-red-fg: #f87171;
    --color-icon-purple-bg: #3b0764;
    --color-icon-purple-fg: #c084fc;
    --color-icon-orange-bg: #431407;
    --color-icon-orange-fg: #fb923c;
    --color-icon-pink-bg: #500724;
    --color-icon-pink-fg: #f472b6;
    --color-icon-yellow-bg: #3f2f0c;
    --color-icon-yellow-fg: #facc15;
    --color-icon-cyan-bg: #083344;
    --color-icon-cyan-fg: #22d3ee;

    /* ── Chat Theme Tokens (Dark Mode Overrides) ── */
    --color-background-chat: #0b0f19;
    --bg-image-chat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%231e293b' opacity='0.15'/></svg>");
    --color-chat-bubble-inbound: #1e293b;
    --color-chat-text-inbound: #f8fafc;
    --color-chat-time-inbound: #94a3b8;
    --color-chat-bubble-outbound: #052e16;
    --color-chat-text-outbound: #dcfce7;
    --color-chat-time-outbound: #86efac;

    /* ── Custom Scrollbar Tokens (Dark Mode) ── */
    --scrollbar-thumb: rgba(106, 208, 90, 0.55);
    /* Subtle theme green line */
    --scrollbar-thumb-hover: #6ad05a;
    /* Bright theme green on hover */
    --scrollbar-track: transparent;
}

/* ============================================================
   GLOBAL SCROLLBAR STYLING
   - Non-Hover (Resting): Thin line with 5px right-side margin/spacing
   - Hover State: Expands to 10px thick bar for easy pick & scroll
   ============================================================ */

/* Firefox standard scrollbar (fallback when webkit scrollbar is not supported) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }
}

/* Chromium / WebKit (Chrome, Edge, Safari, Opera, Brave) */
::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Non-Hover: Ultra-thin 2.5px line with right spacing ── */
::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    background-clip: padding-box;
    border: 3.5px solid transparent;
    border-right: 4px solid transparent;
    border-radius: 9999px;
    transition: border 0.15s ease, background-color 0.15s ease;
}

/* ── Hover: Moderate 4.5px - 5px thickness (half of previous 9px) ── */
::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    border: 2.5px solid transparent;
    border-right: 3px solid transparent;
    background-color: var(--scrollbar-thumb-hover);
}

/* ── Active / Dragging State ── */
::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
    border: 2px solid transparent;
    border-right: 2.5px solid transparent;
    background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}
    background: transparent;
}