/**
 * ============================================================================
 * AyzReportMvc - Financial BI & Live Reporting Design System Tokens
 * Target: Logo ERP (Tiger / Go3) Real-time Financial Intelligence
 * File: bi-tokens.css
 * 
 * DESIGN CONCEPTS INCLUDED:
 *  1. [data-bi-theme="executive-slate"]  - Executive Slate & Emerald (Bloomberg/Stripe Hybrid)
 *  2. [data-bi-theme="swiss-minimalist"] - Swiss Minimalist Enterprise (Apple/Linear Clean)
 *     [data-bi-theme="swiss-dark"]       - Swiss Minimalist Dark Mode
 *  3. [data-bi-theme="cyber-neon"]        - Fintech Cyber Neon (Obsidian, Cyan & Amber)
 * 
 * COMPATIBILITY LAYER:
 *  Automatically aliases existing AyzReportMvc legacy tokens (--bg-color,
 *  --primary-color, --finance-inflow, etc.) to the active --bi-* design tokens.
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================================
   GLOBAL BASE DESIGN TOKENS (Shared System Dimensions & Spacing)
   ============================================================================ */
:root {
  /* Typography Scale */
  --bi-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bi-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
  --bi-font-display: 'Plus Jakarta Sans', sans-serif;

  /* Font Feature Settings for Financial Tabular Figures */
  --bi-font-features-tabular: 'tnum' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1, 'zero' 1;
  --bi-font-features-mono: 'zero' 1, 'cv05' 1;

  /* Type Scale */
  --bi-text-2xs: 0.6875rem; /* 11px */
  --bi-text-xs:  0.75rem;   /* 12px */
  --bi-text-sm:  0.8125rem; /* 13px */
  --bi-text-base: 0.875rem; /* 14px - BI Enterprise Default */
  --bi-text-md:  0.9375rem; /* 15px */
  --bi-text-lg:  1.0625rem; /* 17px */
  --bi-text-xl:  1.25rem;   /* 20px */
  --bi-text-2xl: 1.5rem;    /* 24px */
  --bi-text-3xl: 1.875rem;  /* 30px */
  --bi-text-4xl: 2.25rem;   /* 36px */

  /* Spacing Scale (Mathematical 4px Grid) */
  --bi-space-1: 0.25rem;  /* 4px */
  --bi-space-2: 0.5rem;   /* 8px */
  --bi-space-3: 0.75rem;  /* 12px */
  --bi-space-4: 1rem;     /* 16px */
  --bi-space-5: 1.25rem;  /* 20px */
  --bi-space-6: 1.5rem;   /* 24px */
  --bi-space-8: 2rem;     /* 32px */
  --bi-space-10: 2.5rem;  /* 40px */

  /* Border Radii */
  --bi-radius-xs: 2px;
  --bi-radius-sm: 4px;
  --bi-radius-md: 6px;
  --bi-radius-lg: 10px;
  --bi-radius-xl: 14px;
  --bi-radius-full: 9999px;

  /* Transition Speeds */
  --bi-transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --bi-transition-normal: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --bi-transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation & Stacking Context (Bootstrap / Layout Align) */
  --bi-z-table-sticky: 1024;
  --bi-z-toolbar: 1026;
  --bi-z-filters: 1028;
  --bi-z-navbar: 1030;
  --bi-z-sidebar: 1035;
  --bi-z-modal: 1055;
  --bi-z-toast: 1070;
  --bi-z-tooltip: 1080;
}

/* ============================================================================
   CONCEPT 1: "EXECUTIVE SLATE & EMERALD" (Default & Flagship)
   Vibe: Modern Bloomberg / Stripe Hybrid, Deep Slate 950, Phosphor Emerald
   ============================================================================ */
