/* ============================================================
   ClinicFlow Pro — css/themes.css
   Phase 1: Foundation
   3 Themes × 2 Modes = 6 Color Combinations
   All color changes transition smoothly at 0.3s
   Applied via body class: .theme-indigo / .theme-maroon / .theme-green
   Dark mode added via: .dark class on body
   ============================================================ */

/* ── Smooth Color Transition on ALL elements ── */
body,
body * {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ── Exceptions: don't animate transforms/opacity via transition above ── */
body *[class*="animate-"],
body .spinner,
body .modal-overlay {
  transition: none;
}

/* ============================================================
   THEME 1: INDIGO + SKY (DEFAULT)
   ============================================================ */

/* ── Indigo Light (default) ── */
body.theme-indigo {
  --primary:          #3730a3;
  --primary-light:    #6366f1;
  --accent:           #0ea5e9;
  --bg-main:          #f0f4ff;
  --bg-card:          #ffffff;
  --bg-sidebar:       #1e1b4b;
  --text-primary:     #1e1b4b;
  --text-secondary:   #6366f1;
  --border:           #c7d2fe;
  --success:          #16a34a;
  --warning:          #d97706;
  --danger:           #dc2626;
  --shadow:           0 2px 8px rgba(55, 48, 163, 0.10);
  --shadow-md:        0 4px 16px rgba(55, 48, 163, 0.14);
  --shadow-lg:        0 8px 32px rgba(55, 48, 163, 0.18);

  --sidebar-text:     #e0e7ff;
  --sidebar-hover:    rgba(255, 255, 255, 0.09);
  --sidebar-active:   rgba(99, 102, 241, 0.30);
  --sidebar-border:   rgba(255, 255, 255, 0.10);

  --input-bg:         #f8f9ff;
  --input-focus:      #6366f1;
  --table-stripe:     #f5f7ff;
  --table-hover:      #eef0ff;

  --btn-primary-bg:   #3730a3;
  --btn-primary-hover:#2e2890;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(99, 102, 241, 0.12);
  --badge-info-bg:    rgba(14, 165, 233, 0.12);
  --badge-info-text:  #0284c7;
}

/* ── Indigo Dark ── */
body.theme-indigo.dark {
  --primary:          #6366f1;
  --primary-light:    #818cf8;
  --accent:           #38bdf8;
  --bg-main:          #0f0e2a;
  --bg-card:          #1e1b4b;
  --bg-sidebar:       #13122e;
  --text-primary:     #e0e7ff;
  --text-secondary:   #a5b4fc;
  --border:           #3730a3;
  --success:          #22c55e;
  --warning:          #fbbf24;
  --danger:           #f87171;
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.60);

  --sidebar-text:     #c7d2fe;
  --sidebar-hover:    rgba(255, 255, 255, 0.07);
  --sidebar-active:   rgba(99, 102, 241, 0.25);
  --sidebar-border:   rgba(255, 255, 255, 0.08);

  --input-bg:         #13122e;
  --input-focus:      #818cf8;
  --table-stripe:     rgba(255, 255, 255, 0.03);
  --table-hover:      rgba(99, 102, 241, 0.12);

  --btn-primary-bg:   #6366f1;
  --btn-primary-hover:#818cf8;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(99, 102, 241, 0.20);
  --badge-info-bg:    rgba(56, 189, 248, 0.15);
  --badge-info-text:  #38bdf8;
}

/* ============================================================
   THEME 2: MAROON + BEIGE (WARM)
   ============================================================ */

/* ── Maroon Light ── */
body.theme-maroon {
  --primary:          #881337;
  --primary-light:    #be123c;
  --accent:           #d4a574;
  --bg-main:          #fdf8f0;
  --bg-card:          #ffffff;
  --bg-sidebar:       #4a0520;
  --text-primary:     #3b0a20;
  --text-secondary:   #be123c;
  --border:           #fecdd3;
  --success:          #15803d;
  --warning:          #d97706;
  --danger:           #be123c;
  --shadow:           0 2px 8px rgba(136, 19, 55, 0.10);
  --shadow-md:        0 4px 16px rgba(136, 19, 55, 0.14);
  --shadow-lg:        0 8px 32px rgba(136, 19, 55, 0.18);

  --sidebar-text:     #fce7f3;
  --sidebar-hover:    rgba(255, 255, 255, 0.09);
  --sidebar-active:   rgba(190, 18, 60, 0.28);
  --sidebar-border:   rgba(255, 255, 255, 0.10);

  --input-bg:         #fdf5f7;
  --input-focus:      #be123c;
  --table-stripe:     #fdf5f7;
  --table-hover:      #fce7ef;

  --btn-primary-bg:   #881337;
  --btn-primary-hover:#6f0e2d;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(190, 18, 60, 0.12);
  --badge-info-bg:    rgba(212, 165, 116, 0.20);
  --badge-info-text:  #92400e;
}

