/* ========================================
   AGENDADOC COLOR SYSTEM V3
   Updated with new brand palette and EMR-specific colors
   ======================================== */

/* ----------------------------------------
   CORE BRAND PALETTE
------------------------------------------- */
:root {
  --iris: #0F0F3F;
  --resolution: #0C3287;
  --azulina: #6A99C5;
  --storm: #CDD6E1;
  --sea-salt: #F9F9F9;
  --tekhelet: #452CA2;
  --white: #ffffff;
}

/* ----------------------------------------
   LIGHT THEME (DEFAULT)
------------------------------------------- */
:root {
  /* Core Brand Palette */
  --iris: #0F0F3F;
  --resolution: #0C3287;
  --azulina: #6A99C5;
  --storm: #CDD6E1;
  --sea-salt: #F9F9F9;
  --tekhelet: #452CA2;
  --white: #ffffff;
  
  /* Font Size Control - Base font size in pixels (default: 16px = 1rem) */
  --base-font-size: 16px;

  /* RGB version for box-shadow */
  --primary-rgb: 12, 50, 135;

  /* Accent Color (Customizable per account) */
  --accent-color: #007bff; /* Default, can be overridden by user settings */
  
  /* Primary & Secondary Actions */
  --primary: var(--accent-color, var(--resolution));
  --primary-light: var(--azulina);
  --primary-dark: var(--iris);
  --primary-hover: color-mix(in srgb, var(--accent-color, var(--resolution)) 85%, black); /* Darker shade */
  --secondary: var(--tekhelet);
  --secondary-light: #6c54b5;
  --secondary-dark: #372382;

  /* Backgrounds */
  --bg-primary: var(--sea-salt);
  --bg-secondary: var(--white);
  --bg-tertiary: var(--storm);
  --bg-hover: var(--storm);

  /* Text */
  --text-primary: var(--iris);
  --text-secondary: #475569; /* Neutral gray for readability */
  --text-muted: #64748b;    /* Neutral gray for readability */
  --text-light: var(--sea-salt);
  --text-disabled: #94a3b8;
  
  /* Borders */
  --border-primary: #e2e8f0; /* Neutral gray for subtle borders */
  --border-secondary: var(--storm);
  --border-hover: #cbd5e1;
  
  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Component Specific */
  --card-bg: var(--white);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --input-bg: var(--white);
  --input-border: var(--border-primary);
  --input-focus-border: var(--primary);
  --button-primary-bg: var(--primary);
  --button-primary-color: var(--white);
  --button-primary-hover: var(--primary-hover);

  /* Sidebar */
  --bg-sidebar: var(--white);
  --bg-sidebar-gradient: linear-gradient(180deg, var(--sea-salt) 0%, var(--white) 100%);
  --sidebar-text: var(--iris);
  --sidebar-hover: var(--storm);
  --sidebar-text-hover: var(--iris);
  --sidebar-active: var(--primary);
  --sidebar-text-active: var(--white);
  --sidebar-active-border: var(--secondary);
  --logo-filter: invert(1);

  /* Table Specific */
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--card-bg);
  --bs-table-border-color: var(--border-primary);
  --bs-table-striped-bg: var(--bg-primary);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);

  /* EMR Specific Colors */
  --emr-bg-primary: #f8fafc;
  --emr-bg-secondary: var(--white);
  --emr-bg-tertiary: #f1f5f9;
  --emr-bg-accent: #e0f2fe;
  --emr-bg-warning: #fef3c7;
  --emr-bg-danger: #fee2e2;
  --emr-bg-success: #dcfce7;
  --emr-bg-info: #dbeafe;
  
  --emr-border-primary: #e2e8f0;
  --emr-border-secondary: #cbd5e1;
  --emr-border-accent: #0ea5e9;
  --emr-border-warning: #f59e0b;
  --emr-border-danger: #ef4444;
  --emr-border-success: #10b981;
  --emr-border-info: #3b82f6;
  
  --emr-text-primary: #1e293b;
  --emr-text-secondary: #475569;
  --emr-text-muted: #64748b;
  --emr-text-accent: #0ea5e9;
  --emr-text-warning: #d97706;
  --emr-text-danger: #dc2626;
  --emr-text-success: #059669;
  --emr-text-info: #2563eb;
  
  --emr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --emr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --emr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* EMR Status Colors */
  --emr-status-normal: #10b981;
  --emr-status-elevated: #f59e0b;
  --emr-status-high: #ef4444;
  --emr-status-critical: #dc2626;
  --emr-status-unknown: #64748b;
  
  /* EMR Template Colors */
  --emr-template-bg: #f8fafc;
  --emr-template-border: #e2e8f0;
  --emr-template-hover: #f1f5f9;
  --emr-template-active: #dbeafe;
  --emr-template-text: #475569;
  
  /* EMR Summary Colors */
  --emr-summary-bg: var(--white);
  --emr-summary-border: #e2e8f0;
  --emr-summary-header-bg: #f8fafc;
  --emr-summary-accent: #0ea5e9;
  --emr-summary-warning: #f59e0b;
  --emr-summary-danger: #ef4444;
  --emr-summary-success: #10b981;
}