[data-theme="dark"]:not([data-bi-theme="swiss-minimalist"]):not([data-bi-theme="swiss-light"]),
[data-bi-theme="executive-slate"] {
  /* Color Canvas & Surfaces */
  --bi-surface-ground: #0A0E17;        /* Ultra-deep obsidian slate canvas */
  --bi-surface-subtle: #0F1422;        /* Table zebra / secondary layer */
  --bi-surface-card: #131A29;          /* Executive card background */
  --bi-surface-card-hover: #182033;    /* Card interactive hover state */
  --bi-surface-overlay: #1C263B;       /* Dropdowns, tooltips, flyouts */
  --bi-surface-sidebar: #0D121F;       /* Left nav panel */
  --bi-surface-header: rgba(13, 18, 31, 0.88); /* Frosted topbar */

  /* Borders & Dividers */
  --bi-border-subtle: rgba(255, 255, 255, 0.06);
  --bi-border-default: #1E293B;        /* Slate 800 */
  --bi-border-strong: #334155;         /* Slate 700 */
  --bi-border-highlight: rgba(16, 185, 129, 0.35); /* Emerald accent border */

  /* Text & Content Hierarchy */
  --bi-text-primary: #F8FAFC;          /* Crisp high-contrast white */
  --bi-text-secondary: #94A3B8;        /* Muted slate text (WCAG AAA compliant) */
  --bi-text-tertiary: #64748B;         /* Table headers, timestamps */
  --bi-text-inverse: #0A0E17;

  /* Brand Accents */
  --bi-primary: #10B981;               /* Phosphor Emerald 500 */
  --bi-primary-hover: #059669;         /* Emerald 600 */
  --bi-primary-light: rgba(16, 185, 129, 0.12);
  --bi-primary-glow: rgba(16, 185, 129, 0.25);
  
  --bi-secondary: #38BDF8;             /* Sky Ice Blue */
  --bi-secondary-light: rgba(56, 189, 248, 0.12);
  
  --bi-accent: #6366F1;                /* Indigo Tech Accent */

  /* Financial Domain Semantics (Logo ERP) */
  --bi-finance-inflow: #10B981;        /* Kasa/Banka Girişi, Satışlar, Tahsilat */
  --bi-finance-inflow-bg: rgba(16, 185, 129, 0.12);
  --bi-finance-inflow-border: rgba(16, 185, 129, 0.3);

  --bi-finance-outflow: #F43F5E;       /* Tediye, Gider, Satıcı Ödemeleri */
  --bi-finance-outflow-bg: rgba(244, 63, 94, 0.12);
  --bi-finance-outflow-border: rgba(244, 63, 94, 0.3);

  --bi-finance-pending: #F59E0B;       /* Portföydeki Çek/Senet, Vadesi Yaklaşanlar */
  --bi-finance-pending-bg: rgba(245, 158, 11, 0.12);
  --bi-finance-pending-border: rgba(245, 158, 11, 0.3);

  --bi-finance-neutral: #0EA5E9;       /* Banka Virman, Döviz Pozisyonu */
  --bi-finance-neutral-bg: rgba(14, 165, 233, 0.12);
  --bi-finance-neutral-border: rgba(14, 165, 233, 0.3);

  --bi-finance-risk: #EF4444;          /* Karşılıksız Çek, Protestolu Senet */
  --bi-finance-risk-bg: rgba(239, 68, 68, 0.16);

  /* Aging Buckets (Borç & Alacak Yaşlandırma) */
  --bi-aging-current: #10B981;         /* Vadesi Gelmemiş (0 Gün) */
  --bi-aging-30:      #38BDF8;         /* 1 - 30 Gün */
  --bi-aging-60:      #60A5FA;         /* 31 - 60 Gün */
  --bi-aging-90:      #F59E0B;         /* 61 - 90 Gün */
  --bi-aging-120:     #F97316;         /* 91 - 120 Gün */
  --bi-aging-critical:#EF4444;         /* 120+ Gün (Şüpheli Alacak) */

  /* Shadows & Depth */
  --bi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --bi-shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --bi-shadow-card-hover: 0 10px 28px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.25);
  --bi-shadow-overlay: 0 16px 36px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Status Tokens */
  --bi-status-success: #10B981;
  --bi-status-warning: #F59E0B;
  --bi-status-danger:  #EF4444;
  --bi-status-info:    #38BDF8;

  /* Data Table Specific */
  --bi-table-header-bg: #0F1422;
  --bi-table-row-hover: rgba(255, 255, 255, 0.035);
  --bi-table-row-stripe: rgba(255, 255, 255, 0.015);
  --bi-table-border: rgba(255, 255, 255, 0.07);

  /* Legacy Mapping for Smooth AyzReportMvc Compatibility */
  --bg-color: var(--bi-surface-ground);
  --text-color: var(--bi-text-primary);
  --card-bg: var(--bi-surface-card);
  --sidebar-bg: var(--bi-surface-sidebar);
  --sidebar-text: var(--bi-text-secondary);
  --sidebar-hover-bg: var(--bi-surface-card);
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-bg: var(--bi-primary);
  --primary-color: var(--bi-primary);
  --primary-hover: var(--bi-primary-hover);
  --primary-light: var(--bi-primary-light);
  --border-color: var(--bi-border-default);
  --accent-color: var(--bi-secondary);
  --finance-inflow: var(--bi-finance-inflow);
  --finance-outflow: var(--bi-finance-outflow);
  --finance-warning: var(--bi-finance-pending);
  --finance-highlight: var(--bi-aging-30);
}

