/*
 * theme.css — Vectra RealEstate Design System v2 (Premium)
 * Two themes: vectra (light) and vectra-dark
 *
 * IMPORTANT: DaisyUI v4 uses oklch() CSS variables.
 * Custom themes must override these exact variable names.
 *
 * Palette Philosophy:
 *  - Premium, high-contrast, content-first
 *  - Rich, saturated accent colors that pop
 *  - Subtle glassmorphism and depth layers
 *  - Light: Warm Slate base, White cards
 *  - Dark:  Deep Indigo base, Matte cards
 *
 * Typography System:
 *  - Font: Inter (300–900)
 *  - Base: 14px / 1.6
 *  - Scale: h1=1.5rem, h2=1.25rem, h3=1rem, body=0.875rem, caption=0.75rem
 */

/* ════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY — Single source of truth
   ════════════════════════════════════════════════════ */
:root {
    /* Font family stack */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Menlo', monospace;

    /* Base sizing */
    --text-base: 0.875rem;
    /* 14px — compact ERP */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.8125rem;
    /* 13px */
    --text-base-lg: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */

    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
}

html {
    font-family: var(--font-sans);
    font-size: 16px;
    /* rem anchor — do NOT change */
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    /* Inter stylistic sets */
    text-rendering: optimizeLegibility;
}

body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ── Heading scale ── */
h1 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--text-base-lg);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
}

/* ── Body text classes ── */
.text-sm,
small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* ── Monospace ── */
code,
pre,
kbd,
.font-mono {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}

/* ── Breadcrumbs consistent size ── */
.breadcrumbs {
    font-size: var(--text-sm);
}

/* ── Table body consistent ── */
.table {
    font-size: var(--text-sm);
}

.table th {
    font-size: var(--text-xs);
    text-transform: uppercase;
}

/* ── Button text ── */
.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-sm {
    font-size: var(--text-sm);
}

.btn-xs {
    font-size: var(--text-xs);
}

/* ── Badge text ── */
.badge {
    font-size: var(--text-xs);
    font-weight: 600;
}

.badge-sm {
    font-size: 0.65rem;
}

/* ── Form elements ── */
.input,
.select,
.textarea {
    font-size: var(--text-sm);
}

.label-text {
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Footer ── */
footer {
    font-size: var(--text-xs);
}

/* ════════════════════════════════════════════════════
   LIGHT THEME — "vectra"
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] {
    color-scheme: light;

    /* ── Primary: Indigo-600 (richer than Blue) ── */
    --p: 49% 0.22 270;
    /* #4F46E5 — Indigo-600 */
    --pc: 97% 0.01 270;

    /* ── Secondary: Violet-600 ── */
    --s: 54% 0.20 293;
    /* #7C3AED */
    --sc: 97% 0.01 293;

    /* ── Accent: Teal-500 ── */
    --a: 60% 0.15 180;
    /* #14B8A6 */
    --ac: 97% 0.01 180;

    /* ── Neutral: Slate-800 (sidebar) ── */
    --n: 24% 0.028 264;
    /* #1E293B */
    --nc: 92% 0.01 264;

    /* ── Base surfaces ── */
    --b1: 100% 0 0;
    /* White  — cards */
    --b2: 97.5% 0.006 248;
    /* #F8FAFC Slate-50 — page bg */
    --b3: 93% 0.012 248;
    /* #F1F5F9 Slate-100 — borders/inputs */
    --bc: 20% 0.025 264;
    /* #0F172A Slate-900 — body text */

    /* ── Status colors ── */
    --in: 56% 0.16 220;
    --inc: 97% 0.01 220;
    /* Info  Blue-500   */
    --su: 54% 0.17 155;
    --suc: 97% 0.01 155;
    /* Success Emerald  */
    --wa: 70% 0.18 62;
    --wac: 20% 0.04 62;
    /* Warning Amber    */
    --er: 52% 0.22 27;
    --erc: 97% 0.01 27;
    /* Error  Rose-600  */

    /* ── Radii ── */
    --rounded-box: 1rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 0.375rem;
    --tab-radius: 0.5rem;

    /* ── Animation ── */
    --animation-btn: 0.18s;
    --animation-input: 0.18s;
    --btn-focus-scale: 0.97;
}

