/* ==========================================================================
   RMP - Remote Maintenance Platform
   Design source: RMP Design.pdf
   Industrial console UI with IBM Plex typography and semantic color tokens.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design tokens - PDF dark console (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --bg: #05070a;
  --surface: #0a0d12;
  --surface-raised: #10141b;
  --surface-muted: #151a22;
  --surface-hover: #1a202a;
  --text: #eef1f5;
  --muted: #a8b2c0;
  /* Slightly brighter than the source swatch so compact console labels remain
     WCAG AA compliant on every dark surface. */
  --subtle: #788497;
  --line: #232a36;
  --line-strong: #333d4d;

  --primary: #34d2e8;
  --primary-hover: #5ee0f2;
  --on-primary: #05070a;
  --accent: #34d2e8;
  --ring: #5ee0f2;

  --ok: #3ddc84;
  --warning: #f0b429;
  --critical: #f45b69;
  --info: #4f8cff;
  --unknown: #6b7688;
  --unavailable: #a8b2c0;

  --row-hover: rgba(52, 210, 232, 0.055);
  --backdrop: rgba(0, 0, 0, 0.82);
  --grid-line: rgba(107, 118, 136, 0.035);

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.52);

  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --panel-gradient: linear-gradient(180deg, rgba(52, 210, 232, 0.04), transparent 42%);
  --panel-glow: 0 0 0 1px rgba(52, 210, 232, 0.06);

  --dur-fast: 130ms;
  --dur: 190ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  font-family: var(--font-sans);
}

/* The PDF defines the dark theme. Light mode keeps its hierarchy and palette
   for operators who explicitly request a high-ambient-light variant. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-raised: #f7f9fb;
  --surface-muted: #e7ebf0;
  --surface-hover: #dfe5ec;
  --text: #0a0d12;
  --muted: #4d5a6d;
  --subtle: #657287;
  --line: #cfd6df;
  --line-strong: #aeb8c6;

  /* Deeper petrol keeps the cyan brand character while meeting WCAG AA on
     white surfaces; primary with white text has a 4.71:1 contrast ratio. */
  --primary: #087f91;
  --primary-hover: #066b79;
  --on-primary: #ffffff;
  --accent: #087f91;
  --ring: #087f91;

  --ok: #0b7a44;
  --warning: #8c5a00;
  --critical: #c33a49;
  --info: #245fc7;
  --unknown: #657287;
  --unavailable: #657287;

  --row-hover: rgba(8, 127, 145, 0.065);
  --backdrop: rgba(5, 7, 10, 0.62);
  --grid-line: rgba(35, 42, 54, 0.045);

  --shadow-sm: 0 1px 0 rgba(5, 7, 10, 0.05);
  --shadow-md: 0 14px 34px rgba(35, 42, 54, 0.1);
  --shadow-lg: 0 28px 72px rgba(35, 42, 54, 0.2);

  --panel-gradient: linear-gradient(180deg, rgba(8, 127, 145, 0.05), transparent 42%);
  --panel-glow: 0 0 0 1px rgba(8, 127, 145, 0.08);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 14% -8%, rgba(52, 210, 232, 0.065), transparent 27rem),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

::selection {
  background: rgba(52, 210, 232, 0.26);
  color: var(--text);
}

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

button,
select,
input,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  color: var(--text);
  font-weight: 600;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-72px);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  outline-color: var(--text);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   3. Console shell and navigation
   -------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--dur) var(--ease-out);
}

