/* ===========================================================
   MD Web Admin Directory — Michigan Digital internal tool
   =========================================================== */

:root {
  /* Brand surfaces */
  --bg: #0a0f1e;
  --bg-soft: #0d1428;
  --sidebar-bg: #0b1224;
  --surface: #121b34;
  --surface-hover: #16213e;
  --surface-raised: #17213e;
  --border: #22304f;
  --border-soft: #1a2540;

  /* Text */
  --text-primary: #eef2fb;
  --text-secondary: #a6b3d1;
  --text-muted: #6c7ba3;

  /* Brand accents */
  --blue: #4c8dff;
  --blue-bright: #79aeff;
  --blue-dim: #2c4d8f;
  --blue-soft-bg: rgba(76, 141, 255, 0.12);

  --green: #37d399;
  --green-soft-bg: rgba(55, 211, 153, 0.14);

  --orange: #ff9f45;
  --orange-soft-bg: rgba(255, 159, 69, 0.14);

  --red: #ff6b6b;
  --red-soft-bg: rgba(255, 107, 107, 0.13);

  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "DM Sans", sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.55);

  --sidebar-w: 268px;
  --sidebar-w-collapsed: 76px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* The app toggles visibility via the native `hidden` attribute throughout
   (results panels, empty states, dropdown panels, the modal, the mobile
   sidebar scrim). Several components also set their own `display` in CSS
   (grid/flex layouts), and a normal-priority author rule always wins over
   the browser default `[hidden] { display: none }` rule regardless of
   selector specificity — so without this, `hidden` would silently do
   nothing on any element with its own `display` declaration. This keeps
   `hidden` authoritative everywhere, no matter what a component sets. */
[hidden] {
  display: none !important;
}

/* overflow-x: hidden here stops the off-canvas mobile sidebar (a fixed,
   translateX(-100%) element) from ever producing a horizontal scrollbar.
   Deliberately NOT paired with height:100% — per the CSS overflow spec,
   setting overflow-x to anything but visible forces overflow-y to compute
   as auto too, and combined with a fixed height that turns this box into
   its own internally-scrolling container instead of normal page scrolling.
   Leaving height unconstrained means the box just grows with its content,
   so that forced auto overflow-y never actually triggers. */
html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

button, input {
  font-family: inherit;
  color: inherit;
}

a {
  color: var(--blue-bright);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =================== APP SHELL =================== */

.app-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
}

/* =================== SIDEBAR =================== */

/* Pins the footnote/directory-status/sign-in trio to the bottom of the
   sidebar (in that order) regardless of how many nav items are above them
   — margin-top:auto on a flex child pushes it (and everything after it,
   here nothing) to the end of the flex container. */
.sidebar-tail {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 20px 16px 18px;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: var(--sidebar-w);
  flex-shrink: 0;
  transition: width 180ms ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, #1c2c56, #101a37);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-bright);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.brand-text strong {
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}
.brand-text small {
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border);
}
.sidebar-toggle svg {
  transition: transform 180ms ease;
}

/* =================== SIDEBAR: COLLAPSED STATE =================== */
/* Manual, persistent collapse toggled by #sidebarToggle — not a hover/
   auto-hide behavior. Text and secondary chrome hide immediately (no fade)
   to keep this simple; only the width animates. Desktop-only: below
   900px the sidebar is already its own fixed off-canvas panel (see
   RESPONSIVE below), which always shows full content when open, so the
   collapsed look is scoped out of that context entirely rather than
   fighting it with overrides. */

