/* =============================================================================
   Site Health: the Portal's Ops look in plain CSS (no framework, no build step).

   The tokens, radius scale, typography, pill buttons, rounded-xl surfaces, the
   data-table shell, the icon-collapsible sidebar and the dark theme follow
   packages/ui of vv-apps (styles.css, sidebar, button, badge, card, table, tabs,
   input...) and apps/portal/components (ops-sidebar, ops-header, ops-page-layout,
   portal-surface, portal-data-table, side-drawer). Dark mode is data-theme="dark"
   on <html>, set before first paint by js/theme-init.js from localStorage
   "theme_mode" (system | light | dark), the key the Portal uses.
   ============================================================================= */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable.d1d754f31596.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ----------------------------------------------------------------- */

:root,
.light-surface {
  --background: #faf8f5; /* warm-white */
  --foreground: #44403c; /* text-dark */
  --card: #ffffff;
  --card-foreground: #44403c;
  --popover: #ffffff;
  --popover-foreground: #44403c;
  --primary: #060048; /* navy */
  --primary-foreground: #ffffff;
  --secondary: #f0ebe3; /* stone */
  --secondary-foreground: #44403c;
  --muted: #f0ebe3;
  --muted-foreground: #78716c;
  --accent: #ff0088; /* pink */
  --pink: #ff0088;
  --pink-hover: #e0007a;
  --navy: #060048;
  --navy-mid: #0d0a3e;
  --warm-white: #faf8f5;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --input: rgba(0, 0, 0, 0.1);
  --ring: #ff0088;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);

  --success-surface: oklch(97.9% 0.021 166.113);
  --success-border: oklch(90.5% 0.093 164.15);
  --success-text: oklch(50.8% 0.118 165.612);
  --success-solid: oklch(59.6% 0.145 163.225);
  --warning-surface: oklch(98.7% 0.022 95.277);
  --warning-border: oklch(92.4% 0.12 95.746);
  --warning-text: oklch(47.3% 0.137 46.201);
  --warning-solid: oklch(76.9% 0.188 70.08);
  --info-surface: oklch(97% 0.014 254.604);
  --info-border: oklch(88.2% 0.059 254.128);
  --info-text: oklch(54.6% 0.245 262.881);
  --info-solid: oklch(54.6% 0.245 262.881);

  --sidebar: #faf8f5;
  --sidebar-foreground: #44403c;
  --sidebar-primary: #060048;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0ebe3;
  --sidebar-accent-foreground: #44403c;
  --sidebar-border: rgba(0, 0, 0, 0.08);

  /* Status colours, as hex for the places CSS variables cannot reach (the map) */
  --status-down: #b91c1c;
  --status-degraded: #b45309;
  --status-ok: #047857;
  --status-unknown: #78716c;
  --status-pending: #1d4ed8;
  --status-not-monitored: #a8a29e;

  --radius: 0.5rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-4xl: calc(var(--radius) * 2.6);
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --header-height: 3.5rem;
  color-scheme: light;
}

[data-theme="dark"] {
  --background: #08162a;
  --foreground: #ffffff;
  --card: #161c3d;
  --card-foreground: #ffffff;
  --popover: #161c3d;
  --popover-foreground: #ffffff;
  /* Navy disappears on these surfaces, so fills go white with navy text. */
  --primary: #ffffff;
  --primary-foreground: #060048;
  --secondary: #2a2e43;
  --secondary-foreground: #ffffff;
  --muted: #2a2e43;
  --muted-foreground: #b0b0b0;
  --destructive: #fca5a5;
  --destructive-foreground: #060048;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  --success-surface: oklch(76.5% 0.177 163.223 / 0.12);
  --success-border: oklch(76.5% 0.177 163.223 / 0.3);
  --success-text: oklch(84.5% 0.143 164.978);
  --warning-surface: oklch(82.8% 0.189 84.429 / 0.12);
  --warning-border: oklch(82.8% 0.189 84.429 / 0.3);
  --warning-text: oklch(87.9% 0.169 91.605);
  --info-surface: oklch(70.7% 0.165 254.624 / 0.14);
  --info-border: oklch(70.7% 0.165 254.624 / 0.32);
  --info-text: oklch(80.9% 0.105 251.813);

  --sidebar: #151a36;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: #060048;
  --sidebar-accent: #2a2e43;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

/* --- base ------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
  outline-offset: 2px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-xs { width: 0.75rem; height: 0.75rem; }
.icon-lg { width: 2rem; height: 2rem; }

.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-foreground); }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-warning { color: var(--warning-text); }
.text-destructive { color: var(--destructive); }
.text-pink { color: var(--pink); }
.font-semibold { font-weight: 600; }
.break-anywhere { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
.stack > * + * { margin-top: 1.25rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.flex-wrap-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.link { color: var(--primary); font-weight: 600; }
.link:hover { color: var(--pink); }
.link-accent { color: var(--pink); font-weight: 600; text-underline-offset: 4px; }
.link-accent:hover { text-decoration: underline; }
.only-wide { display: none; }
@media (min-width: 640px) { .only-wide { display: revert; } .only-narrow { display: none; } }

/* --- shell: sidebar, header, page layout ------------------------------------ */

.sh-app {
  display: flex;
  min-height: 100svh;
  width: 100%;
}

.sh-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 18rem;
  height: 100svh;
  color: var(--sidebar-foreground);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s linear, width 0.2s linear, visibility 0.2s;
}