/* ============================================================================
   CONCEPT 2: "SWISS MINIMALIST ENTERPRISE" (Light Mode - Apple/Linear Style)
   Vibe: Ultra Clean, 1px Architectural Borders, Max Data Density, Plus Jakarta Sans
   ============================================================================ */
:root,
[data-theme="light"] {
  /* Color Canvas & Surfaces */
  --bi-surface-ground: #F8FAFC;        /* Architectural Slate 50 */
  --bi-surface-subtle: #F1F5F9;        /* Slate 100 */
  --bi-surface-card: #FFFFFF;          /* Pure Crisp White */
  --bi-surface-card-hover: #FAFCFE;    /* Subtle pristine hover */
  --bi-surface-overlay: #FFFFFF;       /* Dropdowns & Popovers */
  --bi-surface-sidebar: #FFFFFF;       /* Clean Light Sidebar (React Aura match) */
  --bi-surface-header: rgba(255, 255, 255, 0.92);

  /* Borders & Dividers */
  --bi-border-subtle: #F1F5F9;
  --bi-border-default: #E2E8F0;        /* 1px Slate 200 */
  --bi-border-strong: #CBD5E1;         /* Slate 300 */
  --bi-border-highlight: #2563EB;      /* Swiss Blue Accent */

  /* Text & Content Hierarchy */
  --bi-text-primary: #0F172A;          /* Slate 900 */
  --bi-text-secondary: #475569;        /* Slate 600 */
  --bi-text-tertiary: #94A3B8;         /* Slate 400 */
  --bi-text-inverse: #FFFFFF;

  /* Brand Accents */
  --bi-primary: #2563EB;               /* Swiss Cobalt 600 */
  --bi-primary-hover: #1D4ED8;         /* Blue 700 */
  --bi-primary-light: rgba(37, 99, 235, 0.08);
  --bi-primary-glow: rgba(37, 99, 235, 0.15);

  --bi-secondary: #0284C7;             /* Sky 600 */
  --bi-secondary-light: rgba(2, 132, 199, 0.08);

  --bi-accent: #475569;                /* Slate 600 Precision Accent */

  /* Financial Domain Semantics (Logo ERP) */
  --bi-finance-inflow: #059669;        /* Deep Emerald 600 */
  --bi-finance-inflow-bg: rgba(5, 150, 105, 0.08);
  --bi-finance-inflow-border: rgba(5, 150, 105, 0.25);

  --bi-finance-outflow: #DC2626;       /* Clean Signal Red */
  --bi-finance-outflow-bg: rgba(220, 38, 38, 0.08);
  --bi-finance-outflow-border: rgba(220, 38, 38, 0.25);

  --bi-finance-pending: #D97706;       /* Swiss Ochre Amber */
  --bi-finance-pending-bg: rgba(217, 119, 6, 0.08);
  --bi-finance-pending-border: rgba(217, 119, 6, 0.25);

  --bi-finance-neutral: #475569;       /* Slate 600 */
  --bi-finance-neutral-bg: rgba(71, 85, 105, 0.08);
  --bi-finance-neutral-border: rgba(71, 85, 105, 0.2);

  --bi-finance-risk: #B91C1C;
  --bi-finance-risk-bg: rgba(185, 28, 28, 0.1);

  /* Aging Buckets */
  --bi-aging-current: #059669;
  --bi-aging-30:      #0284C7;
  --bi-aging-60:      #4F46E5;
  --bi-aging-90:      #D97706;
  --bi-aging-120:     #EA580C;
  --bi-aging-critical:#DC2626;

  /* Shadows (Swiss Precision Minimalist) */
  --bi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bi-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px #E2E8F0;
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px #CBD5E1;
  --bi-shadow-overlay: 0 10px 24px -2px rgba(0, 0, 0, 0.08), 0 0 0 1px #E2E8F0;

  /* Data Table Specific */
  --bi-table-header-bg: #F8FAFC;
  --bi-table-row-hover: #F1F5F9;
  --bi-table-row-stripe: #F8FAFC;
  --bi-table-border: #E2E8F0;

  /* Legacy Mapping */
  --bg-color: var(--bi-surface-ground);
  --text-color: var(--bi-text-primary);
  --card-bg: var(--bi-surface-card);
  --sidebar-bg: var(--bi-surface-sidebar);
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-bg: var(--bi-primary);
  --sidebar-header-text: #94a3b8;
  --primary-color: var(--bi-primary);
  --primary-hover: var(--bi-primary-hover);
  --primary-light: var(--bi-primary-light);
  --border-color: var(--bi-border-default);
  --accent-color: var(--bi-secondary);
  --finance-inflow: var(--bi-finance-inflow);
  --finance-outflow: var(--bi-finance-outflow);
  --finance-warning: var(--bi-finance-pending);
  --finance-highlight: var(--bi-primary);
}