@media (min-width: 901px) {
  .sidebar.is-collapsed {
    width: var(--sidebar-w-collapsed);
  }
  .sidebar.is-collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .sidebar.is-collapsed .brand {
    justify-content: center;
  }
  .sidebar.is-collapsed .brand-text,
  .sidebar.is-collapsed .sidebar-nav-label,
  .sidebar.is-collapsed .nav-item span,
  .sidebar.is-collapsed .sidebar-section,
  .sidebar.is-collapsed .sidebar-auth,
  .sidebar.is-collapsed .sidebar-footnote {
    display: none;
  }
  .sidebar.is-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 10px 6px;
  }
  .sidebar.is-collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
  }
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-nav-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 10px 3px;
}
.sidebar-nav-label:first-child {
  padding-top: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.6px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item span:not(.nav-count) { flex: 1; }
.nav-item:hover {
  background: var(--surface);
  color: var(--text-primary);
}
.nav-item.is-active {
  background: var(--blue-soft-bg);
  color: var(--blue-bright);
  border-color: rgba(76, 141, 255, 0.35);
}
.nav-count {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.nav-item.is-active .nav-count {
  background: rgba(76, 141, 255, 0.2);
  color: var(--blue-bright);
  border-color: rgba(76, 141, 255, 0.4);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
}
.status-dot--green { background: var(--green); box-shadow: 0 0 10px rgba(55,211,153,0.55); }
.status-dot--orange { background: var(--orange); box-shadow: 0 0 10px rgba(255,159,69,0.5); }
.status-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.status-text strong {
  font-size: 12.5px;
  font-weight: 600;
}
.status-text small {
  color: var(--text-muted);
  font-size: 11.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13.2px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.sidebar-action:hover {
  background: var(--surface-hover);
  border-color: var(--blue-dim);
  transform: translateY(-1px);
}
.sidebar-action--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 7px 12px;
}
.sidebar-action--ghost:hover {
  background: var(--surface);
  color: var(--text-secondary);
  transform: none;
}

.sidebar-footnote {
  margin-top: auto;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 11.6px;
  line-height: 1.5;
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.sidebar-footnote svg { flex-shrink: 0; margin-top: 1px; opacity: 0.8; }
.sidebar-footnote strong { color: var(--text-secondary); }

/* =================== MD ATLAS v2.0: AUTH WIDGET =================== */
/* Additive — see js/auth.js. Sits just above .sidebar-footnote. */

.sidebar-auth {
  display: flex;
  flex-direction: column;
}
.sidebar-auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.sidebar-auth-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.sidebar-auth-form input {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sidebar-auth-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.sidebar-auth-submit { width: 100%; padding: 7px 12px; font-size: 12.5px; }
.sidebar-auth-error {
  color: var(--red);
  font-size: 11px;
  line-height: 1.4;
}
/* Session-expiry notice (js/auth.js) reuses .sidebar-auth-error's box but in orange, not red —
   visually distinct from a wrong-password validation error right below it. */
.sidebar-auth-error--notice {
  color: var(--orange);
  background: var(--orange-soft-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}

/* Five-minutes-to-expiry notice (js/session.js) — unobtrusive, bottom-right, never blocks input. */
.session-warning-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--orange);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.session-warning-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.session-warning-detail {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.session-warning-btn { white-space: nowrap; padding: 7px 12px; font-size: 12px; }
@media (max-width: 520px) {
  .session-warning-banner {
    left: 16px;
    right: 16px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }
}
.sidebar-auth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: 11.6px;
}
.sidebar-auth-status--unavailable {
  color: var(--text-muted);
  border-style: dashed;
}
.sidebar-auth-name {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sidebar-auth-role {
  color: var(--text-muted);
  text-transform: capitalize;
  flex-shrink: 0;
}
.sidebar-auth-signout {
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 11px;
}

/* =================== MD ATLAS v2.0: SITE NOTES PANEL =================== */
/* Additive — see js/notes.js. Sibling of #siteDetailBody, so it never
   interferes with renderCard()'s output or its <details> state. */

.site-notes-panel {
  border-top: 1px solid var(--border-soft);
  padding: 20px 26px 26px;
}
.notes-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notes-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notes-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.notes-panel-count {
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.notes-state {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 6px 2px;
}
.notes-state--error { color: var(--red); }
.note-edited, .note-deleted-tag { font-size: 10.5px; color: var(--text-muted); font-style: italic; }
.note-action {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.note-action:hover { color: var(--text-secondary); text-decoration: underline; }
.note-action--danger:hover { color: var(--red); }
.note-action--primary { color: var(--blue-bright); }
.note-action--primary:hover { color: var(--blue-bright); text-decoration: underline; }
.note-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-composer textarea, .note-edit-textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.note-composer textarea:focus, .note-edit-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.note-composer .form-btn { align-self: flex-end; }

/* Notes table (Edit/Delete | Date | Owner | Note detail), replacing the
   earlier card-list layout — see the staging UI/usability review notes. */
.notes-table-wrap { overflow-x: auto; }
.notes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.8px;
}
.notes-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.notes-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  vertical-align: top;
}
.note-col-actions { white-space: nowrap; width: 1%; }
.note-col-date, .note-col-owner { white-space: nowrap; width: 1%; }
.note-col-owner { color: var(--text-primary); font-weight: 600; }
.note-col-detail {
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-row--editing .note-col-detail { padding: 6px 10px; }
/* Flag/unflag control + row highlight + inline tag — same red family as
   the card-level banner (.system-message-banner-row), toned down for a
   table row rather than a standalone alert. */
.note-action--active { color: var(--red); font-weight: 700; }
.note-row--flagged { background: rgba(122, 31, 31, 0.08); }
/* Customer Cleanup table controls — reuse the existing form-field look
   (surface/border/radius) at a compact size appropriate for a dense table. */
#ccTable select, #ccTable input[type="text"], #ccTable textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 6px;
  max-width: 140px;
}
#ccTable textarea { resize: vertical; min-height: 26px; }
.cc-meta-fields { display: flex; flex-direction: column; gap: 4px; }
.cc-org-input { display: block; margin-top: 4px; }
#ccTable .oa-apply-notes { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cc-link-controls { display: flex; align-items: center; gap: 6px; }
.cc-source-value, .cc-proposed-candidate { max-width: 160px; word-break: break-word; }
.cc-qb-validation { max-width: 210px; }
.cc-qb-validation .admin-audit-meta { word-break: break-word; }
.cc-qb-reason { font-style: italic; margin-top: 2px; }
#ccTable .cc-meta-fields { min-width: 230px; max-width: 250px; }
#ccTable .cc-meta-fields input, #ccTable .cc-meta-fields textarea { width: 100%; max-width: 250px; }
.cc-qb-ref { font-size: 11.5px; color: var(--text-secondary); word-break: break-word; }
#ccBulkConfirmRow ul { margin: 6px 0 0 18px; padding: 0; }
#ccBulkApplyBtn:disabled { opacity: 0.4; cursor: not-allowed; }
#ccBulkSummary { font-size: 12.5px; color: var(--text-secondary); }
#ccBulkSummary.cc-bulk-summary--blocked {
  color: var(--orange);
  font-weight: 600;
  display: block;
  padding: 7px 9px;
  margin-top: 4px;
  background: var(--orange-soft-bg);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
}
#ccResult { margin: 8px 0; }
.note-flagged-tag {
  display: inline-block;
  background: var(--red);
  color: #fff5f5;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

/* =================== MD ATLAS v2.0: SITE RECORD PANEL =================== */
/* Additive — see js/site-record.js. Sibling of #siteNotesPanel; same
   layout language (notes-state, form-btn) reused deliberately. */

.site-record-panel {
  /* No border-top/box framing here on purpose — card type and customer are
     meant to read as a continuation of the normal card detail area above
     (renderCard()'s own output), not a visually separate "Site record" box.
     See the staging UI/usability review notes. */
  padding: 6px 26px 0;
}
.site-record-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.record-edit-toggle-row { display: flex; justify-content: flex-end; }
.record-classification-group {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.record-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.record-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.record-field-value { font-size: 13px; color: var(--text-secondary); }
.record-field-value--muted { color: var(--text-muted); font-style: italic; }
.record-field select,
.record-field input[type="text"],
.record-field input[type="password"],
.record-field input[type="url"],
.record-field input[type="date"],
.record-field input[type="number"],
.record-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color-scheme: dark;
}
/* textarea has no shared selector elsewhere in this rule's history, so it
   needs its own resize behavior called out (the other control types don't
   have one) -- without this, a <textarea> nested in a .record-field (e.g.
   the Work & Billing entry form's Description, or the Migrations edit
   form's Blocker/Next action) rendered as a tiny unstyled native white box,
   out of place against this app's dark theme. */
.record-field textarea { resize: vertical; }
/* These inputs/selects are nested inside their own <label> (see js/servers.js's
   fieldHtml()), not a sibling of it -- a <label> with mixed text + a nested control is
   still inline flow by default even though .record-field itself is a column flexbox, so
   without display:block + width:100% the control just sits beside the label text at
   whatever width its own content suggests, landing at a different left offset and width
   per field depending on how long that field's label happens to be. That's what made the
   3-column edit/create grid look inconsistent across groups -- every column's grid cell
   was correctly sized and aligned; only the control *inside* each cell wasn't filling it.
   input[type=url] is included in the shared selector above (not a separate rule) so
   background/border/color/focus/hover/disabled are identical to every other field by
   construction -- there was never a distinct hover/disabled style to replicate, only the
   default (none) the other fields already had, which this input now shares too. */
.record-field select:focus,
.record-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}

/* Clearly grouped radio controls -- Status/Current phase/checklist item state. */
.field-radio-group {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px 10px;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.field-radio-group legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); padding: 0 4px; width: 100%;
}
.field-radio-option {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-secondary); font-weight: 400;
  text-transform: none; letter-spacing: normal; cursor: pointer;
}
.field-radio-option input[type="radio"] { accent-color: var(--blue); margin: 0; cursor: pointer; }
.field-radio-group--compact { padding: 6px 8px 8px; gap: 4px 10px; }
.field-radio-group--compact .field-radio-option { font-size: 12px; }

.record-customer-summary { display: flex; flex-direction: column; gap: 2px; }
.record-customer-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.record-customer-contact { font-size: 12px; color: var(--text-muted); }
.record-customer-edit { position: relative; display: flex; flex-direction: column; gap: 6px; }
.record-customer-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.record-customer-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 8px 10px;
  cursor: pointer;
}
.record-customer-option:hover { background: var(--surface-hover); color: var(--text-primary); }
.record-customer-option--create { color: var(--blue-bright); border-top: 1px solid var(--border-soft); }

/* Searchable combobox (js/searchable-select.js) -- same visual pattern as the
   customer search above (.record-customer-edit/-results/-option), reused for
   target-server and staff/assignee pickers. Results are capped to about 10
   visible rows via max-height + scroll; every match is still rendered and
   reachable, nothing is truncated out of the list itself. */
.searchable-select { position: relative; }
.searchable-select-input {
  width: 100%; box-sizing: border-box; padding: 8px 26px 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;
}
.searchable-select-input::placeholder { color: var(--text-muted); opacity: 1; }
.searchable-select-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15); }
.searchable-select-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
.searchable-select-clear:hover { color: var(--text-primary); }
.searchable-select-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.searchable-select-option {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text-secondary); font-size: 12.5px; padding: 8px 10px; cursor: pointer;
}
.searchable-select-option:hover { background: var(--surface-hover); color: var(--text-primary); }
.searchable-select-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-muted); }

.record-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.record-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.record-chip--tag { background: var(--blue-soft-bg); color: var(--blue-bright); border-color: transparent; }
.record-chip--flag { background: rgba(255, 159, 69, 0.14); color: var(--orange); border-color: transparent; }
.record-chip--flag.record-chip--resolved { background: var(--surface-raised); color: var(--text-muted); }
/* Same orange severity language as .migration-inconsistency-warning (the
   detail-view version of this same warning) -- a compact list-view
   equivalent for a Status/Phase combination that looks contradictory. */
.record-chip--warning { background: rgba(255, 159, 69, 0.14); color: var(--orange); border-color: transparent; }
.record-chip-remove, .record-chip-resolve {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: 0.75;
  padding: 0;
}
.record-chip-remove:hover, .record-chip-resolve:hover { opacity: 1; text-decoration: underline; }
.record-add-form { display: flex; gap: 6px; margin-top: 2px; }
.record-add-form input { flex: 1; }
/* .record-add-form input had no background/color/border of its own —
   it fell back to the browser's default (light) input styling, which
   read as low-contrast/out of place against this app's dark theme.
   #systemMessageInput reuses this class; give every input here explicit
   theme-matching colors. */
.record-add-form input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
}
.record-add-form input::placeholder { color: var(--text-muted); }
.record-add-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}

/* =================== MD ATLAS v2.0: CUSTOMER MAINTENANCE =================== */
/* Main-content page now, not a modal (see js/customers.js) — search box ->
   results -> select a row -> read-only detail with an Edit button. */