/* ── Maroon Dark ── */
body.theme-maroon.dark {
  --primary:          #be123c;
  --primary-light:    #e11d48;
  --accent:           #d4a574;
  --bg-main:          #1a0810;
  --bg-card:          #2d0f1a;
  --bg-sidebar:       #120608;
  --text-primary:     #fce7f3;
  --text-secondary:   #fda4af;
  --border:           #881337;
  --success:          #22c55e;
  --warning:          #fbbf24;
  --danger:           #f87171;
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.60);

  --sidebar-text:     #fda4af;
  --sidebar-hover:    rgba(255, 255, 255, 0.07);
  --sidebar-active:   rgba(190, 18, 60, 0.25);
  --sidebar-border:   rgba(255, 255, 255, 0.08);

  --input-bg:         #1a0810;
  --input-focus:      #e11d48;
  --table-stripe:     rgba(255, 255, 255, 0.03);
  --table-hover:      rgba(190, 18, 60, 0.12);

  --btn-primary-bg:   #be123c;
  --btn-primary-hover:#e11d48;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(190, 18, 60, 0.20);
  --badge-info-bg:    rgba(212, 165, 116, 0.15);
  --badge-info-text:  #d4a574;
}

/* ============================================================
   THEME 3: DARK GREEN + SLATE (CALM)
   ============================================================ */

/* ── Green Light ── */
body.theme-green {
  --primary:          #14532d;
  --primary-light:    #16a34a;
  --accent:           #64748b;
  --bg-main:          #f0fdf4;
  --bg-card:          #ffffff;
  --bg-sidebar:       #052e16;
  --text-primary:     #052e16;
  --text-secondary:   #16a34a;
  --border:           #bbf7d0;
  --success:          #16a34a;
  --warning:          #d97706;
  --danger:           #dc2626;
  --shadow:           0 2px 8px rgba(20, 83, 45, 0.10);
  --shadow-md:        0 4px 16px rgba(20, 83, 45, 0.14);
  --shadow-lg:        0 8px 32px rgba(20, 83, 45, 0.18);

  --sidebar-text:     #dcfce7;
  --sidebar-hover:    rgba(255, 255, 255, 0.09);
  --sidebar-active:   rgba(22, 163, 74, 0.28);
  --sidebar-border:   rgba(255, 255, 255, 0.10);

  --input-bg:         #f5fdf7;
  --input-focus:      #16a34a;
  --table-stripe:     #f5fdf7;
  --table-hover:      #dcfce7;

  --btn-primary-bg:   #14532d;
  --btn-primary-hover:#0f3d21;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(22, 163, 74, 0.12);
  --badge-info-bg:    rgba(100, 116, 139, 0.12);
  --badge-info-text:  #475569;
}

/* ── Green Dark ── */
body.theme-green.dark {
  --primary:          #16a34a;
  --primary-light:    #22c55e;
  --accent:           #94a3b8;
  --bg-main:          #071a0e;
  --bg-card:          #0f2d1a;
  --bg-sidebar:       #030f07;
  --text-primary:     #dcfce7;
  --text-secondary:   #86efac;
  --border:           #14532d;
  --success:          #22c55e;
  --warning:          #fbbf24;
  --danger:           #f87171;
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.60);

  --sidebar-text:     #86efac;
  --sidebar-hover:    rgba(255, 255, 255, 0.07);
  --sidebar-active:   rgba(22, 163, 74, 0.25);
  --sidebar-border:   rgba(255, 255, 255, 0.08);

  --input-bg:         #071a0e;
  --input-focus:      #22c55e;
  --table-stripe:     rgba(255, 255, 255, 0.03);
  --table-hover:      rgba(22, 163, 74, 0.12);

  --btn-primary-bg:   #16a34a;
  --btn-primary-hover:#22c55e;
  --btn-primary-text: #ffffff;

  --stat-icon-bg:     rgba(22, 163, 74, 0.20);
  --badge-info-bg:    rgba(148, 163, 184, 0.15);
  --badge-info-text:  #94a3b8;
}

/* ============================================================
   THEME-AWARE COMPONENT OVERRIDES
   These ensure components look perfect in all themes/modes
   ============================================================ */

/* Scrollbar adapts to theme */
body.dark ::-webkit-scrollbar-track { background: var(--bg-card); }
body.dark ::-webkit-scrollbar-thumb { background: var(--border); }

/* Selection color adapts */
body.theme-indigo ::selection  { background: #6366f1; color: #fff; }
body.theme-maroon ::selection  { background: #be123c; color: #fff; }
body.theme-green  ::selection  { background: #16a34a; color: #fff; }

/* Focus ring adapts */
body.theme-indigo :focus-visible { outline-color: #6366f1; }
body.theme-maroon :focus-visible { outline-color: #be123c; }
body.theme-green  :focus-visible { outline-color: #16a34a; }

/* Demo banner always stays yellow regardless of theme */
#demo-banner {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
  transition: none !important;
}

body.dark #demo-banner {
  background-color: #451a03 !important;
  color: #fde68a !important;
  border-color: #d97706 !important;
}