.app-shell.is-unauthenticated {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.sidebar-is-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

/* Logout returns to a login-only view; no operational data remains visible. */
.app-shell.is-unauthenticated .sidebar,
.app-shell.is-unauthenticated .workspace > :not(.topbar) {
  display: none;
}

.app-shell.is-unauthenticated .workspace {
  min-height: 100dvh;
  justify-content: center;
}

.app-shell.is-unauthenticated .topbar {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.auth-token-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
  text-decoration: underline;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  height: 100dvh;
  min-height: 0;
  padding: 20px 14px;
  overflow: hidden auto;
  border-right: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

:root[data-theme="light"] .sidebar {
  background: rgba(238, 241, 245, 0.92);
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.sidebar-version {
  flex: 0 0 auto;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.navigation-search {
  flex: 1 1 auto;
  min-width: 0;
  transition: flex-basis var(--dur) var(--ease-out);
}

.sidebar-navigation-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.navigation-search-field {
  display: flex;
  align-items: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-raised);
  color: var(--subtle);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.navigation-search-field:focus-within {
  border-color: rgba(52, 210, 232, 0.58);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.1);
  color: var(--primary);
}

.navigation-search-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.navigation-search-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.navigation-search-input::placeholder {
  color: var(--subtle);
  opacity: 1;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 52px;
  color: var(--text);
  text-decoration: none;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: block;
  width: 32px;
  aspect-ratio: 1;
  background: url("logo-icon-dark.svg") center / contain no-repeat;
}

:root[data-theme="light"] .brand-mark {
  background-image: url("logo-icon-light.svg");
}

.brand-wordmark {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.sidebar-primary-group,
.sidebar-section-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-section-group {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.sidebar-nav-heading {
  margin: 0 0 8px 10px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 4px;
  overflow: visible;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.nav-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
}

.nav-item:hover {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--text);
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-item.is-active {
  border-color: rgba(52, 210, 232, 0.2);
  background: rgba(52, 210, 232, 0.075);
  color: var(--primary);
}

.section-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 4px;
  padding: 0;
  overflow: auto hidden;
  scrollbar-width: thin;
}

.section-nav[hidden] {
  display: none;
}

.section-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  text-decoration: none;
  text-align: left;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.section-nav-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.section-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-nav-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
}

.section-nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.section-nav-link.is-active,
.section-nav-link[aria-current="location"] {
  border-color: rgba(52, 210, 232, 0.24);
  background: rgba(52, 210, 232, 0.09);
  color: var(--primary);
}

.sidebar-toggle {
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 7px;
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur) var(--ease-out);
}

.sidebar-is-collapsed .sidebar {
  align-items: center;
  padding-inline: 12px;
}

.sidebar-is-collapsed .sidebar-brand-row {
  flex-direction: column;
}

.sidebar-is-collapsed .navigation-search {
  display: none;
}

.sidebar-is-collapsed .sidebar-navigation-tools {
  justify-content: center;
  padding-bottom: 16px;
}

.sidebar-is-collapsed .sidebar-nav-heading {
  display: none;
}

.navigation-search-filtered {
  display: none !important;
}

.sidebar-is-collapsed .brand-lockup {
  display: block;
}

.sidebar-is-collapsed .brand-mark {
  width: 34px;
}

.sidebar-is-collapsed .brand-wordmark {
  display: none;
}

.sidebar-is-collapsed .sidebar-version {
  display: none;
}

.sidebar-is-collapsed .nav,
.sidebar-is-collapsed .section-nav {
  width: 100%;
}

.navigation-search-active .sidebar-toggle {
  width: 0;
  min-width: 0;
  padding-inline: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sidebar-is-collapsed .nav-item,
.sidebar-is-collapsed .section-nav-link {
  justify-content: center;
  padding-inline: 8px;
}

.sidebar-is-collapsed .nav-label,
.sidebar-is-collapsed .section-nav-label {
  display: none;
}

.sidebar-is-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

.section-anchor {
  scroll-margin-top: 28px;
}

/* --------------------------------------------------------------------------
   4. Workspace, title bar, toolbar
   -------------------------------------------------------------------------- */
.workspace {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(24px, 4vw, 52px) clamp(18px, 4vw, 56px) 24px;
}

.workspace:focus {
  outline: none;
}

.topbar,
.summary-band,
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar {
  align-items: flex-start;
  margin-bottom: 28px;
}

.maintenance-banner {
  margin: -10px 0 28px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.maintenance-banner strong { display: block; margin-bottom: 3px; }
.maintenance-banner > div + div { margin-top: 10px; }

.topbar-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  max-width: 840px;
  gap: 8px;
}

.login-strip,
.auth-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.auth-user {
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.login-page {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
  min-height: 100dvh;
  place-items: center;
  padding: 28px;
}

.login-page::before {
  content: "RMP console";
  position: fixed;
  top: 26px;
  left: clamp(22px, 4vw, 56px);
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-card {
  position: relative;
  display: grid;
  gap: 18px;
  width: min(100%, 470px);
  padding: clamp(26px, 5vw, 42px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(10, 13, 18, 0.96);
  box-shadow: var(--shadow-lg);
}

:root[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, 0.96);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--ok) 48%, transparent 88%);
}

.login-logo {
  display: block;
  justify-self: center;
  width: min(100%, 240px);
  aspect-ratio: 280 / 190;
  background: url("logo-stacked-dark.svg") center / contain no-repeat;
}

:root[data-theme="light"] .login-logo {
  background-image: url("logo-stacked-light.svg");
}

.login-card h1,
.login-card p {
  margin: 0;
}

.login-card h1 {
  font-size: clamp(27px, 7vw, 38px);
}

.login-card > p:not(.eyebrow):not(.muted) {
  color: var(--muted);
}

.stack-form {
  display: grid;
  gap: 10px;
}

.stack-form-fields {
  display: grid;
  gap: 10px;
}

/* Keep the credentials aligned with the full-width language selector. */
.login-card #loginFields .input {
  width: 100%;
}

.login-card #loginForm .button[type="submit"] {
  margin-top: 32px;
}

.login-card #loginStatus {
  width: 100%;
  margin: var(--space-3) 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.error-message {
  padding: 10px 12px;
  border: 1px solid var(--critical);
  border-radius: 6px;
  background: color-mix(in srgb, var(--critical) 74%, #05070a);
  color: #fff;
  font-weight: 600;
}

.state-block.error-message .state-block-title,
.state-block.error-message .state-block-text {
  color: #fff;
}

.login-card #loginStatus:empty {
  display: none;
}

.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 36px;
  padding: 28px 16px 16px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.025em;
  text-align: center;
}

.app-footer-main,
.app-footer-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.app-footer-main {
  gap: 6px 10px;
}

.app-footer-status {
  gap: 5px 12px;
}

.app-footer-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background: url("logo-icon-dark.svg") center / contain no-repeat;
}

:root[data-theme="light"] .app-footer-logo {
  background-image: url("logo-icon-light.svg");
}