.customers-toolbar-section { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
/* [type="text"] scoping matters: the unscoped `input` selector this replaced
   also matched #customersArchivedToggle (the "Show archived" checkbox),
   stretching it to a 200px-wide flex item — a huge invisible clickable box
   with the visible checkmark stranded on its far left, miles from its own
   label text, and crowding the Add Customer button over at the right edge. */
.customers-toolbar-section input[type="text"] {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
}
.customers-archived-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}
.customers-archived-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  min-width: 0;
  margin: 0;
}
.customers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px;
}
.customer-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.customer-list-row:hover { background: var(--surface-hover); }
.customer-list-row.is-selected { background: var(--blue-soft-bg); }
.customer-list-row--archived { opacity: 0.6; }
.customer-row-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.customer-status-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.customer-status-badge--active { background: var(--green-soft-bg); color: var(--green); }
.customer-status-badge--inactive { background: var(--surface-raised); color: var(--text-muted); }

/* ---- Operational Assets (Phase 2.5, Step 7) — badges reuse the
   customer-status-badge base above, adding their own color variants. ---- */
.oa-list-row { flex-wrap: wrap; }
.oa-row-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.oa-capability-badge { text-transform: none; background: var(--surface-raised); color: var(--text-secondary); }
.oa-capability-badge--domain_registration { background: var(--blue-soft-bg); color: var(--blue); }
.oa-capability-badge--dns_zone { background: var(--green-soft-bg); color: var(--green); }
.oa-capability-badge--mail_service { background: var(--orange-soft-bg); color: var(--orange); }
.oa-lifecycle-badge { text-transform: none; }
.oa-lifecycle-badge--active { background: var(--green-soft-bg); color: var(--green); }
.oa-lifecycle-badge--stale_suspected, .oa-lifecycle-badge--stale_confirmed { background: var(--orange-soft-bg); color: var(--orange); }
.oa-lifecycle-badge--obsolete, .oa-lifecycle-badge--inactive { background: var(--surface-raised); color: var(--text-muted); }
.oa-review-badge { text-transform: none; background: var(--red-soft-bg); color: var(--red); }
.oa-review-badge--reviewed { background: var(--surface-raised); color: var(--text-muted); }

/* ---- Migrations (Nomad queue) — badges reuse the customer-status-badge base. ---- */
.migration-status-badge { text-transform: none; }
.migration-status-badge--not_started, .migration-status-badge--not_applicable { background: var(--surface-raised); color: var(--text-muted); }
.migration-status-badge--ready, .migration-status-badge--scheduled { background: var(--blue-soft-bg); color: var(--blue); }
.migration-status-badge--in_progress { background: var(--orange-soft-bg); color: var(--orange); }
.migration-status-badge--verified { background: var(--green-soft-bg); color: var(--green); }
.migration-status-badge--blocked { background: var(--red-soft-bg); color: var(--red); }

/* Compact, clickable status-summary row — one chip per status, every status always shown
   (even zero-count, per spec) so the full status vocabulary stays visible as a filter rail,
   not just whichever ones happen to have records right now. */
.migration-status-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.migration-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.migration-status-chip:hover { background: var(--surface-hover); }
.migration-status-chip .migration-status-chip-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-raised);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.migration-status-chip.is-active {
  border-color: var(--blue);
  background: var(--blue-soft-bg);
  color: var(--blue-bright);
}
.migration-status-chip.is-active .migration-status-chip-count { background: var(--blue); color: #0b1430; }
@media (max-width: 560px) {
  .migration-status-summary { gap: 6px; }
  .migration-status-chip { padding: 5px 9px; font-size: 11.5px; }
}

.migrations-table td.col-site,
.migrations-table td.col-customer,
.migrations-table td.col-blocker,
.migrations-table td.col-next-action { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.migrations-table td.col-indicators { width: 1%; white-space: nowrap; }
.migrations-table .migrations-table-indicators { display: flex; flex-wrap: nowrap; gap: 4px; }
@media (max-width: 720px) {
  .migrations-table td.col-site,
  .migrations-table td.col-customer,
  .migrations-table td.col-blocker,
  .migrations-table td.col-next-action { max-width: 130px; }
}

/* Migration Progress: compact phase chip in the list -- distinguishes "fully
   resolved by completion" (green) from "fully resolved because N/A" (muted),
   never relying on color/tooltip alone (see migration-phase-chip--na's own
   text, built with the "N/A ·" prefix in js/site-migrations.js). */
.migration-phase-chip, .migration-phase-chip--na {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm, 6px);
  font-size: 12px; white-space: nowrap;
}
.migration-phase-chip { background: var(--blue-soft-bg); color: var(--blue); }
.migration-phase-chip--na { background: var(--surface-raised); color: var(--text-muted); }

.migration-inconsistency-warning { color: var(--orange); font-weight: 600; }

/* Migration Progress: one compact column per phase, wrapping/stacking on
   narrower screens instead of forcing horizontal scroll. */
.migration-progress-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.migration-progress-phase {
  flex: 1 1 180px; min-width: 160px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface);
}
.migration-progress-phase.is-current-phase { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
/* A completed phase shows green regardless of whether it resolved via Done or
   Not applicable items -- the count label's own "N/A ·" text (see
   js/site-migration-progress.js) is what keeps "actually done" and
   "deliberately skipped" visually distinguishable, not the color. */
.migration-progress-phase.is-resolved { border-color: var(--green); background: var(--green-soft-bg); }
.migration-progress-phase.is-resolved .migration-progress-phase-count { color: var(--green); font-weight: 600; }
.migration-progress-phase-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.migration-progress-current-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--blue); background: var(--blue-soft-bg); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.migration-progress-phase-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.migration-progress-items { display: flex; flex-direction: column; gap: 10px; }
.migration-checklist-item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.migration-checklist-item-label { margin: 0; color: var(--text-secondary); font-size: 12.5px; }
.migration-checklist-item input[type="text"] {
  width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); padding: 6px 8px; font-size: 12.5px;
  font-family: inherit; outline: none;
}
.migration-checklist-item input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15); }
.migration-checklist-state.field-radio-group { margin-bottom: 0; }
@media (max-width: 720px) {
  .migration-progress-grid { flex-direction: column; }
  .migration-progress-phase { flex-basis: auto; }
}

/* Work & Billing report filters (Reports page). These selects/inputs had no
   background/border/color of their own and fell back to the browser's default
   (light) control styling -- out of place against the rest of this dark-themed
   report. Same dark-control treatment as .server-filters-row select. */
.wb-report-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 10px 0; }
.wb-report-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.wb-report-filters select, .wb-report-filters input {
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color-scheme: dark;
}
#wbCustomDateRange { display: flex; gap: 10px; }

/* Work & Billing report's own stat row has 4 cards (Entries/Unbilled/Missing
   work order/Total billed), not the 3 the generic .report-card .stats-row
   override below assumes -- without this, the 4th card wrapped alone onto
   its own row instead of sharing one row with the other three. Scoped to
   this report's id so the other (3-card) report-card is unaffected. */
#workBillingReportCard .stats-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  #workBillingReportCard .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #workBillingReportCard .stats-row { grid-template-columns: 1fr; }
}

/* Shared Work & Billing table (Websites + Migrations views). */
.work-billing-table td.col-wb-desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-status-badge--unbilled { background: var(--orange-soft-bg); color: var(--orange); }
.wb-status-badge--billed { background: var(--green-soft-bg); color: var(--green); }
.wb-status-badge--nonbillable { background: var(--surface-raised); color: var(--text-muted); }
@media (max-width: 720px) {
  .work-billing-table td.col-wb-desc { max-width: 140px; }
}

/* Work & Billing create/edit form: compact, responsive, and bounded to the
   detail panel -- 2-3 columns on desktop, stacking to 1 on narrow screens.
   Description is its own full-width row; Save/Cancel are normal-sized and
   grouped beneath the grid, never stretched or overflowing the panel. */
.wb-form { max-width: 100%; box-sizing: border-box; margin-top: 10px; }
.wb-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  max-width: 100%;
}
.wb-form-field--full { grid-column: 1 / -1; }
.wb-link-migration { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 400; }
.wb-form-actions { margin-top: 12px; }
@media (max-width: 560px) {
  .wb-form-grid { grid-template-columns: 1fr; }
}

.oa-capabilities-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.oa-capability-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.oa-capability-card h4 { margin: 0 0 6px; font-size: 12.5px; }
.oa-actions-block {
  border-top: 1px solid var(--border-soft);
  margin-top: 14px;
  padding-top: 14px;
}