[data-sidebar-mobile="open"] .sh-sidebar {
  transform: none;
  visibility: visible;
}

.sh-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  backdrop-filter: blur(1.5px);
  display: none;
}
[data-sidebar-mobile="open"] .sh-overlay { display: block; }

.sh-main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  background: var(--background);
  transition: margin-left 0.2s linear;
}

@media (min-width: 768px) {
  .sh-sidebar {
    width: var(--sidebar-width);
    transform: none;
    visibility: visible;
    z-index: 10;
  }
  .sh-main { margin-left: var(--sidebar-width); }
  [data-sidebar="collapsed"] .sh-sidebar { width: var(--sidebar-width-icon); }
  [data-sidebar="collapsed"] .sh-main { margin-left: var(--sidebar-width-icon); }
  .sh-overlay { display: none !important; }
  .sh-only-mobile { display: none !important; }
}

.sh-sidebar-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--header-height);
  padding: 0.5rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.sh-logo {
  display: flex;
  align-items: center;
  height: 2.5rem;
  min-width: 0;
  padding: 0.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}
.sh-logo img { height: 1.5rem; width: auto; max-width: none; }
.sh-logo .logo-icon { display: none; width: 1.5rem; height: 1.5rem; }
.sh-logo .logo-light { display: block; }
.sh-logo .logo-dark { display: none; }
[data-theme="dark"] .sh-logo .logo-light { display: none; }
[data-theme="dark"] .sh-logo .logo-dark { display: block; }
[data-sidebar="collapsed"] .sh-logo .logo-light,
[data-sidebar="collapsed"] .sh-logo .logo-dark { display: none; }
[data-sidebar="collapsed"] .sh-logo .logo-icon { display: block; }
@media (max-width: 767px) {
  [data-sidebar="collapsed"] .sh-logo .logo-icon { display: none; }
  [data-sidebar="collapsed"] .sh-logo .logo-light { display: block; }
  [data-theme="dark"][data-sidebar="collapsed"] .sh-logo .logo-light { display: none; }
  [data-theme="dark"][data-sidebar="collapsed"] .sh-logo .logo-dark { display: block; }
}

.sh-sidebar-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
[data-sidebar="collapsed"] .sh-sidebar-content { overflow: hidden; }

.sh-nav-group { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0.5rem; }
.sh-nav-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent);
  border-radius: 0.375rem;
  transition: margin-top 0.2s linear, opacity 0.2s linear;
}
.sh-menu { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; min-width: 0; font-size: 0.875rem; }
.sh-menu-item { position: relative; }

.sh-menu-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 2rem;
  padding: 0.5rem;
  overflow: hidden;
  text-align: left;
  font-size: 0.875rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  outline-offset: -2px;
}
.sh-menu-button:hover,
.sh-menu-button[aria-current="page"],
.sh-menu-button[aria-expanded="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.sh-menu-button[aria-current="page"] { font-weight: 500; }
.sh-menu-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-menu-button .icon { color: inherit; }

.sh-menu-button.lg { height: 3rem; }

[data-sidebar="collapsed"] .sh-nav-label { margin-top: -2rem; opacity: 0; }
@media (min-width: 768px) {
  [data-sidebar="collapsed"] .sh-menu-button { width: 2rem; height: 2rem; padding: 0.5rem; }
  [data-sidebar="collapsed"] .sh-menu-button.lg { width: 2rem; height: 2rem; padding: 0; }
  [data-sidebar="collapsed"] .sh-menu-button > span:not(.icon-box) { display: none; }
  [data-sidebar="collapsed"] .sh-user-text,
  [data-sidebar="collapsed"] .sh-user-chevron { display: none; }
}

[data-sidebar="collapsed"] .sidebar-icon-collapse, [data-sidebar="expanded"] .sidebar-icon-expand { display: none; }
@media (max-width: 767px) { .sh-only-mobile-hide { display: none; } }
.menu-heading { padding: 0.5rem 0.75rem 0; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

.sh-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid var(--sidebar-border);
}
.sh-sidebar-collapse { flex-shrink: 0; padding: 0 0.5rem 0.5rem; }

.sh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: 0.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.sh-avatar.round { border-radius: 9999px; width: 2.25rem; height: 2.25rem; }
.sh-user-text { display: grid; flex: 1; min-width: 0; text-align: left; line-height: 1.2; }
.sh-user-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); font-weight: 600; }
.sh-user-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--muted-foreground); }
.sh-user-chevron { margin-left: auto; color: var(--muted-foreground); }