/* ════════════════════════════════════════════════════
   DARK THEME — "vectra-dark"
   ════════════════════════════════════════════════════ */
[data-theme="vectra-dark"] {
    color-scheme: dark;

    /* ── Primary: Indigo-400 (brighter on dark) ── */
    --p: 65% 0.21 270;
    /* #818CF8 */
    --pc: 15% 0.02 270;

    /* ── Secondary: Violet-400 ── */
    --s: 68% 0.18 293;
    /* #A78BFA */
    --sc: 15% 0.02 293;

    /* ── Accent: Teal-400 ── */
    --a: 72% 0.15 180;
    /* #2DD4BF */
    --ac: 15% 0.02 180;

    /* ── Neutral: Slate-950 ── */
    --n: 11% 0.02 264;
    /* #020617 */
    --nc: 88% 0.012 264;

    /* ── Base surfaces ── */
    --b1: 18.5% 0.022 265;
    /* #0F172A Slate-900 — cards */
    --b2: 13% 0.018 265;
    /* #020617 Slate-950 — page bg */
    --b3: 23% 0.028 265;
    /* Slate-800 tone — dividers */
    --bc: 93% 0.008 264;
    /* #F1F5F9 Slate-100 — body text */

    /* ── Status colors — brighter for dark bg ── */
    --in: 62% 0.15 220;
    --inc: 97% 0.01 220;
    --su: 60% 0.16 155;
    --suc: 97% 0.01 155;
    --wa: 72% 0.17 62;
    --wac: 20% 0.04 62;
    --er: 58% 0.22 27;
    --erc: 97% 0.01 27;

    /* ── Radii ── */
    --rounded-box: 1rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 0.375rem;
    --tab-radius: 0.5rem;

    /* ── Animation ── */
    --animation-btn: 0.18s;
    --animation-input: 0.18s;
    --btn-focus-scale: 0.97;
}

/* ════════════════════════════════════════════════════
   SMOOTH THEME TRANSITIONS
   ════════════════════════════════════════════════════ */
html,
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.navbar,
aside,
.modal-box,
.dropdown-content,
.input,
.select,
.textarea,
.stat,
.badge,
.btn,
footer {
    transition: background-color 0.3s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}

/* Do NOT transition SVG or animated elements */
svg,
img,
[class*="animate-"],
[class*="loading"] {
    transition: none !important;
}

/* ════════════════════════════════════════════════════
   CUSTOM SCROLLBAR
   ════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

[data-theme="vectra"] ::-webkit-scrollbar-thumb {
    background: oklch(84% 0.012 248);
    border-radius: 99px;
}

[data-theme="vectra"] ::-webkit-scrollbar-thumb:hover {
    background: oklch(70% 0.02 264);
}

[data-theme="vectra-dark"] ::-webkit-scrollbar-thumb {
    background: oklch(28% 0.022 264);
    border-radius: 99px;
}

[data-theme="vectra-dark"] ::-webkit-scrollbar-thumb:hover {
    background: oklch(40% 0.04 264);
}

/* ════════════════════════════════════════════════════
   FOCUS RING — Accessible
   ════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid oklch(58% 0.21 270 / 0.55);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* ════════════════════════════════════════════════════
   PREMIUM CARD SYSTEM
   ════════════════════════════════════════════════════ */

/* Light: Subtle warm border + layered shadow */
[data-theme="vectra"] .card {
    border: 1px solid oklch(93% 0.008 264 / 0.8);
    box-shadow:
        0 1px 2px 0 rgb(0 0 0 / 0.04),
        0 4px 12px -2px rgb(0 0 0 / 0.06);
}