/* Servers page (js/servers.js) -- reuses .customer-list-row/.customer-detail-card/.record-field
   throughout; these are the few things specific to it. */
.server-linked-sites { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.server-linked-sites a { color: var(--blue-bright); text-decoration: none; }
.server-linked-sites a:hover { text-decoration: underline; }
.server-transition-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.server-transition-card p { margin: 6px 0; }
.server-transition-card select { margin-top: 4px; }
.server-transition-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.server-transition-card .form-btn,
.server-transition-card .form-btn--ghost { padding: 6px 12px; font-size: 12.5px; }
.server-transition-card--readonly { opacity: 0.92; }
.server-transition-historical-tag { color: var(--text-muted); font-size: 11.5px; font-style: italic; }
[data-linked-server] a { color: var(--blue-bright); text-decoration: none; }
[data-linked-server] a:hover { text-decoration: underline; }
.oa-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Hostname/FQDN and admin-URL links -- rendered only when the value is a safe, well-formed
   hostname/URL (see js/servers.js's hostnameLinkHtml/urlLinkHtml); same visual treatment as
   the other inter-record links on this page (.server-linked-sites a). */
.server-hostname-link { color: var(--blue-bright); text-decoration: none; word-break: break-all; }
.server-hostname-link:hover { text-decoration: underline; }
.customer-detail-head h2 .server-hostname-link { font-size: inherit; font-weight: inherit; }

/* Compact recent-activity summary on the card itself -- replaces a cramped inline table;
   "View full history" (see .server-history-modal below) is the deliberate next step for
   the complete, wide, row-and-column history. */
.server-history-compact { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.server-history-compact-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.server-history-compact-when { color: var(--text-muted); white-space: nowrap; }
.server-history-compact-who { font-weight: 600; }
.server-history-compact-what { color: var(--text-secondary); }

/* Full-history modal -- a wide pop-out of the field-change audit table, one level deep
   from the (non-modal) detail panel. Wide and tall on desktop so a reason/evidence column
   has room to wrap naturally instead of forcing horizontal scroll; the header and column
   headings stay put while only the table body scrolls (overflow:hidden here overrides
   .modal's own overflow-y:auto, so there's exactly one scroll container, not two).
   Selector is .modal.server-history-modal (not just .server-history-modal) -- .modal's own
   max-width:440px is declared later in this file at the same one-class specificity, so by
   source order alone it would win and silently shrink this modal back down. Same fix as the
   .customer-audit-table-wrap/.site-table td issue noted elsewhere in this file: bump
   specificity so this wins regardless of where either rule sits in the cascade. */
.modal.server-history-modal {
  max-width: min(1400px, calc(100vw - 48px));
  width: 100%;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.server-history-modal-body {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0; /* lets the flex child actually shrink and scroll instead of overflowing the modal */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.server-history-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto; /* only engages if a narrow viewport's min-width table (below) doesn't fit */
  padding: 0 18px 18px;
}
.server-history-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12.8px;
}
.server-history-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.server-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere; /* wraps a long word/value at a real break when one exists, and
                               only breaks mid-word as a last resort -- never forces single
                               characters to stack one per line the way a too-narrow fixed
                               max-width combined with break-word did before. */
}
.server-history-table tr:hover td { background: var(--surface-hover); }
.server-history-col-when { width: 13%; }
.server-history-col-actor { width: 10%; }
.server-history-col-what { width: 15%; }
.server-history-col-change { width: 20%; }
.server-history-col-reason { width: 26%; }
.server-history-col-evidence { width: 16%; }

/* Smaller screens: near-full-screen instead of a centered card (more room matters more
   than centering at this size), and only here does the table fall back to a min-width
   that can need horizontal scroll -- deliberate, not the default behavior. */
@media (max-width: 860px) {
  .modal-scrim:has(.server-history-modal) { padding: 10px; }
  .modal.server-history-modal { height: 92vh; max-height: 92vh; max-width: 100%; }
  .server-history-table { table-layout: auto; min-width: 640px; }
}
@media (max-width: 560px) {
  .modal-scrim:has(.server-history-modal) { padding: 4px; }
  .modal.server-history-modal { height: 96vh; max-height: 96vh; border-radius: var(--radius-md); }
  .server-history-table { min-width: 560px; font-size: 12px; }
  .server-history-table th, .server-history-table td { padding: 8px 10px; }
}

/* Server list: search bar + lifecycle filter row beneath it, Clear search (inside the
   bar, same component as the directory's) and Clear filters (resets both at once). */
.server-filters-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.server-filters-row .searchable-select { min-width: 180px; flex: 0 1 220px; }
.server-filters-row select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}

/* Fixed-column list: one grid-template shared by the header labels and every row, so
   names and values line up instead of reflowing per row (the previous flex-wrap layout
   let a long name push everything else around). min-content on the name column still
   lets short lists breathe; the 1fr tail just gives the name room to show in full. */
.server-list-header,
.server-list .oa-list-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px minmax(140px, 180px) 110px;
  align-items: center;
  gap: 10px;
}
.server-list-header {
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.server-list .oa-row-badges { justify-self: start; }
.server-list .customer-row-name { overflow-wrap: anywhere; }

/* Add a server moves below the listing (a secondary action, not the first thing seen),
   with its own form/status directly beneath the button that opens it. */
.servers-list-footer { margin: 4px 0 20px; }
.servers-list-footer #serverCreateForm { margin-top: 12px; }

/* Server detail: a wide, multi-column card (like the site detail view), not the narrow
   640px single-column one the generic .customer-detail-panel was built for. */
.customer-detail-panel.server-detail-panel { max-width: 920px; }
.server-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
  margin: 14px 0;
}
.server-field-grid .record-field { gap: 3px; }
/* A long unbroken value (e.g. a long Next action/Blocker sentence) could
   overflow its 1fr column instead of wrapping, visually clipping against
   the card edge -- same fix as .server-history-table td's overflow-wrap
   elsewhere in this file. */
.server-field-grid .record-field-value { overflow-wrap: anywhere; }

/* Migrations detail view reuses .server-detail-panel's 920px width (shared
   with Servers), which is narrower than it needs to be now that it also
   hosts the Migration Progress grid and the Work & Billing table -- Billed
   date/Edit controls and long Next action/Blocker text had too little room
   and either clipped or forced scrolling sooner than necessary. Scoped to
   this panel's own id (not the shared .server-detail-panel class) so the
   Servers detail view this class was built for is untouched. */
#migrationDetailPanel { max-width: none; width: 100%; }
.server-field-section + .server-field-section { margin-top: 18px; }
.server-field-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
/* Populated vs not-recorded needs to read at a glance across a 3-column grid of 18
   fields -- italic+muted (already used for "not recorded" elsewhere) isn't enough
   contrast on its own at this density, so an explicit "(not recorded)" label marks it
   too (real text in the markup, not CSS content -- see js/servers.js fieldValueHtml). */
.record-field-value--empty { font-size: 11px; }

/* The reason/evidence inputs are the one part of every edit that's actually required
   and audited -- visually separated from the plain field grid above so they can't be
   missed or treated as just one more optional textarea. */
