/* Dark theme - tokens copied verbatim (HSL triples) from the Lovable
   reference build's compiled CSS (:root in assets/index-0yVt5n3v.css). */
:root{
  --background: 222 30% 6%;
  --foreground: 210 30% 92%;
  --surface: 222 26% 9%;
  --surface-2: 222 22% 12%;
  --surface-3: 222 20% 16%;
  --card: 222 26% 9%;
  --card-foreground: 210 30% 92%;
  --popover: 222 28% 8%;
  --popover-foreground: 210 30% 92%;
  --primary: 195 95% 55%;
  --primary-foreground: 222 40% 6%;
  --primary-glow: 195 100% 65%;
  --secondary: 222 20% 16%;
  --secondary-foreground: 210 30% 92%;
  --muted: 222 18% 14%;
  --muted-foreground: 215 16% 60%;
  --accent: 195 80% 22%;
  --accent-foreground: 195 95% 80%;
  --destructive: 0 75% 55%;
  --destructive-foreground: 210 30% 98%;
  --border: 222 18% 18%;
  --input: 222 18% 16%;
  --ring: 195 95% 55%;
  --radius: .625rem;

  --status-ok: 145 70% 45%;      --status-ok-bg: 145 60% 12%;
  --status-warn: 38 95% 55%;     --status-warn-bg: 38 70% 12%;
  --status-crit: 0 80% 58%;      --status-crit-bg: 0 70% 12%;
  --status-info: 210 90% 60%;
  --status-mute: 220 10% 45%;

  /* Softer, less saturated variants used only for the matrix cells - the
     full-strength status colors above read as too bright/neon at that
     density; badges/alerts elsewhere keep the punchier originals. */
  --cell-ok: 145 35% 55%;      --cell-ok-bg: 145 30% 16%;
  --cell-warn: 38 55% 60%;     --cell-warn-bg: 38 35% 16%;
  --cell-crit: 0 45% 60%;      --cell-crit-bg: 0 35% 16%;

  --sev-p1: 0 80% 58%;
  --sev-p2: 38 95% 55%;
  --sev-p3: 220 10% 50%;

  --chart-1: 195 95% 55%; --chart-2: 145 70% 50%; --chart-3: 38 95% 60%;
  --chart-4: 0 75% 60%;   --chart-5: 280 70% 65%; --chart-6: 25 90% 55%;
  --chart-7: 170 70% 50%; --chart-8: 220 10% 55%;

  --fail-completeness: 25 90% 55%;
  --fail-validity: 0 75% 60%;
  --fail-referential: 280 70% 65%;
  --fail-timeliness: 38 95% 55%;

  --grid-line: 222 20% 14%;
  --shadow-elev: 0 8px 24px -10px hsl(222 50% 2% / .6);
  font-size:14.5px;
}

*{box-sizing:border-box;}
body{
  margin:0;background:hsl(var(--background));color:hsl(var(--foreground));
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.shell{display:flex;flex-direction:column;min-height:100vh;}

/* --------------------------------------------------------------- topbar */
.topbar{
  background:hsl(var(--surface));border-bottom:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:32px;height:32px;border-radius:8px;font-weight:800;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--primary-glow)));color:hsl(var(--primary-foreground));
}
.brand-title{font-weight:700;font-size:15px;color:hsl(var(--foreground));}
.brand-sub{font-size:11.5px;color:hsl(var(--muted-foreground));}
.topbar-right{display:flex;align-items:center;gap:14px;}
.env-toggle{display:flex;background:hsl(var(--muted));border-radius:8px;padding:3px;}
.env-btn{background:transparent;border:none;color:hsl(var(--muted-foreground));padding:6px 12px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;}
.env-btn.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));}
.clock{font-variant-numeric:tabular-nums;font-size:13px;color:hsl(var(--muted-foreground));min-width:80px;text-align:right;}

.tabbar{background:hsl(var(--surface));border-bottom:1px solid hsl(var(--border));display:flex;gap:2px;padding:0 18px;position:sticky;top:56px;z-index:19;}
.tab-link{padding:11px 14px;font-size:13px;font-weight:600;color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;}
.tab-link.active{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary));}

.view{flex:1;padding:20px 22px 60px;max-width:1650px;width:100%;margin:0 auto;}

/* ----------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px;}
@media (max-width:1200px){.tiles{grid-template-columns:repeat(3,1fr);}}
.tile{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow-elev);}
.tile-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:hsl(var(--foreground));}
.tile-label{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:3px;}
.tile-sub{font-size:11px;color:hsl(var(--status-mute));margin-top:2px;}
.tile.score .tile-value{color:hsl(var(--status-ok));}
.tile.score.amber .tile-value{color:hsl(var(--status-warn));}
.tile.score.red .tile-value{color:hsl(var(--status-crit));}
.tile.p1 .tile-value{color:hsl(var(--sev-p1));}
.tile.p2 .tile-value{color:hsl(var(--sev-p2));}
.tile.p3 .tile-value{color:hsl(var(--sev-p3));}

/* ------------------------------------------------------------------ card */
.card{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-elev);margin-bottom:18px;}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid hsl(var(--border));}
.card-title{font-weight:700;font-size:13.5px;color:hsl(var(--foreground));}
.card-body{padding:15px 16px;}

