/* ══════════════════════════════════════════════════════════════
   Dashboard Base — Design Tokens, Reset & Body
   Shared across all DUPIXENT monitoring dashboards
   ══════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root {
  /* Surfaces */
  --bg: #0a0c10;
  --surface: #111318;
  --surface2: #181c24;

  /* Borders */
  --border: #222730;
  --border-bright: #2e3540;

  /* Text */
  --text-primary: #e8edf5;
  --text-secondary: #a0aabe;
  --text-muted: #8d99b0;

  /* Accent palette */
  --accent: #00c4a1;
  --accent2: #4f8ef7;
  --accent3: #f7934f;
  --accent4: #c46ef7;
  --danger: #f7504f;
  --success: #00c4a1;
  --update: #e05590;
  --warn: #f7d34f;

  /* Refresh-level colors — used by heatmaps & charts */
  --r1: #4f8ef7;
  --r2: #e84393;
  --r3: #f7934f;
  --r4: #c46ef7;
  --r5: #f7504f;
  --r6: #f7c94f;
  --r7: #4fc4f7;
  --r8: #8bf74f;

  /* Fonts */
  --mono: 'JetBrains Mono', monospace;
  --sans: 'DM Sans', sans-serif;

  /* Theme-aware extras */
  --logo-color: #ffffff;
  --noise-opacity: 0.4;
  --tooltip-bg: #1a1f2e;
  --badge-bg: linear-gradient(135deg, #0a1628, #0f2040);
  --badge-border: #1a3060;
  --card-shadow: none;
  --source-db-color: var(--accent);
  --source-db-bg: linear-gradient(135deg, #0a2820, #0f3530);
  --source-db-border: rgba(0,196,161,0.4);
  --source-file-color: var(--accent3);
  --source-file-bg: linear-gradient(135deg, #281a0a, #352010);
  --source-file-border: rgba(247,147,79,0.4);
  --select-option-bg: #1a1f2e;

  /* Heatmap status colors — Smoke Test */
  --hm-success-fill: rgba(0,196,161,0.18);
  --hm-success-stroke: rgba(0,196,161,0.35);
  --hm-success-text: #00c4a1;
  --hm-fail-fill: rgba(247,80,79,0.18);
  --hm-fail-stroke: rgba(247,80,79,0.4);
  --hm-fail-text: #f7504f;
  --hm-error-fill: rgba(247,211,79,0.15);
  --hm-error-stroke: rgba(247,211,79,0.35);
  --hm-error-text: #f7d34f;
  --hm-warn-fill: rgba(123,142,200,0.15);
  --hm-warn-stroke: rgba(123,142,200,0.35);
  --hm-warn-text: #7b8ec8;
  --hm-none-fill: #13151b;
  --hm-none-stroke: #1a1e28;
  --hm-none-text: #2a2e38;

  /* Heatmap status colors */
  --hm-completed-fill: rgba(0,196,161,0.25);
  --hm-completed-stroke: rgba(0,196,161,0.3);
  --hm-completed-text: #00c4a1;
  --hm-incomplete-fill: rgba(247,147,79,0.3);
  --hm-incomplete-stroke: rgba(247,147,79,0.3);
  --hm-incomplete-text: #f7934f;
  --hm-missing-fill: rgba(247,80,79,0.35);
  --hm-missing-stroke: rgba(247,80,79,0.3);
  --hm-missing-text: #f7504f;
  --hm-pending-fill: rgba(134,148,166,0.18);
  --hm-pending-stroke: rgba(134,148,166,0.25);
  --hm-pending-text: #8694a6;
  --hm-inprogress-fill: rgba(196,110,247,0.25);
  --hm-inprogress-stroke: rgba(196,110,247,0.35);
  --hm-inprogress-text: #c46ef7;
  --hm-unexpected-fill: rgba(79,142,247,0.3);
  --hm-unexpected-stroke: rgba(79,142,247,0.3);
  --hm-unexpected-text: #4f8ef7;

  /* Treemap */
  --tm-rect-opacity: 0.7;
  --tm-text: #ffffff;
  --tm-text-sub: rgba(255,255,255,0.7);
}

/* ── Light theme: Cool Slate ── */
[data-theme="light"] {
  --bg: #eef0f5;
  --surface: #f8f9fc;
  --surface2: #e8eaf1;
  --border: #d4d8e3;
  --border-bright: #bcc2d2;
  --text-primary: #1c2333;
  --text-secondary: #515c72;
  --text-muted: #8b95aa;
  --accent: #0fb882;
  --accent2: #3578e5;
  --accent3: #e07a18;
  --accent4: #a248e0;
  --danger: #e03838;
  --success: #0fb882;
  --update: #c9386e;
  --warn: #d4a012;
  --r1: #3a74e0;
  --r2: #c73680;
  --r3: #d88030;
  --r4: #a050d8;
  --r5: #e04040;
  --r6: #c4a010;
  --r7: #1098c4;
  --r8: #60b830;
  --logo-color: #1c2333;
  --noise-opacity: 0.06;
  --tooltip-bg: #ffffff;
  --badge-bg: linear-gradient(135deg, #e4e8f4, #dce2f2);
  --badge-border: #bcc2d2;
  --card-shadow: 0 1px 3px rgba(28,35,51,0.07), 0 0 0 1px rgba(28,35,51,0.04);
  --source-db-color: var(--accent);
  --source-db-bg: linear-gradient(135deg, #e0f5ef, #d5efe6);
  --source-db-border: rgba(0,163,125,0.35);
  --source-file-color: var(--accent3);
  --source-file-bg: linear-gradient(135deg, #f5ebe0, #f0e3d5);
  --source-file-border: rgba(212,122,46,0.35);
  --select-option-bg: #f8f9fc;

  /* Heatmap status colors — Smoke Test */
  --hm-success-fill: #c8f0e5;
  --hm-success-stroke: #7ed4b8;
  --hm-success-text: #0e9068;
  --hm-fail-fill: #fcd5d4;
  --hm-fail-stroke: #f09090;
  --hm-fail-text: #d43030;
  --hm-error-fill: #faecc8;
  --hm-error-stroke: #e8cc70;
  --hm-error-text: #b89010;
  --hm-warn-fill: #d8dff5;
  --hm-warn-stroke: #a0b0e0;
  --hm-warn-text: #5570b0;
  --hm-none-fill: #d5d9e2;
  --hm-none-stroke: #c0c5d2;
  --hm-none-text: #95a0b5;

  /* Heatmap status colors */
  --hm-completed-fill: #c2eddf;
  --hm-completed-stroke: #70d0b0;
  --hm-completed-text: #0e9068;
  --hm-incomplete-fill: #fce0c8;
  --hm-incomplete-stroke: #f0b070;
  --hm-incomplete-text: #c87828;
  --hm-missing-fill: #fcd5d4;
  --hm-missing-stroke: #f09090;
  --hm-missing-text: #d43030;
  --hm-pending-fill: #dde1ea;
  --hm-pending-stroke: #b5bdd0;
  --hm-pending-text: #5a6880;
  --hm-inprogress-fill: #e8d0f8;
  --hm-inprogress-stroke: #c088e8;
  --hm-inprogress-text: #9040c0;
  --hm-unexpected-fill: #d0ddf8;
  --hm-unexpected-stroke: #88a8e8;
  --hm-unexpected-text: #3568d0;

  /* Treemap */
  --tm-rect-opacity: 0.85;
  --tm-text: #ffffff;
  --tm-text-sub: rgba(255,255,255,0.85);
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: var(--noise-opacity);
}

/* Main wrapper — sits above noise */
.dashboard {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* ══════════════════════════════════════════════════════════════
   Themed scrollbars — applied globally so Windows matches Mac
   ══════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}