.sh-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  height: var(--header-height);
  padding: 0 1rem;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}
.sh-header-title { font-size: 0.875rem; font-weight: 600; color: var(--primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-header-spacer { flex: 1; }
.sh-header-badges { display: flex; align-items: center; gap: 0.5rem; }

.sh-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  padding: 1.5rem 1.25rem;
}
@media (min-width: 768px) { .sh-page { padding: 1.75rem 2rem; } }

.sh-page-content { display: flex; flex: 1; flex-direction: column; gap: 1rem; min-height: 0; min-width: 0; width: 100%; }

.page-header { flex-shrink: 0; width: 100%; margin-bottom: 1.25rem; }
.page-header.bordered { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.page-header-breadcrumb { margin-bottom: 0.75rem; }
.page-header-row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .page-header-row { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.page-header-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; min-width: 0; }
.page-header h1 { min-width: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.025em; color: var(--primary); overflow-wrap: anywhere; }
.page-header-description { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.page-header-actions { display: flex; flex-shrink: 0; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; }
.page-header-actions:empty { display: none; }

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; max-width: 100%; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 1.5rem; border-radius: 2px; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--muted-foreground); }
.breadcrumb [aria-current="page"] { color: var(--primary); overflow-wrap: anywhere; font-weight: 400; }

/* --- surfaces ----------------------------------------------------------------- */

.surface {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--card-foreground);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
}
.surface-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.surface-header > div:first-child { min-width: 0; }
.surface-title { font-size: 1rem; line-height: 1.375; font-weight: 600; color: var(--primary); }
.surface-description { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.surface-action { flex-shrink: 0; }
.surface-content { padding: 1.25rem; }
.surface-content.flush { padding: 0; }
.surface-content.tight { padding: 0.25rem; }
.surface-empty { padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; padding: 0.25rem; }
.detail-cell { min-width: 0; padding: 0.75rem 1rem; }
.detail-cell.wide { grid-column: span 2; }
.detail-cell dt, .detail-cell .label { font-size: 0.75rem; color: var(--muted-foreground); }
.detail-cell dd, .detail-cell .value { margin-top: 0.25rem; font-weight: 600; color: var(--primary); overflow-wrap: anywhere; }
.detail-cell .detail { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }

.summary-cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 640px) { .summary-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.summary-cell { padding: 0.75rem 1rem; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--border-subtle); border-radius: 0.75rem; }
.summary-cell dt { font-size: 0.75rem; color: var(--muted-foreground); }
.summary-cell dd { margin-top: 0.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.summary-cell dd + dd { font-size: 0.75rem; color: var(--muted-foreground); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2 > .span-2 { grid-column: span 2; } }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .grid-main-side { grid-template-columns: minmax(0, 1fr) 22rem; } }

/* Record page: the left section nav driven by ?tab= */
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
@media (min-width: 1024px) { .record-layout { grid-template-columns: 13rem minmax(0, 1fr); } }
.section-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 1024px) {
  .record-aside { position: sticky; top: 6rem; align-self: start; }
  .section-nav { display: block; border-bottom: 0; }
  .section-nav > * + * { margin-top: 0.375rem; }
}
.section-nav a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 2.5rem;
  padding: 0 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}
.section-nav a:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 15%, transparent); }
.section-nav a[aria-current="page"] { color: var(--primary); border-color: var(--pink); }
@media (min-width: 1024px) {
  .section-nav a { display: flex; height: 2rem; width: 100%; padding: 0 0.75rem; border-bottom: 0; border-left: 2px solid transparent; }
}

