/* 
 * Pulsis Core Theme v2.0
 * "Midnight Obsidian" & "Emerald Institutional Green"
 * Aligned with Pulsis Design System (https://pulsis.23east.co/design-system)
 * WCAG 2.1 AA Compliant Contrast Ratios
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap');

:root {
    /* ===========================================
       BRAND COLORS (Constant across themes)
       =========================================== */
    
    /* Primary - Emerald Green (Institutional) */
    --primary: hsl(142, 76%, 36%);           /* #22c55e - Main brand color */
    --primary-hover: hsl(142, 76%, 30%);     /* #1a9f4a - Hover state */
    --primary-light: hsl(142, 76%, 45%);     /* #34d369 - Lighter accent */
    --primary-dark: hsl(142, 76%, 25%);      /* #156b38 - Darker accent */
    --primary-foreground: hsl(0, 0%, 100%);  /* White text on primary */
    --primary-glow: hsla(142, 76%, 36%, 0.2);
    --primary-glow-strong: hsla(142, 76%, 36%, 0.4);
    
    /* Semantic Colors - Financial Data */
    --success: hsl(142, 76%, 45%);           /* #34d369 - Gains/Positive */
    --success-foreground: hsl(0, 0%, 100%);
    --success-muted: hsla(142, 76%, 45%, 0.15);
    
    --destructive: hsl(0, 84%, 60%);         /* #ef4444 - Losses/Negative */
    --destructive-foreground: hsl(0, 0%, 100%);
    --destructive-muted: hsla(0, 84%, 60%, 0.15);
    
    --warning: hsl(38, 92%, 50%);            /* #f59e0b - Caution/Warning */
    --warning-foreground: hsl(0, 0%, 0%);
    --warning-muted: hsla(38, 92%, 50%, 0.15);
    
    --info: hsl(217, 91%, 60%);              /* #3b82f6 - Information */
    --info-foreground: hsl(0, 0%, 100%);
    --info-muted: hsla(217, 91%, 60%, 0.15);
    
    /* Chart Colors - Distinct & Accessible */
    --chart-1: hsl(142, 76%, 45%);           /* Emerald - Primary series */
    --chart-2: hsl(217, 91%, 60%);           /* Blue */
    --chart-3: hsl(262, 83%, 58%);           /* Purple */
    --chart-4: hsl(38, 92%, 50%);            /* Amber */
    --chart-5: hsl(340, 82%, 52%);           /* Rose */
    
    /* ===========================================
       DARK MODE (Default)
       =========================================== */
    
    /* Backgrounds - Layered depth system */
    --bg-body: hsl(240, 10%, 3.9%);          /* #0a0a0c - Deepest layer */
    --bg-card: hsl(240, 10%, 7%);            /* #111214 - Card surfaces */
    --bg-card-hover: hsl(240, 6%, 12%);      /* #1c1c1f - Card hover */
    --bg-muted: hsl(240, 3.7%, 15.9%);       /* #27272a - Secondary surfaces */
    --bg-input: hsl(240, 10%, 7%);           /* #111214 - Input fields */
    --bg-sidebar: hsl(240, 10%, 2%);         /* #050506 - Sidebar */
    --bg-header: hsla(240, 10%, 7%, 0.85);   /* Header with blur */
    
    /* Text - High contrast hierarchy */
    --text-main: hsl(0, 0%, 98%);            /* #fafafa - Primary text */
    --text-muted: hsl(240, 5%, 64.9%);       /* #a1a1aa - Secondary text */
    --text-faint: hsl(240, 4%, 46%);         /* #717179 - Tertiary text */
    --text-inverse: hsl(240, 10%, 3.9%);     /* Dark text for light backgrounds */
    
    /* Borders */
    --border-color: hsl(240, 3.7%, 15.9%);   /* #27272a - Default border */
    --border-muted: hsla(0, 0%, 100%, 0.06); /* Subtle borders */
    --border-hover: hsla(142, 76%, 36%, 0.4);/* Green glow on hover */
    --ring: hsl(142, 76%, 45%);              /* Focus ring color */
    
    /* Effects */
    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    --card-gradient: linear-gradient(180deg, hsl(240, 6%, 10%) 0%, hsl(240, 10%, 7%) 100%);
    --glow-primary: 0 0 20px hsla(142, 76%, 36%, 0.3);
    
    /* Navigation Gradients - Dark Mode */
    --nav-gradient: radial-gradient(circle at top left, hsl(160, 84%, 10%) 0%, hsl(240, 10%, 2%) 60%);
    --header-gradient: linear-gradient(90deg, hsl(240, 10%, 2%) 0%, hsl(160, 60%, 8%) 100%);
    
    /* Accent backgrounds for tags/labels */
    --accent: hsl(142, 76%, 15%);            /* Dark green background */
    --accent-foreground: hsl(142, 76%, 55%); /* Bright green text */
    
    /* Secondary button style */
    --secondary: hsl(240, 3.7%, 15.9%);      /* #27272a */
    --secondary-foreground: hsl(0, 0%, 98%);
}

/* ===========================================
   LIGHT MODE OVERRIDES
   =========================================== */
[data-theme-version="light"] {
    /* Backgrounds - Clean & Professional */
    --bg-body: hsl(210, 20%, 98%);           /* #f8fafc - Very light gray-blue */
    --bg-card: hsl(0, 0%, 100%);             /* #ffffff - Pure white cards */
    --bg-card-hover: hsl(210, 40%, 98%);     /* #f8fafc - Subtle hover */
    --bg-muted: hsl(210, 40%, 96%);          /* #f1f5f9 - Secondary surfaces */
    --bg-input: hsl(0, 0%, 100%);            /* #ffffff - Input fields */
    --bg-sidebar: hsl(0, 0%, 100%);          /* #ffffff - Sidebar */
    --bg-header: hsla(0, 0%, 100%, 0.9);     /* Header with blur */

    /* Text - Maximum readability */
    --text-main: hsl(222, 47%, 11%);         /* #0f172a - Near black */
    --text-muted: hsl(215, 16%, 37%);        /* #525d6c - Dark gray (WCAG AA) */
    --text-faint: hsl(215, 14%, 54%);        /* #778193 - Medium gray */
    --text-inverse: hsl(0, 0%, 100%);        /* White text for dark backgrounds */

    /* Borders - Subtle definition */
    --border-color: hsl(214, 32%, 91%);      /* #e2e8f0 - Light border */
    --border-muted: hsla(0, 0%, 0%, 0.05);   /* Very subtle */
    --border-hover: hsla(142, 76%, 36%, 0.5);/* Green accent on hover */
    --ring: hsl(142, 76%, 36%);              /* Focus ring */

    /* Effects - Subtle elevation */
    --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
    --card-gradient: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(210, 40%, 98%) 100%);
    --glow-primary: 0 0 20px hsla(142, 76%, 36%, 0.15);
    
    /* Navigation Gradients - Light Mode */
    --nav-gradient: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(142, 50%, 97%) 100%);
    --header-gradient: linear-gradient(90deg, hsl(0, 0%, 100%) 0%, hsl(142, 40%, 98%) 100%);
    
    /* Semantic colors - Darker for light mode contrast */
    --success: hsl(142, 71%, 29%);           /* #15803d - Dark emerald */
    --destructive: hsl(0, 72%, 43%);         /* #b91c1c - Dark red */
    --warning: hsl(32, 95%, 38%);            /* #b45309 - Dark amber */
    --info: hsl(201, 96%, 32%);              /* #0369a1 - Dark blue */
    
    /* Accent for light mode */
    --accent: hsl(142, 50%, 95%);            /* Light green background */
    --accent-foreground: hsl(142, 76%, 28%); /* Dark green text */
    
    /* Secondary */
    --secondary: hsl(210, 40%, 96%);         /* #f1f5f9 */
    --secondary-foreground: hsl(222, 47%, 11%);
    
    /* Primary adjustments for better light mode contrast */
    --primary: hsl(142, 71%, 29%);           /* #15803d - Darker green */
    --primary-hover: hsl(142, 71%, 25%);     /* Even darker on hover */
    --primary-glow: hsla(142, 76%, 36%, 0.12);
}