.server-edit-reason-section {
  border: 1px solid var(--blue);
  background: var(--blue-soft-bg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 16px 0;
}
.server-edit-reason-section > p {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.server-edit-reason-section .record-field + .record-field { margin-top: 10px; }
.server-edit-reason-section label { color: var(--text-secondary); }
.server-edit-reason-section textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.server-detail-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.customer-detail-card [data-back-to-list] { margin-bottom: 12px; }

@media (max-width: 860px) {
  .server-list-header,
  .server-list .oa-list-row { grid-template-columns: 1fr; gap: 2px; }
  .server-list-header { display: none; }
  .server-field-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .server-field-grid { grid-template-columns: 1fr; }
}

/* ---- Operational Assets import preview (Phase 2.5, Step 8, Admin page) ---- */
.oa-preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
  margin: 4px 0 14px;
}
.oa-preview-error {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  margin: 6px 0 0;
}
.oa-category-table-wrap { margin: 4px 0 16px; }
/* Row headers (<th scope="row"> for each category label) need to read as
   normal body text, not the uppercase/sticky column-header style that
   .site-table th applies generically — scope=row is kept for screen
   readers (each row announces as "<category>, <count>"), just restyled. */
.oa-category-table tbody th {
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.8px;
  font-weight: 500;
  color: var(--text-secondary);
  position: static;
  background: transparent;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.oa-category-table td { text-align: right; font-variant-numeric: tabular-nums; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }
.oa-category-table-total th, .oa-category-table-total td { border-top: 1px solid var(--border-soft); border-bottom: none; font-weight: 700; color: var(--text-primary); }

/* Two classes (not one) so this reliably beats .admin-audit-list's own
   max-height on specificity, regardless of source order — see the
   customer-audit-table-wrap fix elsewhere in this file for the same
   same-specificity cascade-tie lesson. */
.admin-audit-list.oa-review-queue-list { max-height: 420px; }
.oa-review-queue-row { min-width: 0; }
.oa-review-queue-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.oa-review-queue-category-badge { text-transform: none; white-space: normal; text-align: right; background: var(--surface-raised); color: var(--text-secondary); }
.oa-review-queue-row .admin-audit-detail { white-space: normal; word-break: break-word; }

/* ---- Operational Assets — apply approved import (Phase 2.5, Step 9) ---- */
.oa-apply-warning {
  background: var(--orange-soft-bg);
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.oa-apply-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.oa-apply-counts { font-size: 12.5px; color: var(--text-secondary); }
.oa-apply-list-wrap { max-height: 480px; overflow-y: auto; }
.oa-apply-table td { vertical-align: top; white-space: normal; }
.oa-apply-row--review { background: var(--orange-soft-bg); }
.oa-apply-notes { max-width: 340px; font-size: 12px; color: var(--text-secondary); }
.oa-apply-notes summary { cursor: pointer; }
.oa-apply-row-detail { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); word-break: break-word; }
.oa-apply-confirm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.oa-apply-confirm-row input[type="text"] {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  min-width: 260px;
}

.customer-detail-panel { max-width: 640px; }
.customer-detail-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.customer-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.customer-detail-head h2 { font-size: 17px; margin: 0; }
.customer-detail-contact { color: var(--text-secondary); font-size: 13px; margin: 0 0 10px; }
.customer-detail-notes { color: var(--text-secondary); font-size: 13px; white-space: pre-wrap; background: var(--surface-raised); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 10px; }
.customer-row-actions { display: flex; gap: 8px; margin: 10px 0; }
.customer-audit-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.customer-audit-table-wrap { max-height: 300px; margin-top: 4px; }
/* Extra `table` in the selector (not just the .customer-audit-table-wrap
   class) is deliberate: .site-table td's own white-space:nowrap rule has
   identical specificity (one class + one element) and is declared later
   in this file, so it was winning the cascade and this override was
   silently doing nothing — long values just overflowed instead of
   wrapping. The extra element bumps specificity so this wins regardless
   of source order. */
.customer-audit-table-wrap table td { white-space: normal; word-break: break-word; max-width: 160px; }
.customer-audit-section h3 { font-size: 13px; margin: 0 0 8px; color: var(--text-primary); }

.customer-edit-fields { display: flex; flex-direction: column; gap: 8px; }
.customer-edit-fields input, .customer-edit-fields select, .customer-edit-fields textarea {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.customer-edit-fields textarea { resize: vertical; }

/* Add-customer dialog (the one remaining modal on this page) */
#customerAddModalScrim .modal { position: relative; }
.customers-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer;
}
.customers-modal-close:hover { color: var(--text-primary); }

/* =================== MD ATLAS v2.0: ADMIN PAGE =================== */
/* Main-content page now, not a modal (see js/admin.js). #importBtn/
   #importFile/#resetSampleBtn live inside .admin-inline-actions, moved
   here from the sidebar. */

.admin-page-section {
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.admin-page-section h2 { font-size: 15.5px; margin: 0 0 6px; }
.admin-page-section--full { max-width: none; }
.admin-audit-table-wrap { max-height: 420px; margin-top: 12px; }
/* Same specificity-tie issue as .customer-audit-table-wrap above — the
   extra `table` element in the selector is required for this to actually
   beat .site-table td's white-space:nowrap. */
.admin-audit-table-wrap table td { white-space: normal; word-break: break-word; }
.admin-audit-table-wrap table td:last-child { white-space: nowrap; }
.admin-page-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.admin-page-section-head h2 { margin: 0; }
.admin-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.admin-inline-actions--danger { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.admin-modal-hint--small { font-size: 11.5px; margin: 8px 0 0; }
.admin-audit-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.admin-audit-row {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface-raised);
  position: relative;
}
.admin-audit-action { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.admin-audit-detail { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.admin-audit-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.admin-system-message-row { padding-right: 80px; }
.admin-system-message-row .note-action { position: absolute; top: 8px; right: 10px; }
.admin-modal-title { font-size: 16px; margin: 0 0 6px; }
.admin-modal-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; }
.admin-user-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.admin-user-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface-raised);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.admin-user-row:hover { background: var(--surface-hover); }
.admin-user-row.is-selected { background: var(--blue-soft-bg); border-color: rgba(76, 141, 255, 0.4); }
.admin-user-info { flex: 1; min-width: 140px; }
.admin-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.admin-user-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.admin-role-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.admin-user-edit-panel { max-width: 480px; }
.admin-user-password-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.admin-user-password-section h3 { font-size: 12.5px; margin: 0 0 8px; color: var(--text-primary); }
.admin-reset-form { display: flex; gap: 6px; }
.admin-reset-form input { flex: 1; min-width: 140px; }
.admin-reset-status { font-size: 11.5px; width: 100%; margin-top: 4px; }
.admin-reset-status--ok { color: var(--green); }
.admin-reset-status--error { color: var(--red); }
.admin-add-user-fields { max-width: 360px; margin: 12px 0; }

.snapshot-status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.snapshot-status-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.snapshot-status-card--error { border-color: rgba(255, 107, 107, 0.4); background: var(--red-soft-bg); }
.snapshot-status-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.snapshot-status-value { font-size: 13px; color: var(--text-primary); }
.snapshot-status-value--muted { color: var(--text-muted); font-style: italic; }
.snapshot-list-heading { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; }

/* =================== MD ATLAS v2.0: SYSTEM MESSAGE BANNER =================== */
/* Sits above every page's content (see index.html — outside any one
   #...View), admin-managed, never expires, never dismissable by a viewer. */

#systemMessageBanner:empty { display: none; }
#systemMessageBanner { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
/* Solid, saturated red rather than the badge-style soft-tint red used
   elsewhere (--red-soft-bg) — this needs to read as prominent/urgent at a
   glance, with white text for strong contrast, per the staging UI/
   usability review notes. */
.system-message-banner-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #7a1f1f;
  border: 1px solid var(--red);
  color: #fff5f5;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.system-message-banner-row svg { color: #fff5f5; flex-shrink: 0; margin-top: 1px; }
/* Same red banner treatment, reused for a flagged note surfaced at the
   top of its site card — see renderCard() in app.js. Only ever shows the
   note text; author/date/controls/full history stay in the detail panel. */
.site-card-flag-banner { margin-bottom: 10px; }

/* =================== MAIN =================== */

.main {
  padding: 26px 32px 40px;
  max-width: 1280px;
  width: 100%;
  /* Without this, a CSS grid track's default "auto" minimum keeps it from
     shrinking below its content's min-content size — so a wide table deep
     inside .main (e.g. the Reports table, with long nowrap cell text) could
     stretch the whole grid column past the viewport instead of scrolling
     inside its own .table-wrap. min-width: 0 lets the track shrink to the
     available space so overflow:auto containers further down actually get
     to do their job. */
  min-width: 0;
}

.main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.main-header h1 {
  font-size: 26px;
}
.main-header-text p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 60ch;
}
.view-mobile-only { display: none; }

/* Search */

.search-section {
  margin-bottom: 18px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.search-icon { color: var(--text-muted); flex-shrink: 0; }
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-kbd {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 5px;
}
.search-clear {
  border: none;
  background: var(--surface-raised);
  color: var(--text-secondary);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.search-clear:hover { background: var(--red-soft-bg); color: var(--red); }

.recent-searches {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.recent-searches-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.recent-searches-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.recent-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  font-size: 12.2px;
  cursor: pointer;
  transition: all var(--transition);
}
.recent-search-chip:hover {
  border-color: var(--blue-dim);
  color: var(--text-primary);
}
.recent-search-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--text-muted);
}
.recent-search-chip-remove:hover { background: var(--red-soft-bg); color: var(--red); }
.recent-searches-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 2px;
}
.recent-searches-clear:hover { color: var(--red); }

.search-hl {
  background: rgba(255, 200, 87, 0.32);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 700;
}

.quick-chips {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.6px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.chip:hover {
  border-color: var(--blue-dim);
  color: var(--text-primary);
}
.chip.is-active {
  background: var(--blue-soft-bg);
  border-color: rgba(76, 141, 255, 0.5);
  color: var(--blue-bright);
}

/* Stats */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
/* Directory stat row only has 2 cards now (Migrated/Needs review were
   removed — see index.html) — sized to content instead of stretching
   across the same 4-column grid the Reports stat row still uses. */
.stats-row--directory { grid-template-columns: repeat(2, minmax(140px, 220px)); }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--blue-dim);
  transition: transform var(--transition), border-color var(--transition);
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card--green { border-left-color: var(--green); }
.stat-card--orange { border-left-color: var(--orange); }
.stat-card--red { border-left-color: var(--red); }
.stat-value {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
}
.stat-label {
  color: var(--text-muted);
  font-size: 12px;
}

/* Toolbar / filters */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.filter-group { position: relative; }

.filter-select {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.8px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-select:hover { border-color: var(--blue-dim); color: var(--text-primary); }
.filter-group.is-open .filter-select {
  border-color: var(--blue);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.filter-select svg { color: var(--text-muted); transition: transform var(--transition); }
.filter-group.is-open .filter-select svg { transform: rotate(180deg); }
.filter-group.has-value .filter-select {
  border-color: rgba(76, 141, 255, 0.5);
  color: var(--blue-bright);
  background: var(--blue-soft-bg);
}

.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-width: 300px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: 40;
  overflow: hidden;
  animation: pop-in 120ms ease;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.filter-panel-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}
.filter-panel-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}
.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 9px;
  border-radius: 7px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.filter-option:hover { background: var(--surface-hover); color: var(--text-primary); }
.filter-option.is-selected {
  background: var(--blue-soft-bg);
  color: var(--blue-bright);
  font-weight: 600;
}
.filter-option-count {
  color: var(--text-muted);
  font-size: 11.5px;
}
.filter-panel-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}