/* --- buttons ------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: 9999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  user-select: none;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--navy-mid); }
[data-theme="dark"] .btn:hover { background: var(--warm-white); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { border-color: var(--pink); outline: 2px solid color-mix(in srgb, var(--pink) 25%, transparent); outline-offset: 0; }
.btn .icon { width: 1rem; height: 1rem; }

.btn-pink { color: #fff; background: var(--pink); }
.btn-pink:hover, [data-theme="dark"] .btn-pink:hover { background: var(--pink-hover); }
.btn-outline { color: var(--foreground); background: var(--background); border-color: var(--border); box-shadow: none; }
.btn-outline:hover { color: var(--navy); background: color-mix(in srgb, var(--navy) 5%, transparent); border-color: color-mix(in srgb, var(--navy) 20%, transparent); }
[data-theme="dark"] .btn-outline { background: color-mix(in srgb, var(--input) 30%, transparent); border-color: var(--input); }
[data-theme="dark"] .btn-outline:hover { color: #fff; background: color-mix(in srgb, var(--input) 50%, transparent); border-color: rgba(255, 255, 255, 0.2); }
.btn-ghost { color: inherit; background: transparent; box-shadow: none; }
.btn-ghost:hover, [data-theme="dark"] .btn-ghost:hover { color: var(--foreground); background: var(--muted); }
.btn-secondary { color: var(--secondary-foreground); background: var(--secondary); box-shadow: none; }
.btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, transparent); }
.btn-destructive { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); box-shadow: none; }
.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 20%, transparent); }
.btn-quiet { font-weight: 400; color: var(--muted-foreground); background: transparent; box-shadow: none; }
.btn-quiet:hover { color: var(--foreground); background: color-mix(in srgb, var(--muted) 50%, transparent); }
.btn-link { color: var(--primary); background: transparent; box-shadow: none; padding: 0; height: auto; }
.btn-link:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }

.btn-sm { height: 1.75rem; padding: 0 0.625rem; font-size: 0.8rem; }
.btn-sm .icon { width: 0.875rem; height: 0.875rem; }
.btn-xs { height: 1.5rem; padding: 0 0.5rem; font-size: 0.75rem; }
.btn-lg { height: 2.25rem; }
.btn-icon { width: 2rem; padding: 0; }
.btn-icon-sm { width: 1.75rem; height: 1.75rem; padding: 0; }
.btn-icon-xs { width: 1.5rem; height: 1.5rem; padding: 0; }
.btn-rounded { border-radius: 0.5rem; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }
.btn.is-busy .icon-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- badges and status pills ---------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.25rem;
  width: fit-content;
  min-height: 1.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--primary);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 9999px;
}
.badge .dot { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 9999px; }
.badge-link:hover { filter: brightness(0.97); }

.tone-down { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
.tone-degraded, .tone-warning { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }
.tone-unknown, .tone-muted { color: var(--muted-foreground); background: var(--muted); border-color: var(--border-strong); }
.tone-pending, .tone-info { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }
.tone-ok, .tone-success { color: var(--success-text); background: var(--success-surface); border-color: var(--success-border); }
.tone-not_monitored { color: var(--muted-foreground); background: transparent; border-style: dashed; border-color: var(--border-strong); }

.dot-down { background: var(--destructive); }
.dot-degraded { background: var(--warning-solid); }
.dot-unknown { background: var(--muted-foreground); }
.dot-pending { background: var(--info-solid); }
.dot-ok { background: var(--success-solid); }
.dot-not_monitored { background: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--muted-foreground) 60%, transparent); }

.reason-list { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.reason-list li { display: flex; gap: 0.5rem; }
.reason-list code { flex-shrink: 0; align-self: flex-start; padding: 0.125rem 0.375rem; font-size: 11px; color: var(--muted-foreground); background: var(--muted); border-radius: 4px; }

/* --- forms ----------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field > label, .label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1; font-weight: 500; color: var(--primary); }
.field-hint { font-size: 0.75rem; color: var(--muted-foreground); }
.field-hint.is-error, .field-error { font-size: 0.875rem; color: var(--destructive); }
.field-hint.is-error { font-size: 0.75rem; }

.input, .select, .textarea {
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input.lg, .select.lg { height: 3rem; padding: 0.5rem 1.25rem; font-size: 1rem; }
.input.sm, .select.sm { height: 2.25rem; padding: 0.25rem 1rem; font-size: 0.875rem; }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--navy) 20%, transparent); }
[data-theme="dark"] .input:hover, [data-theme="dark"] .select:hover, [data-theme="dark"] .textarea:hover { border-color: rgba(255, 255, 255, 0.2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--pink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 20%, transparent); outline: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 20%, transparent); }
.textarea { height: auto; min-height: 6rem; padding: 0.75rem 1rem; border-radius: 0.5rem; line-height: 1.5; resize: vertical; }
.textarea.sm { min-height: 4rem; }
.select { appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; }
.select.auto { width: auto; }
.select option { background: Canvas; color: CanvasText; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.search-box { position: relative; width: 100%; max-width: 24rem; }
.search-box .icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.search-box .input { height: 2.25rem; padding: 0.25rem 2.25rem 0.25rem 2.25rem; font-size: 0.875rem; }
.search-box .btn-icon-sm { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }

/* --- tables and the data-table shell --------------------------------------------- */