/* The system-wide volume chart is the dashboard's headline number, so it
   gets a visibly larger, more prominent treatment than a regular card. */
.hero-card{border-color:hsl(var(--primary)/.35);box-shadow:0 0 0 1px hsl(var(--primary)/.08),var(--shadow-elev);}
.hero-title{font-size:15.5px;}
.hero-card .card-body{padding:20px 18px 16px;}

/* -------------------------------------------------------------- matrix */
.matrix-wrap{overflow-x:auto;}
table.matrix{border-collapse:collapse;width:100%;font-size:12.5px;}
table.matrix th{
  text-align:left;padding:6px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;
  color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));background:hsl(var(--surface-2));
  white-space:nowrap;position:sticky;top:0;
}
table.matrix td{padding:6px;border-bottom:1px solid hsl(var(--border));vertical-align:middle;}
.matrix-customer{min-width:170px;}
.matrix-customer-name{font-weight:700;font-size:13px;color:hsl(var(--foreground));}
.matrix-customer-meta{font-size:11px;color:hsl(var(--muted-foreground));margin-top:2px;}
.cell{
  border-radius:7px;padding:6px 8px;min-width:78px;text-align:center;cursor:pointer;position:relative;
  font-weight:700;font-size:13px;transition:transform .08s;
}
.cell:hover{transform:scale(1.04);}
.cell.selected{outline:2px solid hsl(var(--primary));outline-offset:2px;}
.cell.green{background:hsl(var(--cell-ok-bg));color:hsl(var(--cell-ok));border:1px solid hsl(var(--cell-ok)/.25);}
.cell.amber{background:hsl(var(--cell-warn-bg));color:hsl(var(--cell-warn));border:1px solid hsl(var(--cell-warn)/.25);}
.cell.red{background:hsl(var(--cell-crit-bg));color:hsl(var(--cell-crit));border:1px solid hsl(var(--cell-crit)/.25);}
.cell.grey{background:hsl(var(--muted));color:hsl(var(--status-mute));font-weight:600;border:1px solid hsl(var(--border));}
.cell-count{font-size:10px;font-weight:500;opacity:.85;margin-top:1px;}
.cell-dot{position:absolute;top:3px;right:4px;width:7px;height:7px;border-radius:50%;background:hsl(var(--surface));}
.cell-dot.P1{box-shadow:0 0 0 2px hsl(var(--sev-p1));}
.cell-dot.P2{box-shadow:0 0 0 2px hsl(var(--sev-p2));}
.cell-na{color:hsl(var(--status-mute));font-size:12px;}

/* ------------------------------------------------------------------ badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.P1{background:hsl(var(--status-crit-bg));color:hsl(var(--sev-p1));}
.badge.P2{background:hsl(var(--status-warn-bg));color:hsl(var(--sev-p2));}
.badge.P3{background:hsl(var(--muted));color:hsl(var(--sev-p3));}
.badge.unacknowledged{background:hsl(var(--status-crit-bg));color:hsl(var(--status-crit));}
.badge.investigating{background:hsl(var(--status-warn-bg));color:hsl(var(--status-warn));}
.badge.waiting_on_customer{background:hsl(var(--accent));color:hsl(var(--accent-foreground));}
.badge.resolved{background:hsl(var(--status-ok-bg));color:hsl(var(--status-ok));}
.badge.processed{background:hsl(var(--status-ok-bg));color:hsl(var(--status-ok));}
.badge.processed_with_warnings{background:hsl(var(--status-warn-bg));color:hsl(var(--status-warn));}
.badge.rejected{background:hsl(var(--status-crit-bg));color:hsl(var(--status-crit));}

/* ------------------------------------------------------------------ table */
table.plain{width:100%;border-collapse:collapse;font-size:13px;}
table.plain th{text-align:left;font-size:10.5px;text-transform:uppercase;color:hsl(var(--muted-foreground));padding:8px 10px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--surface-2));}
table.plain td{padding:9px 10px;border-bottom:1px solid hsl(var(--border));color:hsl(var(--foreground));}
table.plain tr:last-child td{border-bottom:none;}
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:hsl(var(--surface-2));}
.clickable{cursor:pointer;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid hsl(var(--border));background:hsl(var(--surface-2));
  color:hsl(var(--foreground));font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;}
.btn:hover{background:hsl(var(--surface-3));border-color:hsl(var(--ring)/.4);}
.btn-primary{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground));}
.btn-primary:hover{background:hsl(var(--primary-glow));}
.btn-sm{padding:4px 9px;font-size:11.5px;border-radius:6px;}

