/* ============================================================================
   INOVIXIA DESIGN SYSTEM
   A token-driven theme engine. Everything — color, radius, spacing, glow —
   is a CSS variable on [data-theme]. Swap the attribute, reskin the whole app.
   Loaded AFTER Bootstrap so it wins without !important wars.
   ============================================================================ */

/* ---------- THEME: Midnight (default) — sleek dark SaaS ------------------- */
:root,
[data-theme="midnight"] {
    --bg: #080b14;
    --bg-2: #0d111c;
    --surface: #10151f;
    --surface-2: #151b28;
    --card: #161c2b;
    --card-hover: #1c2434;
    --elevated: #1f2838;
    --border: #232c3d;
    --border-soft: #1a2130;
    --border-strong: #2e3a4f;
    --text: #eef2f9;
    --text-dim: #94a3b8;
    --text-muted: #828fa6;
    --accent: #6366f1;
    --accent-hover: #7c7ff5;
    --accent-soft: rgba(99, 102, 241, 0.14);
    --accent-2: #a855f7;
    --grad: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --grad-text: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
    --green: #22c55e;
    --green-soft: rgba(34,197,94,0.14);
    --orange: #f59e0b;
    --orange-soft: rgba(245,158,11,0.14);
    --red: #ef4444;
    --red-soft: rgba(239,68,68,0.14);
    --cyan: #06b6d4;
    --cyan-soft: rgba(6,182,212,0.14);
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow: 0 8px 30px -8px rgba(0,0,0,0.55);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.7);
    --glow: 0 0 30px rgba(99,102,241,0.35);
    --glow-green: 0 0 24px rgba(34,197,94,0.35);
    --glow-red: 0 0 24px rgba(239,68,68,0.35);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Space Grotesk', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
}

/* ---------------------------------------------------------------------------
   SHELL ALIASES — the layout (MainLayout / NavMenu) was written against an
   --ix-* namespace that DIDN'T track the theme, which is why flipping themes
   did nothing to the shell. These map that namespace onto the live theme
   tokens. Because they reference --bg/--surface/etc (not fixed colors), they
   re-resolve automatically whenever [data-theme] changes. Applied via * so
   they cascade into scoped component stylesheets too.
   --------------------------------------------------------------------------- */
* {
    --ix-bg: var(--bg);
    --ix-surface: var(--surface);
    --ix-surface-2: var(--surface-2);
    --ix-card: var(--card);
    --ix-card-hover: var(--card-hover);
    --ix-border: var(--border);
    --ix-border-light: var(--border-strong);
    --ix-text: var(--text);
    --ix-text-dim: var(--text-dim);
    --ix-text-muted: var(--text-muted);
    --ix-accent: var(--accent);
    --ix-accent-2: var(--accent-2);
    --ix-accent-glow: var(--glow);
    --ix-green: var(--green);
    --ix-orange: var(--orange);
    --ix-red: var(--red);
    --ix-shadow: var(--shadow);
    --ix-space-1: var(--space-1);
    --ix-space-2: var(--space-2);
    --ix-space-3: var(--space-3);
    --ix-space-4: var(--space-4);
    --ix-space-5: var(--space-5);
    --ix-space-6: var(--space-6);
    --ix-space-7: var(--space-7);
    --ix-dur-fast: var(--dur-fast);
    --ix-dur-base: var(--dur-base);
    --ix-dur-slow: var(--dur-slow);
    --ix-transition: all 0.2s var(--ease);
}

