/* Design system — legibility and speed-to-scan for a bookkeeper triaging
   dollar-impact alerts, expressed with real visual craft rather than "plain
   equals simple." KISS means no unneeded moving parts, not no effort:
   this is pure CSS, no build step, no JS framework — the cost of this
   polish is a handful of extra class names, not new architecture. */

:root {
  --color-bg: #f6f7f5;
  --color-surface: #ffffff;
  --color-border: #e4e6e1;
  --color-text: #1c1f1a;
  --color-text-muted: #6b7268;
  --color-brand: #1a5c3a;
  --color-brand-dark: #123f28;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-warning: #8a5a00;
  --color-warning-bg: #fef4e0;
  --color-neutral-bg: #eef0ec;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 20, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 30, 20, 0.08);
}

* { box-sizing: border-box; }

/* Real bug found by a failing test: `hidden` and a class like .button that
   sets its own `display` have EQUAL CSS specificity, and author styles win
   ties over the browser's UA stylesheet — so `el.hidden = true` silently
   did nothing on anything styled with .button (or any other class setting
   display). This one rule, high specificity via !important, is what
   actually makes `hidden` mean "not displayed" everywhere in this app,
   regardless of what other class is also on the element. */
[hidden] { display: none !important; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; margin: 0; }
a { color: var(--color-brand); }

.site-header {
  padding: 0 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
  max-width: 960px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand-mark {
  width: 26px;
  height: 26px;
  display: inline-block;
}
.link-button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  padding: 0.4rem 0;
}
.link-button-danger { color: var(--color-danger); font-size: 0.85rem; }
.link-button-danger:hover { text-decoration: underline; }
.reconnect-link { margin: 0; font-size: 0.9rem; }
.link-button:hover { color: var(--color-text); }
.logout-form { margin: 0; }

/* Header account menu — its own class family, not a reuse of client_detail's
   .client-menu, since this one is shared by every page (see base.html)
   rather than belonging to one specific page's own actions. */
.header-menu { position: relative; }
.header-menu > summary { list-style: none; cursor: pointer; }
.header-menu > summary::-webkit-details-marker { display: none; }
.header-menu-summary {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.header-menu[open] > .header-menu-summary { color: var(--color-brand); }
.header-menu-items {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
}
.header-menu-items form { margin: 0; }
.header-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
}
.header-menu-item:hover { background: var(--color-neutral-bg); }

/* Account page */
.info-list { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; margin: 1.25rem 0; }
.info-list dt { color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; }
.info-list dd { margin: 0; }
.verified-badge, .unverified-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.verified-badge { background: var(--color-neutral-bg); color: var(--color-brand); }
.unverified-badge { background: var(--color-warning-bg); color: var(--color-warning); }
.account-logout-form { margin-top: 1.5rem; }

/* Icon buttons — one small circular control, reused everywhere an action
   (sync, rename-save) needs to be a button rather than a block of text. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.1s ease, opacity 0.15s ease;
}
.icon-button:hover { color: var(--color-brand); border-color: var(--color-brand); background: #eef6f0; }
.icon-button:active { transform: scale(0.9); }
.icon-button-ghost { border-color: transparent; background: transparent; width: 26px; height: 26px; }
.icon-button-sync svg { transition: transform 0.4s ease; }
.icon-button-sync:hover svg { transform: rotate(75deg); }
.icon-button:disabled { cursor: default; opacity: 0.6; }
.icon-button:disabled:hover { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-surface); }
/* Continuous spin while a real sync request is in flight (see base.html's
   script) — a static icon gave no feedback that anything was happening for
   however long the real Jobber/QuickBooks round trip takes, and nothing
   stopped a fast double-click from queuing a second one. */
.icon-button-sync.is-syncing svg { animation: icon-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .icon-button-sync.is-syncing svg { animation: none; }
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}
.inline-sync-form { margin: 0; display: inline-flex; }

/* Client detail header — title + health badge on one row, connection/sync
   actions on the row below. Renaming toggles via a hidden checkbox + label
   (pure CSS, no JS): the page's real <h1> stays in the DOM and visible by
   default — screen readers, SEO, and anything asserting on "the heading"
   all see a real heading, not an <input> masquerading as one, which an
   earlier version of this got wrong and a real test caught. The pencil
   icon stays faintly visible always, not just on :hover — hover doesn't
   exist on a touch device, and hover-only would make renaming impossible
   to discover on mobile. */