.app-footer-version {
  padding-left: 0;
  border-left: 0;
  color: var(--muted);
  white-space: nowrap;
}

.app-footer-release-version {
  color: var(--muted);
  white-space: nowrap;
}

.stack-form label,
.form-field span {
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Buttons, inputs and selects
   -------------------------------------------------------------------------- */
.button,
.select,
.input {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.button-action-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.button-small .button-action-icon,
.action-menu-item .button-action-icon {
  width: 15px;
  height: 15px;
}

.button:hover .button-action-icon,
.action-menu-item:hover .button-action-icon,
.action-menu-item:focus-visible .button-action-icon {
  transform: translateY(-1px) scale(1.08);
}

.button:active .button-action-icon,
.action-menu-item:active .button-action-icon {
  transform: scale(0.92);
}

.button-action-icon[data-icon="loading"] {
  animation: button-icon-spin 900ms linear infinite;
}

@keyframes button-icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .button-action-icon {
    transition: none;
  }

  .button-action-icon[data-icon="loading"] {
    animation: none;
  }
}

.button:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.09), var(--shadow-md);
}

.button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.button:disabled,
.button[aria-disabled="true"] {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--subtle);
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

/* Config writes have multiple server-side stages (lock, commit, sync and UI
   reconciliation). A determinate fill keeps that wait visible without a
   spinner suggesting that the form can already be submitted again. */
.button.is-progressing,
.button.is-progressing:disabled {
  border-color: var(--primary);
  background-color: var(--surface-raised);
  background-image: linear-gradient(rgba(52, 210, 232, 0.28), rgba(52, 210, 232, 0.28));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: var(--button-progress, 0%) 100%;
  color: var(--primary);
  opacity: 1;
  transition:
    background-size 220ms var(--ease-out),
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.button-secondary,
.button-icon {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--muted);
  box-shadow: none;
}

.button-secondary:hover,
.button-icon:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
  color: var(--primary);
}

.button-danger,
.button-danger[type="submit"] {
  border-color: var(--critical);
  background: var(--critical);
  color: #ffffff;
  font-weight: 600;
}

.button-danger:hover,
.button-danger[type="submit"]:hover {
  border-color: #ff7b87;
  background: #ff6b79;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(244, 91, 105, 0.12), var(--shadow-md);
}

.button-small {
  min-height: 36px;
  padding: 6px 11px;
  font-size: 13px;
}

.button-icon {
  width: 44px;
  flex: 0 0 auto;
  padding: 9px;
}

.theme-icon {
  width: 18px;
  height: 18px;
}

.theme-icon-sun {
  display: block;
}

.theme-icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-icon-moon {
  display: block;
}

.button-row,
.host-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.message-dialog-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.message-dialog-code {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  user-select: all;
  -webkit-user-select: all;
}

.action-menu {
  position: relative;
  flex: 0 0 auto;
}

.action-menu-trigger {
  min-width: 36px;
  padding-right: 8px;
  padding-left: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}

.action-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.action-menu-list[hidden] {
  display: none;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.action-menu-item:hover,
.action-menu-item:focus-visible {
  outline: none;
  background: var(--surface-hover);
  color: var(--primary);
}

.action-menu-item:disabled {
  color: var(--subtle);
  cursor: not-allowed;
  background: none;
}

.action-menu-item-danger {
  color: var(--critical);
}

.action-menu-item-danger:hover,
.action-menu-item-danger:focus-visible {
  color: var(--critical);
  background: rgba(244, 91, 105, 0.12);
}

.inline-status-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.download-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 24px;
}

.input,
.select {
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.input:hover,
.select:hover {
  border-color: var(--subtle);
  background: var(--surface-muted);
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--ring);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.13);
}

/* Single-choice selects use the browser's modern, fully styleable select
   surface. It gives every field the language picker's clear chevron and a
   panel matching the rest of the console; native multi-selects stay intact. */
@supports (appearance: base-select) {
  select.input:not([multiple]),
  select.select:not([multiple]) {
    appearance: base-select;
    align-items: center;
    padding-right: 12px;
  }

  select.input:not([multiple])::picker-icon,
  select.select:not([multiple])::picker-icon {
    width: 16px;
    height: 16px;
    margin-left: 16px;
    color: var(--subtle);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  select.input:not([multiple]):open::picker-icon,
  select.select:not([multiple]):open::picker-icon {
    transform: rotate(180deg);
  }

  select.input:not([multiple])::picker(select),
  select.select:not([multiple])::picker(select) {
    appearance: base-select;
    min-width: anchor-size(width);
    margin: 6px 0 0;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-md), 0 12px 28px rgba(0, 0, 0, 0.28);
  }

  select.input:not([multiple]) option,
  select.select:not([multiple]) option {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
  }

  select.input:not([multiple]) option:checked,
  select.select:not([multiple]) option:checked {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
  }

  select.input:not([multiple]) option:hover,
  select.select:not([multiple]) option:hover {
    background: var(--surface-muted);
  }
}

.input::placeholder {
  color: var(--subtle);
  opacity: 1;
}

.input {
  width: min(100%, 240px);
}

.compact-input {
  width: 158px;
}