.table-wrap { position: relative; width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; caption-side: bottom; }
.table thead tr { border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--background) 70%, transparent); }
.table th {
  height: 2.25rem;
  padding: 0 1.25rem;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--foreground);
}
.table td { padding: 0.875rem 1.25rem; vertical-align: middle; white-space: nowrap; }
.table tbody tr { border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--card) 35%, transparent); transition: background-color 0.15s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary) 2.5%, transparent); }
.table tbody tr:last-child { border-bottom: 0; }
.table.compact th, .table.compact td { padding-left: 1rem; padding-right: 1rem; }
.table.wrap td { white-space: normal; overflow-wrap: anywhere; }
.table td.wrap, .table th.wrap { white-space: normal; }
.table td.right, .table th.right { text-align: right; }
.table tr.row-link { cursor: pointer; }
.table tr.row-down { background: color-mix(in srgb, var(--destructive) 5%, transparent); }
.table tr.row-down:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.table tr.row-not_monitored { opacity: 0.8; }
.table .empty-cell { height: 6rem; text-align: center; color: var(--muted-foreground); white-space: normal; }
.table .cell-title { min-width: 0; }
.table .cell-title a { font-weight: 600; color: var(--primary); border-radius: 2px; }
.table .cell-title a:hover { color: var(--pink); }
.table .cell-title p { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.col-hide-sm { display: none; }
.col-hide-md { display: none; }
.col-hide-lg { display: none; }
@media (min-width: 640px) { .col-hide-sm { display: table-cell; } }
@media (min-width: 768px) { .col-hide-md { display: table-cell; } }
@media (min-width: 1024px) { .col-hide-lg { display: table-cell; } }
@media (min-width: 640px) { .row-hide-sm { display: none !important; } }
@media (min-width: 768px) { .row-hide-md { display: none !important; } }
@media (min-width: 1024px) { .row-hide-lg { display: none !important; } }

.data-table { min-height: 0; flex: 1; background: color-mix(in srgb, var(--card) 70%, transparent); }
.data-table-toolbar { display: flex; flex-direction: column; flex-shrink: 0; gap: 0.5rem; padding: 0.875rem; background: color-mix(in srgb, var(--card) 80%, transparent); border-bottom: 1px solid var(--border-subtle); }
@media (min-width: 640px) { .data-table-toolbar { flex-direction: row; align-items: center; } }
.data-table-toolbar .toolbar-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .data-table-toolbar .toolbar-actions { margin-left: auto; } }
.data-table-body { min-height: 0; flex: 1; overflow-y: auto; background: color-mix(in srgb, var(--card) 25%, transparent); }
.data-table-footer { display: flex; flex-direction: column; flex-shrink: 0; gap: 0.75rem; padding: 0.875rem 1.25rem; background: color-mix(in srgb, var(--card) 80%, transparent); border-top: 1px solid var(--border-subtle); }
@media (min-width: 640px) { .data-table-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.data-table-footer .summary { font-size: 0.75rem; color: var(--muted-foreground); }
.data-table-footer .actions { display: flex; align-items: center; gap: 0.5rem; }

.th-sort { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.375rem; margin-left: -0.375rem; border-radius: 0.375rem; color: var(--foreground); transition: background-color 0.15s, color 0.15s; }
.th-sort:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.th-sort.active { color: var(--primary); }
.th-sort .icon { width: 0.875rem; height: 0.875rem; color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
.th-sort.active .icon { color: var(--pink); }

/* filter popovers (native <details>) */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.375rem);
  left: 0;
  min-width: 10rem;
  padding: 0.25rem;
  color: var(--primary);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 0.75rem;
  box-shadow: 0 20px 55px -35px rgba(6, 0, 72, 0.6);
}
.menu-panel.right { left: auto; right: 0; }
.menu-panel.up { top: auto; bottom: calc(100% + 0.5rem); }
.menu-panel.wide { width: 16rem; }
.menu-heading { padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
}
.menu-item:hover, .menu-item:focus-visible { color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.menu-item[aria-current="true"] { font-weight: 500; background: color-mix(in srgb, var(--primary) 5%, transparent); }
.menu-item .icon-check { margin-left: auto; color: var(--pink); }
.menu-item.muted { color: var(--muted-foreground); }
.menu-separator { height: 1px; margin: 0.25rem 0; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.menu-profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent); }
.menu-profile p:first-child { font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.menu-profile p + p { font-size: 0.75rem; color: var(--muted-foreground); }
.menu-panel.flush { padding: 0; overflow: hidden; }
.theme-switch { display: flex; gap: 0.25rem; padding: 0.5rem 0.75rem; }
.theme-switch button { flex: 1; height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); background: var(--muted); border: 0; border-radius: 9999px; }
.theme-switch button[aria-pressed="true"] { color: var(--primary-foreground); background: var(--primary); }

/* --- tabs, segmented control, range switch ---------------------------------------- */