.client-detail-header { align-items: flex-start; }
.client-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rename-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.business-name-display { min-width: 0; overflow-wrap: anywhere; }
.rename-form {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.rename-toggle-checkbox:checked ~ .business-name-display { display: none; }
.rename-toggle-checkbox:checked ~ .rename-form { display: inline-flex; }
.rename-toggle-checkbox:checked ~ .pencil-icon { display: none; }
.business-name-input {
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  min-width: 0;
}
.business-name-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.12);
}
.pencil-icon { opacity: 0.55; }
.pencil-icon:hover { opacity: 1; }
.client-header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Room to breathe under the title row instead of the real Jobber/QuickBooks
   names and "last synced" running together as one dense, easy-to-miss
   line right under the header — found genuinely cramped. Each provider
   name is now its own small chip rather than part of one run-together
   string (that compact form still exists — see .client-name-sub, used by
   the dashboard's own table row, where space really is tight). */
.client-subheader { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0 1.4rem; }
.connected-names { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.connected-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.82rem;
  color: var(--color-text);
}
.connected-name-provider { font-weight: 600; color: var(--color-text-muted); }
.last-synced-note { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* Overflow menu for rarely-used/destructive actions — a real <details>
   disclosure, not a JS-built dropdown, so it works with zero JavaScript.
   ::-webkit-details-marker and list-style both suppressed since <summary>
   already renders as the kebab icon-button; a browser's own default
   triangle marker would double up with it. */
.client-menu { position: relative; }
.client-menu > summary { list-style: none; }
.client-menu > summary::-webkit-details-marker { display: none; }
.client-menu[open] > summary { color: var(--color-brand); border-color: var(--color-brand); }
.client-menu-items {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
}
.client-menu-items form { margin: 0; }
.client-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
}
.client-menu-item:hover { background: var(--color-neutral-bg); }
.client-menu-item-danger { color: var(--color-danger); }
.client-menu-item-danger:hover { background: var(--color-danger-bg); }

/* Filter toolbar */
.alert-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
  padding: 0.65rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.alert-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.alert-filter-form input[type="text"],
.alert-filter-form input[type="number"] {
  font: inherit;
  font-size: 0.85rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
.alert-filter-form input[type="text"] { flex: 1 1 160px; min-width: 120px; }
.alert-filter-form input[type="number"] { width: 6.5rem; }
.alert-filter-form input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.12);
}
.alert-filter-form .button { height: 2.25rem; padding: 0 1rem; }
.alert-filter-form .clear-link { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; }
.alert-filter-form .clear-link:hover { color: var(--color-text); text-decoration: underline; }
.show-dismissed-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.show-dismissed-toggle input { cursor: pointer; }
/* A dismissed alert stays legible (it's still real information, just
   settled) but visually recedes from the open ones a bookkeeper actually
   needs to act on. */
.alert-dismissed { opacity: 0.65; }

/* Severity segmented control — real links, not a native <select>, since a
   select's own open dropdown list can't be styled consistently across
   browsers without JS. Full control this way, and arguably clearer UX for
   only 4 options. */
/* Severity filter — a real <details> disclosure (see the template's own
   comment for why, over either a native <select> or the segmented-pill
   row this replaced), styled to look nothing like the plain kebab menu
   it borrows its mechanism from. */
.severity-dropdown { position: relative; }
.severity-dropdown > summary { list-style: none; cursor: pointer; }
.severity-dropdown > summary::-webkit-details-marker { display: none; }
.severity-dropdown-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.severity-dropdown-label { text-transform: capitalize; }
.severity-dropdown-caret { color: var(--color-text-muted); font-size: 0.7rem; transition: transform 0.15s ease; }
.severity-dropdown:hover > .severity-dropdown-summary { border-color: var(--color-brand); }
.severity-dropdown[open] > .severity-dropdown-summary {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.12);
}
.severity-dropdown[open] > .severity-dropdown-summary .severity-dropdown-caret { transform: rotate(180deg); }
.severity-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 10;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
}
.severity-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font-size: 0.88rem;
  text-transform: capitalize;
  color: var(--color-text);
  cursor: pointer;
}
.severity-dropdown-option:hover { background: var(--color-neutral-bg); }
/* accent-color is what actually draws the checkmark — the literal
   "checkmark" asked for, rather than a hand-built fake checkbox. */