/* ------------------------------------------------------------------ misc */
.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.row{display:flex;align-items:center;gap:10px;}
.row.between{justify-content:space-between;}
.muted{color:hsl(var(--muted-foreground));}
.small{font-size:12px;}
.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-foreground));margin:0 0 10px;}
.empty{padding:30px;text-align:center;color:hsl(var(--muted-foreground));}
.pill{background:hsl(var(--muted));color:hsl(var(--foreground));font-size:11px;padding:3px 8px;border-radius:6px;font-family:ui-monospace,monospace;}
.pill-list{display:flex;flex-wrap:wrap;gap:6px;}
.plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;}
.kv{display:grid;grid-template-columns:170px 1fr;gap:7px 12px;font-size:13px;}
.kv .k{color:hsl(var(--muted-foreground));}
.code-block{background:hsl(var(--background));border:1px solid hsl(var(--border));color:hsl(var(--foreground));border-radius:8px;padding:12px 14px;font-family:ui-monospace,monospace;font-size:11.5px;overflow:auto;max-height:320px;white-space:pre;}
.filters{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
select,input[type=text],input[type=number],input[type=date]{padding:7px 10px;border:1px solid hsl(var(--border));border-radius:7px;font-size:12.5px;background:hsl(var(--surface-2));color:hsl(var(--foreground));}
input[type=date]{color-scheme:dark;font-family:inherit;}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(0.85);cursor:pointer;}
select:focus,input:focus{outline:1px solid hsl(var(--ring));outline-offset:0;}
input[type=checkbox]{accent-color:hsl(var(--primary));}

/* ------------------------------------------------------ charts (SVG, hand-rolled) */
.chart-svg{width:100%;height:auto;display:block;}
.chart-svg text{fill:hsl(var(--muted-foreground));font-size:10px;font-family:inherit;}
.chart-svg .axis-line{stroke:hsl(var(--grid-line));}
.chart-svg .grid-line{stroke:hsl(var(--grid-line));stroke-dasharray:2,3;}
.chart-legend{display:flex;gap:14px;font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:6px;flex-wrap:wrap;}
.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}

/* ------------------------------------------------------------ latency */
.latency{font-weight:800;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:6px;display:inline-block;}
.latency.fast{color:hsl(var(--status-ok));background:hsl(var(--status-ok-bg));}
.latency.mid{color:hsl(var(--status-warn));background:hsl(var(--status-warn-bg));}
.latency.slow{color:hsl(var(--status-crit));background:hsl(var(--status-crit-bg));}

/* ------------------------------------------------------------ drilldown */
.drilldown-card{border:1px solid hsl(var(--ring)/.4);}
.drilldown-hint{padding:36px;text-align:center;color:hsl(var(--muted-foreground));}
.drilldown-close{background:none;border:none;font-size:18px;cursor:pointer;color:hsl(var(--muted-foreground));}
.drilldown-tabs{display:flex;gap:2px;border-bottom:1px solid hsl(var(--border));margin:-15px -16px 15px;padding:0 16px;}
.drilldown-tab{padding:10px 14px;font-size:12.5px;font-weight:700;color:hsl(var(--muted-foreground));cursor:pointer;border-bottom:2px solid transparent;}
.drilldown-tab.active{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary));}

/* ------------------------------------------------------------ toolbar */
.chart-toolbar{display:flex;gap:8px;align-items:center;}

/* data receipt timeline */
.timeline-strip{display:flex;gap:1px;border-radius:6px;overflow:hidden;height:26px;}
.timeline-seg{flex:1;position:relative;}
.timeline-seg.ok{background:hsl(var(--status-ok));}
.timeline-seg.warn{background:hsl(var(--status-warn));}
.timeline-seg.crit{background:hsl(var(--status-crit));}
.timeline-seg.none{background:hsl(var(--muted));}
.timeline-labels{display:flex;justify-content:space-between;font-size:10.5px;color:hsl(var(--muted-foreground));margin-top:4px;}

/* ------------------------------------------------------------ detail modal */
.modal-overlay{position:fixed;inset:0;background:hsl(222 50% 2% / .72);display:flex;align-items:flex-start;
  justify-content:center;padding:30px 16px;overflow:auto;z-index:100;}
.modal-panel{background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:14px;max-width:1150px;width:100%;box-shadow:var(--shadow-elev);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid hsl(var(--border));}
.modal-title{font-size:16px;font-weight:800;color:hsl(var(--foreground));}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:hsl(var(--muted-foreground));}
.modal-tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1px solid hsl(var(--border));}
.modal-tab{padding:10px 14px;font-size:12.5px;font-weight:700;color:hsl(var(--muted-foreground));cursor:pointer;border-bottom:2px solid transparent;}
.modal-tab.active{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary));}
.modal-body{padding:18px 22px 26px;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:hsl(var(--surface-3));color:hsl(var(--foreground));
  border:1px solid hsl(var(--border));padding:10px 18px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-elev);z-index:200;}
.toast.error{background:hsl(var(--status-crit-bg));color:hsl(var(--status-crit));border-color:hsl(var(--status-crit)/.4);}
.toast.success{background:hsl(var(--status-ok-bg));color:hsl(var(--status-ok));border-color:hsl(var(--status-ok)/.4);}