/* ----------------------------------------
   DARK THEME
------------------------------------------- */
[data-theme="dark"] {
  /* Accent Color (Customizable per account) - Inherited from light theme */
  /* --accent-color is set globally, not per theme */
  
  /* Primary & Secondary Actions */
  --primary: var(--accent-color, var(--azulina));
  --primary-light: var(--storm);
  --primary-dark: var(--resolution);
  --primary-hover: color-mix(in srgb, var(--accent-color, var(--azulina)) 115%, white); /* Lighter for dark theme */
  --secondary: var(--tekhelet);
  --secondary-light: #34226b;
  --secondary-dark: #372382;

  /* Backgrounds */
  --bg-primary: #0A0A2A; /* Darker than Iris for depth */
  --bg-secondary: var(--iris);
  --bg-tertiary: var(--resolution);
  --bg-hover: var(--resolution);

  /* Text */
  --text-primary: var(--sea-salt);
  --text-secondary: var(--storm);
  --text-muted: var(--azulina);
  --text-light: var(--sea-salt);
  --text-disabled: #475569;

  /* Borders */
  --border-primary: var(--resolution);
  --border-secondary: var(--tekhelet);
  --border-hover: var(--azulina);
  
  /* Component Specific */
  --card-bg: var(--iris);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --input-bg: var(--iris);
  --input-border: var(--resolution);
  --input-focus-border: var(--primary);
  
  /* Sidebar */
  --bg-sidebar: var(--iris);
  --bg-sidebar-gradient: linear-gradient(180deg, var(--resolution) 0%, var(--iris) 100%);
  --sidebar-text: var(--sea-salt);
  --sidebar-hover: var(--resolution);
  --sidebar-text-hover: var(--white);
  --sidebar-active: var(--azulina);
  --sidebar-text-active: var(--iris);
  --sidebar-active-border: var(--tekhelet);
  --logo-filter: none;

  /* Table Specific */
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-primary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);

  /* EMR Specific Colors - Dark Theme */
  --emr-bg-primary: #0A0A2A;
  --emr-bg-secondary: var(--iris);
  --emr-bg-tertiary: var(--resolution);
  --emr-bg-accent: #1e3a8a;
  --emr-bg-warning: #451a03;
  --emr-bg-danger: #450a0a;
  --emr-bg-success: #064e3b;
  --emr-bg-info: #1e3a8a;
  
  --emr-border-primary: var(--resolution);
  --emr-border-secondary: var(--tekhelet);
  --emr-border-accent: var(--azulina);
  --emr-border-warning: #f59e0b;
  --emr-border-danger: #ef4444;
  --emr-border-success: #10b981;
  --emr-border-info: #3b82f6;
  
  --emr-text-primary: var(--sea-salt);
  --emr-text-secondary: var(--storm);
  --emr-text-muted: var(--azulina);
  --emr-text-accent: var(--azulina);
  --emr-text-warning: #fbbf24;
  --emr-text-danger: #f87171;
  --emr-text-success: #34d399;
  --emr-text-info: #60a5fa;
  
  --emr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --emr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --emr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  
  /* EMR Status Colors - Dark Theme */
  --emr-status-normal: #34d399;
  --emr-status-elevated: #fbbf24;
  --emr-status-high: #f87171;
  --emr-status-critical: #ef4444;
  --emr-status-unknown: var(--azulina);
  
  /* EMR Template Colors - Dark Theme */
  --emr-template-bg: var(--resolution);
  --emr-template-border: var(--tekhelet);
  --emr-template-hover: var(--iris);
  --emr-template-active: #1e3a8a;
  --emr-template-text: var(--storm);
  
  /* EMR Summary Colors - Dark Theme */
  --emr-summary-bg: var(--iris);
  --emr-summary-border: var(--resolution);
  --emr-summary-header-bg: var(--resolution);
  --emr-summary-accent: var(--azulina);
  --emr-summary-warning: #fbbf24;
  --emr-summary-danger: #f87171;
  --emr-summary-success: #34d399;
}