/* ===========================================
   DARK MODE (Explicit Override)
   =========================================== */
[data-theme-version="dark"] {
    /* Backgrounds */
    --bg-body: hsl(240, 10%, 3.9%);
    --bg-card: hsl(240, 10%, 7%);
    --bg-card-hover: hsl(240, 6%, 12%);
    --bg-muted: hsl(240, 3.7%, 15.9%);
    --bg-input: hsl(240, 10%, 7%);
    --bg-sidebar: hsl(240, 10%, 2%);
    --bg-header: hsla(240, 10%, 7%, 0.85);

    /* Text */
    --text-main: hsl(0, 0%, 98%);
    --text-muted: hsl(240, 5%, 64.9%);
    --text-faint: hsl(240, 4%, 46%);
    --text-inverse: hsl(240, 10%, 3.9%);

    /* Borders */
    --border-color: hsl(240, 3.7%, 15.9%);
    --border-muted: hsla(0, 0%, 100%, 0.06);
    --border-hover: hsla(142, 76%, 36%, 0.4);

    /* Effects */
    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    --card-gradient: linear-gradient(180deg, hsl(240, 6%, 10%) 0%, hsl(240, 10%, 7%) 100%);
    
    /* Navigation Gradients */
    --nav-gradient: radial-gradient(circle at top left, hsl(160, 84%, 10%) 0%, hsl(240, 10%, 2%) 60%);
    --header-gradient: linear-gradient(90deg, hsl(240, 10%, 2%) 0%, hsl(160, 60%, 8%) 100%);
    
    /* Semantic colors - Brighter for dark mode */
    --success: hsl(142, 76%, 45%);
    --destructive: hsl(0, 84%, 60%);
    --warning: hsl(38, 92%, 50%);
    --info: hsl(217, 91%, 60%);
    
    /* Primary */
    --primary: hsl(142, 76%, 36%);
    --primary-hover: hsl(142, 76%, 42%);
    --primary-glow: hsla(142, 76%, 36%, 0.2);
}

/* =========================================
   Global Resets & Typography
   ========================================= */

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-main);
    font-weight: 700;
}

/* Force overrides for template classes that might be stubborn */
.content-body {
    background-color: var(--bg-body) !important;
}