/* swiss-minimalist preset — clean crisp light sidebar */
[data-bi-theme="swiss-minimalist"],
[data-theme-skin="swiss-minimalist"] {
  --bi-surface-sidebar: #FFFFFF;
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-active-bg: #2563EB;
  --sidebar-active-text: #FFFFFF;
  --sidebar-header-text: #94a3b8;
  --bi-border-default: #CBD5E1;
  --bi-border-strong: #94A3B8;
  --border-color: #CBD5E1;
}

/* ============================================================================
   PER-PRESET LIGHT-MODE SKIN OVERRIDES (React Aura 1:1 Light Surface Alignment)
   These [data-theme-skin="*"] blocks provide each preset its unique visual DNA
   in light mode: distinct background, border, and primary accent, with a
   clean, modern light sidebar matching React Aura.
   ============================================================================ */

/* 1. modern-bi — Default Safir Mavi / Slate Gri (no override needed) */

/* 2. classic — Derin Deniz Mavisi Accent + Krem arkaplan + Temiz Beyaz Sidebar */
[data-theme-skin="classic"],
[data-theme="light"][data-theme-skin="classic"] {
  --bg-color: #fafaf8;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(30, 58, 95, 0.06);
  --sidebar-active-bg: #1e3a5f;
  --sidebar-active-text: #ffffff;
  --sidebar-header-text: #94a3b8;
  --primary-color: #1e3a5f;
  --primary-hover: #1e3355;
  --primary-light: rgba(30, 58, 95, 0.08);
  --border-color: #bfdbfe;
  --bi-surface-ground: #fafaf8;
  --bi-primary: #1e3a5f;
  --bi-primary-hover: #1e3355;
  --bi-primary-light: rgba(30, 58, 95, 0.08);
  --bi-surface-sidebar: #ffffff;
  --bi-border-default: #bfdbfe;
}