.month-picker { position: relative; flex: 0 0 auto; }
.month-picker-trigger { display: flex; align-items: center; justify-content: space-between; min-width: 158px; min-height: 44px; gap: 16px; padding: 9px 12px 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); color: var(--text); font-family: var(--font-mono); font-size: 13px; text-align: left; cursor: pointer; }
.month-picker-trigger:hover, .month-picker-trigger[aria-expanded="true"] { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.13); }
.month-picker-chevron { color: var(--subtle); font-size: 18px; line-height: 1; transform: translateY(-2px); }
.month-picker-panel { position: absolute; z-index: 110; top: calc(100% + 6px); left: 0; width: 236px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-raised); box-shadow: var(--shadow-md), 0 12px 28px rgba(0,0,0,.28); }
.month-picker-header { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 6px; }
.month-picker-header button, .month-picker-option { border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font-family: var(--font-mono); cursor: pointer; }
.month-picker-header button { min-height: 30px; color: var(--subtle); font-size: 20px; }
.month-picker-header strong { text-align: center; font-family: var(--font-mono); font-size: 12px; }
.month-picker-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.month-picker-option { min-height: 32px; padding: 6px; font-size: 12px; }
.month-picker-header button:hover, .month-picker-option:hover { background: var(--surface-muted); }
.month-picker-option[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

.language-picker {
  position: relative;
  flex: 0 0 auto;
  min-width: 136px;
}

.language-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  gap: 16px;
  padding: 9px 12px 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.language-picker-trigger:hover {
  border-color: var(--subtle);
  background: var(--surface-muted);
}

.language-picker-trigger:focus-visible,
.language-picker-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--ring);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.13);
}

.language-picker-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--subtle);
  transition: transform var(--dur-fast) var(--ease-out);
}

.language-picker-trigger[aria-expanded="true"] .language-picker-chevron {
  transform: rotate(180deg);
}

.language-picker-panel {
  position: absolute;
  z-index: 110;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  width: max(100%, 220px);
  max-height: min(360px, 56dvh);
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md), 0 12px 28px rgba(0, 0, 0, 0.28);
}

.language-picker-panel[hidden] {
  display: none;
}

.language-picker-search {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.language-picker-search:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(52, 210, 232, 0.13);
}

.language-picker-options {
  display: grid;
  min-height: 0;
  gap: 2px;
  overflow: auto;
  padding-right: 2px;
}

.language-picker-option {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.language-picker-option:hover,
.language-picker-option:focus-visible {
  outline: none;
  border-color: var(--line-strong);
  background: var(--surface-muted);
}

.language-picker-option[aria-selected="true"] {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

textarea.input {
  min-height: 96px;
  resize: vertical;
}

.modal-card .input,
.form-field .input,
.form-field .select {
  width: 100%;
}

.mono-input,
.guide-block {
  font-family: var(--font-mono);
}

.inline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.meta-chip,
.panel-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 3px 10px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
}

/* --------------------------------------------------------------------------
   6. Summary and status language
   -------------------------------------------------------------------------- */
.summary-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px 20px;
  margin-top: auto;
  padding: 28px 16px 12px;
  border-top: 1px solid var(--line);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(10, 13, 18, 0.94);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    transform var(--dur) var(--ease-out);
}

:root[data-theme="light"] .panel {
  background: rgba(255, 255, 255, 0.96);
}

.footer-status-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-status-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.footer-status-label {
  display: inline-flex;
  gap: 0;
}

.footer-status-overall {
  display: none;
}

.tile-label,
.detail-list dt,
.metric-list dt {
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.tile-label {
  display: inline;
  margin: 0;
  letter-spacing: 0.025em;
  text-transform: none;
}

.status-swatch {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--unknown);
  transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}

.status-ok {
  background: rgba(61, 220, 132, 0.1);
  color: var(--ok);
}

.status-warning {
  background: rgba(240, 180, 41, 0.11);
  color: var(--warning);
}

.status-critical {
  background: rgba(244, 91, 105, 0.1);
  color: var(--critical);
}

.status-unknown,
.status-unavailable {
  background: rgba(107, 118, 136, 0.12);
  color: var(--unavailable);
}

.status-swatch.status-ok {
  background: var(--ok);
  box-shadow: 0 0 9px rgba(61, 220, 132, 0.7);
}

.status-swatch.status-warning {
  background: var(--warning);
  box-shadow: 0 0 9px rgba(240, 180, 41, 0.66);
}

