/* ==========================================================================
   Platform Snapshot (/admin/snapshot)

   A real stylesheet rather than a <style> block: the admin layout mounts Vue on
   #app, and Vue's template compiler deletes <style> found inside it. Everything
   is scoped under #snapshot so none of it can reach the rest of the admin.
   ========================================================================== */

#snapshot {
  --sn-navy: #14294f;
  --sn-turq: #21ced9;
  --sn-accent: #0b8391;
  --sn-ground: #eff3f8;
  --sn-surface: #fff;
  --sn-surface-2: #f5f8fc;
  --sn-ink: #0f1d36;
  --sn-ink-2: #485c7c;
  --sn-ink-3: #7488a6;
  --sn-rule: #dce4ef;
  --sn-rule-2: #c6d2e3;
  --sn-ok: #16815b;
  --sn-ok-bg: #dff1e9;
  --sn-ok-line: #2aa97c;
  --sn-warn: #95630d;
  --sn-warn-bg: #f8edd7;
  --sn-warn-line: #d69a28;
  --sn-bad: #b4342a;
  --sn-bad-bg: #fae2df;
  --sn-bad-line: #d9584b;
  --sn-shadow: 0 1px 2px rgba(15, 29, 54, .04), 0 6px 20px -14px rgba(15, 29, 54, .3);

  padding: 4px 18px 60px;
  background: var(--sn-ground);
  color: var(--sn-ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  min-height: 80vh;
}

#snapshot .mono,
#snapshot .n,
#snapshot .nu,
#snapshot .hv,
#snapshot .meta,
#snapshot .pct,
#snapshot .nums,
#snapshot code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

#snapshot code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: .92em;
}

/* --------------------------------------------------------------- header -- */
#snapshot .sn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

#snapshot .sn-head h1 {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--sn-ink);
}

#snapshot .sn-sub {
  margin: 3px 0 0;
  color: var(--sn-ink-3);
  font-size: 13px;
}

#snapshot .sn-warntext { color: var(--sn-bad); font-weight: 600; }

#snapshot .sn-seg {
  display: flex;
  background: var(--sn-surface);
  border: 1px solid var(--sn-rule);
  border-radius: 4px;
  overflow: hidden;
}

#snapshot .sn-seg a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 7px 14px;
  color: var(--sn-ink-2);
  text-decoration: none;
  border-left: 1px solid var(--sn-rule);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

#snapshot .sn-seg a:first-child { border-left: none; }
#snapshot .sn-seg a:hover { background: var(--sn-surface-2); text-decoration: none; }
#snapshot .sn-seg a.on { background: var(--sn-navy); color: #fff; }

#snapshot .sn-stale {
  background: var(--sn-warn-bg);
  border: 1px solid var(--sn-warn-line);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--sn-warn);
}

/* ------------------------------------------------------------ attention -- */
#snapshot .sn-attention {
  background: var(--sn-surface);
  border: 1px solid var(--sn-rule);
  border-left: 4px solid var(--sn-bad-line);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--sn-shadow);
}

#snapshot .sn-attention h2 {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--sn-bad);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

#snapshot .sn-attention .cnt {
  background: var(--sn-bad);
  color: #fff;
  border-radius: 2px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0;
}

#snapshot .sn-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

#snapshot .sn-alert {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--sn-ink-2);
  line-height: 1.45;
}

#snapshot .sn-alert .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sn-bad-line);
  margin-top: 7px;
  flex-shrink: 0;
}

#snapshot .sn-alert b { color: var(--sn-ink); font-weight: 600; display: block; }

/* ----------------------------------------------------------------- kpis -- */
#snapshot .sn-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

#snapshot .sn-kpi {
  background: var(--sn-surface);
  border: 1px solid var(--sn-rule);
  border-radius: 4px;
  padding: 15px 16px 12px;
  box-shadow: var(--sn-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

#snapshot .sn-kpi .lbl {
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sn-ink-3);
  font-weight: 600;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

#snapshot .sn-kpi .val {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--sn-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

#snapshot .sn-kpi .note {
  font-size: 11.5px;
  color: var(--sn-ink-3);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