.severity-dropdown-option input[type="checkbox"] { accent-color: var(--color-brand); cursor: pointer; }
.severity-dot {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.severity-dot-high { background: var(--color-danger); }
.severity-dot-medium { background: var(--color-warning); }
.severity-dot-low { background: var(--color-text-muted); }

.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}
.flash-success { background: #e6f4ea; color: var(--color-brand-dark); }
.flash-error { background: var(--color-danger-bg); color: var(--color-danger); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.back-link {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 1rem;
}
.back-link:hover { color: var(--color-text); }

.subhead { color: var(--color-text-muted); margin-top: 0.25rem; }

/* Buttons */
.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.button-primary {
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.button-primary:hover { background: var(--color-brand-dark); }
.button-primary:active { transform: translateY(1px); }
.button-full { width: 100%; text-align: center; }
.button-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.button-secondary:hover { border-color: var(--color-text-muted); }
.button-danger { background: var(--color-danger); color: #fff; box-shadow: var(--shadow-sm); }
.button-danger:hover { background: #922019; }
.button-danger:active { transform: translateY(1px); }

/* A real, styleable stand-in for the browser's native confirm() (which no
   CSS anywhere can restyle) — see client_detail.html's own script for why
   the native one stays wired up too, as the genuine no-JS fallback. */
.confirm-dialog {
  max-width: 420px;
  width: calc(100% - 2rem);
  padding: 1.5rem;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.confirm-dialog::backdrop { background: rgba(20, 24, 20, 0.5); }
.confirm-dialog h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.confirm-dialog p { margin: 0 0 1.25rem; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.stat-card-alert { border-color: #f3d9b1; background: var(--color-warning-bg); }
.stat-value { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.15rem; }

/* Client table */
.client-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.client-table th, .client-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.client-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-neutral-bg);
}
.client-table th a { color: inherit; text-decoration: none; white-space: nowrap; }
.client-table th a:hover { color: var(--color-text); }
.sort-arrow { font-size: 0.7rem; }
.sort-arrow-hint { opacity: 0.35; }
.sortable-th:hover .sort-arrow-hint { opacity: 0.8; }
.sortable-th-active .sort-arrow { color: var(--color-brand); opacity: 1; }
.client-table tr:last-child td { border-bottom: none; }
.sync-col { width: 2.5rem; text-align: center; padding-left: 0; padding-right: 0; }
.client-table tr:hover td { background: #fafbf9; }
.client-row { cursor: pointer; }
.client-name-link { color: var(--color-text); font-weight: 600; text-decoration: none; }
.client-name-link:hover { color: var(--color-brand); text-decoration: underline; }
.client-name-sub { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.muted { color: var(--color-text-muted); }
a.muted { text-decoration: none; }

.alert-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  transition: transform 0.1s ease;
}
.alert-count-badge:hover { transform: scale(1.08); }
.alert-count-cell a.muted:hover { color: var(--color-text); text-decoration: underline; }

/* Health badges */
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--color-neutral-bg);
}
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.health-green .health-dot { background: #2e7d32; }
.health-green { color: #1e5c26; background: #e6f4ea; }
.health-red .health-dot { background: #c62828; }
.health-red { color: var(--color-danger); background: var(--color-danger-bg); }
.health-not_connected .health-dot { background: #9e9e9e; }
.health-not_connected { color: var(--color-text-muted); }

/* Empty states */
.empty-state {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state p { margin: 0.25rem 0; }
.empty-state p:first-child { color: var(--color-text); font-weight: 600; font-size: 1.05rem; }
.empty-state-sub { font-size: 0.9rem; }
.empty-state-success { border-style: solid; border-color: #cfe8d6; background: #f3faf5; }

/* Error pages (404, 403, 500) */
.error-page {
  max-width: 28rem;
  margin: 3.5rem auto;
  text-align: center;
}
.error-code {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-border);
  letter-spacing: -0.02em;
  line-height: 1;
}
.error-page h1 { margin: 0.5rem 0 0.5rem; }
.error-page p { color: var(--color-text-muted); margin: 0 0 1.5rem; }

/* Alerts */
.alert {
  border-left: 4px solid var(--color-neutral-bg);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.alert-high { border-left-color: var(--color-danger); }
.alert-medium { border-left-color: #b8860b; }
.alert-low { border-left-color: #9e9e9e; }
.alert-header { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.alert-header h3 { flex: 1; }
.alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
}
.alert-dismiss:hover { color: var(--color-text); text-decoration: underline; }
.severity-tag {
  flex-shrink: 0;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.severity-high { background: var(--color-danger-bg); color: var(--color-danger); }
.severity-medium { background: var(--color-warning-bg); color: var(--color-warning); }
.severity-low { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.alert-detail { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.75rem; }
.alert-evidence {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  font-size: 0.8rem;
  margin: 0 0 0.75rem;
}
.alert-evidence dt { color: var(--color-text-muted); text-transform: capitalize; }
.alert-evidence dd { margin: 0; }
.alert-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.75rem; }
.alert-link { font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.alert-link:hover { text-decoration: underline; }
/* alert-meta always sits at the far right via margin-left: auto, not
   justify-content: space-between — space-between only pushes it right when
   dollar-impact is also present as a second flex child; with no dollar
   impact it was the lone child and collapsed to the left instead. */
.alert-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.dollar-impact { font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.alert-meta { color: var(--color-text-muted); font-size: 0.8rem; margin-left: auto; }

/* Forms */
.auth-card {
  max-width: 400px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.auth-form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
.auth-form label { font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; }
.auth-form input {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.15);
}
.auth-form button { margin-top: 1rem; }
.form-error { color: var(--color-danger); font-size: 0.82rem; margin: 0.1rem 0 0; }
.auth-footer { margin-top: 1.25rem; font-size: 0.88rem; color: var(--color-text-muted); }

/* Connect flow */
.connect-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
}
.connect-step-done { border-color: #cfe8d6; background: #f3faf5; }
.connect-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-neutral-bg);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.connect-step-done .connect-step-number { background: var(--color-brand); color: #fff; }
.connect-step-label { font-weight: 600; flex-grow: 1; }
.done-label { color: var(--color-brand); font-weight: 600; font-size: 0.9rem; }

/* Small screens */
@media (max-width: 600px) {
  .content { padding: 1.25rem 1rem 3rem; }
  .client-table { display: block; overflow-x: auto; }
  .page-header { align-items: flex-start; }
}

/* Settings */
.auth-form select {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
.checkbox-field { display: flex; align-items: center; gap: 0.5rem; flex-direction: row; }
.checkbox-field input { margin: 0; }
.checkbox-field label { margin: 0; }
.settings-card { max-width: 760px; }
.settings-hint { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.35rem 0 0; }
.settings-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.settings-section { margin: 2rem 0; }
.settings-section h2 { font-size: 1.05rem; margin: 0 0 0.85rem; }
.settings-section .client-table { margin: 0.85rem 0 1rem; }
/* Consistent vertical rhythm between a section's fields — previously
   each field's own margin fought the next one, reading as cramped. */
.settings-field { margin: 0.9rem 0; }
.settings-field label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0 0 0.4rem; }
/* The pause checkbox's wrapper carries BOTH classes on one element
   (<div class="settings-field checkbox-field">), not one nested in the
   other — a real bug: ".settings-field .checkbox-field label" is a
   descendant selector that can never match here, so the generic
   ".settings-field label" rule above (display: block, a bottom margin)
   was silently winning instead and breaking the checkbox out of its own
   flex row. This compound selector (no space) targets that same single
   element correctly. */
.settings-field.checkbox-field label { display: inline; font-weight: 500; margin: 0; }
.rule-table .rule-col-narrow { width: 12.5rem; }
.rule-description { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; }

/* Custom single-select dropdown — same real reason as the alerts page's
   severity filter (see _alerts_section.html's own comment): a native
   <select>'s OPEN option list is rendered by the browser/OS itself and
   can't be restyled in any standard cross-browser way, so anywhere that
   matters visually, a <details> of real radio inputs replaces it
   entirely instead of settling for a styled box around an unstyled
   popup. Deliberately its own class family, not reusing
   .severity-dropdown directly — visually identical by design, but a
   separate, single-select component (radios, not checkboxes) used in a
   different part of the app, matching this codebase's own precedent of
   giving each dropdown-like widget its own class family (.client-menu,
   .header-menu) rather than sharing one across unrelated pages. */
.choice-dropdown { position: relative; display: inline-block; }
.choice-dropdown > summary { list-style: none; cursor: pointer; }
.choice-dropdown > summary::-webkit-details-marker { display: none; }
.choice-dropdown-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: max-content;
  min-width: 9rem;
  height: 2.35rem;
  padding: 0 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice-dropdown-caret { color: var(--color-text-muted); font-size: 0.7rem; transition: transform 0.15s ease; }
.choice-dropdown:hover > .choice-dropdown-summary { border-color: var(--color-text-muted); }
.choice-dropdown[open] > .choice-dropdown-summary {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.15);
}
.choice-dropdown[open] > .choice-dropdown-summary .choice-dropdown-caret { transform: rotate(180deg); }
.choice-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 10;
  min-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.3rem;
}
.choice-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.choice-dropdown-option:hover { background: var(--color-neutral-bg); }
.choice-dropdown-option input[type="radio"] { accent-color: var(--color-brand); cursor: pointer; }