.status-swatch.status-critical {
  background: var(--critical);
  box-shadow: 0 0 9px rgba(244, 91, 105, 0.66);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

.status-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

/* --------------------------------------------------------------------------
   7. Panels, metrics and tables
   -------------------------------------------------------------------------- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 32px;
  margin-bottom: 32px;
}

/* Technician session data has many columns; give each table the full row. */
.technician-session-grid {
  grid-template-columns: 1fr;
}

.admin-directory-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.alert-recipient-list {
  display: grid;
  gap: 10px;
}

.policy-choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.policy-choice-fieldset > legend {
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 600;
}

.policy-choice-list {
  display: grid;
  max-height: 15rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.policy-choice-group + .policy-choice-group {
  border-top: 1px solid var(--line);
}

.policy-choice-group-title {
  margin: 0;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.policy-choice {
  margin: 0;
  padding: 8px 12px;
}

.policy-choice + .policy-choice {
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.policy-choice:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.alert-recipient-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1fr) minmax(150px, 200px) auto auto;
  align-items: center;
  gap: 10px;
}

.empty-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#view-admin.is-visible {
  display: flex;
  flex-direction: column;
}

#view-admin > .section-heading { order: 0; }
#admin-users { order: 1; }
#admin-people-directories { order: 2; }
#admin-config-directories { order: 3; }
#admin-router-profiles { order: 4; }
#admin-offboarding { order: 6; }
#admin-alerts { order: 7; }
#admin-breakglass { order: 8; }
#view-admin > dialog { order: 20; }

.wide-panel {
  margin-bottom: 16px;
}

.soft-divider {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.auth-action-workspace {
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.auth-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.auth-action-header h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.auth-action-section {
  display: grid;
  gap: 14px;
}

.auth-action-section .panel-meta {
  min-height: 18px;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
  gap: 13px;
}

.inline-form .input,
.inline-form .select,
.inline-form .compact-input {
  width: 100%;
}

.totp-result {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.qr-box svg {
  display: block;
  width: min(100%, 220px);
  height: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.totp-material {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.totp-material .guide-block {
  max-height: 140px;
  margin-top: 4px;
}

.section-gap {
  margin-top: 32px;
}

.section-heading {
  margin-bottom: 15px;
  color: var(--text);
  font-size: 22px;
}

.panel {
  padding: clamp(20px, 2.4vw, 28px);
}

.panel:hover {
  border-color: var(--line-strong);
}

.metric-list,
.detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.metric-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-list div,
.detail-list div {
  min-width: 0;
}

.metric-list dd,
.detail-list dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.metric-list dd {
  color: var(--primary);
  font-size: 25px;
  letter-spacing: -0.03em;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

/* The month picker belongs to the panel header but must float over the table
   below it. Lift only the active panel's clipping, preserving table corners
   and horizontal scrolling in every other state. */
.table-panel:has(.month-picker-panel:not([hidden])) {
  overflow: visible;
}

.table-panel .panel-header {
  padding: 22px 24px 16px;
}

.panel-header h2,
.panel-header p {
  margin-bottom: 0;
}

/* Tables stay scannable when their heading is a single line. Status details
 * belong in the table body or an explicit action result, not below every
 * title as a placeholder dash. Endpoint removal follows the same pattern. */
.table-panel > .panel-header .panel-meta,
#sites-router-removal > .panel-header .panel-meta {
  display: none;
}

.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.table-pagination,
.pagination-controls,
.pagination-navigation,
.pagination-page-size {
  display: flex;
  align-items: center;
}

.table-pagination {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
}

.pagination-controls,
.pagination-navigation {
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-page-size {
  position: relative;
  gap: 8px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pagination-page-size .select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer;
}

.pagination-page-size-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 76px;
  min-height: 36px;
  padding: 6px 32px 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: normal;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.pagination-page-size-control:hover {
  border-color: var(--subtle);
  background: var(--surface-muted);
}

.pagination-page-size-control:has(.select:focus) {
  border-color: var(--ring);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.13);
}

.pagination-page-size-chevron {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  color: var(--subtle);
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.pagination-page-size.is-picker-open .pagination-page-size-chevron,
.pagination-page-size:has(.select:open) .pagination-page-size-chevron {
  transform: translateY(-50%) rotate(180deg);
}

@supports (appearance: base-select) {
  .pagination-page-size .select:not([multiple])::picker-icon {
    display: none;
  }
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.sortable-header {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.sortable-header:hover {
  color: var(--primary);
}

.sortable-header:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
  border-radius: 2px;
}

.sort-icon {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1;
}

th[aria-sort="ascending"] .sort-icon,
th[aria-sort="descending"] .sort-icon {
  color: var(--primary);
}

th,
td {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

thead tr:first-child th,
tbody tr:first-child td {
  border-top: 0;
}

th {
  background: var(--surface-raised);
  color: var(--subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

td {
  color: var(--muted);
}

tbody tr {
  transition: background-color var(--dur-fast) ease;
}

tbody tr:hover {
  background: var(--row-hover);
}

td a:not(.button) {
  color: var(--primary);
  text-underline-offset: 3px;
}

.empty-cell {
  color: var(--subtle);
  font-style: italic;
}

.empty-panel {
  max-width: 760px;
}

.guide-block {
  max-height: 420px;
  margin: 16px 0 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ok);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
  white-space: pre-wrap;
}

code.guide-block {
  display: block;
}

/* --------------------------------------------------------------------------
   8. Modals and forms
   -------------------------------------------------------------------------- */
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--text);
}

#siteDialog {
  width: min(780px, calc(100vw - 32px));
}

.access-method-picker {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 16px;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.access-method-picker legend {
  padding: 0 6px;
  font-weight: 600;
}

.access-method-picker .page-description {
  margin: 0;
}

.access-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.access-method-card {
  display: grid;
  position: relative;
  min-width: 0;
  padding: 14px;
  gap: 7px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.access-method-card:hover {
  border-color: var(--subtle);
  background: var(--surface-muted);
}

.access-method-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(52, 210, 232, 0.07);
  box-shadow: 0 0 0 2px rgba(52, 210, 232, 0.12);
}

.access-method-card:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.access-method-card input {
  width: 16px;
  height: 16px;
  margin: 0 0 2px;
  accent-color: var(--primary);
}

.access-method-card-title {
  color: var(--text);
  font-weight: 600;
}

.access-method-card-copy,
.field-hint,
.access-guide-note,
.access-topology-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.access-topology {
  display: grid;
  margin: 0;
  padding: 10px 12px;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.access-topology svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.access-topology-node rect {
  fill: var(--surface-raised);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.access-topology-node text {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
}

.access-topology-link {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
}

.access-topology-link-outbound {
  stroke-dasharray: 7 8;
  animation: access-flow 1.15s linear infinite;
}

.access-topology[data-access-method="direct_host"] .access-topology-lan {
  display: none;
}

.access-guide {
  padding-top: 2px;
}

.access-guide summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 500;
}

.access-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  gap: 12px;
}

.access-guide-note,
.access-guide-result {
  margin: 12px 0 0;
}

.access-guide-result {
  padding: 10px 12px;
  border-left: 3px solid var(--ok);
  background: rgba(61, 220, 132, 0.08);
  color: var(--text);
}

.access-guide-result[data-error="true"] {
  border-left-color: var(--warning);
  background: rgba(240, 180, 41, 0.09);
}

.endpoint-enrollment-panel {
  display: grid;
  padding: 14px;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.endpoint-enrollment-panel h3,
.endpoint-enrollment-panel p,
.endpoint-enrollment-panel .modal-actions {
  margin: 0;
}

@keyframes access-flow {
  to {
    stroke-dashoffset: -30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-topology-link-outbound {
    animation: none;
    stroke-dasharray: none;
  }
}

@media (max-width: 680px) {
  .access-method-grid,
  .access-guide-grid {
    grid-template-columns: 1fr;
  }
}

.modal::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(5px);
}

.modal-card {
  display: grid;
  max-height: calc(100dvh - 48px);
  padding: 24px;
  gap: 18px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.modal[open] .modal-card {
  animation: modal-in var(--dur) var(--ease-out);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.edit-user-access {
  display: grid;
  padding: 16px;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.edit-user-access h3 {
  margin: 0 0 4px;
}

.edit-user-access .button-row {
  flex-wrap: wrap;
}

.modal-action-spacer {
  flex: 1;
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-wrap: wrap;
  }

  .modal-action-spacer {
    display: none;
  }
}

.modal-header h2 {
  margin: 0;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.wizard-progress li {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.wizard-progress li::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-strong);
}

.wizard-progress li:last-child::after {
  display: none;
}

.wizard-progress li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
}

.wizard-progress li.is-active,
.wizard-progress li.is-complete {
  color: var(--accent);
}

.wizard-progress li.is-active > span,
.wizard-progress li.is-complete > span {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 210, 232, 0.1);
}

.wizard-step {
  display: grid;
  gap: 18px;
}

.wizard-summary,
.wizard-access-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.wizard-summary {
  font-family: var(--font-mono);
  font-size: 13px;
}

.wizard-access-card {
  display: grid;
  gap: 14px;
}

.wizard-access-card h3 {
  margin: 9px 0 4px;
}

.wizard-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-result {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.wizard-access-card .download-list {
  padding: 0;
}

.form-field {
  display: grid;
  gap: 7px;
}

.advanced-fields {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
}

.advanced-fields[open] {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.advanced-fields summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.advanced-fields[open] summary {
  margin-bottom: 2px;
}

.advanced-fields summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.field-with-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
}

.field-with-action .button {
  min-height: 44px;
  white-space: nowrap;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.check-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.check-row input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.modal-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* --------------------------------------------------------------------------
   9. Views and motion
   -------------------------------------------------------------------------- */
.view {
  display: none;
}

.view.is-visible {
  display: block;
  animation: view-in var(--dur-slow) var(--ease-out);
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. Responsive console navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .alert-recipient-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alert-recipient-row > .button {
    justify-self: start;
  }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-is-collapsed {
    display: block;
  }

  .sidebar {
    position: sticky;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 76px;
    gap: 8px 20px;
    padding: 10px clamp(18px, 4vw, 58px);
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-brand-row,
  .sidebar-is-collapsed .sidebar-brand-row {
    flex: 0 0 auto;
    flex-direction: row;
  }

  .sidebar-is-collapsed .sidebar {
    align-items: center;
    padding-inline: clamp(18px, 4vw, 58px);
  }

  .sidebar-toggle {
    display: none;
  }

  .sidebar-navigation-tools {
    flex: 1 1 auto;
    padding: 0;
    border: 0;
  }

  .navigation-search-field,
  .sidebar-is-collapsed .navigation-search-field {
    display: flex;
    min-width: min(280px, 56vw);
  }

  .sidebar-is-collapsed .navigation-search {
    display: block;
  }

  .sidebar-primary-group,
  .sidebar-section-group {
    flex: 1 0 100%;
    width: 100%;
    padding-top: 10px;
  }

  .sidebar-primary-group {
    border-top: 1px solid var(--line);
  }

  .sidebar-section-group {
    border-top: 0;
  }

  .sidebar-nav-heading {
    display: none;
  }

  .nav {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding-top: 6px;
    overflow-x: auto;
    border-top: 0;
  }

  .nav-item {
    flex: 1 0 auto;
    justify-content: center;
    width: auto;
  }

  .section-nav,
  .sidebar-is-collapsed .section-nav {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: auto;
    gap: 6px;
    padding: 10px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .section-nav-link,
  .sidebar-is-collapsed .section-nav-link {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
  }

  .sidebar-is-collapsed .nav-label,
  .sidebar-is-collapsed .section-nav-label {
    display: inline;
  }

  .section-anchor {
    scroll-margin-top: 210px;
  }
}

@media (max-width: 860px) {
  .workspace {
    padding: 26px 18px 24px;
  }

  .topbar,
  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar,
  .summary-band,
  .metrics-grid {
    width: 100%;
  }

  .toolbar,
  .login-strip,
  .auth-user {
    justify-content: flex-start;
  }

  .auth-user {
    padding-right: 0;
    border-right: 0;
  }

  .summary-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-grid,
  .totp-result {
    grid-template-columns: 1fr;
  }

  .inline-controls {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .alert-recipient-row {
    grid-template-columns: 1fr;
  }

  .field-with-action {
    grid-template-columns: 1fr;
  }

  .field-with-action .button {
    width: 100%;
  }

  .app-footer {
    padding-inline: 0;
  }

  .app-footer-name {
    flex-basis: calc(100% - 48px);
    text-align: left;
  }

  .app-footer-version {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .brand-mark {
    width: 30px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .nav-label {
    display: inline;
  }

  .input,
  .compact-input,
  .login-strip .button,
  .login-strip .select,
  .stack-form .button,
  .stack-form .input {
    width: 100%;
  }

  .login-strip {
    width: 100%;
  }

  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal-actions .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding-inline: 14px;
  }

  .summary-band {
    justify-content: flex-start;
    gap: 8px 14px;
    padding-inline: 0;
  }

  .metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel,
  .modal-card {
    padding: 19px;
  }

  .table-panel {
    padding: 0;
  }

  .table-panel .panel-header {
    padding: 19px 19px 14px;
  }

  .table-pagination {
    padding: 14px 19px;
  }

  .section-nav-link {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 11px;
  }
}

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

/* --------------------------------------------------------------------------
   12. Dashboard building blocks
   Shared primitives for the operator dashboard and the reworked management
   pages: spacing-driven page headers, filter bars, empty/loading/error
   blocks, KPI cards, a 12-column dashboard grid, chart and map frames,
   location badges and a scroll-reveal animation. These are pure building
   blocks - no view in index.html consumes them yet, later tasks do.
   -------------------------------------------------------------------------- */
.page-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon text actions";
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.page-header-icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--primary);
}

.page-header-text {
  grid-area: text;
  min-width: 0;
}

.page-header-text h1 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
}

.page-description {
  margin-top: var(--space-2);
  max-width: none;
  color: var(--muted);
}

.page-header-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The dashboard has no header actions. Keep its title and explanatory text
   together and let the description use the available width. */
.dashboard-page-header {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon text";
  padding: var(--space-6) 0 var(--space-5);
}

.dashboard-page-header .page-header-icon {
  width: 56px;
  height: 56px;
}

.dashboard-page-header .page-description {
  max-width: none;
}

@media (max-width: 640px) {
  .page-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "text"
      "actions";
    row-gap: var(--space-3);
  }

  .dashboard-page-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon text";
    column-gap: var(--space-4);
    row-gap: 0;
  }
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.filter-bar-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
}

.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.state-block-illustration {
  width: 96px;
  height: 96px;
  color: var(--subtle);
  opacity: 0.85;
}

.state-block-title {
  color: var(--text);
  font-weight: 600;
}

.state-block-text {
  max-width: 46ch;
  color: var(--muted);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

.kpi-card {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  background-image: var(--panel-gradient);
  box-shadow: var(--shadow-md), var(--panel-glow);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.kpi-card.is-ok {
  border-left: 3px solid var(--ok);
}

.kpi-card.is-warning {
  border-left: 3px solid var(--warning);
}

.kpi-card.is-critical {
  border-left: 3px solid var(--critical);
}

.kpi-card.is-info {
  border-left: 3px solid var(--info);
}

.kpi-label {
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-value {
  margin-top: var(--space-2);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.kpi-meta {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 13px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.dashboard-cell {
  grid-column: span 12;
  display: flex;
  min-width: 0;
}

/* A grid row's tallest dashboard panel defines the row height. Stretch each
   direct panel to that height so neighbouring cards form a calm, aligned row
   even when their charts or status details have different natural heights. */
.dashboard-cell > .panel {
  flex: 1 1 auto;
}

.dashboard-problem-list,
#dashboardProblems > ul {
  display: grid;
  row-gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none outside;
}

.dashboard-problem-item,
#dashboardProblems > ul > li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dashboard-problem-item::marker,
#dashboardProblems > ul > li::marker {
  content: "";
}

.dashboard-problem-item .status-pill,
#dashboardProblems > ul > li .status-pill {
  flex: 0 0 auto;
}

.dashboard-problem-item .panel-meta,
#dashboardProblems > ul > li .panel-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-cell.span-4 {
  grid-column: span 4;
}

.dashboard-cell.span-6 {
  grid-column: span 6;
}

.dashboard-cell.span-8 {
  grid-column: span 8;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .dashboard-cell,
  .dashboard-cell.span-4,
  .dashboard-cell.span-6,
  .dashboard-cell.span-8 {
    grid-column: span 6;
  }
}

@media (max-width: 700px) {
  .dashboard-grid {
    /* minmax(0, 1fr), not a bare 1fr -- matching the two breakpoints above.
       A grid item's default min-width: auto lets its own min-content size
       (here, #dashboard-map's .map-frame: aspect-ratio 16/9 combined with
       min-height: 320px computes an intrinsic ~569px minimum width) force
       the track wider than the container, which at a single column widens
       every cell and the page itself past a narrow viewport -- caught by
       Task 16's browser E2E layout coverage, invisible to the DOM harness
       since it has no layout at all. */
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-cell,
  .dashboard-cell.span-4,
  .dashboard-cell.span-6,
  .dashboard-cell.span-8 {
    grid-column: span 1;
  }
}

.chart-frame {
  position: relative;
  min-height: 180px;
}

.chart-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The status donut is a quick at-a-glance indicator.  Keeping it compact
   avoids competing with its heading or overwhelming the neighbouring
   platform details on wide dashboard rows. */
.dashboard-status-chart {
  width: min(100%, 360px);
  margin: var(--space-5) auto 0;
}

.platform-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0;
}

.platform-summary dt,
.platform-summary dd {
  min-width: 0;
  margin: 0;
}

.platform-summary dt {
  color: var(--muted);
}

.platform-summary dd {
  color: var(--text);
  overflow-wrap: anywhere;
  text-align: right;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
}

.chart-legend-item::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.chart-legend-item strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.map-frame {
  /* Reserve a dedicated legend tray: the map must end with the same calm
     12px breathing room above the key that the key has below it. */
  --map-legend-safe-area: 58px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  touch-action: none;
}

.map-frame > svg {
  display: block;
  width: 100%;
  height: calc(100% - var(--map-legend-safe-area));
}

.map-toolbar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: flex;
  gap: var(--space-1);
}

.map-popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 280px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  /* geomap.js computes the popover's final, frame-clamped top-left
     position in JavaScript -- it needs the popover's own rendered size
     (which depends on its content) and the frame's own bounds, neither
     of which plain CSS can feed back into its own position -- and writes
     the result as these two custom properties, in container-relative
     pixels, on pointerenter/focusin/click. See positionPopover() in
     geomap.js. */
  transform: translate(var(--map-popover-x, 0px), var(--map-popover-y, 0px));
}

.map-popover-title {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-weight: 600;
}

.map-popover-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.map-popover-rows dt {
  color: var(--muted);
  font-size: 12.5px;
}

.map-popover-rows dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  text-align: right;
}

.map-frame .state-block {
  position: absolute;
  inset: 0 0 var(--map-legend-safe-area);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The empty state is a see-through overlay, not an opaque panel, so it
     must not swallow clicks meant for the toolbar/svg underneath it. */
  pointer-events: none;
  /* A deliberate 50/50 split: the brief requires the land to stay
     visible ("Die Landflächen bleiben sichtbar"), and 82% opaque left it
     at just 18% visibility -- barely distinguishable from not being
     there. Equal parts keeps the land silhouette clearly recognisable
     while the tint still reads as the dominant surface so the centred
     message stays the visual focus. There is never anything more
     colourful than the muted land/line fills competing with it here --
     the empty state exists only when there are zero points, so no
     status-coloured markers are ever under it. */
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
}

.map-legend {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  max-width: calc(100% - (var(--space-3) * 2));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transform: translateX(-50%);
}

@media (max-width: 700px) {
  .map-frame {
    /* Narrow cards can wrap the five legend entries to two rows. A
       min-height with the desktop 16:9 ratio transfers a 569px minimum
       width at 390px, so use a fixed-height mobile frame instead. */
    --map-legend-safe-area: 82px;
    aspect-ratio: auto;
    min-height: 0;
    height: 320px;
  }
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
}

.map-legend-item::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* The approximate-position legend entry swaps the solid dot for a dashed
   ring outline -- the same shape web/geomap.js draws around a country-level
   marker -- so the key stays recognisable by shape alone, not only colour. */
.map-legend-item.is-approximate::before {
  background: none;
  border: 1.5px dashed currentColor;
}

.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.location-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.location-badge-approximate {
  border-style: dashed;
}

.reveal-item {
  opacity: 0;
  transform: translateY(8px);
}

.reveal-item.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  /* Set by app.js's revealOnce() per item (Math.min(index, 8) * 40ms) so a
     freshly observed batch -- the KPI grid, or a dashboard panel scrolled
     into view -- staggers in instead of all fading at once; 0ms for any
     .reveal-item revealed some other way (e.g. the reduced-motion/no-
     IntersectionObserver immediate path, which never sets the property).
     The @media (prefers-reduced-motion: reduce) block below already
     forces this whole rule's `transition` to `none`, which resets every
     transition-* longhand -- including this one -- to its initial value,
     so no separate reduced-motion override is needed for the delay alone. */
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card,
  .kpi-card:hover,
  .reveal-item,
  .reveal-item.is-revealed {
    transition: none;
    transform: none;
  }

  .reveal-item {
    opacity: 1;
  }
}