/* ============================================================
   DentalClinic — Design Tokens (vars.css)
   Single source of truth for ALL CSS custom properties
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-primary: #0096D6;
  --color-primary-hover: #007BB3;
  --color-primary-light: rgba(0, 150, 214, 0.1);
  --color-primary-shadow: rgba(0, 150, 214, 0.25);
  --color-primary-rgb: 0, 150, 214;
  --color-secondary: #8CC63F;
  --color-secondary-hover: #75A634;
  --color-secondary-shadow: rgba(140, 198, 63, 0.25);
  --color-danger: #EF4444;
  --color-danger-light: rgba(239, 68, 68, 0.08);

  /* ── Appointment Event Colors ────────────────────────── */
  --appt-new-start: #009688;
  --appt-new-end: #004D40;
  --appt-new-hover: #00796B;
  --appt-review-start: #0077B6;
  --appt-review-end: #023E73;
  --appt-review-hover: #005A8C;
  --appt-danger-start: #E5243B;
  --appt-danger-end: #8B0A1E;
  --appt-danger-hover: #C41E33;

  /* ── Text Colors ──────────────────────────────────────── */
  --color-text: #1a3a4a;
  --color-text-dark: #1E293B;
  --color-text-body: #334155;
  --color-text-muted: #64748B;
  --color-label: #94A3B8;
  --color-placeholder: #a4bcc8;

  /* ── Surface / Borders ────────────────────────────────── */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-focus: var(--color-primary);
  --color-bg-input: #f8fafc;
  --color-bg-input-focus: #fff;
  --color-bg-card: #fff;
  --color-bg-page: #F8FAFC;
  --color-bg-body: #F8FAFC;
  --color-surface-hover: #F1F5F9;
  --color-surface-alt: #F8FAFC;
  --overlay-bg: rgba(15, 23, 42, 0.6);

  /* ── Layout Surfaces ──────────────────────────────────── */
  --color-bg-header: #0096D6;
  --color-bg-sidebar: linear-gradient(180deg, #eef6fc 0%, #f4f9fd 100%);
  --color-bg-sidebar-solid: #eef6fc;
  --color-bg-hero: #F8FAFC;
  --color-bg-modal: #fff;
  --color-bg-dropdown: #fff;
  --color-bg-processing: rgba(255, 255, 255, 0.7);

  /* ── DataTable Surfaces ───────────────────────────────── */
  --color-bg-table-head: linear-gradient(135deg, #0096D6 0%, #007AB8 100%);
  --color-bg-table-hover: rgba(0, 150, 214, 0.04);
  --color-bg-table-stripe: transparent;
  --color-bg-table-sort: rgba(0, 150, 214, 0.03);

  /* ── Sidebar Text ─────────────────────────────────────── */
  --color-sidebar-text: #475569;
  --color-sidebar-text-hover: #1E293B;
  --color-sidebar-heading: #94A3B8;
  --color-sidebar-icon-bg: rgba(0, 150, 214, 0.08);
  --color-sidebar-icon-hover-bg: rgba(0, 150, 214, 0.15);
  --color-sidebar-active-bg: rgba(0, 150, 214, 0.06);
  --color-sidebar-current-bg: rgba(0, 150, 214, 0.08);
  --color-sidebar-divider: #E2E8F0;
  --color-sidebar-profile-bg: linear-gradient(135deg, rgba(0, 150, 214, 0.06), rgba(0, 150, 214, 0.02));
  --color-sidebar-profile-hover: linear-gradient(135deg, rgba(0, 150, 214, 0.1), rgba(0, 150, 214, 0.04));
  --color-sidebar-profile-name: #1E293B;
  --color-sidebar-profile-role: #64748B;

  /* ── Scrollbar ────────────────────────────────────────── */
  --scrollbar-thumb: rgba(0, 150, 214, 0.2);
  --scrollbar-thumb-hover: rgba(0, 150, 214, 0.4);

  /* ── Status Colors (DataTable & Pages) ────────────────── */
  --st-debt: #EF4444;
  --st-debt-bg: rgba(239, 68, 68, 0.1);
  --st-debt-light: #FCA5A5;
  --st-credit: #0096D6;
  --st-credit-bg: rgba(0, 150, 214, 0.1);
  --st-credit-light: #7DD3FC;
  --st-paid: #22C55E;
  --st-paid-bg: rgba(34, 197, 94, 0.1);
  --st-paid-light: #86EFAC;
  --st-pending: #F59E0B;
  --st-pending-bg: rgba(245, 158, 11, 0.1);
  --st-pending-light: #FDE68A;
  --st-default: #EC4899;
  --st-default-bg: rgba(236, 72, 153, 0.1);
  --st-default-light: #F9A8D4;
  --st-muted: #94A3B8;
  --st-muted-bg: rgba(148, 163, 184, 0.1);

  /* ── Medical Status (semantic aliases) ────────────────── */
  --status-success: #10B981;
  --status-warning: #F59E0B;
  --status-danger: #EF4444;
  --status-info: #3B82F6;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-lg: 12px;
  --radius-card: 16px;
  --radius-xl: 20px;

  /* ── Spacing ──────────────────────────────────────────── */
  --field-gap: 1.1rem;
  --field-min-height: 36px;
  --field-padding-x: 10px;
  --field-padding-y: 6px;
  --field-icon-size: 16px;
  --field-icon-offset: 12px;
  --field-icon-padding: 38px;

  /* ── Typography ───────────────────────────────────────── */
  --font-family: 'Tajawal', 'IBM Plex Sans', -apple-system,
    BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --font-family-en: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-ar: 'Tajawal', "Segoe UI", Tahoma, Geneva, sans-serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.9rem;

  /* ── 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), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 2px 6px rgba(0, 150, 214, .08);
  --shadow-inset: inset 1.5px 1.5px 0px rgba(255, 255, 255, .25), inset -1.5px -1.5px 0px rgba(0, 0, 0, .1);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast: 0.25s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Dark Mode — Design Tokens Override
   Activated via data-theme="dark" on <html>
   ============================================================ */
[data-theme="dark"] {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-primary: #38BDF8;
  --color-primary-hover: #7DD3FC;
  --color-primary-light: rgba(56, 189, 248, 0.15);
  --color-primary-shadow: rgba(56, 189, 248, 0.25);
  --color-primary-rgb: 56, 189, 248;
  --color-secondary: #A3E635;
  --color-secondary-hover: #BEF264;
  --color-secondary-shadow: rgba(163, 230, 53, 0.25);

  /* ── Text Colors ──────────────────────────────────────── */
  --color-text: #E2E8F0;
  --color-text-dark: #F1F5F9;
  --color-text-body: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-label: #94A3B8;
  --color-placeholder: #475569;

  /* ── Surface / Borders ────────────────────────────────── */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-border-focus: #38BDF8;
  --color-bg-input: #0F172A;
  --color-bg-input-focus: #1E293B;
  --color-bg-card: #1E293B;
  --color-bg-page: #0F172A;
  --color-bg-body: #0F172A;
  --color-surface-hover: #334155;
  --color-surface-alt: #1E293B;
  --overlay-bg: rgba(0, 0, 0, 0.7);

  /* ── Layout Surfaces ──────────────────────────────────── */
  --color-bg-header: #0F172A;
  --color-bg-sidebar: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  --color-bg-sidebar-solid: #1E293B;
  --color-bg-hero: #1E293B;
  --color-bg-modal: #1E293B;
  --color-bg-dropdown: #1E293B;
  --color-bg-processing: rgba(15, 23, 42, 0.8);

  /* ── DataTable Surfaces ───────────────────────────────── */
  --color-bg-table-head: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  --color-bg-table-hover: rgba(56, 189, 248, 0.06);
  --color-bg-table-stripe: rgba(255, 255, 255, 0.02);
  --color-bg-table-sort: rgba(56, 189, 248, 0.05);

  /* ── Sidebar Text ─────────────────────────────────────── */
  --color-sidebar-text: #CBD5E1;
  --color-sidebar-text-hover: #F1F5F9;
  --color-sidebar-heading: #64748B;
  --color-sidebar-icon-bg: rgba(56, 189, 248, 0.1);
  --color-sidebar-icon-hover-bg: rgba(56, 189, 248, 0.2);
  --color-sidebar-active-bg: rgba(56, 189, 248, 0.08);
  --color-sidebar-current-bg: rgba(56, 189, 248, 0.1);
  --color-sidebar-divider: rgba(255, 255, 255, 0.06);
  --color-sidebar-profile-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0.03));
  --color-sidebar-profile-hover: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.06));
  --color-sidebar-profile-name: #F1F5F9;
  --color-sidebar-profile-role: #94A3B8;

  /* ── Scrollbar ────────────────────────────────────────── */
  --scrollbar-thumb: rgba(56, 189, 248, 0.25);
  --scrollbar-thumb-hover: rgba(56, 189, 248, 0.45);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-inset: inset 1.5px 1.5px 0px rgba(255, 255, 255, .2), inset -1.5px -1.5px 0px rgba(0, 0, 0, .4);

  /* ── Color Scheme ─────────────────────────────────────── */
  color-scheme: dark;

  /* ── Appointment Event Colors (brighter for dark bg) ─── */
  --appt-new-start: #14B8A6;
  --appt-new-end: #0D9488;
  --appt-new-hover: #2DD4BF;
  --appt-review-start: #0EA5E9;
  --appt-review-end: #0369A1;
  --appt-review-hover: #38BDF8;
  --appt-danger-start: #F87171;
  --appt-danger-end: #DC2626;
  --appt-danger-hover: #FCA5A5;
}

/* ── Bootstrap Pagination Override ─────────────────────── */
.pagination {
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-color: var(--color-text-muted);
  --bs-pagination-hover-color: var(--color-primary);
  --bs-pagination-hover-bg: rgba(var(--color-primary-rgb), 0.06);
  --bs-pagination-hover-border-color: var(--color-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--color-primary-light);
  --bs-pagination-bg: var(--color-bg-card);
  --bs-pagination-border-color: var(--color-border);
}