/* 3. powerbi — Amber Altın / Sıcak Krem + Temiz Beyaz Sidebar */
[data-theme-skin="powerbi"],
[data-theme="light"][data-theme-skin="powerbi"] {
  --bg-color: #fefce8;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(217, 119, 6, 0.08);
  --sidebar-active-bg: #d97706;
  --sidebar-active-text: #ffffff;
  --sidebar-header-text: #94a3b8;
  --primary-color: #d97706;
  --primary-hover: #b45309;
  --primary-light: rgba(217, 119, 6, 0.10);
  --border-color: #fde68a;
  --bi-surface-ground: #fefce8;
  --bi-primary: #d97706;
  --bi-primary-hover: #b45309;
  --bi-primary-light: rgba(217, 119, 6, 0.10);
  --bi-surface-sidebar: #ffffff;
  --bi-border-default: #fde68a;
}

/* 4. emerald — Zümrüt Yeşil / Taze Yeşil Arkaplan + Temiz Beyaz Sidebar */
[data-theme-skin="emerald"],
[data-theme="light"][data-theme-skin="emerald"] {
  --bg-color: #f0fdf4;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(5, 150, 105, 0.08);
  --sidebar-active-bg: #059669;
  --sidebar-active-text: #ffffff;
  --sidebar-header-text: #94a3b8;
  --primary-color: #059669;
  --primary-hover: #047857;
  --primary-light: rgba(5, 150, 105, 0.10);
  --border-color: #bbf7d0;
  --bi-surface-ground: #f0fdf4;
  --bi-primary: #059669;
  --bi-primary-hover: #047857;
  --bi-primary-light: rgba(5, 150, 105, 0.10);
  --bi-surface-sidebar: #ffffff;
  --bi-border-default: #bbf7d0;
}

/* 5. executive-slate (light) — Premium Lacivert + Buz Mavisi Zemin + Temiz Beyaz Sidebar */
[data-theme-skin="executive-slate"],
[data-theme="light"][data-theme-skin="executive-slate"] {
  --bg-color: #f0f4ff;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(30, 64, 175, 0.08);
  --sidebar-active-bg: #1e40af;
  --sidebar-active-text: #ffffff;
  --sidebar-header-text: #94a3b8;
  --primary-color: #1e40af;
  --primary-hover: #1d4ed8;
  --primary-light: rgba(30, 64, 175, 0.10);
  --border-color: #bfdbfe;
  --bi-surface-ground: #f0f4ff;
  --bi-primary: #1e40af;
  --bi-primary-hover: #1d4ed8;
  --bi-primary-light: rgba(30, 64, 175, 0.10);
  --bi-surface-sidebar: #ffffff;
  --bi-border-default: #bfdbfe;
}

/* 6. cyber-neon (light) → Tech Violet — Mor Accent + Lavanta Arkaplan + Temiz Beyaz Sidebar */
[data-theme-skin="cyber-neon"],
[data-theme="light"][data-theme-skin="cyber-neon"] {
  --bg-color: #f5f3ff;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #334155;
  --sidebar-hover-bg: rgba(124, 58, 237, 0.08);
  --sidebar-active-bg: #7c3aed;
  --sidebar-active-text: #ffffff;
  --sidebar-header-text: #94a3b8;
  --primary-color: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: rgba(124, 58, 237, 0.10);
  --border-color: #ddd6fe;
  --bi-surface-ground: #f5f3ff;
  --bi-primary: #7c3aed;
  --bi-primary-hover: #6d28d9;
  --bi-primary-light: rgba(124, 58, 237, 0.10);
  --bi-surface-sidebar: #ffffff;
  --bi-border-default: #ddd6fe;
}