.clear-filters-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12.6px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.clear-filters-btn:hover { color: var(--red); background: var(--red-soft-bg); }

.toolbar-spacer { flex: 1; }

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.view-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.is-active {
  background: var(--blue-soft-bg);
  color: var(--blue-bright);
}

/* Results meta */

.results-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 12px;
  /* Fixed to one line's height regardless of whether #resultsContext has
     text (e.g. "· showing recently opened" on Recent, nothing on All) —
     keeps the row above the grid the same height on every nav view. */
  min-height: 1.4em;
}
#resultsCount { color: var(--text-secondary); font-weight: 600; }
/* The Tools page's results-meta row also carries the Add Tool button
   (moved here to sit beside the category display, right above it) —
   baseline alignment looks fine for text-only rows but misaligns a
   button against them. */
#toolsResultsCount { color: var(--text-secondary); font-weight: 600; }
.results-meta:has(.add-tool-btn) { align-items: center; }

/* =================== CARDS =================== */

/* Spotlight-style ranked results: a single hero "Top result" above the
   grid, then the rest grouped under full-width section labels inside the
   same grid (so cards still wrap normally; the label just spans all
   columns as a divider). */

.top-result-wrap {
  margin-bottom: 18px;
}
.top-result-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-bright);
  margin-bottom: 8px;
}
#topResultCard .site-card {
  border-color: rgba(76, 141, 255, 0.45);
  background: linear-gradient(180deg, var(--blue-soft-bg), var(--surface) 60%);
  box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.2), var(--shadow-pop);
  padding: 20px;
}
#topResultCard .site-card:hover { transform: none; }
#topResultCard .site-card-title h3 { font-size: 17px; }
#topResultCard .is-kbd-selected,
#topResultCard .site-card { outline: none; }

.results-section-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin: 28px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.results-section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.results-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-dim);
  flex: none;
}
.results-section-label span { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: normal; }

.site-card.is-kbd-selected {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
  border-color: transparent;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  /* Table view already scrolls its own overflow (.table-wrap) instead of
     relying on the page — see the min-width:0 note on .main. Grid view
     never had that same safety net, so on any browser/content combination
     where this computes wider than available (e.g. minmax(300px,...)'s
     rounding at certain widths), html/body's overflow-x:hidden (needed for
     the mobile sidebar) just silently clipped the right edge instead of
     scrolling. This gives grid view the same contained-overflow behavior
     table view already had. */
  overflow-x: auto;
}

.site-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  animation: card-in 220ms ease both;
}
.site-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-dim);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.site-card-title {
  min-width: 0;
}
.site-card-title h3 {
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-card-domain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue-bright);
  font-size: 12.6px;
  text-decoration: none;
  margin-top: 3px;
  max-width: 100%;
}
.site-card-domain span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card-domain:hover { text-decoration: underline; }
.site-card-domain svg { flex-shrink: 0; opacity: 0.7; }

.fav-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.fav-btn:hover { border-color: var(--orange); color: var(--orange); }
.fav-btn svg { transition: all var(--transition); }
.fav-btn.is-fav {
  color: #ffc857;
  border-color: rgba(255, 200, 87, 0.4);
  background: rgba(255, 200, 87, 0.1);
}
.fav-btn.is-fav svg path { fill: currentColor; }

.badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.badge-platform {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-color: var(--border);
}
/* Escalating domain-expiration tiers (90 / 60 / 30 days, expired) — same
   red/orange palette as everywhere else, escalating via color + weight
   since the design system doesn't define extra warning colors. */
.badge-expiry { cursor: help; }
.badge-expiry--notice { background: var(--orange-soft-bg); color: var(--orange); }
.badge-expiry--warn { background: var(--orange-soft-bg); color: var(--orange); font-weight: 700; }
.badge-expiry--urgent { background: var(--red-soft-bg); color: var(--red); }
.badge-expiry--expired { background: var(--red-soft-bg); color: var(--red); font-weight: 700; }

.site-card-matchnote {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--blue-bright);
  background: var(--blue-soft-bg);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  cursor: help;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card-matchnote svg { flex-shrink: 0; }

.table-match-note {
  color: var(--blue-bright);
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
}

.site-card-more { margin-top: -2px; }
.site-card-more summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.site-card-more summary::-webkit-details-marker { display: none; }
.site-card-more summary::before {
  content: "▸";
  font-size: 9px;
  transition: transform var(--transition);
}
.site-card-more[open] summary::before { transform: rotate(90deg); }
.site-card-more summary:hover { color: var(--text-secondary); }
.more-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.more-row { display: flex; gap: 10px; font-size: 12px; }
.more-label {
  flex: 0 0 110px;
  color: var(--text-muted);
  font-weight: 600;
}
.more-value { color: var(--text-secondary); word-break: break-word; }