/* ----------------------------------------
   UTILITY CLASSES (Unchanged)
------------------------------------------- */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-light { color: var(--text-light) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--primary) !important; color: var(--white) !important; }
.bg-secondary { background-color: var(--secondary) !important; color: var(--white) !important; }
.bg-success { background-color: var(--success) !important; color: var(--white) !important; }
.bg-warning { background-color: var(--warning) !important; color: var(--iris) !important; }
.bg-danger { background-color: var(--danger) !important; color: var(--white) !important; }
.bg-info { background-color: var(--info) !important; color: var(--white) !important; }

.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-info { border-color: var(--info) !important; }
.border-light { border-color: var(--border-primary) !important; }

/* ----------------------------------------
   EMR SPECIFIC UTILITY CLASSES
------------------------------------------- */
.emr-bg-primary { background-color: var(--emr-bg-primary) !important; }
.emr-bg-secondary { background-color: var(--emr-bg-secondary) !important; }
.emr-bg-tertiary { background-color: var(--emr-bg-tertiary) !important; }
.emr-bg-accent { background-color: var(--emr-bg-accent) !important; }
.emr-bg-warning { background-color: var(--emr-bg-warning) !important; }
.emr-bg-danger { background-color: var(--emr-bg-danger) !important; }
.emr-bg-success { background-color: var(--emr-bg-success) !important; }
.emr-bg-info { background-color: var(--emr-bg-info) !important; }

.emr-text-primary { color: var(--emr-text-primary) !important; }
.emr-text-secondary { color: var(--emr-text-secondary) !important; }
.emr-text-muted { color: var(--emr-text-muted) !important; }
.emr-text-accent { color: var(--emr-text-accent) !important; }
.emr-text-warning { color: var(--emr-text-warning) !important; }
.emr-text-danger { color: var(--emr-text-danger) !important; }
.emr-text-success { color: var(--emr-text-success) !important; }
.emr-text-info { color: var(--emr-text-info) !important; }

.emr-border-primary { border-color: var(--emr-border-primary) !important; }
.emr-border-secondary { border-color: var(--emr-border-secondary) !important; }
.emr-border-accent { border-color: var(--emr-border-accent) !important; }
.emr-border-warning { border-color: var(--emr-border-warning) !important; }
.emr-border-danger { border-color: var(--emr-border-danger) !important; }
.emr-border-success { border-color: var(--emr-border-success) !important; }
.emr-border-info { border-color: var(--emr-border-info) !important; }

.emr-shadow-sm { box-shadow: var(--emr-shadow-sm) !important; }
.emr-shadow-md { box-shadow: var(--emr-shadow-md) !important; }
.emr-shadow-lg { box-shadow: var(--emr-shadow-lg) !important; }

/* EMR Status Indicators */
.emr-status-normal { color: var(--emr-status-normal) !important; }
.emr-status-elevated { color: var(--emr-status-elevated) !important; }
.emr-status-high { color: var(--emr-status-high) !important; }
.emr-status-critical { color: var(--emr-status-critical) !important; }
.emr-status-unknown { color: var(--emr-status-unknown) !important; }

/* ----------------------------------------
   THEME TRANSITION SYSTEM v2.0
   Enhanced transitions to prevent flash during theme switching
------------------------------------------- */

/* Base transition for all themed elements */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Specific transitions for major components */
body, 
.card, 
.btn, 
.form-control, 
.form-select,
.sidebar, 
#sidebar-wrapper, 
.modal-content, 
.nav-tabs .nav-link, 
.table,
.navbar,
.list-group-item {
  transition: all 0.3s ease !important;
}

/* Prevent flash during initial load */
.theme-light,
.theme-dark {
  transition: none !important;
}

/* Smooth transitions for theme switching */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Special handling for sidebar to prevent flash */
#sidebar-wrapper {
  background: var(--bg-sidebar) !important;
  background: var(--bg-sidebar-gradient) !important;
}

#sidebar-wrapper .list-group-item {
  background-color: transparent !important; 
  color: var(--sidebar-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}

#sidebar-wrapper .list-group-item:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--sidebar-text-hover) !important;
}

#sidebar-wrapper .list-group-item.active {
  background-color: var(--sidebar-active) !important;
  color: var(--sidebar-text-active) !important;
  border-right-color: var(--sidebar-active-border) !important;
}

/* Prevent layout shift during theme transition */
.theme-transitioning #sidebar-wrapper,
.theme-transitioning .card,
.theme-transitioning .modal-content {
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Ensure proper layering during transitions */
.theme-transitioning {
  isolation: isolate;
}