/* Swiss Minimalist Dark Mode Variant */
[data-bi-theme="swiss-dark"] {
  --bi-surface-ground: #090A0F;
  --bi-surface-subtle: #12131A;
  --bi-surface-card: #141620;
  --bi-surface-card-hover: #1B1D2A;
  --bi-surface-overlay: #1F2230;
  --bi-surface-sidebar: #0E0F16;
  --bi-surface-header: rgba(14, 15, 22, 0.92);

  --bi-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-default: rgba(255, 255, 255, 0.1);
  --bi-border-strong: rgba(255, 255, 255, 0.18);
  --bi-border-highlight: #3B82F6;

  --bi-text-primary: #F8FAFC;
  --bi-text-secondary: #94A3B8;
  --bi-text-tertiary: #64748B;
  --bi-text-inverse: #090A0F;

  --bi-primary: #3B82F6;
  --bi-primary-hover: #2563EB;
  --bi-primary-light: rgba(59, 130, 246, 0.14);

  --bi-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --bi-shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.35);

  --bi-table-header-bg: #12131A;
  --bi-table-row-hover: rgba(255, 255, 255, 0.03);
  --bi-table-row-stripe: rgba(255, 255, 255, 0.012);
  --bi-table-border: rgba(255, 255, 255, 0.08);

  --bg-color: var(--bi-surface-ground);
  --text-color: var(--bi-text-primary);
  --card-bg: var(--bi-surface-card);
  --sidebar-bg: var(--bi-surface-sidebar);
  --sidebar-text: var(--bi-text-secondary);
}

/* ============================================================================
   CONCEPT 3: "FINTECH CYBER NEON"
   Vibe: Futuristic Quantitative Terminal, Obsidian Glass, Electric Cyan & Amber Gold
   ============================================================================ */
[data-bi-theme="cyber-neon"] {
  /* Color Canvas & Surfaces */
  --bi-surface-ground: #03060C;        /* Deep Space Void */
  --bi-surface-subtle: #080D1A;        /* Secondary Matrix Layer */
  --bi-surface-card: rgba(10, 16, 30, 0.78); /* High-tech Glass Panel */
  --bi-surface-card-hover: rgba(16, 25, 48, 0.88);
  --bi-surface-overlay: #0E172B;
  --bi-surface-sidebar: #050914;
  --bi-surface-header: rgba(5, 9, 20, 0.85);

  /* Backdrop Blur Glass */
  --bi-glass-filter: blur(14px) saturate(160%);

  /* Borders with Neon Glow Capability */
  --bi-border-subtle: rgba(0, 245, 255, 0.08);
  --bi-border-default: rgba(0, 245, 255, 0.16);
  --bi-border-strong: rgba(0, 245, 255, 0.32);
  --bi-border-highlight: #00F5FF;      /* Laser Cyan */

  /* Text & Content Hierarchy */
  --bi-text-primary: #FFFFFF;
  --bi-text-secondary: #93C5FD;        /* Soft Electric Ice Blue */
  --bi-text-tertiary: #60A5FA;         /* Dim Neon Slate */
  --bi-text-inverse: #03060C;

  /* Brand Accents */
  --bi-primary: #00F5FF;               /* Electric Laser Cyan */
  --bi-primary-hover: #00D8E6;
  --bi-primary-light: rgba(0, 245, 255, 0.12);
  --bi-primary-glow: 0 0 16px rgba(0, 245, 255, 0.45);

  --bi-secondary: #FFB800;             /* Molten Amber Gold */
  --bi-secondary-light: rgba(255, 184, 0, 0.12);
  --bi-secondary-glow: 0 0 14px rgba(255, 184, 0, 0.4);

  --bi-accent: #7B61FF;                /* Quantum Violet */

  /* Financial Domain Semantics (Logo ERP) */
  --bi-finance-inflow: #00FF88;        /* Cyber Mint / Phosphor Green */
  --bi-finance-inflow-bg: rgba(0, 255, 136, 0.12);
  --bi-finance-inflow-border: rgba(0, 255, 136, 0.35);

  --bi-finance-outflow: #FF3366;       /* Neon Crimson / Plasma Red */
  --bi-finance-outflow-bg: rgba(255, 51, 102, 0.12);
  --bi-finance-outflow-border: rgba(255, 51, 102, 0.35);

  --bi-finance-pending: #FFB800;       /* Cyber Amber Gold */
  --bi-finance-pending-bg: rgba(255, 184, 0, 0.12);
  --bi-finance-pending-border: rgba(255, 184, 0, 0.35);

  --bi-finance-neutral: #00F5FF;       /* Cyan Laser */
  --bi-finance-neutral-bg: rgba(0, 245, 255, 0.1);
  --bi-finance-neutral-border: rgba(0, 245, 255, 0.3);

  --bi-finance-risk: #FF1744;
  --bi-finance-risk-bg: rgba(255, 23, 68, 0.2);

  /* Aging Buckets */
  --bi-aging-current: #00FF88;
  --bi-aging-30:      #00F5FF;
  --bi-aging-60:      #7B61FF;
  --bi-aging-90:      #FFB800;
  --bi-aging-120:     #FF8800;
  --bi-aging-critical:#FF3366;

  /* Shadows (Cyber Neon Glow) */
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
  --bi-shadow-card: 0 8px 32px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 245, 255, 0.15);
  --bi-shadow-card-hover: 0 12px 36px -4px rgba(0, 245, 255, 0.2), 0 0 0 1px #00F5FF;
  --bi-shadow-overlay: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 245, 255, 0.25);

  /* Data Table Specific */
  --bi-table-header-bg: #070D1A;
  --bi-table-row-hover: rgba(0, 245, 255, 0.05);
  --bi-table-row-stripe: rgba(255, 255, 255, 0.015);
  --bi-table-border: rgba(0, 245, 255, 0.12);

  /* Legacy Mapping */
  --bg-color: var(--bi-surface-ground);
  --text-color: var(--bi-text-primary);
  --card-bg: var(--bi-surface-card);
  --sidebar-bg: var(--bi-surface-sidebar);
  --sidebar-text: var(--bi-text-secondary);
  --sidebar-hover-bg: #0D162B;
  --sidebar-active-text: #03060C;
  --sidebar-active-bg: var(--bi-primary);
  --primary-color: var(--bi-primary);
  --primary-hover: var(--bi-primary-hover);
  --primary-light: var(--bi-primary-light);
  --border-color: var(--bi-border-default);
  --accent-color: var(--bi-secondary);
  --finance-inflow: var(--bi-finance-inflow);
  --finance-outflow: var(--bi-finance-outflow);
  --finance-warning: var(--bi-finance-pending);
  --finance-highlight: var(--bi-primary);
}