.site-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12.3px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.meta-item label {
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meta-item span {
  color: var(--text-secondary);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-item.meta-item--wide { grid-column: 1 / -1; font-family: inherit; }
.meta-item.meta-item--wide span { font-family: inherit; }

.copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copy-btn {
  flex: 1 1 auto;
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 11.6px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.copy-btn:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--blue-dim); }
.copy-btn:active { transform: scale(0.96); }
.copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.diag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diag-trigger {
  flex: 1 1 auto;
  min-width: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 11.6px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.diag-trigger:hover { background: var(--blue-soft-bg); border-color: rgba(76, 141, 255, 0.5); color: var(--blue-bright); }
.diag-trigger.is-disabled {
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.55;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.op-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.8px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}
.op-link:hover {
  background: var(--blue-soft-bg);
  border-color: rgba(76, 141, 255, 0.5);
  color: var(--blue-bright);
  transform: translateY(-1px);
}
.op-link svg { opacity: 0.75; flex-shrink: 0; }
.op-link.is-disabled {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.op-link.op-link--vault {
  border-color: rgba(76, 141, 255, 0.25);
}

/* Recovery / Hosting card entry point — see app.js's renderCard() and onResultsClick(),
   js/site-record.js and js/site-recovery.js. Its own row (not folded into .link-row) so it
   reads as a distinct, always-present action rather than one more operational link. */
.recovery-row {
  display: flex;
  padding: 8px 0 2px;
}
.op-link--recovery {
  border-color: rgba(76, 141, 255, 0.3);
  font-weight: 600;
}
.op-link--recovery:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Recovery/hosting panel states (js/site-recovery.js) — loading/empty/error, matching the
   rest of the app's muted/red convention (see .notes-state / .notes-state--error). */
.record-recovery-empty {
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px dashed var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.record-recovery-error { color: var(--red); font-size: 12.5px; }
.record-recovery-reason { color: var(--text-secondary); }
[data-recovery-section] > summary:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* =================== TABLE VIEW =================== */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: auto;
}
.site-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.8px;
}
.site-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.site-table th:has(.sortable-th) { padding: 0; }
.sortable-th {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 12px 14px;
  cursor: pointer;
}
.sortable-th:hover { color: var(--text-primary); }
.sortable-th::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4.5px solid currentColor;
  opacity: 0.35;
}
.sortable-th.is-sorted { color: var(--blue-bright); }
.sortable-th.is-sorted::after { opacity: 1; }
.sortable-th.is-sorted-desc::after {
  border-bottom: none;
  border-top: 4.5px solid currentColor;
}
.site-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  white-space: nowrap;
  vertical-align: middle;
}
.site-table tbody tr { cursor: pointer; }
.site-table tr:hover td { background: var(--surface-hover); }
.site-table tr.is-kbd-selected td { background: var(--blue-soft-bg); }
.site-table tr.is-kbd-selected td:first-child { box-shadow: inset 2px 0 0 var(--blue); }
.site-table td.col-name { color: var(--text-primary); font-weight: 600; }
/* Site/Domain/Customer previously all rendered on one unbroken nowrap line
   (like every other cell) with no width cap, so a handful of long values
   was enough to stretch the table wider than its container and push Server
   off the visible edge — even a customer-column-only cap (an earlier,
   insufficient version of this fix) still left Site and Domain free to do
   the same thing. Server is left uncapped since it's the last column and
   hostnames are typically short. Full values stay available via the title
   attribute set in renderTableRow(). */
.site-table td.col-name,
.site-table td.col-domain,
.site-table td.col-customer {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .site-table td.col-name,
  .site-table td.col-domain,
  .site-table td.col-customer { max-width: 110px; }
}
.table-fav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
}
.table-fav-btn.is-fav { color: #ffc857; }
.table-domain-link { color: var(--blue-bright); text-decoration: none; }
.table-domain-link:hover { text-decoration: underline; }

/* =================== EMPTY STATE =================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-state svg { color: var(--text-muted); opacity: 0.6; margin-bottom: 14px; }
.empty-state h3 {
  color: var(--text-primary);
  font-size: 17px;
  margin-bottom: 6px;
}
.empty-state p {
  max-width: 40ch;
  font-size: 13px;
  margin: 0 0 16px;
}
.empty-state-btn {
  background: var(--blue-soft-bg);
  border: 1px solid rgba(76, 141, 255, 0.4);
  color: var(--blue-bright);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.empty-state-btn:hover { background: rgba(76, 141, 255, 0.22); }

/* =================== TOOLS PAGE =================== */

.stats-row--tools {
  grid-template-columns: auto auto 1fr auto;
  align-items: stretch;
}
.stats-row--tools .stat-card {
  min-width: 140px;
}

.tools-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.add-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-soft-bg);
  border: 1px solid rgba(76, 141, 255, 0.4);
  color: var(--blue-bright);
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  align-self: stretch;
}
.add-tool-btn:hover {
  background: rgba(76, 141, 255, 0.22);
  transform: translateY(-1px);
}

.tool-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.tool-ghost-btn:hover {
  border-color: var(--blue-dim);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.tool-category {
  margin-bottom: 26px;
}
.tool-category-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.tool-category-head h2 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.tool-category-count {
  color: var(--text-muted);
  font-size: 12px;
}

/* Reverted to the same width as site cards (.card-grid's 300px minimum)
   — a narrower 150px minimum was tried and truncated tool names/
   descriptions, so this is back to matching site cards exactly. Still
   keeps its own overflow-x:auto as a safety net, same reasoning as
   .card-grid: a contained scrollbar instead of the page silently
   clipping the right edge if this ever computes wider than available. */
.tools-grid {
  overflow-x: auto;
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 15px;
  display: flex;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition);
  animation: card-in 220ms ease both;
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.tool-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-dim);
}

.tool-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.tool-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tool-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tool-card-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card.is-fav {
  border-color: rgba(255, 200, 87, 0.4);
}
.tool-fav-btn {
  color: var(--text-muted);
}
.tool-fav-btn:hover {
  border-color: rgba(255, 200, 87, 0.5);
  color: #ffc857;
}
.tool-fav-btn.is-fav {
  color: #ffc857;
}
.tool-fav-btn.is-fav svg path {
  fill: currentColor;
}

.tool-category--recent .tool-category-head {
  color: var(--blue-bright);
}
.tool-category--recent .tool-category-head svg {
  color: var(--blue-bright);
}
.tool-card-desc {
  color: var(--text-secondary);
  font-size: 12.4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tool-card-url {
  color: var(--text-muted);
  font-size: 11.6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  /* Its own row below the name/description/url (not squeezed beside the
     name) specifically so it has room for 3 full-size icon buttons even
     at this card's ~half-width. Sits on top of the whole-card click
     target (see onToolsResultsClick) — its own buttons stop the click
     from reaching the card underneath. */
  position: relative;
  z-index: 1;
}
.tool-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.tool-icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border); }
.tool-icon-btn.tool-icon-btn--danger:hover { color: var(--red); background: var(--red-soft-bg); }

.tool-badge-role {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--orange);
  border: 1px solid rgba(255, 159, 69, 0.35);
  background: rgba(255, 159, 69, 0.1);
  border-radius: 999px;
  padding: 1px 7px;
}

/* =================== REPORTS PAGE =================== */

.report-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.report-select-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  font-family: inherit;
}
.report-select-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-dim);
}
.report-select-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue-soft-bg);
  color: var(--blue-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-select-text h2 { font-size: 15.5px; margin: 0 0 4px; }
.report-select-text p { color: var(--text-muted); font-size: 12.6px; margin: 0; max-width: 42ch; }

.report-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.report-back-btn:hover { background: var(--blue-soft-bg); border-color: rgba(76, 141, 255, 0.5); color: var(--blue-bright); }

.report-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
}
.report-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.report-card-head h2 {
  font-size: 17px;
  margin: 0 0 4px;
}
.report-card-sub {
  color: var(--text-muted);
  font-size: 12.8px;
  max-width: 62ch;
  margin: 0;
}
.report-window-chips { margin: 16px 0 18px; }
.report-card .stats-row { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.report-card .results-meta { margin-bottom: 10px; }
.report-card .table-wrap { max-height: 560px; }

.days-left-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.days-left-badge--overdue { background: var(--red-soft-bg); color: var(--red); font-weight: 700; }
.days-left-badge--urgent { background: var(--red-soft-bg); color: var(--red); }
.days-left-badge--warn { background: var(--orange-soft-bg); color: var(--orange); font-weight: 700; }
.days-left-badge--notice { background: var(--orange-soft-bg); color: var(--orange); }
.days-left-badge--ok { background: var(--surface-raised); color: var(--text-secondary); }
.days-left-badge--unknown { background: var(--surface-raised); color: var(--text-muted); border: 1px dashed var(--border); }

.renew-flag { color: var(--text-secondary); }
.renew-flag--warn { color: var(--orange); font-weight: 600; }

/* =================== MODAL =================== */

body.modal-open { overflow: hidden; }

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 20, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  animation: pop-in 140ms ease;
}
.modal {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-pop);
  max-height: 90vh;
  overflow-y: auto;
}

/* Site detail — a larger, centered "pop-out" of a clicked site card */

.site-detail-modal {
  max-width: 620px;
  position: relative;
  animation: detail-pop-in 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes detail-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.site-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}
