/* theme.css - Global Theme Variables */

/* ============================================
   LIGHT THEME (Default) - UNCHANGED
   ============================================ */
:root {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #e8ecf1;
  --bg-quaternary: #dce2e8;
  
  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #6b7280;
  --text-quaternary: #9ca3af;
  
  /* Accent Colors - Medical Theme */
  --accent-primary: #0ea5e9;
  --accent-secondary: #38bdf8;
  --accent-tertiary: #0284c7;
  
  /* Semantic Colors */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --error: #ef4444;
  --error-light: #fee2e2;
  --error-dark: #c0392b;
  --info: #3b82f6;
  --info-light: #dbeafe;
  
  /* Border Colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #9ca3af;
  
  /* Shadow Colors */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-strong: rgba(0, 0, 0, 0.15);
  
  /* Overlay Colors */
  --overlay-light: rgba(255, 255, 255, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  
  /* Component Specific */
  --card-bg: rgba(255, 255, 255, 0.9);
  --header-bg: rgba(255, 255, 255, 0.2);
  --footer-bg: rgba(255, 255, 255, 0.9);
  --input-bg: #ffffff;
  --input-border: #cccccc;
  
  /* Gradients */
  --gradient-page: linear-gradient(135deg, #e6f7fa 0%, #b3e5fc 100%);
  --gradient-shine: linear-gradient(135deg, rgba(160,210,255,.15) 0%, rgba(255,255,255,.75) 40%, rgba(160,210,255,.15) 80%, rgba(135,206,250,.05) 100%);
  
  /* Status Colors */
  --status-active: #10b981;
  --status-pending: #f59e0b;
  --status-cancelled: #ef4444;
  --status-completed: #6b7280;
  
  /* Chart Colors */
  --chart-1: #0ea5e9;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;
  
  /* Cases Page Specific */
  --case-open-border: #2ecc71;
  --case-finished-border: #95a5a6;
  --case-open-bg: #d4edda;
  --case-open-text: #155724;
  --case-finished-bg: #e9ecef;
  --case-finished-text: #495057;
  --btn-orange-bg: #fff3e0;
  --btn-orange-text: #f57c00;
  --btn-orange-hover: #ffb74d;
  --btn-view-bg: #332b41;
  --btn-edit-bg: #ecf0f1;
  --btn-edit-hover: #bdc3c7;
  --btn-delete-bg: #fee;
  --btn-delete-text: #e74c3c;
  --alert-success-bg: #d4edda;
  --alert-success-text: #155724;
  --alert-success-border: #c3e6cb;
  --alert-error-bg: #f8d7da;
  --alert-error-text: #721c24;
  --alert-error-border: #f5c6cb;
  --summary-bg: #ffffff;
  --empty-state-bg: #ffffff;
  --modal-bg: #ffffff;
  --back-btn-bg: rgba(255,255,255,0.2);
  --back-btn-hover: rgba(255,255,255,0.3);
  --stat-value-color: #2c3e50;
  
  /* Add case button */
  --add-case-bg: #000000;
  --add-case-border: #011716;
  --add-case-hover: rgba(255,255,255,0.3);
  
  /* ============================================
     LOGIN PAGE SPECIFIC - LIGHT THEME
     ============================================ */
  /* Purple/Pink Accents - NEVER CHANGE IN DARK */
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-light: #a78bfa;
  --accent: #ec4899;
  
  /* Login Backgrounds */
  --bg-start: #faf5ff;
  --bg-end: #f0f9ff;
  --card: #ffffff;
  --text: #1e1b4b;
  --text-muted: #64748b;
  --border: #e9d5ff;
  --input-focus-bg: #ffffff;
  --shadow-color-login: rgba(124,58,237,0.12);
  --shadow-border-login: rgba(124,58,237,0.05);
  
  /* Error Box */
  --error-bg-start: #fff1f2;
  --error-bg-end: #ffe4e6;
  --error-border-login: #fecdd3;
  
  /* Input Placeholder */
  --placeholder-color: var(--text-muted);
  
  /* Icons */
  --icon-color: #ffffff;
  
  /* Button Shine Effect */
  --btn-shine: rgba(255,255,255,0.2);
  
  /* Background Decorations */
  --radial-primary: rgba(124,58,237,0.1);
  --radial-accent: rgba(236,72,153,0.08);
  
  /* Focus Ring */
  --focus-ring: rgba(124,58,237,0.1);
  
  /* ============================================
     VISITS PAGE SPECIFIC - LIGHT THEME
     ============================================ */
  /* Header gradient - medical cyan/blue */
  --header-gradient: linear-gradient(135deg, #26bdbd 0%, #2c75c8 100%);
  
  /* Case badge */
  --case-badge-bg: rgba(255,255,255,0.2);
  
  /* Add visit button */
  --add-visit-bg: rgba(255,255,255,0.95);
  --add-visit-color: #667eea;
  
  /* Avatar */
  --avatar-bg: rgba(255,255,255,0.3);
  --avatar-border: rgba(255,255,255,0.5);
  
  /* Tooth icon */
  --tooth-icon-color: #4cb1eb;
  
  /* View details button */
  --view-btn-bg: #e3f2fd;
  --view-btn-color: #2196f3;
  --view-btn-hover-bg: #2196f3;
  --view-btn-hover-color: #ffffff;

    /* Submit button */
  --submit-btn-bg: #26a9bd;
    /* Header buttons */
  --header-btn-bg: rgba(255,255,255,0.2);
  --header-btn-hover: rgba(255,255,255,0.3);
  --header-btn-delete-bg: rgba(231,76,60,0.3);
  --header-btn-delete-hover: rgba(231,76,60,0.5);
  
  /* Progress bar gradient */
  --progress-gradient: linear-gradient(45deg, #4cb1eb, #764ba2);
  
  /* Delete button gradient */
  --delete-gradient: linear-gradient(45deg, #e74c3c, #c0392b);
}

/* ============================================
   DARK THEME - ONLY DARK MODE COLORS
   ============================================ */
[data-theme="dark"] {
  /* Background Colors - Dark equivalents */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-quaternary: #30363d;
  
  /* Text Colors - Light equivalents */
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;
  --text-quaternary: #484f58;
  
  /* Accent Colors - Kept similar but adjusted for dark */
  --accent-primary: #58a6ff;
  --accent-secondary: #79c0ff;
  --accent-tertiary: #1f6feb;
  
  /* Semantic Colors - Dark equivalents */
  --success: #3fb950;
  --success-light: #0d3b1e;
  --warning: #d29922;
  --warning-light: #3d2408;
  --error: #f85149;
  --error-light: #4a0d0a;
  --error-dark: #da3633;
  --info: #58a6ff;
  --info-light: #0d1f4a;
  
  /* Border Colors - Dark equivalents */
  --border-primary: #30363d;
  --border-secondary: #21262d;
  --border-tertiary: #484f58;
  
  /* Shadow Colors - Stronger for dark */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-color-strong: rgba(0, 0, 0, 0.6);
  
  /* Overlay Colors - Dark equivalents */
  --overlay-light: rgba(13, 17, 23, 0.8);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  
  /* Component Specific - Dark equivalents */
  --card-bg: rgba(22, 27, 34, 0.9);
  --header-bg: rgba(13, 17, 23, 0.8);
  --footer-bg: rgba(22, 27, 34, 0.9);
  --input-bg: #21262d;
  --input-border: #30363d;
  
  /* Gradients - Dark equivalents */
  --gradient-page: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
  --gradient-shine: linear-gradient(135deg, rgba(88,166,255,.05) 0%, rgba(13,17,23,.9) 40%, rgba(88,166,255,.05) 80%, rgba(31,111,235,.02) 100%);
  
  /* Status Colors - Dark equivalents */
  --status-active: #3fb950;
  --status-pending: #d29922;
  --status-cancelled: #f85149;
  --status-completed: #8b949e;
  
  /* Chart Colors - Dark equivalents */
  --chart-1: #58a6ff;
  --chart-2: #3fb950;
  --chart-3: #d29922;
  --chart-4: #f85149;
  --chart-5: #a371f7;
  
  /* Cases Page Specific - Dark equivalents */
  --case-open-border: #3fb950;
  --case-finished-border: #6e7681;
  --case-open-bg: #0d3b1e;
  --case-open-text: #3fb950;
  --case-finished-bg: #21262d;
  --case-finished-text: #8b949e;
  --btn-orange-bg: #3d2408;
  --btn-orange-text: #d29922;
  --btn-orange-hover: #d29922;
  --btn-view-bg: #332b41;
  --btn-edit-bg: #21262d;
  --btn-edit-hover: #30363d;
  --btn-delete-bg: #4a0d0a;
  --btn-delete-text: #f85149;
  --alert-success-bg: #0d3b1e;
  --alert-success-text: #3fb950;
  --alert-success-border: #238636;
  --alert-error-bg: #4a0d0a;
  --alert-error-text: #f85149;
  --alert-error-border: #f85149;
  --summary-bg: #161b22;
  --empty-state-bg: #161b22;
  --modal-bg: #161b22;
  --back-btn-bg: rgba(255,255,255,0.1);
  --back-btn-hover: rgba(255,255,255,0.2);
  --stat-value-color: #c9d1d9;
  
  /* Add case button */
  --add-case-bg: #000000;
  --add-case-border: #011716;
  --add-case-hover: rgba(255,255,255,0.2);
  
  /* ============================================
     LOGIN PAGE SPECIFIC - DARK THEME
     ============================================ */
  /* Purple/Pink Accents - UNCHANGED */
  /* --primary: #7c3aed; */
  /* --primary-dark: #6d28d9; */
  /* --primary-light: #a78bfa; */
  /* --accent: #ec4899; */
  
  /* Login Backgrounds - Dark */
  --bg-start: #0d1117;
  --bg-end: #161b22;
  --card: #161b22;
  --text: #c9d1d9;
  --text-muted: #8b949e;
  --border: #30363d;
  --input-focus-bg: #21262d;
  --shadow-color-login: rgba(0,0,0,0.4);
  --shadow-border-login: rgba(124,58,237,0.1);
  
  /* Error Box - Dark */
  --error-bg-start: #4a0d0a;
  --error-bg-end: #3d0a08;
  --error-border-login: #f85149;
  
  /* Input Placeholder - Dark */
  --placeholder-color: #484f58;
  
  /* Icons - UNCHANGED */
  /* --icon-color: #ffffff; */
  
  /* Button Shine - UNCHANGED */
  /* --btn-shine: rgba(255,255,255,0.2); */
  
  /* Background Decorations - Dark (reduced opacity) */
  --radial-primary: rgba(124,58,237,0.08);
  --radial-accent: rgba(236,72,153,0.05);
  
  /* Focus Ring - Dark (increased opacity) */
  --focus-ring: rgba(124,58,237,0.2);
  
  /* ============================================
     VISITS PAGE SPECIFIC - DARK THEME
     ============================================ */
  /* Header gradient - SAME as light */
  --header-gradient: linear-gradient(135deg, #26bdbd 0%, #2c75c8 100%);
  
  /* Case badge */
  --case-badge-bg: rgba(255,255,255,0.1);
  
  /* Add visit button */
  --add-visit-bg: rgba(22, 27, 34, 0.9);
  --add-visit-color: #58a6ff;
  
  /* Avatar */
  --avatar-bg: rgba(255,255,255,0.1);
  --avatar-border: rgba(255,255,255,0.2);
  
  /* Tooth icon - SAME as light */
  --tooth-icon-color: #4cb1eb;
  
  /* View details button - SAME as light */
  --view-btn-bg: #e3f2fd;
  --view-btn-color: #2196f3;
  --view-btn-hover-bg: #2196f3;
  --view-btn-hover-color: #ffffff;
    /* Submit button - same */
  --submit-btn-bg: #26a9bd;
    /* Header buttons */
  --header-btn-bg: rgba(255,255,255,0.1);
  --header-btn-hover: rgba(255,255,255,0.2);
  --header-btn-delete-bg: rgba(231,76,60,0.3);
  --header-btn-delete-hover: rgba(231,76,60,0.5);
  
  /* Progress bar gradient - same */
  --progress-gradient: linear-gradient(45deg, #4cb1eb, #764ba2);
  
  /* Delete button gradient - same */
  --delete-gradient: linear-gradient(45deg, #e74c3c, #c0392b);
}