.container-fluid {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* =========================================
   Navigation & Sidebar
   ========================================= */

.deznav {
    background: var(--nav-gradient) !important;
    background-color: var(--bg-sidebar) !important; /* Fallback */
    border-right: 1px solid var(--border-color);
}

.nav-header {
    background: #000000 !important;
    background-color: #000000 !important;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* Sidebar Text */
.deznav .metismenu > li > a {
    color: var(--text-muted) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Fix arrow overlap - ensure enough padding-right for arrow */
.deznav .metismenu > li > a.has-arrow {
    padding-right: 3.5rem !important; /* Extra space for arrow */
}

.deznav .metismenu .has-arrow::after {
    right: 1.25rem !important; /* Position arrow consistently */
}

/* Override teal color with emerald green for BOTH themes */
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li:hover > a {
    color: #ffffff !important;
    background: #15803d !important;
    background-color: #15803d !important; /* Emerald green - override teal */
    border-right: 3px solid #22c55e !important;
    border-radius: 0.5rem !important;
}

/* Dark mode specific - ensure emerald green */
[data-theme-version="dark"] .deznav .metismenu > li.mm-active > a,
[data-theme-version="dark"] .deznav .metismenu > li:hover > a {
    color: #ffffff !important;
    background: #15803d !important;
    background-color: #15803d !important;
    border-right: 3px solid #22c55e !important;
}

/* Active Icons - white on green background */
.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li:hover > a i,
.deznav .metismenu > li.mm-active > a svg,
.deznav .metismenu > li:hover > a svg {
    color: #ffffff !important;
}

[data-theme-version="dark"] .deznav .metismenu > li.mm-active > a i,
[data-theme-version="dark"] .deznav .metismenu > li:hover > a i,
[data-theme-version="dark"] .deznav .metismenu > li.mm-active > a svg,
[data-theme-version="dark"] .deznav .metismenu > li:hover > a svg {
    color: #ffffff !important;
}

/* Fix submenu arrow overlap */
.deznav .metismenu ul a.has-arrow {
    padding-right: 3rem !important;
}

.deznav .metismenu ul a {
    color: var(--text-muted) !important;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul a.mm-active {
    color: #ffffff !important;
    background: #15803d !important;
    background-color: #15803d !important; /* Emerald green - override teal */
    border-radius: 0.375rem !important;
}

/* Dark mode submenu active */
[data-theme-version="dark"] .deznav .metismenu ul a:hover,
[data-theme-version="dark"] .deznav .metismenu ul a.mm-active {
    color: #ffffff !important;
    background: #15803d !important;
    background-color: #15803d !important;
}

/* Submenu active icons - white */
.deznav .metismenu ul a.mm-active i,
.deznav .metismenu ul a:hover i {
    color: #ffffff !important;
}

/* Brand Logo Text - Sleek Outline Style */
.pulsis-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-main);
    text-transform: none; /* Keep mixed case 'Pulsis' */
    margin-left: 12px;
    margin-top: 2px;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* Dark Mode Logo Glow */
[data-theme-version="dark"] .pulsis-logo-text {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

/* Light Mode Logo Definition */
[data-theme-version="light"] .pulsis-logo-text {
    -webkit-text-stroke: 1px #0f172a;
    color: transparent;
}

/* Logo Switching Based on Theme */
/* Dark mode: show dark logo, hide light logo */
.logo-dark {
    display: block !important;
}
.logo-light {
    display: none !important;
}

/* Light mode: show light logo, hide dark logo */
[data-theme-version="light"] .logo-dark {
    display: none !important;
}
[data-theme-version="light"] .logo-light {
    display: block !important;
}

/* =========================================
   LIGHT MODE - Complete Component Overrides
   ========================================= */

/* Light Mode: Nav Header (Logo Area) */
[data-theme-version="light"] .nav-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* Light Mode: Sidebar */
[data-theme-version="light"] .deznav {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-right: 1px solid #e2e8f0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

[data-theme-version="light"] .deznav .metismenu > li > a {
    color: #475569 !important;
}

/* Light mode: Fix arrow overlap */
[data-theme-version="light"] .deznav .metismenu > li > a.has-arrow {
    padding-right: 3.5rem !important;
}

[data-theme-version="light"] .deznav .metismenu .has-arrow::after {
    border-color: #64748b !important;
}

[data-theme-version="light"] .deznav .metismenu > li.mm-active > a,
[data-theme-version="light"] .deznav .metismenu > li:hover > a {
    color: #ffffff !important;
    background: #15803d !important;
    background-color: #15803d !important; /* Emerald green - override teal */
    border-right: 3px solid #15803d;
    border-radius: 0.5rem;
}

[data-theme-version="light"] .deznav .metismenu > li.mm-active > a.has-arrow::after,
[data-theme-version="light"] .deznav .metismenu > li:hover > a.has-arrow::after {
    border-color: #15803d !important;
}

[data-theme-version="light"] .deznav .metismenu > li.mm-active > a i,
[data-theme-version="light"] .deznav .metismenu > li:hover > a i,
[data-theme-version="light"] .deznav .metismenu > li.mm-active > a svg,
[data-theme-version="light"] .deznav .metismenu > li:hover > a svg {
    color: #ffffff !important; /* White icons on green background */
}

[data-theme-version="light"] .deznav .metismenu ul {
    background: #f8fafc;
}

[data-theme-version="light"] .deznav .metismenu ul a {
    color: #64748b !important;
}

[data-theme-version="light"] .deznav .metismenu ul a:hover,
[data-theme-version="light"] .deznav .metismenu ul a.mm-active {
    color: #15803d !important;
    background: rgba(21, 128, 61, 0.12) !important; /* Light emerald tint for light mode */
    background-color: rgba(21, 128, 61, 0.12) !important;
    border-radius: 0.375rem !important;
}

[data-theme-version="light"] .deznav .metismenu ul a.mm-active i,
[data-theme-version="light"] .deznav .metismenu ul a:hover i {
    color: #15803d !important;
}

/* Light Mode: Header/Top Bar */
[data-theme-version="light"] .header {
    background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme-version="light"] .header .nav-link {
    color: #64748b !important;
}

[data-theme-version="light"] .header .nav-link:hover {
    color: #0f172a !important;
}

[data-theme-version="light"] .header-right .header-profile > a.nav-link {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

[data-theme-version="light"] .header-right .notification_dropdown .nav-link {
    background: #f1f5f9;
}

/* Light Mode: Content Body */
[data-theme-version="light"] .content-body {
    background: #f1f5f9 !important;
}

/* Light Mode: Cards */
[data-theme-version="light"] .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme-version="light"] .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(21, 128, 61, 0.3);
}

[data-theme-version="light"] .card-header {
    background: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme-version="light"] .card-title,
[data-theme-version="light"] .card-title h4,
[data-theme-version="light"] .card h4 {
    color: #0f172a !important;
}

[data-theme-version="light"] .pulsis-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

/* Light Mode: Status Metric Cards */
[data-theme-version="light"] .status-metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-theme-version="light"] .status-metric-card--runtime-operational,
[data-theme-version="light"] .status-metric-card--connection-good,
[data-theme-version="light"] .status-metric-card--pipeline-active,
[data-theme-version="light"] .status-metric-card--freshness-current {
    border-bottom: 2px solid #15803d;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.08);
}

[data-theme-version="light"] .status-model-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme-version="light"] .status-model-title,
[data-theme-version="light"] .status-metric-title {
    color: #0f172a !important;
}

[data-theme-version="light"] .status-model-text {
    color: #475569 !important;
}

/* Light Mode: Tables */
[data-theme-version="light"] .table {
    color: #0f172a;
    background-color: #ffffff;
}

[data-theme-version="light"] .table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 600;
}

[data-theme-version="light"] .table td {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
}

[data-theme-version="light"] .table tbody tr {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .table-hover tbody tr:hover {
    background: #f8fafc !important;
}

[data-theme-version="light"] .table-hover tbody tr:hover td {
    background: #f8fafc !important;
    color: #0f172a !important;
}

[data-theme-version="light"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important;
}

[data-theme-version="light"] .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #f8fafc !important;
}

[data-theme-version="light"] .table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .table-striped tbody tr:nth-of-type(even) td {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .table th,
[data-theme-version="light"] .table td {
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .table strong {
    color: #0f172a !important;
}

/* Light Mode: DataTables Specific */
[data-theme-version="light"] .dataTables_wrapper {
    color: #334155;
}

[data-theme-version="light"] .dataTablesCard {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .dataTablesCard .table {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .dataTablesCard .even,
[data-theme-version="light"] .dataTablesCard .odd {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .dataTablesCard .even td,
[data-theme-version="light"] .dataTablesCard .odd td {
    background-color: transparent !important;
    color: #334155 !important;
}

[data-theme-version="light"] .dataTablesCard .even:hover td,
[data-theme-version="light"] .dataTablesCard .odd:hover td {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

[data-theme-version="light"] table.dataTable {
    color: #334155 !important;
    background-color: #ffffff !important;
}

[data-theme-version="light"] table.dataTable thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] table.dataTable tbody tr {
    background-color: #ffffff !important;
}

[data-theme-version="light"] table.dataTable tbody tr td {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] table.dataTable tbody tr:hover {
    background-color: #f8fafc !important;
}

[data-theme-version="light"] table.dataTable tbody tr:hover td {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

[data-theme-version="light"] table.dataTable tbody tr.even {
    background-color: #ffffff !important;
}

[data-theme-version="light"] table.dataTable tbody tr.odd {
    background-color: #fafafa !important;
}

[data-theme-version="light"] table.dataTable tbody tr.even td,
[data-theme-version="light"] table.dataTable tbody tr.odd td {
    color: #334155 !important;
}

[data-theme-version="light"] .dataTables_info {
    color: #64748b !important;
}

[data-theme-version="light"] .dataTables_length,
[data-theme-version="light"] .dataTables_filter {
    color: #475569 !important;
}

[data-theme-version="light"] .dataTables_length select,
[data-theme-version="light"] .dataTables_filter input {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #475569 !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    color: #475569 !important;
}

[data-theme-version="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #94a3b8 !important;
    opacity: 0.5;
}

/* Light Mode: DataTables Scrollbar */
[data-theme-version="light"] .dataTables_scrollBody {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .dataTables_scrollBody::-webkit-scrollbar-track {
    background-color: #f1f5f9;
}

[data-theme-version="light"] .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
}

/* Light Mode: Table Responsive Container */
[data-theme-version="light"] .table-responsive {
    background-color: #ffffff;
}

[data-theme-version="light"] .table-responsive::-webkit-scrollbar-track {
    background-color: #f1f5f9;
}

[data-theme-version="light"] .table-responsive::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
}

/* Light Mode: Specific Table Types */
[data-theme-version="light"] table.dataTable.patient-list tbody tr:hover {
    background: #f8fafc !important;
    box-shadow: 0px 0px 15px 1px rgba(21, 128, 61, 0.1);
}

[data-theme-version="light"] .review-table {
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .review-table .review-bx {
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .card-table td {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* Light Mode: Bootstrap Table Variants */
[data-theme-version="light"] .table-primary,
[data-theme-version="light"] .table-success,
[data-theme-version="light"] .table-info,
[data-theme-version="light"] .table-warning,
[data-theme-version="light"] .table-danger {
    --bs-table-color: #0f172a;
}

/* Light Mode: Table Inside Cards */
[data-theme-version="light"] .card .table {
    background-color: transparent;
}

[data-theme-version="light"] .card .table thead th {
    background-color: #f8fafc !important;
}

[data-theme-version="light"] .card .table tbody tr {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .card .table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Light Mode: JSGRID Tables */
[data-theme-version="light"] .jsgrid-table {
    background-color: #ffffff !important;
}

[data-theme-version="light"] .jsgrid-header-row th {
    background-color: #f8fafc !important;
    color: #475569 !important;
}

[data-theme-version="light"] .jsgrid-row td,
[data-theme-version="light"] .jsgrid-alt-row td {
    background-color: #ffffff !important;
    color: #334155 !important;
}

[data-theme-version="light"] .jsgrid-row:hover td,
[data-theme-version="light"] .jsgrid-alt-row:hover td {
    background-color: #f8fafc !important;
}

/* Light Mode: Form Elements */
[data-theme-version="light"] .form-control {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #0f172a !important;
}

[data-theme-version="light"] .form-control:focus {
    border-color: #15803d !important;
    box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.1) !important;
}

[data-theme-version="light"] .form-control::placeholder {
    color: #9ca3af;
}

[data-theme-version="light"] .input-group-text {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #6b7280;
}

[data-theme-version="light"] .form-label,
[data-theme-version="light"] label {
    color: #374151;
}

/* Light Mode: Dropdowns */
[data-theme-version="light"] .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

[data-theme-version="light"] .dropdown-item {
    color: #374151;
}

[data-theme-version="light"] .dropdown-item:hover {
    background: #f3f4f6;
    color: #0f172a;
}

/* Light Mode: Badges */
[data-theme-version="light"] .badge-success {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important;
}

[data-theme-version="light"] .badge-danger {
    background: rgba(185, 28, 28, 0.12) !important;
    color: #b91c1c !important;
}

[data-theme-version="light"] .badge-warning {
    background: rgba(180, 83, 9, 0.12) !important;
    color: #b45309 !important;
}

[data-theme-version="light"] .badge-info {
    background: rgba(3, 105, 161, 0.12) !important;
    color: #0369a1 !important;
}

[data-theme-version="light"] .badge-primary {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important;
}

/* Light Mode: Buttons */
[data-theme-version="light"] .btn-primary {
    background: #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(21, 128, 61, 0.2);
}

[data-theme-version="light"] .btn-primary:hover {
    background: #166534 !important;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
}

[data-theme-version="light"] .btn-outline-primary {
    color: #15803d !important;
    border-color: #15803d !important;
}

[data-theme-version="light"] .btn-outline-primary:hover {
    background: rgba(21, 128, 61, 0.08) !important;
    color: #15803d !important;
}

[data-theme-version="light"] .btn-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme-version="light"] .btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Light Mode: Market Hero Strip */
[data-theme-version="light"] .pulsis-market-hero {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme-version="light"] .market-hero-title {
    color: #0f172a;
}

[data-theme-version="light"] .ticker-symbol {
    color: #64748b;
}

[data-theme-version="light"] .ticker-price {
    color: #0f172a;
}

/* Light Mode: Market Conditions Bar */
[data-theme-version="light"] .market-conditions-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme-version="light"] .condition-label {
    color: #64748b;
}

[data-theme-version="light"] .condition-value {
    color: #0f172a;
}

/* Light Mode: Progress Bars */
[data-theme-version="light"] .progress {
    background: #e2e8f0;
}

[data-theme-version="light"] .status-metric-track {
    background: #e2e8f0;
}

/* Light Mode: Scrollbar */
[data-theme-version="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

[data-theme-version="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

[data-theme-version="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Light Mode: Footer */
[data-theme-version="light"] .footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

[data-theme-version="light"] .footer .copyright {
    color: #64748b;
}

/* Light Mode: Preloader */
[data-theme-version="light"] #preloader {
    background: #f8fafc;
}

/* Light Mode: Voice Chat Bubble */
[data-theme-version="light"] .voice-chat-bubble {
    background: #15803d;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
}

/* Light Mode: Links */
[data-theme-version="light"] a.text-primary {
    color: #15803d !important;
}

[data-theme-version="light"] a.text-primary:hover {
    color: #166534 !important;
}

/* Light Mode: Text Utilities */
[data-theme-version="light"] .text-muted {
    color: #64748b !important;
}

[data-theme-version="light"] .text-black,
[data-theme-version="light"] .text-dark {
    color: #0f172a !important;
}

[data-theme-version="light"] h1, 
[data-theme-version="light"] h2, 
[data-theme-version="light"] h3, 
[data-theme-version="light"] h4, 
[data-theme-version="light"] h5, 
[data-theme-version="light"] h6,
[data-theme-version="light"] .h1, 
[data-theme-version="light"] .h2, 
[data-theme-version="light"] .h3, 
[data-theme-version="light"] .h4, 
[data-theme-version="light"] .h5, 
[data-theme-version="light"] .h6 {
    color: #0f172a !important;
}

/* Light Mode: Alerts */
[data-theme-version="light"] .alert-success {
    background: rgba(21, 128, 61, 0.1);
    border-color: rgba(21, 128, 61, 0.2);
    color: #15803d;
}

[data-theme-version="light"] .alert-danger {
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(185, 28, 28, 0.2);
    color: #b91c1c;
}

[data-theme-version="light"] .alert-warning {
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.2);
    color: #b45309;
}

[data-theme-version="light"] .alert-info {
    background: rgba(3, 105, 161, 0.1);
    border-color: rgba(3, 105, 161, 0.2);
    color: #0369a1;
}

/* Light Mode: Behavioral Tags */
[data-theme-version="light"] .tag-drift {
    background: rgba(180, 83, 9, 0.1);
    color: #b45309;
}

[data-theme-version="light"] .tag-tension {
    background: rgba(185, 28, 28, 0.1);
    color: #b91c1c;
}

[data-theme-version="light"] .tag-alignment {
    background: rgba(3, 105, 161, 0.1);
    color: #0369a1;
}

[data-theme-version="light"] .tag-regime {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

/* Light Mode: Icon Containers */
[data-theme-version="light"] .status-metric-icon-shell {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* =========================================
   Theme Toggle Button - Improved Styling
   ========================================= */
.dz-theme-mode {
    cursor: pointer;
    transition: all 0.3s ease !important;
    position: relative;
}

.dz-theme-mode:hover {
    transform: scale(1.05);
}

.dz-theme-mode:active {
    transform: scale(0.95);
}

/* Ensure smooth transition when theme changes */
body,
body *,
.deznav,
.header,
.card,
.content-body {
    transition: background-color 0.3s ease, 
                color 0.2s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Prevent transition on first load */
body.preload,
body.preload * {
    transition: none !important;
}

/* Fix icon containers to be perfect circles - not ovals */
.rounded-circle.p-2 {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
}

.rounded-circle.p-3 {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
}

.rounded-circle.p-2 svg,
.rounded-circle.p-2 i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.rounded-circle.p-3 svg,
.rounded-circle.p-3 i {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

[data-theme-version="light"] .rounded-circle.p-2,
[data-theme-version="light"] .rounded-circle.p-3 {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Light Mode: Fix bg-opacity classes with colors */
[data-theme-version="light"] .bg-primary.bg-opacity-10,
[data-theme-version="light"] .bg-primary.bg-opacity-20 {
    background-color: rgba(21, 128, 61, 0.1) !important;
}

[data-theme-version="light"] .bg-success.bg-opacity-10,
[data-theme-version="light"] .bg-success.bg-opacity-20 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

[data-theme-version="light"] .bg-info.bg-opacity-10,
[data-theme-version="light"] .bg-info.bg-opacity-20 {
    background-color: rgba(3, 105, 161, 0.1) !important;
}

[data-theme-version="light"] .bg-warning.bg-opacity-10,
[data-theme-version="light"] .bg-warning.bg-opacity-20 {
    background-color: rgba(180, 83, 9, 0.12) !important;
}

[data-theme-version="light"] .bg-danger.bg-opacity-10,
[data-theme-version="light"] .bg-danger.bg-opacity-20 {
    background-color: rgba(185, 28, 28, 0.1) !important;
}

[data-theme-version="light"] .bg-secondary.bg-opacity-10,
[data-theme-version="light"] .bg-secondary.bg-opacity-20 {
    background-color: rgba(100, 116, 139, 0.1) !important;
}

/* Light Mode: Icon colors need to be darker for contrast */
[data-theme-version="light"] .text-primary {
    color: #15803d !important;
}

[data-theme-version="light"] .text-success {
    color: #16a34a !important;
}

[data-theme-version="light"] .text-info {
    color: #0369a1 !important;
}

[data-theme-version="light"] .text-warning {
    color: #b45309 !important;
}

[data-theme-version="light"] .text-danger {
    color: #b91c1c !important;
}

[data-theme-version="light"] .text-secondary {
    color: #475569 !important;
}

/* Light Mode: Glass Buttons */
[data-theme-version="light"] .btn-glass {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    color: #64748b;
}

[data-theme-version="light"] .btn-glass:hover,
[data-theme-version="light"] .btn-glass.active {
    background: rgba(21, 128, 61, 0.1);
    border-color: #15803d;
    color: #15803d;
}

/* Header/Top Bar */
.header {
    background: var(--header-gradient) !important;
    background-color: var(--bg-header) !important; /* Fallback */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
}

.header .nav-link {
    color: var(--text-muted) !important;
}

.header .nav-link:hover {
    color: var(--text-main) !important;
}

/* =========================================
   Cards & Panels
   ========================================= */

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.card-header {
    border-bottom: 1px solid var(--border-color) !important;
    background-color: transparent !important;
    padding: 1.5rem 1.5rem 1rem;
}

.card-title {
    color: var(--text-main) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
    color: var(--text-main);
}

/* Pulsis Specific Card Styles */
.pulsis-card {
    background: var(--card-gradient) !important;
}

/* =========================================
   Form Elements
   ========================================= */

/* Labels */
.form-label, label {
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Text Inputs & Textareas */
.form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Input Groups (Icons + Inputs) */
.input-group .input-group-text {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-right: none !important;
    color: var(--text-muted);
    border-radius: 12px 0 0 12px;
    padding-left: 1.2rem;
}

.input-group .form-control {
    border-left: none !important;
    border-radius: 0 12px 12px 0;
    padding-left: 0.75rem;
}

.input-group:focus-within .input-group-text {
    border-color: var(--primary) !important;
    color: var(--primary);
}

/* Checkboxes */
.form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    border-radius: 4px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label {
    color: var(--text-muted);
    cursor: pointer;
}

/* Light Mode Specific Form Overrides */
[data-theme-version="light"] .form-control {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .input-group .input-group-text {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme-version="light"] .form-control:focus,
[data-theme-version="light"] .input-group:focus-within .input-group-text {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

[data-theme-version="light"] .form-check-input {
    background-color: #ffffff;
    border-color: var(--border-color);
}

[data-theme-version="light"] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* =========================================
   BORDER RADIUS STANDARDIZATION
   Remove ovals, use consistent rounded corners
   ========================================= */

/* Border Radius System:
   - Cards: 16px (1rem)
   - Buttons: 12px (0.75rem)
   - Inputs: 12px (0.75rem)
   - Badges: 6px (0.375rem) - NOT pills!
   - Tags: 6px (0.375rem)
   - Small elements: 4px (0.25rem)
   - Circles: 50% (only for icons/avatars)
*/

/* Override Bootstrap pill classes - convert to rounded */
.rounded-pill {
    border-radius: 8px !important; /* Convert pills to rounded rectangles */
}

.badge-pill,
.badge.rounded-pill {
    border-radius: 6px !important; /* Consistent badge radius */
    padding: 0.4em 0.75em !important;
}

/* Ensure all badges use consistent border-radius */
.badge {
    border-radius: 6px !important;
}

/* Button border-radius standardization */
.btn {
    border-radius: 12px;
}

.btn-sm {
    border-radius: 8px;
}

.btn-xs {
    border-radius: 6px;
}

.btn-lg {
    border-radius: 14px;
}

/* Input/Form element border-radius */
.form-control,
.form-select,
select.form-control {
    border-radius: 12px;
}

.form-control-sm {
    border-radius: 8px;
}

.form-control-lg {
    border-radius: 14px;
}

/* Input groups */
.input-group > .form-control:first-child,
.input-group > .input-group-text:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.input-group > .form-control:last-child,
.input-group > .input-group-text:last-child,
.input-group > .btn:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Card border-radius */
.card {
    border-radius: 16px;
}

.card-header:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-footer:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Dropdown menus */
.dropdown-menu {
    border-radius: 12px;
}

.dropdown-item:first-child {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.dropdown-item:last-child {
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

/* Modal border-radius */
.modal-content {
    border-radius: 16px;
}

.modal-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.modal-footer {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Alert border-radius */
.alert {
    border-radius: 12px;
}

/* Toast/Notification border-radius */
.toast {
    border-radius: 12px;
}

/* Nav tabs/pills - standardize */
.nav-tabs .nav-link {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.nav-pills .nav-link {
    border-radius: 8px !important; /* Override pill shape */
}

/* Pagination */
.pagination .page-link {
    border-radius: 8px !important;
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Progress bars - keep rounded for visual appeal */
.progress {
    border-radius: 8px;
}

.progress-bar {
    border-radius: 8px;
}

/* List groups */
.list-group {
    border-radius: 12px;
}

.list-group-item:first-child {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.list-group-item:last-child {
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

/* Tooltips */
.tooltip-inner {
    border-radius: 6px;
}

/* Popovers */
.popover {
    border-radius: 12px;
}

/* Tables with rounded corners */
.table-responsive {
    border-radius: 12px;
}

/* Accordions */
.accordion-item:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.accordion-button:not(.collapsed) {
    border-radius: 0;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

/* Circles - ONLY for icons and avatars */
.rounded-circle {
    border-radius: 50% !important; /* Keep true circles for avatars/icons */
}

/* Avatar specific */
.avatar,
.user-avatar,
.profile-avatar {
    border-radius: 50%;
}

/* Icon containers that should be circles */
.icon-circle,
.status-metric-icon-shell {
    border-radius: 50%;
}

/* Tags - consistent with badges */
.tag,
.tag-behavioral {
    border-radius: 6px;
}

/* Sidebar menu items */
.deznav .metismenu > li > a {
    border-radius: 0; /* Keep sidebar items square */
}

/* Fix any asymmetric border-radius to be symmetric */
[style*="border-radius: 6px 0px 6px 6px"],
[style*="border-radius: 5px 5px 0 5px"] {
    border-radius: 8px !important;
}

/* =========================================
   Buttons & Badges
   ========================================= */

.btn-primary {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border: none !important;
    color: var(--primary-foreground) !important;
    font-weight: 700;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    box-shadow: var(--glow-primary);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    box-shadow: var(--glow-primary), 0 8px 20px var(--primary-glow-strong);
    transform: translateY(-2px);
    color: var(--primary-foreground) !important;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:focus {
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
    outline: none;
}

/* Secondary Button */
.btn-secondary {
    background: var(--secondary) !important;
    background-color: var(--secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--secondary-foreground) !important;
    font-weight: 600;
    border-radius: 12px;
}

.btn-secondary:hover {
    background: var(--bg-muted) !important;
    border-color: var(--border-hover) !important;
}

/* Links in forms */
a.text-primary {
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

a.text-primary:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background: var(--primary-glow) !important;
    color: var(--text-main) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

/* Success/Danger/Warning/Info Buttons */
.btn-success {
    background: var(--success) !important;
    color: var(--success-foreground) !important;
    border: none !important;
}

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

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

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

/* Glass Button (Dashboard Controls) */
.btn-glass {
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-glass:hover, .btn-glass.active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--text-main);
}

/* =========================================
   Badges - Consistent Rounded Style
   ========================================= */

.badge {
    padding: 0.4em 0.75em;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 6px;          /* Consistent rounded, not pill */
    border: none !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Badge Sizes */
.badge-sm {
    padding: 0.3em 0.6em;
    font-size: 0.7rem;
}

.badge-lg {
    padding: 0.5em 0.9em;
    font-size: 0.8rem;
}

/* Success Badge */
.badge-success {
    background-color: var(--success-muted) !important;
    color: var(--success) !important;
}

/* Warning Badge */
.badge-warning {
    background-color: var(--warning-muted) !important;
    color: var(--warning) !important;
}

/* Danger Badge */
.badge-danger {
    background-color: var(--destructive-muted) !important;
    color: var(--destructive) !important;
}

/* Info Badge */
.badge-info {
    background-color: var(--info-muted) !important;
    color: var(--info) !important;
}

/* Primary Badge */
.badge-primary {
    background-color: var(--primary-glow) !important;
    color: var(--primary) !important;
}

/* Secondary Badge */
.badge-secondary {
    background-color: var(--bg-muted) !important;
    color: var(--text-muted) !important;
}

/* =========================================
   Text Utilities
   ========================================= */

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

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

.text-black, .text-dark {
    color: var(--text-main) !important;
}

.text-body {
    color: var(--text-main) !important;
}

.text-white {
    color: var(--text-main) !important;
}
[data-theme-version="dark"] .text-white {
    color: #fff !important;
}

/* Semantic Text Colors */
.text-primary {
    color: var(--primary) !important;
}

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

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

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

.text-danger {
    color: var(--destructive) !important;
}

/* Financial Data - Gains & Losses */
.text-gain {
    color: var(--success) !important;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
}

.text-loss {
    color: var(--destructive) !important;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
}

/* Background highlights for gains/losses */
.bg-gain {
    background-color: var(--success-muted) !important;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

.bg-loss {
    background-color: var(--destructive-muted) !important;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

/* Ensure icon shells have proper contrast */
.rounded-circle.bg-opacity-10 {
    background-color: var(--bg-muted) !important;
}

[data-theme-version="light"] .rounded-circle.bg-opacity-10 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* =========================================
   Specific Component Overrides
   ========================================= */

/* Status Metric Cards (Dashboard) */
.status-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

/* Refined Glow Effect for Cards */
.status-metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    transition: all 0.3s ease;
}

.status-metric-icon-shell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    /* Force perfect circle - fixed equal dimensions */
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

.status-metric-icon-shell svg,
.status-metric-icon-shell i {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

[data-theme-version="light"] .status-metric-icon-shell {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light mode: fix icon colors in metric shells */
[data-theme-version="light"] .status-metric-icon-shell svg,
[data-theme-version="light"] .status-metric-icon-shell i {
    color: #15803d !important;
}

[data-theme-version="light"] .status-metric-card--runtime-operational .status-metric-icon-shell,
[data-theme-version="light"] .status-metric-card--connection-good .status-metric-icon-shell,
[data-theme-version="light"] .status-metric-card--pipeline-active .status-metric-icon-shell,
[data-theme-version="light"] .status-metric-card--freshness-current .status-metric-icon-shell {
    background: rgba(21, 128, 61, 0.1);
    border-color: rgba(21, 128, 61, 0.2);
}

[data-theme-version="light"] .status-metric-card--runtime-maintenance .status-metric-icon-shell,
[data-theme-version="light"] .status-metric-card--freshness-stale .status-metric-icon-shell {
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.2);
}

[data-theme-version="light"] .status-metric-card--runtime-maintenance .status-metric-icon-shell svg,
[data-theme-version="light"] .status-metric-card--freshness-stale .status-metric-icon-shell svg,
[data-theme-version="light"] .status-metric-card--runtime-maintenance .status-metric-icon-shell i,
[data-theme-version="light"] .status-metric-card--freshness-stale .status-metric-icon-shell i {
    color: #b45309 !important;
}

[data-theme-version="light"] .status-metric-card--runtime-down .status-metric-icon-shell,
[data-theme-version="light"] .status-metric-card--connection-poor .status-metric-icon-shell {
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(185, 28, 28, 0.2);
}

[data-theme-version="light"] .status-metric-card--runtime-down .status-metric-icon-shell svg,
[data-theme-version="light"] .status-metric-card--connection-poor .status-metric-icon-shell svg,
[data-theme-version="light"] .status-metric-card--runtime-down .status-metric-icon-shell i,
[data-theme-version="light"] .status-metric-card--connection-poor .status-metric-icon-shell i {
    color: #b91c1c !important;
}

/* Typography for Financial Data */
.status-metric-value {
    font-family: 'Roboto Mono', monospace;
    letter-spacing: -0.5px;
}

/* Dashboard Specific Modifiers */

/* Status Cards Shadows & Gradients - Enhanced for Themes */
.status-metric-card--runtime-operational,
.status-metric-card--connection-good,
.status-metric-card--pipeline-active,
.status-metric-card--freshness-current {
    border-bottom: 2px solid #22c55e;
    /* Neon Glow for Success Cards in Dark Mode */
    box-shadow: 0 10px 30px -10px rgba(34, 197, 94, 0.2);
}
[data-theme-version="dark"] .status-metric-card--runtime-operational,
[data-theme-version="dark"] .status-metric-card--connection-good {
     background: linear-gradient(180deg, rgba(34, 197, 94, 0.02) 0%, rgba(15, 23, 42, 0) 100%);
}

.status-metric-card--runtime-maintenance,
.status-metric-card--freshness-stale {
    border-bottom: 2px solid #f59e0b;
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.2);
}

.status-metric-card--runtime-down,
.status-metric-card--connection-poor {
    border-bottom: 2px solid #ef4444;
    box-shadow: 0 10px 30px -10px rgba(248, 113, 113, 0.2);
}

/* Status Metric Rows */
.status-metric-row {
    background: rgba(128, 128, 128, 0.05);
    border: 1px solid var(--border-color);
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.status-metric-track {
    background-color: var(--bg-input);
    border-radius: 8px;
    overflow: hidden;
    height: 8px;
}

.status-metric-bar {
    border-radius: 8px;
}

/* Model Status Cards */
.status-model-card {
    background: rgba(128, 128, 128, 0.05);
    border: 1px solid var(--border-color);
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
}

/* Text Colors for Status */
.status-model-title, 
.status-metric-title,
.status-model-text {
    color: var(--text-main) !important;
}

/* Dashboard Metric Rows Layout */
.dashboard-metrics-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.dashboard-metric-col {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 1rem;
}

/* Responsive Grid Fixes */
@media (max-width: 1199.98px) {
    .dashboard-metric-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) {
    .dashboard-metric-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .pulsis-market-strip .card-body {
        padding: 1.25rem 1rem;
    }
}

.pulsis-market-strip {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
}

/* Table Styles */
.table {
    color: var(--text-main);
}

.table thead th {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.table td {
    border-bottom: 1px solid var(--border-color);
}

.table-hover tbody tr:hover {
    background-color: rgba(128, 128, 128, 0.05);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* =========================================
   Step 2: Hero Market Strip (Bloomberg Style)
   ========================================= */

.pulsis-market-hero {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    margin: -2rem -2rem 2rem -2rem; /* Negative margin to span full width of container-fluid */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme-version="dark"] .pulsis-market-hero {
    background: linear-gradient(90deg, #020617 0%, #0f172a 100%);
    border-bottom: 1px solid rgba(57, 255, 20, 0.1);
}

[data-theme-version="light"] .pulsis-market-hero {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.market-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.market-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 10px var(--success);
    margin-right: 10px;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { opacity: 1; box-shadow: 0 0 0 0 var(--primary-glow-strong); }
    70% { opacity: 1; box-shadow: 0 0 0 10px transparent; }
    100% { opacity: 1; box-shadow: 0 0 0 0 transparent; }
}

.market-ticker-container {
    flex-grow: 1;
    margin-left: 3rem;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.market-ticker-track {
    display: flex;
    gap: 3rem;
    animation: ticker-scroll 30s linear infinite;
    white-space: nowrap;
}

.market-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ticker-symbol {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ticker-price {
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticker-change {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.ticker-change.positive {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.ticker-change.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

[data-theme-version="light"] .ticker-change.positive {
    color: #15803d;
    background: rgba(34, 197, 94, 0.15);
}

[data-theme-version="light"] .ticker-change.negative {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.15);
}

/* Dashboard Top Controls */
.dashboard-controls {
    display: flex;
    gap: 10px;
}

/* Note: .btn-glass is now defined in Buttons section above */

[data-theme-version="light"] .btn-glass {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}

[data-theme-version="light"] .btn-glass:hover,
[data-theme-version="light"] .btn-glass.active {
    background: var(--primary-glow);
    color: var(--text-main);
    border-color: var(--primary);
}

/* =========================================
   Behavioral Tags
   ========================================= */
.tag-behavioral {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.tag-drift {
    background: var(--warning-muted);
    color: var(--warning);
    border-color: hsla(38, 92%, 50%, 0.2);
}

.tag-tension {
    background: var(--destructive-muted);
    color: var(--destructive);
    border-color: hsla(0, 84%, 60%, 0.2);
}

.tag-alignment {
    background: var(--info-muted);
    color: var(--info);
    border-color: hsla(217, 91%, 60%, 0.2);
}

.tag-regime {
    background: hsla(262, 83%, 58%, 0.15);
    color: hsl(262, 83%, 58%);
    border-color: hsla(262, 83%, 58%, 0.2);
}

/* Light mode tag adjustments */
[data-theme-version="light"] .tag-drift {
    color: hsl(32, 95%, 38%);
}

[data-theme-version="light"] .tag-tension {
    color: hsl(0, 72%, 43%);
}

[data-theme-version="light"] .tag-alignment {
    color: hsl(201, 96%, 32%);
}

[data-theme-version="light"] .tag-regime {
    color: hsl(262, 83%, 45%);
}

/* =========================================
   Voice Chat Bubble
   ========================================= */
.voice-chat-bubble {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--glow-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.voice-chat-bubble:hover {
    transform: scale(1.1);
    box-shadow: var(--glow-primary), 0 8px 30px var(--primary-glow-strong);
}

.voice-chat-bubble svg {
    width: 28px;
    height: 28px;
    color: var(--primary-foreground);
}

/* =========================================
   Market Conditions Bar
   ========================================= */
.market-conditions-bar {
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    overflow-x: auto;
}

[data-theme-version="light"] .market-conditions-bar {
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
}

.condition-item {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.condition-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.condition-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* =========================================
   Pagination Styles (Compact & Pulsis Themed)
   ========================================= */

.pagination {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.35rem;
    --bs-pagination-font-size: 0.8125rem;
    --bs-pagination-border-radius: 0.5rem;
    gap: 0.25rem;
    margin-bottom: 0;
}

.pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    font-weight: 500;
    color: var(--text-muted);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--bs-pagination-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    color: var(--primary);
    background-color: var(--primary-glow);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.pagination .page-link:focus {
    color: var(--primary);
    background-color: var(--primary-glow);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-glow);
    outline: none;
}

.pagination .page-item.active .page-link,
.pagination .page-link.active {
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: var(--glow-primary);
}

.pagination .page-item.disabled .page-link,
.pagination .page-link.disabled {
    color: var(--text-muted);
    background-color: var(--bg-input);
    border-color: var(--border-color);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pagination Icons - Smaller */
.pagination .page-link i,
.pagination .page-link svg {
    font-size: 0.875rem;
    width: 0.875rem;
    height: 0.875rem;
}

/* Pagination Gutter (if using pagination-gutter class) */
.pagination.pagination-gutter {
    gap: 0.5rem;
}

.pagination.pagination-gutter .page-link {
    margin-left: 0;
}

/* Extra Small Pagination */
.pagination.pagination-xs {
    --bs-pagination-padding-x: 0.375rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.75rem;
}

.pagination.pagination-xs .page-link {
    min-width: 28px;
    height: 28px;
}

/* Small Pagination (default for Pulsis) */
.pagination.pagination-sm {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.35rem;
    --bs-pagination-font-size: 0.8125rem;
}

.pagination.pagination-sm .page-link {
    min-width: 32px;
    height: 32px;
}

/* Remove large pagination styles */
.pagination.pagination-lg {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-font-size: 0.875rem;
}

.pagination.pagination-lg .page-link {
    min-width: 36px;
    height: 36px;
}

/* Pagination with no background */
.pagination.no-bg .page-link {
    background-color: transparent;
    border-color: var(--border-color);
}

.pagination.no-bg .page-link:hover {
    background-color: var(--primary-glow);
}

/* Pagination Primary Color Variant */
.pagination.pagination-primary .page-item.active .page-link,
.pagination.pagination-primary .page-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .pagination {
        --bs-pagination-padding-x: 0.375rem;
        --bs-pagination-padding-y: 0.3rem;
        --bs-pagination-font-size: 0.75rem;
        gap: 0.2rem;
    }
    
    .pagination .page-link {
        min-width: 30px;
        height: 30px;
    }
}

/* =========================================
   PULSIS DESIGN SYSTEM - COLOR REFERENCE
   =========================================
   
   This color palette is aligned with the Pulsis Design System
   (https://pulsis.23east.co/design-system/foundations/colors)
   
   All colors meet WCAG 2.1 AA contrast requirements.
   
   -------------------------------------------
   PRIMARY (Emerald Green - Institutional)
   -------------------------------------------
   Dark Mode:  hsl(142, 76%, 36%) = #22c55e
   Light Mode: hsl(142, 71%, 29%) = #15803d
   
   Usage: Primary actions, buttons, links, success indicators
   
   -------------------------------------------
   SEMANTIC COLORS
   -------------------------------------------
   Success (Gains):
     Dark:  hsl(142, 76%, 45%) = #34d369
     Light: hsl(142, 71%, 29%) = #15803d
   
   Destructive (Losses):
     Dark:  hsl(0, 84%, 60%)   = #ef4444
     Light: hsl(0, 72%, 43%)   = #b91c1c
   
   Warning (Caution):
     Dark:  hsl(38, 92%, 50%)  = #f59e0b
     Light: hsl(32, 95%, 38%)  = #b45309
   
   Info (Information):
     Dark:  hsl(217, 91%, 60%) = #3b82f6
     Light: hsl(201, 96%, 32%) = #0369a1
   
   -------------------------------------------
   BACKGROUND HIERARCHY (Dark Mode)
   -------------------------------------------
   Body:     hsl(240, 10%, 3.9%)  = #0a0a0c  (deepest)
   Sidebar:  hsl(240, 10%, 2%)    = #050506
   Card:     hsl(240, 10%, 7%)    = #111214
   Muted:    hsl(240, 3.7%, 15.9%)= #27272a
   Input:    hsl(240, 10%, 7%)    = #111214
   
   -------------------------------------------
   BACKGROUND HIERARCHY (Light Mode)
   -------------------------------------------
   Body:     hsl(210, 20%, 98%)   = #f8fafc
   Card:     hsl(0, 0%, 100%)     = #ffffff
   Muted:    hsl(210, 40%, 96%)   = #f1f5f9
   
   -------------------------------------------
   TEXT HIERARCHY
   -------------------------------------------
   Dark Mode:
     Main:   hsl(0, 0%, 98%)      = #fafafa
     Muted:  hsl(240, 5%, 64.9%)  = #a1a1aa
     Faint:  hsl(240, 4%, 46%)    = #717179
   
   Light Mode:
     Main:   hsl(222, 47%, 11%)   = #0f172a
     Muted:  hsl(215, 16%, 37%)   = #525d6c
     Faint:  hsl(215, 14%, 54%)   = #778193
   
   -------------------------------------------
   CHART COLORS (5-Color Palette)
   -------------------------------------------
   Chart 1: hsl(142, 76%, 45%)  = Emerald
   Chart 2: hsl(217, 91%, 60%)  = Blue
   Chart 3: hsl(262, 83%, 58%)  = Purple
   Chart 4: hsl(38, 92%, 50%)   = Amber
   Chart 5: hsl(340, 82%, 52%)  = Rose
   
   -------------------------------------------
   BORDER RADIUS SYSTEM
   -------------------------------------------
   Cards:     16px (rounded-xl)
   Buttons:   12px (rounded-lg)
   Inputs:    12px (rounded-lg)
   Badges:    6px  (rounded-md)
   Pills:     999px (full round - use sparingly)
   
   ========================================= */