/* ==============================================
   DESIGN SYSTEM - TYPOGRAPHY
   ============================================== */
:root {
  /* Font Family */
  --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

  /* Font Sizes - Type Scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 2.5rem;      /* 40px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;     /* For headings */
  --line-height-normal: 1.5;    /* For body text */
  --line-height-relaxed: 1.75;  /* For long-form content */

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

/* ==============================================
   DESIGN SYSTEM - SPACING
   ============================================== */
:root {
  /* Spacing Scale */
  --spacing-0: 0;
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.5rem;      /* 24px */
  --spacing-6: 2rem;        /* 32px */
  --spacing-8: 3rem;        /* 48px */
  --spacing-10: 4rem;       /* 64px */
  --spacing-12: 6rem;       /* 96px */

  /* Named Spacing (Semantic) */
  --spacing-xs: var(--spacing-2);   /* 8px */
  --spacing-sm: var(--spacing-3);   /* 12px */
  --spacing-md: var(--spacing-4);   /* 16px */
  --spacing-lg: var(--spacing-5);   /* 24px */
  --spacing-xl: var(--spacing-6);   /* 32px */
  --spacing-2xl: var(--spacing-8);  /* 48px */
  --spacing-3xl: var(--spacing-10); /* 64px */
}

/* ==============================================
   DESIGN SYSTEM - BORDER RADIUS
   ============================================== */
:root {
  /* Border Radius Scale */
  --radius-none: 0;
  --radius-sm: 0.375rem;    /* 6px */
  --radius-base: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;     /* 12px */
  --radius-lg: 1rem;        /* 16px */
  --radius-xl: 1.5rem;      /* 24px */
  --radius-full: 9999px;    /* Full rounded / pill shape */
}

/* ==============================================
   DESIGN SYSTEM - SHADOWS (ELEVATION)
   ============================================== */
:root {
  /* Shadow Scale - Dark Theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

/* ==============================================
   DESIGN SYSTEM - COLORS
   ============================================== */
:root {
  /* Semantic Colors - Dark Theme */
  --color-primary: #4da3ff;
  --color-success: #28c081;
  --color-warning: #ffc107;
  --color-error: #ff6b6b;
  --color-info: #00d4ff;

  /* Accent Colors */
  --color-purple: #a988ff;
  --color-pink: #ff7eb3;
  --color-orange: #ff9f43;
  --color-teal: #00cec9;

  /* Neutral Palette - Dark Theme */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* ==============================================
   DARK THEME (Default)
   ============================================== */
:root {
  /* Background Colors */
  --bg: #0b1020;
  --surface: #11162a;
  --panel: #151c33;

  /* Text Colors */
  --text: #e8ecf3;
  --text-secondary: #9aa3b2;
  --muted: #9aa3b2;

  /* Theme-specific semantic colors */
  --green: var(--color-success);
  --red: var(--color-error);
  --blue: var(--color-primary);
  --purple: var(--color-purple);
  --warning: var(--color-warning);
  --info: var(--color-info);

  /* Interactive States */
  --ring: rgba(77, 163, 255, .25);
  --focus-ring: rgba(77, 163, 255, .4);

  /* Borders */
  --border: #1c2440;
  --border-light: #1e2748;
  --border-hover: #2a3559;

  /* Component-specific */
  --input-bg: #0f142a;
  --input-border: #1f2a4e;
  --input-border-focus: var(--color-primary);
  --kpi-bg: #121939;
  --kpi-border: #1e2748;
  --topbar-bg: rgba(17, 22, 42, .8);
  --card-shadow: rgba(0, 0, 0, .25);
  --btn-default-bg: #253259;
  --btn-default-text: #e7ecf7;
  --btn-default-hover: #2d3d6a;
  --cat-row-bg: rgba(255, 255, 255, 0.04);
  --ghost-border: #2a355f;
  --table-border: #1e2748;
  --table-border-thick: #273157;
  --table-hover-bg: rgba(255, 255, 255, 0.03);
}

/* ==============================================
   LIGHT THEME
   ============================================== */
[data-theme="light"] {
  /* Semantic Colors - Light Theme */
  --color-primary: #0d6efd;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #0dcaf0;

  /* Accent Colors - Light Theme */
  --color-purple: #6f42c1;
  --color-pink: #d63384;
  --color-orange: #fd7e14;
  --color-teal: #20c997;

  /* Background Colors */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --panel: #ffffff;

  /* Text Colors */
  --text: #212529;
  --text-secondary: #6c757d;
  --muted: #6c757d;

  /* Theme-specific semantic colors */
  --green: var(--color-success);
  --red: var(--color-error);
  --blue: var(--color-primary);
  --purple: var(--color-purple);
  --warning: var(--color-warning);
  --info: var(--color-info);

  /* Interactive States */
  --ring: rgba(13, 110, 253, .25);
  --focus-ring: rgba(13, 110, 253, .4);

  /* Borders */
  --border: #dee2e6;
  --border-light: #e9ecef;
  --border-hover: #adb5bd;

  /* Component-specific */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-border-focus: var(--color-primary);
  --kpi-bg: #f8f9fa;
  --kpi-border: #dee2e6;
  --topbar-bg: rgba(255, 255, 255, .95);
  --card-shadow: rgba(0, 0, 0, .1);
  --btn-default-bg: #6c757d;
  --btn-default-text: #ffffff;
  --btn-default-hover: #5c636a;
  --cat-row-bg: rgba(0, 0, 0, 0.02);
  --ghost-border: #adb5bd;
  --table-border: #dee2e6;
  --table-border-thick: #adb5bd;
  --table-hover-bg: #f8f9fa;

  /* Shadow Scale - Light Theme (override dark theme shadows) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Light theme specific overrides for better readability */
[data-theme="light"] .h1,
[data-theme="light"] .h2,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #212529;  /* Dark text for headers */
}

[data-theme="light"] .muted {
  color: #6c757d;  /* Darker muted text */
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  color: #212529;  /* Dark text in inputs */
}

[data-theme="light"] input::placeholder,
[data-theme="light"] select::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #6c757d;  /* Gray placeholder text */
  opacity: 0.7;
}

/* Fix brand/logo text in light theme */
[data-theme="light"] .brand {
  color: #212529;  /* Dark brand text */
}

/* Fix nav links in light theme */
[data-theme="light"] .nav-link {
  color: #495057;  /* Dark gray nav links */
}

[data-theme="light"] .nav-link:hover {
  color: #212529;  /* Darker on hover */
}

/* Fix table headers in light theme */
[data-theme="light"] .table thead th {
  color: #495057;  /* Dark gray table headers */
}

/* Fix label text in light theme */
[data-theme="light"] label,
[data-theme="light"] .label {
  color: #495057;  /* Dark gray labels */
}

/* Fix card text in light theme */
[data-theme="light"] .card {
  color: #212529;  /* Dark text in cards */
}

/* Fix button ghost variant in light theme */
[data-theme="light"] .btn.ghost,
[data-theme="light"] .btn-ghost {
  color: #495057;  /* Dark text for ghost buttons */
  border-color: #6c757d;
}

[data-theme="light"] .btn.ghost:hover,
[data-theme="light"] .btn-ghost:hover {
  background: #f8f9fa;
  color: #212529;
}

/* Fix category list dark background in light theme */
[data-theme="light"] .cat-list {
  background: transparent;
}

[data-theme="light"] .cat-row {
  background: #f8f9fa;  /* Light gray instead of dark */
  border: 1px solid #e9ecef;
  color: #212529;
}

[data-theme="light"] .cat-name {
  color: #212529;  /* Dark text for category names */
}

/* Fix table dark backgrounds in light theme */
[data-theme="light"] .table tbody tr {
  background: #ffffff;  /* White rows */
  color: #212529;
}

[data-theme="light"] .table tbody tr:hover {
  background: #f8f9fa;  /* Light gray on hover */
}

[data-theme="light"] .table {
  background: #ffffff;  /* White table background */
}

/* Fix any dark backgrounds that appear in light theme */
[data-theme="light"] [style*="background: #2d3748"],
[data-theme="light"] [style*="background:#2d3748"],
[data-theme="light"] [class*="bg-dark"],
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-900 {
  background: #f8f9fa !important;
  color: #212529 !important;
}

/* Smooth theme transition */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions during theme switch to avoid flicker */
.theme-transitioning * {
  transition: none !important;
}

/* ==============================================
   LIGHT THEME FIXES FOR SPECIFIC PAGES
   ============================================== */

/* Reports Page - Card text and lists */
[data-theme="light"] .card-text {
  color: #212529 !important;
}

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

[data-theme="light"] .text-white {
  color: #212529 !important;
}

[data-theme="light"] .list-unstyled {
  color: #212529 !important;
}

[data-theme="light"] .list-unstyled li {
  color: #212529 !important;
}

/* Reports Page - Card headers */
[data-theme="light"] .card-header.bg-primary {
  background: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="light"] .card-header.bg-primary h5,
[data-theme="light"] .card-header.bg-primary .card-title,
[data-theme="light"] .card-header.bg-primary small,
[data-theme="light"] .card-header.bg-primary .text-white {
  color: #ffffff !important;
}

[data-theme="light"] .card-header.bg-success {
  background: #198754 !important;
  color: #ffffff !important;
}

[data-theme="light"] .card-header.bg-success h5,
[data-theme="light"] .card-header.bg-success .card-title,
[data-theme="light"] .card-header.bg-success small,
[data-theme="light"] .card-header.bg-success .text-white {
  color: #ffffff !important;
}

[data-theme="light"] .card-header.bg-warning {
  background: #ffc107 !important;
  color: #212529 !important;
}

[data-theme="light"] .card-header.bg-warning h5,
[data-theme="light"] .card-header.bg-warning .card-title {
  color: #212529 !important;
}

/* Reports Page - Table dark header */
[data-theme="light"] .table-dark {
  background: #343a40 !important;
  color: #ffffff !important;
}

[data-theme="light"] .table-dark th {
  color: #ffffff !important;
}

[data-theme="light"] thead.table-dark th {
  color: #ffffff !important;
  background: #343a40 !important;
}

/* Dashboard - Chart section */
[data-theme="light"] .chart-section {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .chart-header {
  background: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
}

[data-theme="light"] .chart-header h2 {
  color: #212529 !important;
}

[data-theme="light"] .chart-display {
  background: #ffffff !important;
  color: #212529 !important;
}

/* Dashboard - Data sections */
[data-theme="light"] .data-section {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .data-section h2 {
  color: #212529 !important;
}

[data-theme="light"] .data-section th {
  color: #495057 !important;
}

/* Dashboard - Controls section */
[data-theme="light"] .controls-section {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .currency-label,
[data-theme="light"] .color-picker-group label {
  color: #495057 !important;
}

/* Fix any remaining text-white in light theme */
[data-theme="light"] h1.text-white,
[data-theme="light"] h2.text-white,
[data-theme="light"] h3.text-white,
[data-theme="light"] h4.text-white,
[data-theme="light"] h5.text-white,
[data-theme="light"] h6.text-white {
  color: #212529 !important;
}

/* Fix paragraph text in cards */
[data-theme="light"] p {
  color: #212529 !important;
}

/* Fix general text color */
[data-theme="light"] body {
  color: #212529 !important;
}

/* Fix any inline styles that set light colors */
[data-theme="light"] [style*="color: #e2e8f0"],
[data-theme="light"] [style*="color:#e2e8f0"],
[data-theme="light"] [style*="color: #ccc"],
[data-theme="light"] [style*="color:#ccc"] {
  color: #212529 !important;
}

/* Additional comprehensive light theme fixes */
[data-theme="light"] .text-muted {
  color: #6c757d !important;
}

[data-theme="light"] .alert {
  border: 1px solid;
}

[data-theme="light"] .alert-warning {
  background-color: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

[data-theme="light"] .alert-danger {
  background-color: #f8d7da;
  border-color: #dc3545;
  color: #842029;
}

[data-theme="light"] .alert-info {
  background-color: #d1ecf1;
  border-color: #0dcaf0;
  color: #055160;
}

[data-theme="light"] .alert-success {
  background-color: #d1e7dd;
  border-color: #198754;
  color: #0a3622;
}

/* Badge fixes for light theme */
[data-theme="light"] .badge.bg-light {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

[data-theme="light"] .badge.bg-secondary {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

/* ==============================================
   TEXT COLOR OVERRIDES FOR BETTER READABILITY
   ============================================== */

/* Dark theme (default) - Make success text brighter and more readable */
.text-success {
  color: #5cd88c !important; /* Brighter green for better readability on dark backgrounds */
}

/* Light theme - Use darker green for contrast */
[data-theme="light"] .text-success {
  color: #198754 !important; /* Standard Bootstrap success green for light theme */
}

/* Dark theme - Make danger text more readable */
.text-danger {
  color: #ff7b7b !important; /* Slightly brighter red */
}

/* Light theme - Use standard danger color */
[data-theme="light"] .text-danger {
  color: #dc3545 !important; /* Standard Bootstrap danger red */
}