/* ---------- THEME: Nebula — deep violet, warmer glow --------------------- */
[data-theme="nebula"] {
    --bg: #0a0714;
    --bg-2: #0f0a1c;
    --surface: #140e24;
    --surface-2: #1a1230;
    --card: #1c1435;
    --card-hover: #241a42;
    --elevated: #2a1f4d;
    --border: #2c1f4a;
    --border-soft: #1f1636;
    --border-strong: #3d2c63;
    --text: #f3eefb;
    --text-dim: #b3a4cf;
    --text-muted: #8d7eb2;
    --accent: #a855f7;
    --accent-hover: #bd6ffa;
    --accent-soft: rgba(168,85,247,0.16);
    --accent-2: #ec4899;
    --grad: linear-gradient(135deg,#a855f7 0%,#ec4899 100%);
    --grad-text: linear-gradient(135deg,#c084fc 0%,#f472b6 100%);
    --green: #22c55e;
    --green-soft: rgba(34,197,94,0.14);
    --orange: #fb923c;
    --orange-soft: rgba(251,146,60,0.14);
    --red: #f43f5e;
    --red-soft: rgba(244,63,94,0.14);
    --cyan: #22d3ee;
    --cyan-soft: rgba(34,211,238,0.14);
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow: 0 8px 30px -8px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.75);
    --glow: 0 0 30px rgba(168,85,247,0.4);
    --glow-green: 0 0 24px rgba(34,197,94,0.35);
    --glow-red: 0 0 24px rgba(244,63,94,0.35);
    --ease: cubic-bezier(0.4,0,0.2,1);
    --font: 'Space Grotesk','Manrope','Segoe UI',system-ui,sans-serif;
    --mono: 'JetBrains Mono','SF Mono',Monaco,Consolas,monospace;
}

/* ---------- THEME: Terminal — mission-control green on black ------------- */
[data-theme="terminal"] {
    --bg: #050807;
    --bg-2: #0a0f0c;
    --surface: #0b1210;
    --surface-2: #101a15;
    --card: #0f1a15;
    --card-hover: #14231c;
    --elevated: #183024;
    --border: #1c3327;
    --border-soft: #152619;
    --border-strong: #26543c;
    --text: #e6fff0;
    --text-dim: #8fbfa5;
    --text-muted: #6f9585;
    --accent: #10b981;
    --accent-hover: #14d497;
    --accent-soft: rgba(16,185,129,0.15);
    --accent-2: #06b6d4;
    --grad: linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
    --grad-text: linear-gradient(135deg,#34d399 0%,#22d3ee 100%);
    --green: #22c55e;
    --green-soft: rgba(34,197,94,0.15);
    --orange: #eab308;
    --orange-soft: rgba(234,179,8,0.15);
    --red: #f43f5e;
    --red-soft: rgba(244,63,94,0.15);
    --cyan: #06b6d4;
    --cyan-soft: rgba(6,182,212,0.15);
    --radius: 8px;
    --radius-sm: 5px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow: 0 8px 30px -8px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.75);
    --glow: 0 0 24px rgba(16,185,129,0.4);
    --glow-green: 0 0 24px rgba(34,197,94,0.4);
    --glow-red: 0 0 24px rgba(244,63,94,0.35);
    --ease: cubic-bezier(0.4,0,0.2,1);
    --font: 'Space Grotesk','Manrope','Segoe UI',system-ui,sans-serif;
    --mono: 'JetBrains Mono','SF Mono',Monaco,Consolas,monospace;
}

/* ---------- THEME: Arctic — clean light mode ---------------------------- */
[data-theme="arctic"] {
    --bg: #f4f6fb;
    --bg-2: #eef1f8;
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --card: #ffffff;
    --card-hover: #f5f7fc;
    --elevated: #ffffff;
    --border: #e2e8f2;
    --border-soft: #edf1f8;
    --border-strong: #cfd8e8;
    --text: #0f172a;
    --text-dim: #516280;
    --text-muted: #94a3b8;
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-soft: rgba(99,102,241,0.1);
    --accent-2: #a855f7;
    --grad: linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
    --grad-text: linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
    --green: #16a34a;
    --green-soft: rgba(22,163,74,0.1);
    --orange: #ea580c;
    --orange-soft: rgba(234,88,12,0.1);
    --red: #dc2626;
    --red-soft: rgba(220,38,38,0.1);
    --cyan: #0891b2;
    --cyan-soft: rgba(8,145,178,0.1);
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow: 0 8px 30px -12px rgba(15,23,42,0.15);
    --shadow-lg: 0 20px 50px -18px rgba(15,23,42,0.2);
    --glow: 0 0 0 3px rgba(99,102,241,0.15);
    --glow-green: 0 0 0 3px rgba(22,163,74,0.15);
    --glow-red: 0 0 0 3px rgba(220,38,38,0.15);
    --ease: cubic-bezier(0.4,0,0.2,1);
    --font: 'Space Grotesk','Manrope','Segoe UI',system-ui,sans-serif;
    --mono: 'JetBrains Mono','SF Mono',Monaco,Consolas,monospace;
}

/* ========================================================================== */
/*  GLOBAL RESET / BASE                                                        */
/* ========================================================================== */
body, .ix {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

    /* Scrollbars everywhere */
    .ix-scope ::-webkit-scrollbar,
    .ix ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .ix ::-webkit-scrollbar-track {
        background: transparent;
    }

    .ix ::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 4px;
    }

        .ix ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

/* ---------- Typography helpers ------------------------------------------ */
.ix-h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.ix-h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

.ix-h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.ix-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.ix-gradient-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ix-mono {
    font-family: var(--mono);
}

.ix-dim {
    color: var(--text-dim);
}

.ix-muted {
    color: var(--text-muted);
}

/* ---------- Card -------------------------------------------------------- */
.ix-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}