#snapshot .sn-spark { display: block; width: 100%; height: 30px; }
#snapshot .sn-spark-a { fill: rgba(11, 131, 145, .16); }
#snapshot .sn-spark-l {
  fill: none;
  stroke: var(--sn-accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#snapshot .sn-spark-d { fill: var(--sn-accent); }

/* ----------------------------------------------------------------- grid -- */
#snapshot .sn-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

#snapshot .sn-card {
  background: var(--sn-surface);
  border: 1px solid var(--sn-rule);
  border-radius: 4px;
  box-shadow: var(--sn-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#snapshot .sn-card > header {
  padding: 13px 17px;
  border-bottom: 1px solid var(--sn-rule);
  background: var(--sn-surface-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#snapshot .sn-card > header h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  color: var(--sn-ink);
}

#snapshot .sn-card > header .meta { font-size: 11px; color: var(--sn-ink-3); }

#snapshot .sn-card .bd {
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

#snapshot .sn-card .bd.p0 { padding: 0; }

#snapshot .c4 { grid-column: span 4; }
#snapshot .c5 { grid-column: span 5; }
#snapshot .c6 { grid-column: span 6; }
#snapshot .c7 { grid-column: span 7; }
#snapshot .c8 { grid-column: span 8; }
#snapshot .c12 { grid-column: span 12; }

@media (max-width: 1180px) {
  #snapshot .c4, #snapshot .c5 { grid-column: span 6; }
  #snapshot .c7, #snapshot .c8 { grid-column: span 12; }
}

@media (max-width: 760px) {
  #snapshot .sn-grid > * { grid-column: span 12; }
  #snapshot { padding: 4px 10px 48px; }
}

/* ----------------------------------------------------------- bar charts -- */
#snapshot .sn-months { display: flex; align-items: stretch; gap: 5px; }

#snapshot .sn-months .mb {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

#snapshot .sn-months .barwrap {
  width: 100%;
  height: 104px;
  display: flex;
  align-items: flex-end;
}

#snapshot .sn-months.short .barwrap { height: 72px; }

#snapshot .sn-months .bar {
  width: 100%;
  background: var(--sn-accent);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}

#snapshot .sn-months .t { font-size: 9.5px; color: var(--sn-ink-3); white-space: nowrap; }
#snapshot .sn-months .n { font-size: 10px; color: var(--sn-ink-2); font-weight: 600; }

/* -------------------------------------------------------------- funnels -- */
#snapshot .sn-funnel { display: flex; flex-direction: column; gap: 9px; }

#snapshot .fstep { display: flex; flex-direction: column; gap: 4px; }

#snapshot .fstep .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

#snapshot .fstep .top .nm { color: var(--sn-ink-2); }
#snapshot .fstep .top .nu { font-weight: 600; color: var(--sn-ink); }

#snapshot .fstep .track {
  height: 9px;
  background: var(--sn-surface-2);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--sn-rule);
}

#snapshot .fstep .fill { height: 100%; }
#snapshot .fstep .f-a { background: var(--sn-navy); }
#snapshot .fstep .f-b { background: var(--sn-accent); }
#snapshot .fstep .f-c { background: var(--sn-bad-line); }

#snapshot .fstep .pct { font-size: 11px; color: var(--sn-ink-3); }

/* ---------------------------------------------------- success/fail bars -- */
#snapshot .sn-sbars { display: flex; flex-direction: column; gap: 11px; }

#snapshot .sbar .lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

#snapshot .sbar .lab code { font-size: 12.5px; color: var(--sn-ink); }
#snapshot .sbar .lab .nums { font-size: 11px; color: var(--sn-ink-3); }
#snapshot .sbar .lab .bad { color: var(--sn-bad); }

#snapshot .sbar .track {
  height: 8px;
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sn-surface-2);
  border: 1px solid var(--sn-rule);
}

#snapshot .sbar .s { background: var(--sn-ok-line); }
#snapshot .sbar .f { background: var(--sn-bad-line); }
#snapshot .sbar .k { background: var(--sn-rule-2); }