/* ============================================================================
   EXECUTIVE BI COMPONENT UTILITIES (Production Ready CSS)
   ============================================================================ */

/* 1. Executive Tabular Numbers Class */
.bi-tabular-nums {
  font-family: var(--bi-font-mono);
  font-feature-settings: var(--bi-font-features-tabular);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 2. Executive KPI / Stat Card */
.bi-stat-card {
  position: relative;
  background: var(--bi-surface-card);
  border: 1px solid var(--bi-border-default);
  border-radius: var(--bi-radius-lg);
  padding: var(--bi-space-5) var(--bi-space-6);
  box-shadow: var(--bi-shadow-card);
  transition: all var(--bi-transition-normal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bi-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bi-primary), transparent 70%);
  opacity: 0.75;
  transition: opacity var(--bi-transition-normal);
}

.bi-stat-card:hover {
  background: var(--bi-surface-card-hover);
  box-shadow: var(--bi-shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--bi-border-highlight);
}

.bi-stat-card:hover::before {
  opacity: 1;
  height: 3px;
}

/* Card Header & Label */
.bi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bi-space-3);
}

.bi-card-title {
  font-family: var(--bi-font-sans);
  font-size: var(--bi-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bi-text-secondary);
  margin: 0;
}

.bi-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bi-radius-md);
  background: var(--bi-surface-subtle);
  color: var(--bi-text-secondary);
  border: 1px solid var(--bi-border-subtle);
}