[data-theme="vectra"] .card:hover {
    box-shadow:
        0 2px 4px 0 rgb(0 0 0 / 0.05),
        0 8px 24px -4px rgb(0 0 0 / 0.08);
}

/* Dark: Glowy border + depth shadow */
[data-theme="vectra-dark"] .card {
    border: 1px solid oklch(26% 0.03 270 / 0.5);
    box-shadow:
        0 1px 2px 0 rgb(0 0 0 / 0.25),
        0 4px 12px -2px rgb(0 0 0 / 0.35),
        inset 0 1px 0 0 oklch(30% 0.02 270 / 0.15);
}

[data-theme="vectra-dark"] .card:hover {
    border-color: oklch(30% 0.04 270 / 0.6);
    box-shadow:
        0 2px 4px 0 rgb(0 0 0 / 0.3),
        0 12px 32px -4px rgb(0 0 0 / 0.4),
        inset 0 1px 0 0 oklch(35% 0.02 270 / 0.2);
}

/* ════════════════════════════════════════════════════
   STAT CARDS — Premium numerics
   ════════════════════════════════════════════════════ */
.stat {
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on stat cards */
[data-theme="vectra"] .stat {
    background: linear-gradient(135deg, oklch(100% 0 0) 0%, oklch(98% 0.006 264) 100%);
    border: 1px solid oklch(93% 0.008 264 / 0.8);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
}

[data-theme="vectra-dark"] .stat {
    background: linear-gradient(135deg, oklch(20% 0.025 270) 0%, oklch(17% 0.02 265) 100%);
    border: 1px solid oklch(26% 0.03 270 / 0.4);
    box-shadow:
        0 1px 3px 0 rgb(0 0 0 / 0.3),
        inset 0 1px 0 0 oklch(28% 0.02 270 / 0.2);
}

.stat-value {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.stat-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-desc {
    font-weight: 500;
}

/* ════════════════════════════════════════════════════
   NAVBAR PREMIUM
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .navbar {
    background: oklch(100% 0 0 / 0.85);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    box-shadow:
        0 1px 0 0 oklch(93% 0.01 248),
        0 1px 3px 0 rgb(0 0 0 / 0.04);
}

[data-theme="vectra-dark"] .navbar {
    background: oklch(14% 0.02 265 / 0.8);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    box-shadow:
        0 1px 0 0 oklch(20% 0.025 265),
        0 1px 3px 0 rgb(0 0 0 / 0.3);
}

/* ════════════════════════════════════════════════════
   NAVBAR SEARCH BAR — Consistent styling
   ════════════════════════════════════════════════════ */
.navbar label.input {
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    gap: 0.5rem;
}

[data-theme="vectra"] .navbar label.input {
    background: oklch(97% 0.006 264);
    border-color: oklch(91% 0.012 248);
}

[data-theme="vectra"] .navbar label.input:focus-within {
    border-color: oklch(49% 0.22 270);
    box-shadow: 0 0 0 2px oklch(49% 0.22 270 / 0.1);
}

[data-theme="vectra-dark"] .navbar label.input {
    background: oklch(16% 0.02 265 / 0.6);
    border-color: oklch(26% 0.03 265);
}

[data-theme="vectra-dark"] .navbar label.input:focus-within {
    border-color: oklch(65% 0.18 270);
    box-shadow: 0 0 0 2px oklch(65% 0.18 270 / 0.1);
}

.navbar label.input input {
    font-size: var(--text-sm);
    font-family: var(--font-sans);
}

/* Kbd shortcut badge in search */
.navbar .kbd {
    font-size: 0.6rem;
    font-family: var(--font-sans);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

[data-theme="vectra"] .navbar .kbd {
    background: oklch(95% 0.006 264);
    border-color: oklch(90% 0.012 248);
    color: oklch(var(--bc) / 0.5);
}

[data-theme="vectra-dark"] .navbar .kbd {
    background: oklch(22% 0.02 265);
    border-color: oklch(28% 0.03 265);
    color: oklch(var(--bc) / 0.45);
}

/* ════════════════════════════════════════════════════
   TABLE PREMIUM STYLING
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .table thead tr {
    border-bottom: 2px solid oklch(93% 0.012 248);
}

[data-theme="vectra-dark"] .table thead tr {
    border-bottom: 2px solid oklch(25% 0.03 265);
}

[data-theme="vectra"] .table tbody tr {
    border-bottom: 1px solid oklch(96% 0.006 248);
}

[data-theme="vectra"] .table tbody tr:hover {
    background: oklch(98% 0.004 270 / 0.6);
}

[data-theme="vectra-dark"] .table tbody tr {
    border-bottom: 1px solid oklch(22% 0.02 265 / 0.5);
}

[data-theme="vectra-dark"] .table tbody tr:hover {
    background: oklch(22% 0.03 270 / 0.3);
}

/* ════════════════════════════════════════════════════
   BADGE PREMIUM — Pill shape, subtle bg
   ════════════════════════════════════════════════════ */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════
   BUTTON PREMIUM — Depth + glow on primary
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .btn-primary {
    box-shadow:
        0 1px 2px 0 rgb(79 70 229 / 0.25),
        0 4px 12px -2px rgb(79 70 229 / 0.15);
}

[data-theme="vectra"] .btn-primary:hover {
    box-shadow:
        0 2px 4px 0 rgb(79 70 229 / 0.3),
        0 8px 20px -4px rgb(79 70 229 / 0.2);
}

[data-theme="vectra-dark"] .btn-primary {
    box-shadow:
        0 1px 2px 0 rgb(129 140 248 / 0.2),
        0 4px 12px -2px rgb(129 140 248 / 0.12);
}

[data-theme="vectra-dark"] .btn-primary:hover {
    box-shadow:
        0 2px 4px 0 rgb(129 140 248 / 0.3),
        0 8px 20px -4px rgb(129 140 248 / 0.18);
}

/* ════════════════════════════════════════════════════
   BREADCRUMBS — Better visibility
   ════════════════════════════════════════════════════ */
.breadcrumbs a {
    font-weight: 500;
}

[data-theme="vectra"] .breadcrumbs a {
    color: oklch(49% 0.18 270);
}

[data-theme="vectra"] .breadcrumbs a:hover {
    color: oklch(42% 0.22 270);
    text-decoration: underline;
}

[data-theme="vectra-dark"] .breadcrumbs a {
    color: oklch(65% 0.18 270);
}

[data-theme="vectra-dark"] .breadcrumbs a:hover {
    color: oklch(75% 0.18 270);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════
   PROGRESS BAR PREMIUM
   ════════════════════════════════════════════════════ */
.progress {
    border-radius: 999px;
}

[data-theme="vectra"] .progress {
    background: oklch(95% 0.008 248);
}

[data-theme="vectra-dark"] .progress {
    background: oklch(22% 0.02 265);
}

/* ════════════════════════════════════════════════════
   PAGE TITLE (h1) — Strong heading
   ════════════════════════════════════════════════════ */
h1 {
    letter-spacing: -0.025em;
}

/* ════════════════════════════════════════════════════
   FOOTER — Refined
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] footer {
    border-top: 1px solid oklch(95% 0.006 264);
}

[data-theme="vectra-dark"] footer {
    border-top: 1px solid oklch(22% 0.02 265 / 0.4);
}

/* ════════════════════════════════════════════════════
   INPUT FIELDS — Refined borders
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .input,
[data-theme="vectra"] .select {
    border-color: oklch(91% 0.012 248);
}

[data-theme="vectra"] .input:focus,
[data-theme="vectra"] .select:focus {
    border-color: oklch(49% 0.22 270);
    box-shadow: 0 0 0 3px oklch(49% 0.22 270 / 0.1);
}

[data-theme="vectra-dark"] .input,
[data-theme="vectra-dark"] .select {
    border-color: oklch(26% 0.03 265);
    background: oklch(16% 0.02 265);
}

[data-theme="vectra-dark"] .input:focus,
[data-theme="vectra-dark"] .select:focus {
    border-color: oklch(65% 0.18 270);
    box-shadow: 0 0 0 3px oklch(65% 0.18 270 / 0.12);
}

/* ════════════════════════════════════════════════════
   SIDEBAR PREMIUM HOVER
   ════════════════════════════════════════════════════ */
.drawer-side aside a {
    transition: all 0.15s ease;
}

/* ════════════════════════════════════════════════════
   TOGGLE SWITCHES — Better contrast
   ════════════════════════════════════════════════════ */
[data-theme="vectra-dark"] .toggle {
    border-color: oklch(30% 0.03 265);
}

/* ════════════════════════════════════════════════════
   FONT-MONO ENHANCEMENT
   ════════════════════════════════════════════════════ */
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace;
    font-variant-ligatures: none;
}

/* ════════════════════════════════════════════════════
   FORM-CONTROL LABEL COMBO
   ════════════════════════════════════════════════════ */
.label-text {
    font-weight: 600;
}

/* ════════════════════════════════════════════════════
   DIVIDER — Refined
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .divider::before,
[data-theme="vectra"] .divider::after {
    background: oklch(94% 0.008 264);
}

[data-theme="vectra-dark"] .divider::before,
[data-theme="vectra-dark"] .divider::after {
    background: oklch(24% 0.02 265);
}

/* ════════════════════════════════════════════════════
   SELECTION COLOR
   ════════════════════════════════════════════════════ */
::selection {
    background: oklch(49% 0.22 270 / 0.2);
    color: inherit;
}

[data-theme="vectra-dark"] ::selection {
    background: oklch(65% 0.18 270 / 0.25);
}

/* ════════════════════════════════════════════════════
   CONTRAST BOOSTERS — Readability first
   All opacity-based content must meet WCAG AA (4.5:1)
   ════════════════════════════════════════════════════ */

/* Force minimum readable opacity for muted text */
.text-base-content\/30 {
    opacity: 1;
    color: oklch(var(--bc) / 0.45) !important;
}

.text-base-content\/40 {
    opacity: 1;
    color: oklch(var(--bc) / 0.55) !important;
}

.text-base-content\/50 {
    opacity: 1;
    color: oklch(var(--bc) / 0.65) !important;
}

.text-base-content\/60 {
    opacity: 1;
    color: oklch(var(--bc) / 0.75) !important;
}

/* Stat card labels & descriptions — always readable */
.stat-title {
    color: oklch(var(--bc) / 0.7) !important;
    font-size: 0.7rem;
}

.stat-desc {
    color: oklch(var(--bc) / 0.6) !important;
}

/* ════════════════════════════════════════════════════
   TABLE HEADER — Distinct background
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .table thead th {
    background: oklch(97% 0.006 264);
    color: oklch(var(--bc) / 0.7);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

[data-theme="vectra-dark"] .table thead th {
    background: oklch(16% 0.02 265);
    color: oklch(var(--bc) / 0.65);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════════════
   BADGE — Higher contrast borders
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .badge-outline {
    border-color: oklch(var(--bc) / 0.2);
    color: oklch(var(--bc) / 0.7);
}

[data-theme="vectra-dark"] .badge-outline {
    border-color: oklch(var(--bc) / 0.25);
    color: oklch(var(--bc) / 0.75);
}

[data-theme="vectra"] .badge-ghost {
    background: oklch(var(--b3));
    color: oklch(var(--bc) / 0.7);
}

[data-theme="vectra-dark"] .badge-ghost {
    background: oklch(25% 0.025 265);
    color: oklch(var(--bc) / 0.7);
}

/* ════════════════════════════════════════════════════
   SIDEBAR CONTRAST — Section labels readable
   ════════════════════════════════════════════════════ */
.drawer-side aside .text-neutral-content\/30 {
    color: oklch(var(--nc) / 0.5) !important;
}

.drawer-side aside .text-neutral-content\/50 {
    color: oklch(var(--nc) / 0.65) !important;
}

.drawer-side aside .text-neutral-content\/60 {
    color: oklch(var(--nc) / 0.75) !important;
}

/* ════════════════════════════════════════════════════
   SUBTLE CARD ACCENT BORDER (left-edge indicator)
   ════════════════════════════════════════════════════ */
.card.border-l-4 {
    border-left-width: 4px !important;
}

/* ════════════════════════════════════════════════════
   LINK CONTRAST — Always visible
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .link-primary {
    color: oklch(45% 0.22 270);
    text-decoration-color: oklch(45% 0.22 270 / 0.3);
}

[data-theme="vectra"] .link-primary:hover {
    color: oklch(40% 0.24 270);
}

[data-theme="vectra-dark"] .link-primary {
    color: oklch(70% 0.18 270);
    text-decoration-color: oklch(70% 0.18 270 / 0.3);
}

[data-theme="vectra-dark"] .link-primary:hover {
    color: oklch(78% 0.18 270);
}

/* ════════════════════════════════════════════════════
   SUCCESS / WARNING / ERROR TEXT (for inline use)
   Ensure they pop on both themes
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .text-success {
    color: oklch(48% 0.17 155) !important;
}

[data-theme="vectra"] .text-warning {
    color: oklch(58% 0.18 62) !important;
}

[data-theme="vectra"] .text-error {
    color: oklch(48% 0.22 27) !important;
}

[data-theme="vectra"] .text-info {
    color: oklch(50% 0.16 220) !important;
}

[data-theme="vectra-dark"] .text-success {
    color: oklch(65% 0.16 155) !important;
}

[data-theme="vectra-dark"] .text-warning {
    color: oklch(75% 0.17 62) !important;
}

[data-theme="vectra-dark"] .text-error {
    color: oklch(62% 0.22 27) !important;
}

[data-theme="vectra-dark"] .text-info {
    color: oklch(68% 0.15 220) !important;
}

/* ════════════════════════════════════════════════════
   KPI NUMBER — Premium weight
   ════════════════════════════════════════════════════ */
.text-3xl.font-black,
.stat-value {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ════════════════════════════════════════════════════
   PAGE SUBTITLE — Readable description
   ════════════════════════════════════════════════════ */
h1+p,
h1+.text-sm {
    color: oklch(var(--bc) / 0.65) !important;
}

/* ════════════════════════════════════════════════════
   TABS — Inactive readable
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .tab {
    color: oklch(var(--bc) / 0.6);
}

[data-theme="vectra"] .tab:hover {
    color: oklch(var(--bc) / 0.85);
}

[data-theme="vectra"] .tab-active,
[data-theme="vectra"] .tab[aria-selected="true"] {
    color: oklch(var(--p)) !important;
    font-weight: 600;
}

[data-theme="vectra-dark"] .tab {
    color: oklch(var(--bc) / 0.55);
}

[data-theme="vectra-dark"] .tab:hover {
    color: oklch(var(--bc) / 0.8);
}

[data-theme="vectra-dark"] .tab-active,
[data-theme="vectra-dark"] .tab[aria-selected="true"] {
    color: oklch(var(--p)) !important;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════
   MODAL — Premium backdrop blur
   ════════════════════════════════════════════════════ */
.modal-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ════════════════════════════════════════════════════
   DROPDOWN — Premium depth
   ════════════════════════════════════════════════════ */
[data-theme="vectra"] .dropdown-content {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.08),
        0 10px 24px -4px rgb(0 0 0 / 0.1);
    border: 1px solid oklch(93% 0.008 264 / 0.8);
}

[data-theme="vectra-dark"] .dropdown-content {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.3),
        0 10px 24px -4px rgb(0 0 0 / 0.4);
    border: 1px solid oklch(26% 0.03 270 / 0.5);
}