/**
 * Design Tokens — Single source for CSS variables
 * Load first (before main.css) so all other styles can use var(--*)
 *
 * Branch theme/design-tokens-v2: revert via `git checkout <previous-branch>` or revert the theme commit.
 *
 * Visual language: CustomerRepo browser_report full-page slate gradient (--bg-gradient),
 * grey card surfaces, vivid semantic accents (buttons/icons), nav/header gradient tokens,
 * z-index scale aligned with existing OG stacking (navbar/modals/loading).
 */

:root {
  /* ── Brand & Semantic Colors (brighter for grey card backgrounds) ── */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-rgb: 59, 130, 246;
  --primary-light: #dbeafe;

  --secondary: #64748b;
  --success: #22c55e;
  --success-rgb: 34, 197, 94;
  --danger: #ef4444;
  --danger-rgb: 239, 68, 68;
  --danger-hover: #dc2626;
  --danger-active: #b91c1c;
  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;
  --accent-refer-pending: #a78bfa;
  --accent-refer-pending-rgb: 167, 139, 250;

  --info: #38bdf8;
  --info-rgb: 56, 189, 248;

  /* ── Text (light theme: darker for contrast on grey cards) ── */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-on-dark: #cbd5e1;
  --text-inverse: #ffffff;

  /* ── Backgrounds (CR browser-report-page canvas behind white tiles) ── */
  --bg-color: #0f172a;
  --bg-gradient: linear-gradient(160deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);

  /* Card / panel fill — deeper slate grey (Bootstrap .card uses --bs-card-bg) */
  --surface-color: #8c9cb1;
  --surface-raised: #cbd5e1;
  --surface-sunken: #64748b;

  /* ── Nav / Header ── */
  --nav-bg-a: #132a45;
  --nav-bg-b: #1e4976;
  --nav-gradient: linear-gradient(135deg, var(--nav-bg-a) 0%, var(--nav-bg-b) 100%);
  --nav-text: rgba(255, 255, 255, 0.88);
  --nav-text-hover: #ffffff;

  /* ── Borders (read against --surface-color #94a3b8) ── */
  --border-color: #64748b;
  --border-color-strong: #475569;
  --border-width: 1px;

  /* ── Dark Mode Surfaces ── */
  --dark-bg: #0f172a;
  --dark-bg-mid: #1e293b;
  --dark-surface: #1e293b;
  --dark-surface-raised: #263244;
  --dark-section: #0f172a;
  --dark-border: #334155;

  /* ── Typography ── */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "Segoe UI Mono", monospace;

  /* Inline <code> chips (form help, admin docs) — distinct from link --primary */
  --code-inline-text: #3d54c7;
  --code-inline-bg: #fef3c7;
  --code-inline-border: #475569;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ── Focus (keyboard) ── */
  --focus-ring-color: var(--primary);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* ── Semantic badge surfaces (call logs, tables, chips) ── */
  --badge-info-bg: #dbeafe;
  --badge-info-text: #1d4ed8;
  --badge-sky-bg: #e0f2fe;
  --badge-sky-text: #0369a1;
  --badge-success-bg: #dcfce7;
  --badge-success-text: #15803d;
  --badge-warning-bg: #fef9c3;
  --badge-warning-text: #854d0e;
  --badge-danger-bg: #fee2e2;
  --badge-danger-text: #b91c1c;
  --badge-neutral-bg: #f1f5f9;
  --badge-neutral-text: #475569;
  --badge-muted-bg: #f1f5f9;
  --badge-muted-text: #334155;

  /* ── Shape ── */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 15px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-btn-hover: 0 10px 24px rgba(0, 0, 0, 0.18);

  /* Departments reports (reports hub tile) accent — distinct from primary blue */
  --accent-customerrepo-a: #6610f2;
  --accent-customerrepo-b: #6f42c1;
  --accent-customerrepo-gradient: linear-gradient(
    135deg,
    var(--accent-customerrepo-a) 0%,
    var(--accent-customerrepo-b) 100%
  );

  /* Floating menus (dense tables, export menus) */
  --menu-surface: var(--surface-raised);
  --menu-text: var(--text-primary);
  --menu-hover-bg: rgba(15, 23, 42, 0.07);

  /* ── Transitions ── */
  --transition: all 0.25s ease;
  --transition-fast: all 0.15s ease;

  /*
   * Z-index scale — matches legacy OG layers (navbar ~9k, modals ~100500, loading ~200k).
   * Do not reuse low numbers for navbar/modals or dropdowns fall behind CTI/sidebar.
   */
  --z-base: 1;
  --z-sticky: 200;
  --z-sidebar: 1050;
  --z-sidebar-open: 1150;
  --z-cti-panel: 1100;
  --z-navbar: 9000;
  --z-navbar-link: 9001;
  --z-dropdown-menu: 9999;
  --z-toast: 12000;
  --z-modal-backdrop: 100490;
  --z-modal: 100500;
  --z-overlay: 200000;

  /* ── Bootstrap 5.3 bridge (loaded before app CSS) ── */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: 100, 116, 139;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-card-bg: var(--surface-color);
  --bs-card-border-color: var(--border-color);
  /*
   * Dropdown menus default to --bs-body-bg in Bootstrap; body is transparent for the
   * page gradient, so menus must use an opaque surface or they look invisible over content.
   */
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--menu-hover-bg);
  /* Transparent so the gradient painted on body shows through Bootstrap surfaces */
  --bs-body-bg: transparent;
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
}