/* Primary Metric Value */
.bi-kpi-value {
  font-family: var(--bi-font-mono);
  font-size: var(--bi-text-3xl);
  font-weight: 700;
  color: var(--bi-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-feature-settings: var(--bi-font-features-tabular);
  margin-bottom: var(--bi-space-2);
}

.bi-kpi-subtext {
  font-family: var(--bi-font-body);
  font-size: var(--bi-text-xs);
  color: var(--bi-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--bi-space-2);
}

/* Delta Badges (+% / -%) */
.bi-delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--bi-radius-full);
  font-family: var(--bi-font-mono);
  font-size: var(--bi-text-xs);
  font-weight: 600;
  line-height: 1.4;
  font-feature-settings: var(--bi-font-features-tabular);
}

.bi-delta-badge.is-positive {
  color: var(--bi-finance-inflow);
  background: var(--bi-finance-inflow-bg);
  border: 1px solid var(--bi-finance-inflow-border);
}

.bi-delta-badge.is-negative {
  color: var(--bi-finance-outflow);
  background: var(--bi-finance-outflow-bg);
  border: 1px solid var(--bi-finance-outflow-border);
}

.bi-delta-badge.is-pending {
  color: var(--bi-finance-pending);
  background: var(--bi-finance-pending-bg);
  border: 1px solid var(--bi-finance-pending-border);
}

/* 3. Live Streaming Signal Pulse */
.bi-pulse-indicator {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bi-primary);
}

.bi-pulse-indicator::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bi-primary);
  opacity: 0.8;
  animation: biPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes biPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 4. High-Density Enterprise Data Table (DataTables & Logo ERP Shell) */
.bi-table-container {
  background: var(--bi-surface-card);
  border: 1px solid var(--bi-border-default);
  border-radius: var(--bi-radius-lg);
  overflow: hidden;
  box-shadow: var(--bi-shadow-card);
}

.bi-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--bi-font-body);
  font-size: var(--bi-text-base);
  color: var(--bi-text-primary);
}

.bi-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--bi-z-table-sticky);
  background: var(--bi-table-header-bg);
  color: var(--bi-text-secondary);
  font-family: var(--bi-font-sans);
  font-size: var(--bi-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--bi-space-3) var(--bi-space-4);
  border-bottom: 1px solid var(--bi-border-default);
  white-space: nowrap;
}

.bi-table tbody td {
  padding: 0.55rem var(--bi-space-4);
  border-bottom: 1px solid var(--bi-table-border);
  vertical-align: middle;
  height: 38px; /* High data density target */
}

.bi-table tbody tr:hover td {
  background-color: var(--bi-table-row-hover);
}

.bi-table tbody td.is-number {
  text-align: right;
  font-family: var(--bi-font-mono);
  font-feature-settings: var(--bi-font-features-tabular);
}

/* Aging Analysis Badges */
.bi-aging-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--bi-radius-sm);
  font-family: var(--bi-font-mono);
  font-size: var(--bi-text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bi-aging-pill.vadesi-gelmemis { color: var(--bi-aging-current); background: rgba(16, 185, 129, 0.12); }
.bi-aging-pill.gun-30          { color: var(--bi-aging-30); background: rgba(56, 189, 248, 0.12); }
.bi-aging-pill.gun-60          { color: var(--bi-aging-60); background: rgba(96, 165, 250, 0.12); }
.bi-aging-pill.gun-90          { color: var(--bi-aging-90); background: rgba(245, 158, 11, 0.12); }
.bi-aging-pill.gun-120         { color: var(--bi-aging-120); background: rgba(249, 115, 22, 0.12); }
.bi-aging-pill.kritik-supheli  { color: var(--bi-aging-critical); background: rgba(239, 68, 68, 0.15); font-weight: 700; }

/* 5. Chart Container Aspect & Glass Effect */
.bi-chart-card {
  background: var(--bi-surface-card);
  border: 1px solid var(--bi-border-default);
  border-radius: var(--bi-radius-lg);
  padding: var(--bi-space-4) var(--bi-space-5);
  box-shadow: var(--bi-shadow-card);
  position: relative;
}

.bi-chart-container {
  position: relative;
  width: 100%;
  min-height: 280px;
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}