.ix-card--hover:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.ix-card--glass {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.ix-card__pad {
    padding: 20px;
}

/* ---------- Surface/panel ---------------------------------------------- */
.ix-panel {
    background: linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
}

/* ---------- Buttons ---------------------------------------------------- */
.ix-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: all .18s var(--ease);
    text-decoration: none;
    white-space: nowrap;
}

    .ix-btn:hover {
        background: var(--card-hover);
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    .ix-btn:active {
        transform: translateY(0);
    }

.ix-btn--primary {
    background: var(--grad);
    border: none;
    color: #fff;
    box-shadow: var(--glow);
}

    .ix-btn--primary:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.ix-btn--ghost {
    background: transparent;
    border-color: var(--border);
}

.ix-btn--success {
    background: var(--green);
    border: none;
    color: #fff;
}

.ix-btn--danger {
    background: var(--red);
    border: none;
    color: #fff;
}

.ix-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

.ix-btn--icon {
    padding: 8px;
}

/* ---------- Inputs / selects ------------------------------------------- */
.ix-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ix-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}

.ix-input, .ix-select, .ix-textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

    .ix-input::placeholder, .ix-textarea::placeholder {
        color: var(--text-muted);
    }

    .ix-input:focus, .ix-select:focus, .ix-textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .ix-select option {
        background: var(--card);
        color: var(--text);
    }

.ix-search {
    position: relative;
}

    .ix-search .ix-input {
        padding-left: 38px;
    }

.ix-search__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* ---------- Badges / pills --------------------------------------------- */
.ix-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.ix-badge--green {
    background: var(--green-soft);
    color: var(--green);
    border-color: transparent;
}

.ix-badge--orange {
    background: var(--orange-soft);
    color: var(--orange);
    border-color: transparent;
}

.ix-badge--red {
    background: var(--red-soft);
    color: var(--red);
    border-color: transparent;
}

.ix-badge--accent {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

.ix-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ix-dot--pulse {
    animation: ix-pulse 1.8s infinite;
}

@keyframes ix-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .45;
        transform: scale(1.15)
    }
}

/* ---------- Stat tiles ------------------------------------------------- */
.ix-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(175px,1fr));
    gap: 16px;
}

.ix-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 20px 18px;
    position: relative;
    overflow: hidden;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.ix-stat:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

    .ix-stat::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--grad);
        border-radius: var(--radius) 0 0 var(--radius);
    }

    /* Subtle glow disc in top-right corner */
    .ix-stat::after {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--grad);
        opacity: .07;
        pointer-events: none;
    }

.ix-stat__icon {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 10px;
    opacity: .9;
}

.ix-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
}

.ix-stat__value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.ix-stat__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Colour variants for stat accent borders */
.ix-stat--green::before  { background: var(--green); }
.ix-stat--orange::before { background: var(--orange); }
.ix-stat--red::before    { background: var(--red); }
.ix-stat--cyan::before   { background: var(--cyan); }
.ix-stat--green::after   { background: var(--green); }
.ix-stat--orange::after  { background: var(--orange); }
.ix-stat--red::after     { background: var(--red); }
.ix-stat--cyan::after    { background: var(--cyan); }
.ix-stat--green  .ix-stat__icon { color: var(--green); }
.ix-stat--orange .ix-stat__icon { color: var(--orange); }
.ix-stat--red    .ix-stat__icon { color: var(--red); }
.ix-stat--cyan   .ix-stat__icon { color: var(--cyan); }
.ix-stat--green  .ix-stat__value { color: var(--green); }