.segmented { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.25rem; padding: 0.25rem; background: var(--muted); border-radius: var(--radius-lg); }
.segmented a, .segmented button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-lg) - 0.25rem);
  transition: background-color 0.15s, color 0.15s;
}
[data-theme="dark"] .segmented a, [data-theme="dark"] .segmented button { color: rgba(255, 255, 255, 0.8); }
.segmented a:hover, .segmented button:hover { background: color-mix(in srgb, var(--background) 70%, transparent); }
.segmented [aria-current="page"], .segmented [aria-pressed="true"], .segmented [aria-current="true"] { color: var(--primary-foreground); background: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .segmented [aria-current="page"], [data-theme="dark"] .segmented [aria-pressed="true"], [data-theme="dark"] .segmented [aria-current="true"] { color: var(--navy); }

/* --- drawers --------------------------------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 12%, transparent); backdrop-filter: blur(1.5px); border: 0; }
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 0.875rem;
  background: var(--background);
  border-left: 1px solid var(--border-subtle);
  box-shadow: 0 24px 80px -48px rgba(6, 0, 72, 0.45);
}
@media (min-width: 640px) { .drawer-panel { max-width: 31rem; } }
.drawer-close { position: absolute; top: 1rem; right: 1rem; z-index: 10; }
.drawer-head { flex-shrink: 0; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.drawer-head h2 { font-size: 1.125rem; font-weight: 700; color: var(--primary); }
.drawer-head p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.drawer-body { flex: 1; min-height: 0; padding: 1.25rem 1.5rem; overflow-y: auto; }
.drawer-body > * + * { margin-top: 1.25rem; }
.drawer-foot { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); }
.drawer-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.drawer-loading { padding: 3rem 1.5rem; text-align: center; color: var(--muted-foreground); }

/* --- banners, empty states, toasts, skeleton --------------------------------------------- */

.banner { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; border: 1px solid; border-radius: 0.75rem; }
.banner .icon { margin-top: 0.125rem; }
.banner-warning { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }
.banner-info { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }
.banner-error { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
.note { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--warning-text); background: var(--warning-surface); border: 1px solid var(--warning-border); border-radius: 0.5rem; }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 3rem 1.5rem; text-align: center; text-wrap: balance; }
.empty .media { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: 0.5rem; color: var(--foreground); background: var(--muted); border-radius: 0.5rem; }
.empty-title { font-size: 0.875rem; font-weight: 500; color: var(--primary); letter-spacing: -0.01em; }
.empty-description { max-width: 24rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.empty.dashed { border: 1px dashed var(--border-strong); border-radius: 0.75rem; }

.toasts { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100; display: flex; flex-direction: column; gap: 0.625rem; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 42px 14px 16px;
  color: #060048;
  background: #fff;
  border: 1px solid rgba(255, 0, 136, 0.2);
  border-left: 3px solid #ff0088;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(6, 0, 72, 0.14), 0 4px 12px rgba(6, 0, 72, 0.08);
  pointer-events: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  animation: toast-in 0.2s ease-out;
}
.toast .icon { margin-top: 2px; width: 18px; height: 18px; color: #ff0088; }
.toast.error { border-color: rgba(185, 28, 28, 0.24); border-left-color: #b91c1c; }
.toast.error .icon { color: #b91c1c; }
.toast .toast-close { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; padding: 0; color: #78716c; background: transparent; border: 0; border-radius: 4px; }
.toast .toast-close:hover { color: #060048; background: rgba(6, 0, 72, 0.06); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.skeleton { background: var(--muted); border-radius: 0.375rem; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.skeleton-row { height: 2.5rem; margin: 0.625rem 1.25rem; }

/* tooltips: a CSS tooltip from data-tooltip (the native title stays for screen readers) */
[data-tooltip] { position: relative; }
.tooltip {
  position: fixed;
  z-index: 120;
  max-width: 20rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--primary-foreground);
  white-space: pre-line;
  background: var(--primary);
  border-radius: 0.375rem;
  pointer-events: none;
}

/* --- overview: tiles, view switch ---------------------------------------------------------- */

.count-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .count-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .count-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.count-tile {
  display: block;
  padding: 0.75rem 1rem;
  text-align: left;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.count-tile:hover { background: var(--card); border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.count-tile[aria-pressed="true"], .count-tile[aria-current="true"] { background: var(--card); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.count-tile .label { display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.count-tile .count { display: block; margin-top: 0.25rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.count-tile .count.tone-text-down { color: var(--destructive); }
.count-tile .count.tone-text-degraded { color: var(--warning-text); }
.count-tile .count.tone-text-unknown { color: var(--muted-foreground); }
.count-tile .count.tone-text-ok { color: var(--success-text); }

.updated-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.demo-badge { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }

/* --- history: bars, figures --------------------------------------------------------------- */

.day-bar { display: flex; min-width: 0; gap: 1px; }
.day-bar > span { min-width: 0; flex: 1; height: 1.5rem; border-radius: 2px; }
.day-bar.sm > span { height: 0.75rem; }
.day-bar.md > span { height: 1rem; }
.day-bar.fixed { width: 16rem; }
.cell-ok { background: var(--success-solid); }
.cell-light { background: color-mix(in srgb, var(--success-solid) 45%, transparent); }
.cell-warning { background: var(--warning-solid); }
.cell-down { background: var(--destructive); }
.cell-info { background: var(--info-solid); }
.cell-unknown { background: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
.cell-muted { background: color-mix(in srgb, var(--muted-foreground) 25%, transparent); }
.cell-none { background: transparent; border: 1px dashed var(--border-strong); }
.cell-empty { background: transparent; }
/* A status worked out from the backfilled online time and data, not a recorded one */
.cell-derived { opacity: 0.55; }
.cell-pending-day { background: transparent; border: 1px dashed var(--border-strong); }
.day-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
@media (min-width: 640px) { .bar-row { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; } .axis-row { padding-left: 8.25rem; } }
.bar-row .name { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.bar-row .hint { display: none; font-size: 11px; color: var(--muted-foreground); }
@media (min-width: 640px) { .bar-row .hint { display: block; } }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.legend li { display: flex; align-items: center; gap: 0.375rem; }
.legend .swatch { width: 0.75rem; height: 0.75rem; border-radius: 2px; }
.legend-note { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.375rem; }
.figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.figure { min-width: 0; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--border-subtle); border-radius: 0.75rem; }
.figure .label { font-size: 0.75rem; color: var(--muted-foreground); }
.figure .value { margin-top: 0.25rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.figure.big .value { font-size: 1.875rem; line-height: 2.25rem; color: var(--primary); }
.figure .caption { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }

.fleet-chart { display: flex; align-items: flex-end; height: 7rem; gap: 1px; }
.fleet-chart > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 0; flex: 1; height: 100%; }
.fleet-chart span { display: block; min-height: 0; border-radius: 2px; }

.heartbeat-strip { display: grid; gap: 1px; }
.heartbeat-strip span { height: 1rem; border-radius: 2px; }
.strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.strip-head strong { font-weight: 600; color: var(--primary); }

.coverage-wrap { overflow-x: auto; }
.coverage { width: 100%; border-collapse: separate; border-spacing: 0 0.25rem; font-size: 0.75rem; }
.coverage th { padding: 0 2px; font-weight: 400; text-align: center; color: var(--muted-foreground); }
.coverage th:first-child, .coverage td:first-child { width: 10rem; max-width: 10rem; padding-right: 0.75rem; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--primary); }
.coverage td { padding: 0 2px; }
.coverage .cell { display: block; width: 100%; height: 1.25rem; border-radius: 3px; }

/* --- timeline and narrative --------------------------------------------------------------- */

.timeline > li { padding: 0.75rem 1.25rem; font-size: 0.875rem; border-top: 1px solid var(--border-subtle); }
.timeline > li:first-child { border-top: 0; }
.timeline .who { color: var(--muted-foreground); }
.timeline .what { font-weight: 500; color: var(--primary); }
.timeline .body { margin-top: 0.25rem; white-space: pre-wrap; color: var(--foreground); }
.events > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; border-top: 1px solid var(--border-subtle); }
.events > li:first-child { border-top: 0; }
@media (min-width: 640px) { .events > li { grid-template-columns: 10rem 7rem minmax(0, 1fr); align-items: start; gap: 1rem; } }
.events .kind { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.list-plain > li { padding: 0.75rem 1.25rem; font-size: 0.875rem; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.list-plain > li:first-child { border-top: 0; }
.list-plain a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--primary); }
.list-plain a:hover { color: var(--pink); }

.narrative { padding: 0; }
.narrative-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; }
.narrative-view { display: block; width: calc(100% + 1rem); margin: 0.25rem -0.5rem 0; padding: 0.375rem 0.5rem; text-align: left; font-size: 0.875rem; color: var(--foreground); background: transparent; border: 0; border-radius: 0.5rem; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; transition: background-color 0.15s; }
.narrative-view:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.narrative-view .placeholder { color: var(--muted-foreground); }
.narrative-view .icon { margin-top: 0.25rem; opacity: 0; transition: opacity 0.15s; color: var(--muted-foreground); }
.narrative-view:hover .icon, .narrative-view:focus-visible .icon { opacity: 1; }
.narrative-edit { margin-top: 0.375rem; }
.narrative-edit > * + * { margin-top: 0.5rem; }
.narrative-edit .textarea { min-height: 7rem; }
.narrative-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* --- map ------------------------------------------------------------------------------------ */

.health-map { display: block; }
/* Full screen (the control under the zoom buttons): the shell holds the map, the legend and the group switch.
   The Fullscreen API gives :fullscreen; where there is none (iOS Safari) .map-fixed fills the viewport instead. */
.map-shell:fullscreen, .map-shell.map-fixed { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; background: var(--background); overflow: auto; }
.map-shell.map-fixed { position: fixed; inset: 0; z-index: 70; }
.map-shell:fullscreen .map-frame, .map-shell.map-fixed .map-frame { flex: 1 1 auto; height: auto; min-height: 0; }
html.map-fixed-open { overflow: hidden; }
.map-frame { position: relative; min-height: 28rem; height: 60vh; overflow: hidden; background: var(--muted); border: 1px solid var(--border-subtle); border-radius: 0.75rem; }
.map-frame .map-canvas { position: absolute; inset: 0; }
.map-legend { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; max-width: calc(100% - 1.5rem); padding: 0.375rem 0.625rem; font-size: 0.75rem; color: var(--primary); background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--border-subtle); border-radius: 0.5rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.map-legend i { width: 0.625rem; height: 0.625rem; border-radius: 9999px; }
.map-popup { min-width: 11rem; font-family: "Outfit", sans-serif; color: #060048; }
.map-popup .name { font-weight: 700; }
.map-popup .row { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; font-size: 0.8rem; }
.map-popup a { display: inline-flex; font-size: 0.8rem; font-weight: 600; color: #ff0088; }
.map-popup a:hover { text-decoration: underline; }
.map-popup-list { max-height: 14rem; overflow-y: auto; }
.map-popup-list .row { margin: 0 0 0.375rem; }
.map-popup .more { font-size: 0.75rem; color: #6b6a7a; }
.mapboxgl-popup-content { padding: 0.75rem 0.875rem; border-radius: 0.75rem; }
.mapboxgl-popup-close-button { color: #78716c; }
.set-location { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.set-location .field { width: 7.5rem; }
.set-location .input { height: 2rem; font-size: 0.8rem; padding: 0 0.75rem; }
.set-location .field > label { font-size: 0.7rem; }
.map-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; height: 100%; padding: 2rem; text-align: center; }

/* --- login --------------------------------------------------------------------------------- */

.login { display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1fr); background: var(--background); }
@media (min-width: 1024px) { .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.login-card { width: 100%; max-width: 24rem; }
.login-card .logo { height: 1.75rem; width: auto; margin-bottom: 2rem; }
.login-card .logo.dark-only { display: none; }
[data-theme="dark"] .login-card .logo.light-only { display: none; }
[data-theme="dark"] .login-card .logo.dark-only { display: block; }
.login-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--primary); }
.login-card .lede { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.login-card form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.login-hero { display: none; position: relative; margin: 1rem; overflow: hidden; color: #fff; background: var(--navy); border-radius: 1.75rem; }
@media (min-width: 1024px) { .login-hero { display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; } }
.login-hero p { max-width: 24rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.login-hero span { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }

.page-404 { max-width: 28rem; margin: 4rem auto; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

@media print { .sh-sidebar, .sh-header, .toasts, .drawer { display: none !important; } .sh-main { margin-left: 0 !important; } }

/* --- dialogs (a confirmation, native <dialog>) ------------------------------------------------ */

.dialog {
  width: calc(100% - 2rem);
  max-width: 28rem;
  padding: 1.5rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  box-shadow: 0 24px 80px -32px rgba(6, 0, 72, 0.5);
}
.dialog::backdrop { background: color-mix(in srgb, var(--primary) 18%, transparent); backdrop-filter: blur(1.5px); }
.dialog h2 { font-size: 1.125rem; font-weight: 700; color: var(--primary); }

/* --- on/off switches (which kinds of status count) ------------------------------------------ */

.include-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.75rem 0; }
.include-label { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--primary); cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; width: 2rem; height: 1.125rem; flex-shrink: 0; background: color-mix(in srgb, var(--muted-foreground) 55%, transparent); border-radius: 9999px; transition: background-color 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; background: var(--background); border-radius: 9999px; box-shadow: 0 1px 2px rgba(6, 0, 72, 0.25); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(0.875rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ring, var(--pink)); outline-offset: 2px; }

/* --- the version line (login page, sidebar footer) ------------------------------------------- */

.app-version { margin-top: 1.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.sh-version { margin: 0; padding: 0 0.75rem 0.5rem; overflow: hidden; font-size: 0.6875rem; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { [data-sidebar="collapsed"] .sh-version { display: none; } }

/* --- notifications: the bell in the header and the page ------------------------------------------- */

.sh-bell { display: flex; align-items: center; margin-right: 0.5rem; }
.sh-bell-button { position: relative; }
.bell-count { position: absolute; top: -0.125rem; right: -0.125rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center; color: #fff; background: var(--destructive); border-radius: 9999px; font-variant-numeric: tabular-nums; }
.bell-panel { width: 22rem; max-width: calc(100vw - 1.5rem); max-height: 70vh; overflow-y: auto; padding: 0.5rem; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.375rem 0.5rem; border-bottom: 1px solid var(--border-subtle); }
.bell-item { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0.375rem; border-radius: 0.5rem; font-size: 0.8125rem; color: var(--primary); }
.bell-item:hover { background: var(--muted); }
.bell-item .dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-top: 0.375rem; border-radius: 9999px; }
.bell-item.unread { font-weight: 500; background: color-mix(in srgb, var(--primary) 4%, transparent); }
.bell-when { display: block; margin-top: 0.125rem; font-size: 0.7rem; font-weight: 400; color: var(--muted-foreground); }
.bell-empty { padding: 0.75rem 0.375rem; font-size: 0.8rem; color: var(--muted-foreground); }
.bell-all { display: block; margin-top: 0.25rem; padding: 0.5rem 0.375rem 0.125rem; font-size: 0.8rem; font-weight: 600; color: var(--primary); border-top: 1px solid var(--border-subtle); }
.notification-list { list-style: none; margin: 0; padding: 0; }
.notification-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid var(--border-subtle); }
.notification-row:first-child { border-top: 0; }
.notification-row .dot { flex-shrink: 0; width: 0.625rem; height: 0.625rem; margin-top: 0.375rem; border-radius: 9999px; }
.notification-row.unread { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.notification-body p { margin: 0; }