/* --------------------------------------------------------------- tables -- */
#snapshot .sn-tw { overflow-x: auto; }

#snapshot .sn-tw table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 13.5px;
  margin: 0;
}

#snapshot .sn-tw th,
#snapshot .sn-tw td {
  padding: 9px 17px;
  text-align: left;
  border-bottom: 1px solid var(--sn-rule);
  white-space: nowrap;
  vertical-align: middle;
}

#snapshot .sn-tw th {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sn-ink-3);
  font-weight: 600;
  background: var(--sn-surface-2);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

#snapshot .sn-tw tbody tr:last-child td { border-bottom: none; }
#snapshot .sn-tw tbody tr:hover { background: var(--sn-surface-2); }

#snapshot .sn-tw td.n { text-align: right; }
#snapshot .sn-tw td.muted { color: var(--sn-ink-3); }

#snapshot .sn-tw .nm {
  white-space: normal;
  display: block;
  max-width: 36ch;
  color: var(--sn-ink);
}

#snapshot .sn-tw a.nm { color: var(--sn-navy); }
#snapshot .sn-tw a.nm:hover { text-decoration: underline; }

#snapshot .sn-minibar {
  width: 60px;
  height: 6px;
  background: var(--sn-surface-2);
  border: 1px solid var(--sn-rule);
  border-radius: 2px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 4px;
}

#snapshot .sn-minibar i { display: block; height: 100%; background: var(--sn-ok-line); }
#snapshot .sn-minibar i.low { background: var(--sn-bad-line); }

/* ---------------------------------------------------------------- pills -- */
#snapshot .sn-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

#snapshot .sn-pill.ok { background: var(--sn-ok-bg); color: var(--sn-ok); }
#snapshot .sn-pill.idle { background: var(--sn-surface-2); color: var(--sn-ink-3); border: 1px solid var(--sn-rule); }

/* ------------------------------------------------------------ statlines -- */
#snapshot .sn-statline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  border-top: 1px solid var(--sn-rule);
  padding-top: 13px;
}

#snapshot .sn-statline > div { display: flex; flex-direction: column; gap: 1px; }

#snapshot .sn-statline .sv {
  font-size: 21px;
  font-weight: 700;
  color: var(--sn-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#snapshot .sn-statline.big .sv { font-size: 25px; }
#snapshot .sn-statline .sv.bad { color: var(--sn-bad); }
#snapshot .sn-statline .sl { font-size: 11.5px; color: var(--sn-ink-3); max-width: 30ch; }

/* -------------------------------------------------------- empty states -- */
#snapshot .sn-empty {
  border: 1px dashed var(--sn-rule-2);
  border-radius: 3px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--sn-surface-2);
}

#snapshot .sn-empty b { font-size: 13px; color: var(--sn-ink); font-weight: 700; }
#snapshot .sn-empty span { font-size: 12.5px; color: var(--sn-ink-3); line-height: 1.5; }

#snapshot .sn-none { color: var(--sn-ink-3); font-size: 13.5px; margin: 0; }
#snapshot .sn-note { font-size: 12.5px; color: var(--sn-ink-3); margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------------- health -- */
#snapshot .sn-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--sn-rule);
}

#snapshot .sn-health .hitem {
  background: var(--sn-surface);
  padding: 14px 17px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#snapshot .sn-health .hl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sn-ink);
  font-weight: 500;
}

#snapshot .sn-health .hd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#snapshot .sn-health .hd.g { background: var(--sn-ok-line); box-shadow: 0 0 0 3px var(--sn-ok-bg); }
#snapshot .sn-health .hd.a { background: var(--sn-warn-line); box-shadow: 0 0 0 3px var(--sn-warn-bg); }
#snapshot .sn-health .hd.r { background: var(--sn-bad-line); box-shadow: 0 0 0 3px var(--sn-bad-bg); }

#snapshot .sn-health .hv { font-size: 11.5px; color: var(--sn-ink-3); padding-left: 16px; }

/* ----------------------------------------------------------------- foot -- */
#snapshot .sn-foot {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--sn-ink-3);
  line-height: 1.6;
  max-width: 90ch;
}