/* ---------- TABLES — the good ones ------------------------------------- */
.ix-table-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .ix-table thead th {
        text-align: left;
        padding: 13px 16px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .ix-table tbody td {
        padding: 13px 16px;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border-soft);
    }

    .ix-table tbody tr {
        transition: background .15s var(--ease);
    }

        .ix-table tbody tr:hover {
            background: var(--card-hover);
        }

        .ix-table tbody tr:last-child td {
            border-bottom: none;
        }

    .ix-table td strong, .ix-table td .ix-primary {
        color: var(--text);
        font-weight: 600;
    }

/* ---------- Filter bar ------------------------------------------------- */
.ix-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

/* ---------- Toggle / segmented ----------------------------------------- */
.ix-segment {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

    .ix-segment button {
        padding: 7px 14px;
        border: none;
        background: transparent;
        color: var(--text-dim);
        border-radius: calc(var(--radius-sm) - 3px);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s var(--ease);
    }

        .ix-segment button.active {
            background: var(--grad);
            color: #fff;
        }

/* ---------- Theme switcher --------------------------------------------- */
.ix-theme-swatches {
    display: flex;
    gap: 8px;
}

.ix-swatch {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s var(--ease);
}

    .ix-swatch:hover {
        transform: scale(1.12);
    }

    .ix-swatch.active {
        border-color: var(--text);
    }

.ix-swatch--midnight {
    background: linear-gradient(135deg,#6366f1,#a855f7);
}

.ix-swatch--nebula {
    background: linear-gradient(135deg,#a855f7,#ec4899);
}

.ix-swatch--terminal {
    background: linear-gradient(135deg,#10b981,#06b6d4);
}

.ix-swatch--arctic {
    background: linear-gradient(135deg,#e2e8f2,#6366f1);
}

/* ---------- Entrance motion -------------------------------------------- */
@keyframes ix-rise {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.ix-rise {
    animation: ix-rise .35s var(--ease) both;
}

.ix-rise-2 {
    animation: ix-rise .35s var(--ease) .06s both;
}

.ix-rise-3 {
    animation: ix-rise .35s var(--ease) .12s both;
}

/* ==========================================================================
   BOOTSTRAP OVERRIDES — theme Bootstrap's own components app-wide.
   Most pages use raw .card/.table/.form-control with Bootstrap's light
   defaults, which is why they render as white boxes on the dark shell.
   Rather than rewrite every page, we repoint Bootstrap's classes at the
   theme tokens. Every page inherits the dark theme instantly, and it all
   flips with [data-theme].
   ========================================================================== */

/* --- Cards --- */
.card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

.card-header, .card-footer {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.card-title, .card-body, .card-text {
    color: var(--text) !important;
}

.card-subtitle, .text-muted, .form-text {
    color: var(--text-muted) !important;
}

/* --- Text colors --- */
.text-dark {
    color: var(--text) !important;
}

.text-secondary {
    color: var(--text-dim) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

/* --- Forms --- */
.form-control, .form-select, .input-group-text, textarea.form-control {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

    .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    .form-control:focus, .form-select:focus {
        background: var(--surface-2) !important;
        border-color: var(--accent) !important;
        color: var(--text) !important;
        box-shadow: 0 0 0 3px var(--accent-soft) !important;
    }

    .form-select option {
        background: var(--card);
        color: var(--text);
    }

.form-label {
    color: var(--text-dim) !important;
    font-weight: 500;
}

.form-check-input {
    background: var(--surface-2);
    border-color: var(--border);
}

    .form-check-input:checked {
        background: var(--accent);
        border-color: var(--accent);
    }

/* --- Tables --- */
.table {
    color: var(--text-dim) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-dim);
    border-color: var(--border) !important;
}

    .table > :not(caption) > * > * {
        background: transparent !important;
        border-bottom-color: var(--border-soft) !important;
        color: var(--text-dim) !important;
    }

    .table thead th, .table > thead > tr > th {
        background: var(--surface-2) !important;
        color: var(--text-muted) !important;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--border) !important;
    }

    .table tbody tr {
        transition: background .15s var(--ease);
    }

.table-hover > tbody > tr:hover > * {
    background: var(--card-hover) !important;
    color: var(--text) !important;
}

.table td strong, .table td b {
    color: var(--text);
}

.table-responsive {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* --- Buttons (keep Bootstrap structure, restyle) --- */
.btn-primary {
    background: var(--grad) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--glow);
}

    .btn-primary:hover {
        filter: brightness(1.08);
    }

.btn-success {
    background: var(--green) !important;
    border: none !important;
}

.btn-danger {
    background: var(--red) !important;
    border: none !important;
}

.btn-warning {
    background: var(--orange) !important;
    border: none !important;
    color: #fff !important;
}

.btn-info {
    background: var(--cyan) !important;
    border: none !important;
    color: #fff !important;
}

.btn-secondary {
    background: var(--card) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
}

.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

    .btn-outline-primary:hover {
        background: var(--accent) !important;
        color: #fff !important;
    }

.btn-outline-secondary {
    color: var(--text-dim) !important;
    border-color: var(--border-strong) !important;
}

    .btn-outline-secondary:hover {
        background: var(--card-hover) !important;
        color: var(--text) !important;
    }

.btn-outline-danger {
    color: var(--red) !important;
    border-color: var(--red) !important;
}

.btn-outline-light {
    color: var(--text-dim) !important;
    border-color: var(--border) !important;
}

.btn-light {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* --- Badges --- */
.badge.bg-success, .badge.bg-primary, .badge.bg-danger,
.badge.bg-warning, .badge.bg-info, .badge.bg-secondary {
    font-weight: 600;
}

.badge.bg-secondary {
    background: var(--surface-2) !important;
    color: var(--text-dim) !important;
}

/* --- Dropdowns / modals / list groups --- */
.dropdown-menu, .modal-content, .list-group-item, .offcanvas {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.dropdown-item {
    color: var(--text-dim) !important;
}

    .dropdown-item:hover {
        background: var(--card-hover) !important;
        color: var(--text) !important;
    }

.modal-header, .modal-footer {
    border-color: var(--border) !important;
}

/* --- Bootstrap modals: dark theme, roomier width, scrollable body --- */
.modal-content {
    background: var(--surface, #12151c) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
}
.modal-header {
    background: var(--surface-2, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-footer { background: var(--surface-2, transparent) !important; }
.modal-title { color: var(--text) !important; font-weight: 700; }
/* Scroll long forms inside the modal, with a visible scrollbar as the affordance. */
.modal-body { color: var(--text) !important; max-height: 72vh; overflow-y: auto; }
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 6px; }
/* Roomier than Bootstrap's skinny 500px default. */
.modal-dialog { max-width: 640px; }
.modal-dialog.modal-lg { max-width: 880px; }
.modal-dialog.modal-xl { max-width: 1120px; }
/* Dark inputs inside modals. */
.modal .form-control, .modal .form-select, .modal .form-control:focus, .modal .form-select:focus {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
.modal .form-control::placeholder { color: var(--text-muted) !important; }
.modal .form-label { color: var(--text-dim) !important; font-weight: 600; }
.modal .form-text { color: var(--text-muted) !important; }
/* Make the close (X) visible on a dark header. */
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.7); opacity: .8; }
.modal .btn-close:hover { opacity: 1; }
.modal .btn-close-white { filter: none; }

/* --- Misc surfaces --- */
.container-fluid, .container {
    color: var(--text);
}

.bg-white, .bg-light {
    background: var(--card) !important;
    color: var(--text) !important;
}

hr {
    border-color: var(--border);
}

.border {
    border-color: var(--border) !important;
}

.progress {
    background: var(--surface-2) !important;
}

.nav-tabs {
    border-color: var(--border);
}

    .nav-tabs .nav-link {
        color: var(--text-dim);
    }

        .nav-tabs .nav-link.active {
            background: var(--card) !important;
            border-color: var(--border) var(--border) var(--card) !important;
            color: var(--text) !important;
        }

.page-link {
    background: var(--card);
    border-color: var(--border);
    color: var(--text-dim);
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
}

.alert {
    border-color: var(--border);
}

/* ============================================================================
   IX-HEAD — the standard compact page header
   Global (not scoped) so any page can drop it in without the full IxPage wrapper.
   Replaces the per-page "hero" blocks: a marketing sentence + giant stat cards
   that pushed every actual tool below the fold. Identity, live counts, primary
   action — one row, ~56px.
   ============================================================================ */
.ix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.ix-head__id h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    color: var(--text);
}
.ix-head__id p { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); }

.ix-head__stats { display: flex; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; }
.ix-head__stat { display: flex; flex-direction: column; }
.ix-head__stat .v { font-family: var(--mono); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.ix-head__stat .k { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }

.ix-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ix-head__btn {
    display: inline-flex; align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 12px; font-weight: 600; font-family: var(--font);
    text-decoration: none; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ix-head__btn:hover { border-color: var(--border-strong); background: var(--card-hover); color: var(--text); }
.ix-head__btn.primary { background: var(--grad); border-color: transparent; color: #fff; }
.ix-head__btn.primary:hover { box-shadow: var(--glow); }

@media (max-width: 900px) {
    .ix-head__stats { margin-left: 0; order: 3; width: 100%; }
}

/* ============================================================================
   IX DESIGN SYSTEM — completing the half-built parts
   These classes were used across pages but defined NOWHERE, so they fell back to
   browser defaults: modals that dropped into page flow, unstyled icon buttons,
   giant h2 headings. Defining them here fixes every page that uses them at once.
   ============================================================================ */

/* ---- MODALS — the "form loads below the page" bug ----
   ix-modal-backdrop / ix-modal-shell / ix-modal were undefined, so create/edit
   forms on IVR, DNC, Recordings, Campaigns and Lists rendered in flow at the
   bottom instead of overlaying. These make them real centred overlays. */
.ix-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 80;
    animation: ix-fade 180ms var(--ease);
}
.ix-modal-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 81;
    width: min(560px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    animation: ix-pop 180ms var(--ease);
}
.ix-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.ix-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.ix-modal__header h2 { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.ix-modal__copy { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 var(--space-4); }
.ix-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

@keyframes ix-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ix-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- ICON BUTTONS — the ugly white squares in table action columns ---- */
.ix-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ix-icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--card-hover); }
.ix-icon-btn--danger:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* ---- BUTTON / STAT VARIANTS that were referenced but missing ---- */
.ix-btn--secondary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}
.ix-btn--secondary:hover { border-color: var(--border-strong); background: var(--card-hover); }
.ix-stat--accent { border-color: var(--accent); }
.ix-stat--accent .ix-stat__value { color: var(--accent-hover); }

/* ---- TOGGLE SWITCHES ---- */
.ix-toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ix-toggle-track {
    position: relative;
    width: 38px;
    height: 21px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    flex: none;
}
.ix-toggle-track::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 15px; height: 15px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ix-toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.ix-toggle-row input:checked + .ix-toggle-track { background: var(--accent); border-color: var(--accent); }
.ix-toggle-row input:checked + .ix-toggle-track::before { transform: translateX(17px); background: #fff; }

/* ---- TAME THE GIANT HEADINGS ----
   Every page had its own "*-section-title" h2 (undefined → default huge h2) and a
   "*-hero__title" marketing sentence. Substring selectors catch all variants at
   once and cut them down to a quiet panel label. !important because these live in
   per-page inline <style> that would otherwise win on cascade order. */
[class*="-section-title"],
h2[class$="section-title"] {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim) !important;
    margin: 0 0 2px !important;
}
[class*="hero__title"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--text) !important;
    max-width: none !important;
}

/* ---- permission matrix (Users edit modal) ---- */
.perm-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.perm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.perm-head-actions { display: flex; align-items: center; gap: var(--space-3); }
.perm-quick { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 11px; font-family: var(--font); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.perm-quick:hover { color: var(--text); border-color: var(--border-strong); }
.perm-count { font-size: 11px; color: var(--text-muted); font-family: var(--mono); }
.perm-group { margin-bottom: var(--space-3); }
.perm-group-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.perm-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.perm-toggle:hover { border-color: var(--border-strong); }
.perm-toggle.on { border-color: var(--accent); background: var(--accent-soft); }
.perm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-check { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border-strong); flex: none; position: relative; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.perm-toggle.on .perm-check { background: var(--accent); border-color: var(--accent); }
.perm-toggle.on .perm-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.perm-label { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Sortable table header (IxSortableTh) — shared by every table ── */
.ix-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
.ix-th__inner { display: inline-flex; align-items: center; gap: 6px; }
.ix-th__arrow { display: inline-flex; font-size: 12px; line-height: 1; }
.ix-th__arrow--dim { opacity: 0.35; }
.ix-th:hover { color: var(--accent); }
.ix-th--sorted, .ix-th--sorted .ix-th__arrow { color: var(--accent); }