/**
 * Theme Variables for White-Labeling
 *
 * These CSS custom properties enable dynamic theme customization
 * via the admin settings panel. Default values match the current
 * dark theme aesthetic.
 *
 * Usage in CSS:
 *   background: var(--primary-color);
 *   border-color: var(--border-color);
 *
 * Usage in JavaScript:
 *   document.documentElement.style.setProperty('--primary-color', '#667eea');
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     ============================================ */

  --primary-color: #22C55E;
  --primary-hover: #16A34A;
  --primary-active: #15803D;
  --primary-light: rgba(var(--primary-rgb), 0.1);
  --primary-light-2: rgba(var(--primary-rgb), 0.2);
  --primary-light-3: rgba(var(--primary-rgb), 0.25);
  --primary-shadow: rgba(var(--primary-rgb), 0.3);
  --primary-shadow-lg: rgba(var(--primary-rgb), 0.4);
  --primary-gradient-start: #86EFAC;
  --primary-gradient-end: #22C55E;

  /* RGB values for RGBA usage (auto-derived from primary) */
  --primary-rgb: 34, 197, 94;
  --success-rgb: 34, 197, 94;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 239, 68, 68;
  --info-rgb: 59, 130, 246;
  --secondary-rgb: 100, 116, 139;

  /* ============================================
     LAYOUT
     ============================================ */

  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  --header-height: 60px;

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ============================================
     SECONDARY COLORS
     ============================================ */

  --secondary-color: #64748b;
  --secondary-hover: #475569;
  --secondary-light: rgba(100, 116, 139, 0.1);

  /* ============================================
     ACCENT COLORS
     ============================================ */

  --accent-color: #f59e0b;
  --accent-hover: #d97706;
  --accent-light: rgba(245, 158, 11, 0.1);

  /* ============================================
     BACKGROUND COLORS
     ============================================ */

  --bg-primary: #0A0F0D;
  --bg-secondary: #141C17;
  --bg-tertiary: #1A2B22;
  --bg-card: #141C17;
  --bg-hover: #1A2B22;
  --bg-input: #0A0F0D;

  /* ============================================
     TEXT COLORS
     ============================================ */

  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #555555;
  --text-inverse: #0A0F0D;
  --text-white: #ffffff;

  /* ============================================
     BORDER COLORS
     ============================================ */

  --border-color: #1A2B22;
  --border-light: #141C17;
  --border-focus: var(--primary-color);

  /* ============================================
     SIDEBAR COLORS
     ============================================ */

  --sidebar-bg-start: #0A0F0D;
  --sidebar-bg-end: #141C17;
  --sidebar-border: #1A2B22;
  --sidebar-text: #e2e8f0;
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg-strong: rgba(255, 255, 255, 0.15);
  --sidebar-submenu-bg: rgba(0, 0, 0, 0.25);
  --sidebar-active-bg: rgba(var(--primary-rgb), 0.15);
  --sidebar-active-text: var(--primary-color);

  /* ============================================
     NAVIGATION COLORS
     ============================================ */

  --navbar-bg: #141C17;
  --navbar-border: #1A2B22;
  --navbar-text: #FFFFFF;

  /* ============================================
     STATUS COLORS
     ============================================ */

  --success-color: #22c55e;
  --success-hover: #16a34a;
  --success-light: rgba(34, 197, 94, 0.1);
  --success-gradient-start: #22c55e;
  --success-gradient-end: #16a34a;
  --success-gradient-hover-start: #16a34a;
  --success-gradient-hover-end: #15803d;

  --warning-color: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: rgba(245, 158, 11, 0.1);

  --danger-color: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: rgba(239, 68, 68, 0.1);
  --danger-gradient-start: #ef4444;
  --danger-gradient-end: #dc2626;
  --danger-gradient-hover-start: #dc2626;
  --danger-gradient-hover-end: #b91c1c;

  --info-color: #3B82F6;
  --info-hover: #2563EB;
  --info-light: rgba(59, 130, 246, 0.1);

  /* Warning & Info Gradient Colors */
  --warning-gradient-start: #f59e0b;
  --warning-gradient-end: #d97706;
  --info-gradient-start: #3B82F6;
  --info-gradient-end: #2563EB;

  /* Status Aliases */
  --status-success: var(--success-color);
  --status-danger: var(--danger-color);

  /* ============================================
     DOCUMENT SPECIFIC COLORS
     ============================================ */

  --invoice-accent: var(--primary-color);
  --bill-accent: var(--primary-color);
  --proposal-accent: var(--primary-color);
  --contract-accent: var(--primary-color);

  /* ============================================
     TABLE COLORS
     ============================================ */

  --table-header-bg: rgba(34, 197, 94, 0.05);
  --table-row-hover: rgba(34, 197, 94, 0.03);
  --table-border: var(--border-color);

  /* ============================================
     FORM COLORS
     ============================================ */

  --input-bg: var(--bg-input);
  --input-border: var(--border-color);
  --input-focus-border: var(--primary-color);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);

  /* ============================================
     BUTTON COLORS
     ============================================ */

  --btn-primary-bg: var(--primary-color);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: #052E16;

  --btn-secondary-bg: #141C17;
  --btn-secondary-hover: #1A2B22;
  --btn-secondary-text: #86EFAC;

  --btn-danger-bg: rgba(239, 68, 68, 0.1);
  --btn-danger-hover: rgba(239, 68, 68, 0.15);
  --btn-danger-text: #EF4444;

  /* ============================================
     MODAL COLORS
     ============================================ */

  --modal-bg: var(--bg-card);
  --modal-header-bg: var(--bg-secondary);
  --modal-border: var(--border-color);
  --modal-overlay: rgba(0, 0, 0, 0.75);

  /* ============================================
     CARD COLORS
     ============================================ */

  --card-bg: var(--bg-card);
  --card-border: var(--border-color);
  --card-header-bg: var(--bg-secondary);

  /* ============================================
     ALERT COLORS
     ============================================ */

  --alert-success-bg: var(--success-light);
  --alert-success-border: var(--success-color);
  --alert-success-text: var(--success-color);

  --alert-warning-bg: var(--warning-light);
  --alert-warning-border: var(--warning-color);
  --alert-warning-text: var(--warning-color);

  --alert-danger-bg: var(--danger-light);
  --alert-danger-border: var(--danger-color);
  --alert-danger-text: var(--danger-color);

  --alert-info-bg: var(--info-light);
  --alert-info-border: var(--info-color);
  --alert-info-text: var(--info-color);

  /* ============================================
     BADGE COLORS
     Semi-transparent backgrounds with status-colored text (Brand Guide)
     ============================================ */

  --badge-primary-bg: rgba(var(--primary-rgb), 0.15);
  --badge-secondary-bg: rgba(var(--secondary-rgb), 0.15);
  --badge-success-bg: rgba(var(--success-rgb), 0.15);
  --badge-warning-bg: rgba(var(--warning-rgb), 0.15);
  --badge-danger-bg: rgba(var(--danger-rgb), 0.15);
  --badge-info-bg: rgba(var(--info-rgb), 0.15);

  --badge-primary-text: #22C55E;
  --badge-secondary-text: #A1A1AA;
  --badge-success-text: #22C55E;
  --badge-warning-text: #F59E0B;
  --badge-danger-text: #EF4444;
  --badge-info-text: #3B82F6;

  /* Special badge colors */
  --badge-premium: #ffd700;
  --badge-coming-soon: #ffa500;

  /* ============================================
     SHADOW VALUES
     ============================================ */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ============================================
     CHART COLORS
     ============================================ */

  /* Chart backgrounds and borders */
  --chart-bg: var(--bg-secondary);
  --chart-border: var(--border-color);
  --chart-grid: var(--border-color);
  --chart-tooltip-bg: var(--bg-primary);
  --chart-tooltip-border: var(--border-color);

  /* Chart text colors */
  --chart-title: var(--text-primary);
  --chart-subtitle: var(--text-secondary);
  --chart-label: var(--text-secondary);
  --chart-legend: var(--text-primary);
  --chart-legend-hover: #ffffff;

  /* Financial chart colors */
  --chart-income: #86EFAC;
  --chart-expense: #fb7185;
  --chart-assets: #86EFAC;
  --chart-liabilities: #fb7185;
  --chart-debt: #fb7185;
  --chart-equity: #4ADE80;
  --chart-liquidity: #3B82F6;
  --chart-cash-flow: #3B82F6;
  --chart-working-capital: var(--primary-color);

  /* Chart gauge colors */
  --chart-gauge-low: #fb7185;
  --chart-gauge-medium: #fbbf24;
  --chart-gauge-high: #86EFAC;
  --chart-gauge-dial: var(--primary-color);

  /* Chart palette (for multi-series charts) */
  --chart-palette-1: #22C55E;
  --chart-palette-2: #3B82F6;
  --chart-palette-3: #F59E0B;
  --chart-palette-4: #EF4444;
  --chart-palette-5: #8B5CF6;
  --chart-palette-6: #EC4899;
  --chart-palette-7: #14B8A6;
  --chart-palette-8: #F97316;

  /* ============================================
     DASHBOARD COMPONENT COLORS
     (Derived from primary/status colors for theme consistency)
     ============================================ */

  /* Dashboard Universal Icon Background (uses primary) */
  --dashboard-icon-bg: var(--primary-color);
  --dashboard-icon-bg-end: var(--primary-gradient-end);

  /* Dashboard Card Header Tint (derived from primary) */
  --dashboard-header-tint: rgba(var(--primary-rgb), 0.08);
  --dashboard-header-border: rgba(var(--primary-rgb), 0.2);

  /* Card Component Backgrounds - subtle tint of primary */
  --card-component-bg: rgba(var(--primary-rgb), 0.05);
  --card-component-border: rgba(var(--primary-rgb), 0.2);

  /* Health Score Card - Uses primary colors */
  --health-score-primary: var(--primary-color);
  --health-score-secondary: var(--primary-gradient-end);
  --health-score-bg: rgba(var(--primary-rgb), 0.05);
  --health-score-border: rgba(var(--primary-rgb), 0.2);
  --health-score-ring-bg: var(--border-color);

  /* Smart Notifications Card - Uses primary colors */
  --notifications-primary: var(--primary-color);
  --notifications-secondary: var(--primary-gradient-end);
  --notifications-bg: rgba(var(--primary-rgb), 0.05);
  --notifications-border: rgba(var(--primary-rgb), 0.2);

  /* Achievements Card - Uses warning/gold colors */
  --achievements-primary: var(--warning-color);
  --achievements-secondary: #f59e0b;
  --achievements-bg: rgba(var(--warning-rgb), 0.05);
  --achievements-border: rgba(var(--warning-rgb), 0.2);

  /* What-If Calculator / Scenarios - Uses primary colors */
  --scenarios-primary: var(--primary-color);
  --scenarios-secondary: var(--primary-gradient-end);
  --scenarios-bg: rgba(var(--primary-rgb), 0.05);
  --scenarios-border: rgba(var(--primary-rgb), 0.2);
  --scenarios-accent: var(--primary-color);
  --scenarios-accent-secondary: var(--primary-hover);

  /* Difficulty badges - Use status colors */
  --difficulty-easy: var(--success-color);
  --difficulty-moderate: var(--warning-color);
  --difficulty-complex: var(--danger-color);

  /* Impact colors - Derived from status colors */
  --impact-savings: var(--success-color);
  --impact-savings-dark: var(--success-hover);
  --impact-revenue: var(--info-color);
  --impact-revenue-dark: var(--info-hover);
  --impact-efficiency: var(--primary-color);
  --impact-efficiency-dark: var(--primary-hover);
  --impact-mixed: var(--warning-color);
  --impact-mixed-dark: var(--warning-hover);

  /* Insight colors - Derived from status colors */
  --insight-success: var(--success-color);
  --insight-success-bg: rgba(var(--success-rgb), 0.1);
  --insight-success-border: rgba(var(--success-rgb), 0.2);
  --insight-warning: var(--warning-color);
  --insight-warning-bg: rgba(var(--warning-rgb), 0.1);
  --insight-warning-border: rgba(var(--warning-rgb), 0.2);
  --insight-info-bg: rgba(var(--info-rgb), 0.1);
  --insight-info-border: rgba(var(--info-rgb), 0.2);

  /* ============================================
     WHITE-LABEL COVERAGE
     Variables for previously hardcoded colors
     ============================================ */

  --btn-upload-bg: var(--primary-color);
  --file-icon-bg: var(--info-color);
  --price-badge-bg: var(--bg-secondary);
}