.site-detail-body {
  padding: 26px 26px 24px;
}
.site-detail-body .site-card {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  gap: 16px;
  cursor: default;
  animation: none;
}
.site-detail-body .site-card:hover {
  transform: none;
  border-color: transparent;
}
.site-detail-body .site-card.is-kbd-selected {
  outline: none;
  border-color: transparent;
}
.site-detail-body .site-card-top { padding-right: 34px; }
.site-detail-body .site-card-title h3 {
  font-size: 21px;
  white-space: normal;
  overflow: visible;
}
.site-detail-body .site-card-domain { font-size: 13.5px; }
.site-detail-body .badge-row .badge { font-size: 12px; padding: 4px 11px; }
.site-detail-body .site-card-meta { font-size: 13.5px; gap: 12px 16px; }
.site-detail-body .meta-item span { font-size: 13.2px; white-space: normal; overflow-wrap: anywhere; }
.site-detail-body .more-grid { padding: 14px 16px; }
.site-detail-body .op-link { font-size: 12.8px; padding: 8px 10px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-header h2 {
  font-size: 16px;
}
#toolForm {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-optional {
  color: var(--text-muted);
  font-weight: 400;
}
.form-field input,
.form-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.form-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 107, 107, 0.5);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.form-btn {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.form-btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.form-btn--ghost:hover { background: var(--surface); color: var(--text-primary); }
.form-btn--primary {
  background: var(--blue);
  color: #fff;
}
.form-btn--primary:hover { background: var(--blue-bright); }

/* =================== DIAGNOSTICS MODAL =================== */

.diag-modal { max-width: 480px; }
.diag-modal-header { align-items: flex-start; }
.diag-modal-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
}
.diag-tab-list {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.diag-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.diag-tab:hover { color: var(--text-secondary); }
.diag-tab.is-active { color: var(--blue-bright); border-bottom-color: var(--blue); }
.diag-modal-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }

.diag-note {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.5;
}
.diag-state {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 2px;
}
.diag-state--loading { color: var(--text-muted); }
.diag-state--error { color: var(--red); }

.diag-kv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  max-height: 260px;
  overflow-y: auto;
}
.diag-kv-row { display: flex; gap: 10px; font-size: 12.3px; }
.diag-kv-key {
  flex: 0 0 90px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.8px;
  letter-spacing: 0.03em;
  padding-top: 1px;
}
.diag-kv-value {
  color: var(--text-secondary);
  font-family: "SFMono-Regular", Consolas, monospace;
  word-break: break-word;
}
.diag-kv-value--error { color: var(--red); font-family: inherit; }
.diag-kv-value--empty { color: var(--text-muted); font-family: inherit; }
.diag-ping-status--ok { color: var(--green); }
.diag-ping-status--down { color: var(--red); }

.diag-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* toast with an inline action (e.g. Undo) */
.toast-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--blue-bright);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.toast-action:hover { background: var(--blue-soft-bg); }

/* =================== FOOTER =================== */

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12px;
  flex-wrap: wrap;
}
.app-footer-version {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--text-muted);
}

/* =================== TOASTS =================== */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  min-width: 240px;
  max-width: 340px;
  animation: toast-in 200ms ease;
}
.toast.is-leaving { animation: toast-out 180ms ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
.toast-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast--success .toast-icon { background: var(--green-soft-bg); color: var(--green); }
.toast--error .toast-icon { background: var(--red-soft-bg); color: var(--red); }
.toast--info .toast-icon { background: var(--blue-soft-bg); color: var(--blue-bright); }

/* =================== RESPONSIVE =================== */

@media (max-width: 1080px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    z-index: 100;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-toggle { display: none; }
  .view-mobile-only { display: inline-flex; }
  .main { padding: 18px 16px 32px; }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.6);
    z-index: 90;
  }
}

@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row--tools { grid-template-columns: 1fr 1fr; }
  .stats-row--tools .toolbar-spacer { display: none; }
  .stats-row--tools .tools-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .stats-row--tools .tool-ghost-btn { flex: 1; justify-content: center; padding: 10px 12px; }
  .stats-row--tools .add-tool-btn { flex: 1 1 100%; justify-content: center; padding: 10px 18px; }
  .card-grid { grid-template-columns: 1fr; }
  .report-card .stats-row { grid-template-columns: 1fr; }
  .report-card-head { flex-direction: column; }
  .toolbar { gap: 6px; }
  .filter-select .filter-select-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-header h1 { font-size: 22px; }
  .search-kbd { display: none; }
  .app-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .site-card-meta { grid-template-columns: 1fr; }
}

/* ---------- Governed tags (js/tags.js draws these; scripts/lib/tag-catalog.php defines the colours) ----------
   A tag is always icon + NAME on a fill — never colour alone. Every fill below gives >= 5:1 contrast with
   its white text (WCAG AA needs 4.5:1); scripts/test-tag-catalog.php asserts these hex values match the
   server-side palette. Red/orange/amber are deliberately not tag colours: they are reserved for flag severity. */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.tag-chip-icon { flex: none; }
.tag-chip-name { overflow: hidden; text-overflow: ellipsis; }
.tag-chip--blue    { background: #1d4ed8; color: #ffffff; }
.tag-chip--indigo  { background: #4338ca; color: #ffffff; }
.tag-chip--purple  { background: #7e22ce; color: #ffffff; }
.tag-chip--fuchsia { background: #a21caf; color: #ffffff; }
.tag-chip--teal    { background: #0f766e; color: #ffffff; }
.tag-chip--green   { background: #15803d; color: #ffffff; }
.tag-chip--cyan    { background: #0e7490; color: #ffffff; }
.tag-chip--slate   { background: #475569; color: #ffffff; }
/* Retired: one fixed neutral look (8.3:1) plus the word "retired", regardless of its old colour. */
.tag-chip--retired { background: #e5e7eb; color: #374151; box-shadow: inset 0 0 0 1px #6b7280; border: 0; }
.tag-chip-state { font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-chip-remove {
  margin-left: 2px; padding: 0 3px; border: 0; border-radius: 3px; background: transparent;
  color: inherit; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.tag-chip-remove:hover, .tag-chip-remove:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.25); outline: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.tag-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.col-tags { min-width: 120px; }
/* Historical cleanup markers (old site_tags rows, e.g. "customer-reconfirm"): read-only evidence, deliberately
   muted — never styled like a tag or an alert. */
.historical-marker-line { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.tag-hint-line { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.historical-marker-chip {
  display: inline-block; padding: 1px 7px; margin: 0 3px; border-radius: 4px; border: 1px dashed var(--border-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-secondary);
}
.tag-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tag-add-form select { max-width: 260px; }
.tag-catalog-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tag-catalog-name { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tag-catalog-desc { font-size: 11.5px; color: var(--text-secondary); max-width: 320px; }
.tag-catalog-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-catalog-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; margin: 10px 0; }
.tag-catalog-form label { display: block; font-size: 11.5px; color: var(--text-secondary); margin-bottom: 3px; }
.tag-catalog-form input, .tag-catalog-form select, .tag-add-form select {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tag-add-form select { width: auto; }
.tag-catalog-form input:focus, .tag-catalog-form select:focus, .tag-add-form select:focus { outline: none; border-color: var(--blue-bright, #4c8dff); }
.tag-catalog-preview { min-height: 26px; display: flex; align-items: center; }
.tag-merge-panel { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px 14px; margin: 10px 0; }
.tag-merge-panel h3 { margin: 0 0 6px; }

/* Customer Cleanup — read-only history dialog (opened from a row's History button) */
.cc-history-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cc-history { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; width: min(960px, 100%); max-height: min(85vh, 900px); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.cc-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-history-head h3 { margin: 0; font-size: 16px; word-break: break-word; }
.cc-history-note { line-height: 1.45; }
.cc-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-history-filter { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.cc-history-filter select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.cc-history-status { font-size: 12.5px; color: var(--text-secondary); }
.cc-history-scroll { overflow: auto; min-height: 0; border: 1px solid var(--border); border-radius: 8px; }
.cc-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-history-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.cc-history-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cc-history-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-history-change { word-break: break-word; }
.cc-history-none { color: var(--text-muted); font-style: italic; }
.cc-history-more { margin: 10px 12px; }
.cc-history-btn { margin-top: 4px; }
.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; }

/* Cloudflare read-only verification panel (js/site-cloudflare.js) */
.cf-readonly { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 8px; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.cf-table th, .cf-table td { text-align: left; padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid var(--border, rgba(128,128,128,.2)); }
.cf-table thead th { color: var(--text-muted); font-weight: 600; }
.cf-table tbody th { font-weight: 600; white-space: nowrap; }
.cf-atlas { color: var(--text-muted); font-size: 11.5px; }
.cf-status { font-size: 11.5px; font-weight: 600; }
.cf-status--match { color: var(--green, #2e8b57); }
.cf-status--mismatch, .cf-status--error { color: var(--orange, #c77700); }
.cf-status--unknown { color: var(--text-muted); }
.cf-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cf-msg, .cf-note { font-size: 12px; color: var(--text-muted); }