[data-bs-theme="dark"] {
  --bg-color: var(--dark-bg);
  --surface-color: var(--dark-surface);
  --surface-raised: var(--dark-surface-raised);
  --surface-sunken: var(--dark-section);
  --border-color: var(--dark-border);
  --border-color-strong: #475569;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --primary-light: #1e3a5f;
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);

  --menu-hover-bg: rgba(255, 255, 255, 0.08);

  --bs-body-bg: var(--dark-bg);
  --bs-body-color: var(--text-primary);
  --bs-card-bg: var(--surface-color);
  --bs-card-border-color: var(--border-color);
  --bs-dropdown-bg: var(--dark-surface-raised);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--menu-hover-bg);
}

/*
 * Bootstrap 5 sets ON EACH .dropdown-menu: --bs-dropdown-bg: var(--bs-body-bg).
 * That shadows :root --bs-dropdown-bg, and --bs-body-bg is transparent here — so
 * background-color becomes rgba(0,0,0,0). Redefine variables on the menu element.
 */
.dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--menu-hover-bg);
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--dark-surface-raised);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--menu-hover-bg);
}

/*
 * Bootstrap .modal defines --bs-modal-bg: var(--bs-body-bg) on .modal; children inherit it,
 * so .modal-content gets background-color: transparent when body bg is transparent.
 */
.modal {
  --bs-modal-bg: #ffffff;
  --bs-modal-color: var(--text-primary);
  --bs-modal-footer-bg: #f1f5f9;
}

[data-bs-theme="dark"] .modal {
  --bs-modal-bg: var(--dark-surface);
  --bs-modal-color: var(--text-primary);
  --bs-modal-footer-bg: var(--dark-section);
}

/*
 * Offcanvas panels use --bs-offcanvas-bg: var(--bs-body-bg) in Bootstrap; with transparent
 * body (gradient canvas) they look invisible over page content — same fix as .modal above.
 */
.offcanvas {
  --bs-offcanvas-bg: #ffffff;
  --bs-offcanvas-color: var(--text-primary);
  --bs-offcanvas-border-color: var(--border-color);
}

[data-bs-theme="dark"] .offcanvas {
  --bs-offcanvas-bg: var(--dark-surface);
  --bs-offcanvas-color: var(--text-primary);
  --bs-offcanvas-border-color: var(--dark-border);
}