/* ============================================
   DARK MODE (Already default, kept for compatibility)
   ============================================ */

[data-bs-theme="dark"] {
  /* All variables above are already dark mode values */
  /* This section can be used for light mode overrides if needed in future */
}

/* ============================================
   LIGHT MODE VARIABLES
   ============================================ */

[data-bs-theme="light"],
body:not(.dark):not([data-bs-theme="dark"]) {
  /* Base Colors */
  --bg-primary: #F0FDF4;
  --bg-secondary: #F8FAF9;
  --bg-tertiary: #F1F5F3;
  --bg-card: #ffffff;
  --bg-hover: #F1F5F3;
  --bg-input: #ffffff;

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9ca3af;
  --text-white: #ffffff;

  /* Border Colors */
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;

  /* Green Theme Specific */
  --success-bg-light: rgba(34, 197, 94, 0.08);
  --success-border-light: rgba(34, 197, 94, 0.25);
  --success-text-dark: #065f46;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Sidebar Colors for Light Mode */
  --sidebar-bg-start: #ffffff;
  --sidebar-bg-end: #f9fafb;
  --sidebar-border: #e5e7eb;
  --sidebar-text: #374151;
  --sidebar-text-hover: #111827;
  --sidebar-hover-bg: rgba(var(--primary-rgb), 0.08);
  --sidebar-hover-bg-strong: rgba(var(--primary-rgb), 0.12);
  --sidebar-submenu-bg: rgba(0, 0, 0, 0.03);
  --sidebar-active-bg: rgba(var(--primary-rgb), 0.15);
  --sidebar-active-text: var(--primary-color);

  /* Navigation Colors for Light Mode */
  --navbar-bg: #ffffff;
  --navbar-border: #e5e7eb;
  --navbar-text: #111827;

  /* Table Colors for Light Mode */
  --table-header-bg: rgba(34, 197, 94, 0.03);
  --table-row-hover: rgba(34, 197, 94, 0.04);
  --table-border: #e5e7eb;

  /* Form Colors for Light Mode */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus-border: var(--primary-color);
  --input-text: #111827;
  --input-placeholder: #9ca3af;

  /* Modal Colors for Light Mode */
  --modal-bg: #ffffff;
  --modal-header-bg: #F8FAF9;
  --modal-border: #e5e7eb;
  --modal-overlay: rgba(0, 0, 0, 0.5);

  /* Card Colors for Light Mode */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-header-bg: #F8FAF9;

  /* Badge Colors for Light Mode */
  --badge-primary-bg: rgba(var(--primary-rgb), 0.10);
  --badge-secondary-bg: rgba(var(--secondary-rgb), 0.10);
  --badge-success-bg: rgba(var(--success-rgb), 0.10);
  --badge-warning-bg: rgba(var(--warning-rgb), 0.10);
  --badge-danger-bg: rgba(var(--danger-rgb), 0.10);
  --badge-info-bg: rgba(var(--info-rgb), 0.10);

  --badge-primary-text: #16A34A;
  --badge-secondary-text: #6B7280;
  --badge-success-text: #16A34A;
  --badge-warning-text: #D97706;
  --badge-danger-text: #DC2626;
  --badge-info-text: #2563EB;

  /* Button Colors for Light Mode */
  --btn-secondary-bg: #F1F5F9;
  --btn-secondary-hover: #E2E8F0;
  --btn-secondary-text: #111827;

  /* Danger Button Colors for Light Mode */
  --btn-danger-bg: rgba(239, 68, 68, 0.05);
  --btn-danger-hover: rgba(239, 68, 68, 0.08);

  /* Chart Colors for Light Mode */
  --chart-bg: #F8FAF9;
  --chart-border: #e5e7eb;
  --chart-grid: #e5e7eb;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #e5e7eb;
  --chart-title: #111827;
  --chart-subtitle: #4b5563;
  --chart-label: #6b7280;
  --chart-legend: #374151;
  --chart-legend-hover: #111827;

  /* Dashboard Component Colors for Light Mode (derived from primary) */
  --health-score-bg: rgba(var(--primary-rgb), 0.08);
  --health-score-border: rgba(var(--primary-rgb), 0.25);
  --health-score-ring-bg: #e5e7eb;

  --notifications-bg: rgba(var(--primary-rgb), 0.08);
  --notifications-border: rgba(var(--primary-rgb), 0.25);

  --achievements-bg: rgba(var(--warning-rgb), 0.08);
  --achievements-border: rgba(var(--warning-rgb), 0.25);

  --scenarios-bg: rgba(var(--primary-rgb), 0.08);
  --scenarios-border: rgba(var(--primary-rgb), 0.25);

  /* Dashboard header tint for Light Mode */
  --dashboard-header-tint: rgba(var(--primary-rgb), 0.1);
  --dashboard-header-border: rgba(var(--primary-rgb), 0.25);
  --card-component-bg: rgba(var(--primary-rgb), 0.06);
  --card-component-border: rgba(var(--primary-rgb), 0.25);

  /* Insight colors for Light Mode */
  --insight-success-bg: rgba(var(--success-rgb), 0.1);
  --insight-success-border: rgba(var(--success-rgb), 0.3);
  --insight-warning-bg: rgba(var(--warning-rgb), 0.1);
  --insight-warning-border: rgba(var(--warning-rgb), 0.3);
  --insight-info-bg: rgba(var(--info-rgb), 0.1);
  --insight-info-border: rgba(var(--info-rgb), 0.3);

  /* White-label coverage for Light Mode */
  --btn-upload-bg: var(--primary-color);
  --file-icon-bg: var(--info-color);
  --price-badge-bg: #F1F5F3;
}

/* ============================================
   UTILITY CLASSES USING THEME VARIABLES
   ============================================ */

.bg-primary {
  background-color: var(--primary-color) !important;
}

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

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

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

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

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

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

.btn-danger {
  background-color: var(--btn-danger-bg) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: var(--btn-danger-text) !important;
}

.btn-danger:hover {
  background-color: var(--btn-danger-hover) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-control {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
  border-radius: 8px;
}

.form-control:focus {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

.form-select {
  border-radius: 8px;
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  background-color: var(--card-header-bg);
  border-bottom-color: var(--card-border);
}

/* ============================================
   TABLES
   ============================================ */

.table {
  color: var(--text-primary);
  border-color: var(--table-border);
}

.table thead th {
  background-color: var(--table-header-bg);
  border-color: var(--table-border);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

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

/* ============================================
   MODALS
   ============================================ */

.modal-content {
  background-color: var(--modal-bg);
  border-color: var(--modal-border);
}

.modal-header {
  background-color: var(--modal-header-bg);
  border-bottom-color: var(--modal-border);
}

.modal-backdrop {
  background-color: var(--modal-overlay);
}