:root {
    --bg: #f7f8fa;
    --card: #ffffff;
    --border: #e4e7ec;
    --text: #1b1f23;
    --muted: #667085;
    --brand: #162a53;
    /* Row-selection highlight — a translucent accent so it composites correctly over any theme
       (light board or dark popdock theme) without an opaque fill hiding the row text. */
    --sel-accent: #5b5fc7;
    --sel-bg: rgba(91, 95, 199, 0.14);
    --sel-bg-hover: rgba(91, 95, 199, 0.22);
    --ok: #2fcc66;
    --degraded: #f5b800;
    --partial: #f59700;
    --major: #e23c39;
    --maintenance: #3b82f6;
    --upstream: #f5b800;
    --unknown: #98a2b3;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
}

/* Scoped to .eone-status so the status board/history/admin styling never bleeds into the host
   Popdock app (these element-level rules would otherwise restyle every link/heading/body). */
.eone-status, .eone-status * { box-sizing: border-box; }
.eone-status {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.eone-status a { color: var(--maintenance); text-decoration: none; }
.eone-status a:hover { text-decoration: underline; }
.eone-status h1, .eone-status h2, .eone-status h3 { margin: 0; font-weight: 600; }

.container { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ── Public header / footer ─────────────────────────────────── */
.site-header { background: var(--card); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 13px;
}
.brand-logo { height: 22px; width: auto; display: block; color: var(--text); }
.brand-word { font-weight: 600; color: var(--brand); padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--border); }
/* width:100% so the flex item fills to its max-width (880) instead of shrink-wrapping to content. */
.main-content { padding: 28px 20px 60px; flex: 1 0 auto; width: 100%; }

/* Sticky footer: header/main/footer fill the viewport, footer pinned to the bottom. */
.page-public { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer { border-top: 1px solid var(--border); background: var(--card); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; height: 56px; font-size: 14px; color: var(--muted); }
.powered { color: var(--muted); font-size: 13px; }

/* ── Buttons ────────────────────────────────────────────────── */
/* Match Popdock/eone-ui buttons EXACTLY: borderless, subtle radius, theme-driven colours.
   eone-ui sets every --button-*-border-default to `none` — never add a 1px border here. */
.btn {
    display: inline-block; padding: 8px 14px; border-radius: var(--button-border-radius, 4px);
    border: none;
    background: var(--button-tertiary-background-default, var(--card));
    color: var(--button-tertiary-text, var(--text));
    font-size: 14px; cursor: pointer; font-weight: 500;
}
.btn:hover { background: var(--button-tertiary-background-hover, #f2f4f7); text-decoration: none; }
.btn-primary { background: var(--button-color-primary, var(--brand)); color: var(--button-color-primary-text, #fff); border: none; }
.btn-primary:hover { background: var(--button-color-primary-hover, #0f1d3a); }
/* Anchor-styled buttons must keep the button text colour, not inherit the admin link blue. */
a.btn, a.btn:hover, a.btn:visited { color: var(--button-tertiary-text, var(--text)); text-decoration: none; }
a.btn-primary, a.btn-primary:hover, a.btn-primary:visited { color: var(--button-color-primary-text, #fff); }
/* Top "Subscribe to updates": eOne "Get a Demo" blue. */
.btn-subscribe { background: #3533ff; color: #fff; border-color: #3533ff; }
.btn-subscribe:hover { background: #2a28e0; border-color: #2a28e0; }
/* Public "Subscribe" pill (header): theme-aware Popdock primary tokens, not a hardcoded translucent white. */
.btn-subscribe-sm {
    font-size: 13px; padding: 5px 12px;
    background: var(--button-color-primary, var(--brand));
    color: var(--button-color-primary-text, #fff);
    border: 1px solid transparent;
    border-radius: var(--button-border-radius, 2px);
}
.btn-subscribe-sm:hover { background: var(--button-color-primary-hover, #0f1d3a); border-color: transparent; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-logout { width: 100%; }

/* ── Page head (title + overall-status pill) ────────────────── */
.status-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.status-page-title { font-size: 30px; font-weight: 700; color: var(--text); }
/* Title on the left; the history fab + overall-status pill grouped together on the right. */
.status-page-titlebar { display: flex; align-items: center; gap: 12px; }
.status-page-head-right { display: flex; align-items: center; gap: 12px; }
.status-page-head-right .status-history-fab-wrap { margin-left: 0; }

/* Icon-only history fab beside the PAGE title, built on the eone-ui Button — a primary page action, so
   it keeps its button chrome. In-row fabs are bare instead (.row-icon-btn). The wrapper only exists to
   stop row-selection clicks. */
.status-history-fab-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; }
.status-page-titlebar .status-history-fab-wrap { margin-left: 0; }

.history-scope { color: var(--muted); font-size: 14px; margin: -8px 0 20px; }

/* Non-regional groups wrap their measure cards up to 3 per row on wide screens (was always one
   full-width card). Regional matrices + condensed groups keep their own full-width layout. The
   title spans the full row. */
.component-group.component-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.component-group.component-grid .group-title { grid-column: 1 / -1; }
@media (min-width: 900px) { .component-group.component-grid { grid-template-columns: repeat(2, 1fr); } }
.status-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 8px; color: #fff;
    font-size: 15px; font-weight: 600;
}
.status-pill-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.25); font-size: 13px;
}
.status-pill.status-ok { background: var(--ok); }
.status-pill.status-degraded, .status-pill.status-upstream { background: var(--degraded); color: #4a3a00; }
.status-pill.status-partial { background: var(--partial); }
.status-pill.status-major { background: var(--major); }
.status-pill.status-maintenance { background: var(--maintenance); }
.status-pill.status-unknown { background: var(--unknown); }

/* ── Overall banner ─────────────────────────────────────────── */
.overall-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px; border-radius: var(--radius); color: #fff;
    font-size: 20px; font-weight: 600; margin-bottom: 24px;
}
.overall-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.25); font-size: 15px;
}
/* These coloured backgrounds are for the overall banner ONLY — scoped so they don't leak
   onto the component-status pills (which share the status-* class names). */
.overall-banner.status-ok { background: var(--ok); }
.overall-banner.status-degraded, .overall-banner.status-upstream { background: var(--degraded); color: #4a3a00; }
.overall-banner.status-partial { background: var(--partial); }
.overall-banner.status-major { background: var(--major); }
.overall-banner.status-maintenance { background: var(--maintenance); }
.overall-banner.status-unknown { background: var(--unknown); }

/* ── Incident callout ───────────────────────────────────────── */
.incident-callout {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    border-left: 5px solid var(--major); padding: 18px 22px; margin-bottom: 18px;
}
.incident-callout.impact-major { border-left-color: var(--major); }
.incident-callout.impact-partial { border-left-color: var(--partial); }
.incident-callout.impact-degraded { border-left-color: var(--degraded); }
.incident-callout.impact-ok { border-left-color: var(--ok); }
.incident-callout-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.incident-callout h2 { font-size: 18px; }
.incident-update-label { font-weight: 700; margin: 10px 0 2px; }
.incident-body { margin: 4px 0; color: #344054; }
.incident-time { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

.maintenance-callout {
    background: #eef4ff; border: 1px solid #cdddff; border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 18px;
}
.maintenance-callout h3 { font-size: 16px; color: #1d4ed8; }
.maint-status { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #1d4ed8; margin-left: 8px; }

/* ── Components ─────────────────────────────────────────────── */
/* Board type-ahead: client-side filter of the measures by partial name or region. */
.board-search {
    display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0 12px; height: 44px; margin-bottom: 18px;
}
.board-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--sel-bg); }
.board-search-icon { color: var(--muted); display: inline-flex; flex: none; }
.board-search-clear {
    border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex;
    flex: none; padding: 4px; margin-left: -4px; border-radius: 4px; line-height: 0;
}
.board-search-clear:hover { color: var(--major); background: var(--bg); }
.board-search-input { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.board-search-input::placeholder { color: var(--muted); }
.board-search-empty { color: var(--muted); padding: 6px 2px 20px; }

.components-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.components-head h2 { font-size: 15px; color: var(--muted); font-weight: 500; }
.component-group {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    /* `clip` (not `hidden`) still clips children to the rounded corners, but — unlike `hidden` —
       does NOT make the group a scroll container, so the sticky section headers below stick to the
       board's .pd-home viewport instead of being trapped inside this box. */
    box-shadow: var(--shadow); margin-bottom: 16px; overflow: clip;
}
.group-title { font-size: 15px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fcfcfd; }
.component-row { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.component-row:last-child { border-bottom: none; }
.component-head { display: flex; justify-content: space-between; align-items: center; }
.component-name { font-weight: 500; }
.component-status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.component-status.status-ok { color: var(--ok); } .component-status.status-ok .status-dot { background: var(--ok); }
.component-status.status-degraded, .component-status.status-upstream { color: #b58800; } .component-status.status-degraded .status-dot, .component-status.status-upstream .status-dot { background: var(--degraded); }
.component-status.status-partial { color: var(--partial); } .component-status.status-partial .status-dot { background: var(--partial); }
.component-status.status-major { color: var(--major); } .component-status.status-major .status-dot { background: var(--major); }
.component-status.status-maintenance { color: var(--maintenance); } .component-status.status-maintenance .status-dot { background: var(--maintenance); }
.component-status.status-unknown { color: var(--unknown); } .component-status.status-unknown .status-dot { background: var(--unknown); }

/* ── Uptime bar ─────────────────────────────────────────────── */
.uptime { margin-top: 12px; position: relative; }

/* SVG 90-day bar. preserveAspectRatio="none" scales the unit viewBox to fill the container, so every
   day is exactly equal width (no ragged fractional-pixel flex rounding). Rects fill via the status
   tokens; non-scaling-stroke keeps the focus/active outline a true 1px despite the horizontal scale. */
.uptime-chart { display: block; width: 100%; height: 34px; }
.uptime-chart .bar { fill: var(--unknown); vector-effect: non-scaling-stroke; transition: fill-opacity .15s; }
.uptime-chart .bar-green { fill: var(--ok); }
.uptime-chart .bar-amber { fill: var(--degraded); }
.uptime-chart .bar-orange { fill: var(--partial); }
.uptime-chart .bar-red { fill: var(--major); }
.uptime-chart .bar-nodata { fill: #eaecf0; }
.uptime-chart .bar-asserted { fill-opacity: .5; }        /* presumed/backfilled — faded (legend keeps the hatch key) */
.uptime-chart .bar.clickable { cursor: pointer; }
.uptime-chart .bar.clickable:hover { fill-opacity: .6; }
.uptime-chart .bar-active { stroke: var(--text); stroke-width: 1.5; }
.uptime-chart .bar:focus-visible { outline: none; stroke: var(--brand, #2563eb); stroke-width: 1.5; }
.uptime-bars { display: flex; gap: 2px; align-items: stretch; height: 34px; }
.uptime-bars .bar { flex: 1 1 0; border-radius: 2px; min-width: 2px; background: var(--unknown); transition: opacity .15s; }
.uptime-bars .bar:hover { opacity: .6; }
.uptime-bars .bar-green { background: var(--ok); }
.uptime-bars .bar-amber { background: var(--degraded); }
.uptime-bars .bar-orange { background: var(--partial); }
.uptime-bars .bar-red { background: var(--major); }
.uptime-bars .bar-nodata { background: #eaecf0; }
/* Asserted (backfilled, presumed-not-measured) days: keep the status color but overlay a hatch + fade. */
.uptime-bars .bar-asserted {
    opacity: .55;
    background-image: repeating-linear-gradient(
        45deg, rgba(255,255,255,.65) 0, rgba(255,255,255,.65) 1px, transparent 1px, transparent 3px);
}
.uptime-bars .bar-asserted:hover { opacity: .85; }
.uptime-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.uptime-pct { font-weight: 600; color: #475467; }

/* Clickable day bars: reset the <button> so it renders exactly like the static <span> bars. */
.uptime-bars button.bar { padding: 0; border: 0; font: inherit; cursor: pointer; appearance: none; }
.uptime-bars button.bar:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; }
.uptime-bars .bar-active { outline: 2px solid var(--text); outline-offset: 1px; opacity: 1; }

/* Intraday day-detail popover (click-to-drill on a 90-day bar). */
.day-detail {
    position: fixed; box-sizing: border-box; width: 400px; max-width: calc(100vw - 16px); z-index: 1000;
    /* 16px page-color frame all around → the card-colored interior reads as a matted floating card. */
    background: var(--card); border: 16px solid var(--bg); border-radius: var(--radius);
    box-shadow: var(--shadow); font-size: 13px; color: var(--text);
}
.day-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 14px 0 0; }
.day-detail-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; padding-bottom: 8px; }
.day-detail-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.day-detail-body { display: flex; flex-direction: column; align-items: stretch; padding: 0 14px 12px; background: var(--card); border-radius: 4px; }
.day-detail-region { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.day-detail-close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.day-detail-close:hover { color: var(--text); }
.day-detail-date { font-size: 12px; color: var(--muted); }
.day-detail-today { margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--brand, #2563eb); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.day-detail-msg { color: var(--muted); margin: 12px 0 2px; }

/* SVG strip (unit viewBox + preserveAspectRatio="none", like .uptime-chart) so slices scale to equal
   widths instead of flexbox rounding each to a different fractional pixel. */
.day-detail-strip { display: block; width: 100%; height: 28px; margin-top: 12px; }
.day-detail-strip .slice { fill: var(--unknown); }
.day-detail-strip .slice-green { fill: var(--ok); }
.day-detail-strip .slice-amber { fill: var(--degraded); }
.day-detail-strip .slice-orange { fill: var(--partial); }
.day-detail-strip .slice-red { fill: var(--major); }
.day-detail-strip .slice-nodata { fill: #eaecf0; }
/* Presumed (owner-asserted backfill) day: fade the whole strip, matching the 90-day bar's .bar-asserted. */
.day-detail-strip-asserted .slice { fill-opacity: .5; }
.day-detail-axis { display: flex; width: 100%;justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 4px; }

/* Uptime % caption: centered, same 12px/weight-600/muted styling as the primary 90-day chart legend
   (the .uptime-pct class carries that; here we just center it below the strip). */
.day-detail-pct { justify-content: center; display: flex; width: 100%; font-size: 12px; margin-top: 8px; }
/* The all-healthy/presumed note sits inline in the heading next to the title; the failure and
   degraded detail lines sit centered below the uptime % caption (like .day-detail-pct). */
.day-detail-down { color: var(--major); font-size: 12px; text-align: left; margin-top: 8px; }
.day-detail-ok { color: var(--muted); font-size: 12px; }
.day-detail-deg { color: #b58800; font-size: 12px; text-align: left; margin-top: 2px; }

.day-detail-incidents { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.day-detail-incidents li { display: flex; align-items: center; gap: 6px; }
.day-detail-incidents .inc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--unknown); }
.day-detail-incidents .inc-dot.impact-major { background: var(--major); }
.day-detail-incidents .inc-dot.impact-partial { background: var(--partial); }
.day-detail-incidents .inc-dot.impact-degraded { background: var(--degraded); }
.day-detail-incidents .inc-dot.impact-ok { background: var(--ok); }
.day-detail-incidents .inc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-detail-incidents .inc-status { font-size: 11px; color: var(--muted); flex: none; }

/* ── Daily errors: the "View daily errors" affordance in the day popover + the expanded modal ──
   These are GLOBAL (not scoped under .eone-status) because the day popover portals to <body> and the
   eone-ui Modal renders into #modal-root — both outside .eone-status. They drive off the :root tokens,
   which body.dark-theme already overrides, so light/dark come for free. */
.day-detail-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: center; }
.btn-view-errors {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); border-radius: var(--button-border-radius, 6px);
    padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.btn-view-errors:hover { border-color: var(--major); color: var(--major); }

.de { font-size: 13px; color: var(--text); }
.de-msg { color: var(--muted); margin: 8px 2px; }
.de-msg-error { color: var(--major); }
.de-empty { text-align: center; padding: 28px 20px; }
.de-empty-ic {
    width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--muted); font-size: 18px;
}
.de-empty-ic.de-empty-ok { color: var(--ok); }
.de-empty h3 { font-size: 15px; margin: 0; font-weight: 600; }
.de-empty p { color: var(--muted); font-size: 13px; margin: 6px auto 0; max-width: 46ch; }

.de-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.de-stat { background: var(--card); padding: 12px 16px; }
.de-k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.de-v { font-size: 22px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.de-stat-crit .de-v { color: var(--major); }
.de-stat-new .de-v { color: var(--partial); }

.de-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.de-err { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 16px 12px 13px; border-left: 3px solid transparent; }
.de-err + .de-err { border-top: 1px solid var(--border); }
.de-err:hover { background: var(--bg); }
.de-err.sev-error { border-left-color: var(--major); }
.de-err.sev-warning { border-left-color: var(--degraded); }
.de-err.sev-info { border-left-color: var(--maintenance); }
.de-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--unknown); flex: none; }
.de-err.sev-error .de-dot { background: var(--major); }
.de-err.sev-warning .de-dot { background: var(--degraded); }
.de-err.sev-info .de-dot { background: var(--maintenance); }
.de-err-main { min-width: 0; }
.de-err-cls { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.de-newpill { font-family: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--partial); border-radius: 3px; padding: 0 5px; line-height: 15px; }
.de-err-msg { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-err-ctx { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-err-metrics { text-align: right; flex: none; }
.de-big { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.de-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.de-open { display: inline-block; margin-top: 5px; font-size: 11.5px; color: var(--maintenance); text-decoration: none; }
.de-open:hover { text-decoration: underline; }
/* Auto Fix control: a subtle secondary action per error. Own line, right-aligned under "Open ↗".
   Uses the board tokens so it themes in light + dark automatically. */
.de-autofix {
    display: flex; align-items: center; gap: 5px; width: fit-content; margin: 6px 0 0 auto;
    font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
    color: var(--maintenance); background: var(--card);
    border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; cursor: pointer;
}
.de-autofix:hover { background: var(--bg); border-color: var(--maintenance); }
.de-autofix:disabled { cursor: default; opacity: .6; }
.de-autofix svg { width: 11px; height: 11px; }
.de-autofix-done { text-decoration: none; }
.de-autofix-done:hover { background: var(--bg); }
.de-autofix-err { margin: 4px 0 0 auto; max-width: 170px; font-size: 10.5px; color: var(--major);
    text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-foot { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Daily-errors intraday timeline: the day's (region-aware) outage strip — reuses .day-detail-strip
   slice colors — with one red marker per error at the UTC time it occurred, and a 24h axis. */
.de-timeline { margin-bottom: 16px; }
.de-strip-wrap { position: relative; }
.de-timeline .day-detail-strip { margin-top: 0; }
.de-mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--major);
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}
.de-mark::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--major);
}
.de-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.de-err-when { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ── Admin: Services & Repos association page (scoped to the admin board) ── */
.eone-status .sr-toolbar { margin: 8px 0 14px; }
.eone-status .sr-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.eone-status .sr-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 6px 3px 10px;
    border: 1px solid var(--border); border-radius: 20px; background: var(--card);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.eone-status .sr-chip-src { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg); border-radius: 3px; padding: 0 4px; }
.eone-status .sr-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px; }
.eone-status .sr-chip-x:hover { color: var(--major); }
/* Unassociated rows: a subtle amber wash + left accent so they stand out as needing attention. */
.eone-status .sr-unassociated > td { background: rgba(245, 151, 0, .07); }
.eone-status .sr-unassociated > td:first-child { box-shadow: inset 3px 0 0 var(--partial); }

/* Per-region (per-instance) breakdown under a tile */
.region-detail { margin-top: 10px; }
.region-detail > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); list-style: none; }
.region-detail > summary::-webkit-details-marker { display: none; }
.region-detail > summary::before { content: "\25B8"; font-size: 10px; color: var(--muted); }
.region-detail[open] > summary::before { content: "\25BE"; }
.region-dots { display: inline-flex; gap: 3px; }
.region-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--unknown); }
.region-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.region-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); background: #fcfcfd; font-weight: 600; }
.region-chip .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); }
.region-chip-status { color: var(--muted); font-weight: 400; }
.region-dot.status-ok, .region-chip.status-ok .status-dot { background: var(--ok); }
.region-dot.status-degraded, .region-chip.status-degraded .status-dot,
.region-dot.status-upstream, .region-chip.status-upstream .status-dot { background: var(--degraded); }
.region-dot.status-partial, .region-chip.status-partial .status-dot { background: var(--partial); }
.region-dot.status-major, .region-chip.status-major .status-dot { background: var(--major); }
.region-dot.status-maintenance, .region-chip.status-maintenance .status-dot { background: var(--maintenance); }
.region-dot.status-unknown, .region-chip.status-unknown .status-dot { background: var(--unknown); }

/* Copy-to-clipboard button (shown to signed-in users next to a monitored item) */
.copy-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2px; margin-left: 6px; border: none; background: none; color: var(--muted); cursor: pointer; vertical-align: middle; border-radius: 3px; line-height: 0; }
.copy-btn:hover { color: var(--brand); background: #eef0f3; }
.copy-btn.copied { color: var(--ok); }

/* Bare in-row icon buttons — the GitHub repo link (.repo-link, an <a>) and the in-row incident-history
   fab (.row-icon-btn, a <button>) share ONE treatment: no box, muted until hover (RowActions.axioms.md
   AC2). GLOBAL (the public board is .pd-home, not .eone-status) — mirrors .copy-btn's icon-button
   treatment. */
.repo-link, .row-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 3px;
    border: none; background: none; color: var(--muted);
    font-size: 14px; line-height: 0; vertical-align: middle; border-radius: 4px; cursor: pointer;
}
/* :link/:visited so this out-ranks the global a:link color — .repo-link is an <a> (unlike .copy-btn's <button>). */
.repo-link, .repo-link:link, .repo-link:visited { color: var(--muted); text-decoration: none; }
.repo-link:hover, .repo-link:focus-visible,
.row-icon-btn:hover, .row-icon-btn:focus-visible { color: var(--brand); background: #eef0f3; text-decoration: none; }
body.dark-theme .repo-link:hover, body.dark-theme .repo-link:focus-visible,
body.dark-theme .row-icon-btn:hover, body.dark-theme .row-icon-btn:focus-visible { background: #2a3039; }

/* ── Trailing row-action cluster (RowActions) ───────────────────────────────────────────────────
   Incident history then GitHub, pinned to the right edge of every board row. Slots are a FIXED width
   — never content-derived — so a measure with no repo (.row-actions-slot-empty holds the slot open)
   keeps its history icon on the same vertical line as every other row (axiom AC1). --rmx-actions is
   the matching trailing grid column on region-matrix rows; it is consumed by gridCols in
   region-matrix.jsx and must stay in sync with the cluster's own width. */
.row-actions {
    --row-action-slot: 22px; --row-action-gap: 4px;
    display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--row-action-gap); flex: none;
}
.row-actions > * { box-sizing: border-box; width: var(--row-action-slot); height: var(--row-action-slot); margin: 0; flex: none; }
.region-matrix-group { --rmx-actions: 48px; } /* 2 * --row-action-slot + --row-action-gap */

/* Card rows: status pill + actions grouped right, so the icons sit flush at the row's right edge —
   the same line the matrix rows' trailing actions column puts theirs on. */
.component-head-right { display: flex; align-items: center; gap: 12px; }

/* Affected-components control (incident create) */
.afflist { border: 1px solid var(--border); margin: 6px 0 16px; }
.afflist-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--border); background: #fcfcfd; }
.afflist-head .picker-label { font-weight: 600; font-size: 13px; }
.afflist-count { font-size: 12px; color: var(--muted); }
.afflist-body { max-height: 320px; overflow-y: auto; }
.aff-row { border-bottom: 1px solid var(--border); }
.aff-row:last-child { border-bottom: none; }
.aff-row.sel { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--sel-accent); }
.aff-main { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: none; border: none; cursor: pointer; text-align: left; font-size: 14px; font-weight: 400; }
.aff-main:hover { background: #fafbfc; }
.aff-row.sel .aff-main:hover { background: var(--sel-bg-hover); }
.aff-name { flex: 1; color: #344054; }
.aff-main .component-status { font-size: 12px; }
/* Match the eone-ui FormCheckbox look (same theme vars) so these read as real checkboxes. */
.aff-check { width: 18px; height: 18px; border-radius: 2px; border: 1px solid var(--pd-checkbox-unchecked-border-color-default, var(--border)); background: var(--pd-checkbox-unchecked-fill-default, transparent); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; }
.aff-check.on { background: var(--button-color-primary, var(--brand)); border-color: var(--button-color-primary, var(--brand)); }
.aff-regions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 14px; }
.aff-regions-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.aff-regions-hint { font-size: 11px; color: var(--muted); font-style: italic; }
.rgn-toggle { font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; }
.rgn-toggle.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Multi-region "current status" matrix (services × regions), CSS-grid accordion */
/* container context so the expanded-region breakpoints below track THIS group's width, not the viewport. */
.region-matrix-group { padding: 0; container: rmx / inline-size; }
.region-matrix-group .matrix-head { display: flex; align-items: center; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fcfcfd; }
.region-matrix-group .matrix-head .group-title { padding: 0; border: none; background: none; }

.rmx-headrow, .rmx-summary { display: grid; grid-template-columns: var(--rmx-cols); align-items: center; gap: 6px; }
.rmx-headrow { padding: 9px 20px; border-bottom: 1px solid var(--border); }
.rmx-svc-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.rmx-col-h { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; text-align: center; }

/* ── Sticky section headers ─────────────────────────────────────────────────────────────────────
   As the board scrolls, each group's header pins to the top of the .pd-home viewport so you can
   always read which section — and, for region matrices, which region columns — you're looking at;
   it releases once the whole group has scrolled past. Depends on .component-group using
   `overflow: clip` (see above): `overflow: hidden` would make the group its own scroll container
   and trap the sticky inside it. The day-detail popover / incident bar sit far above this z-index. */
.region-matrix-group .rmx-stickyhead,
.component-group.component-grid > .group-title,
.condensed-group .condensed-header {
    position: sticky; top: 0; z-index: 4;
}
/* Opaque backing so rows scroll cleanly under the pinned header (the matrix head rows are otherwise
   transparent). #fcfcfd matches the light header strip; .condensed-header already carries an opaque
   surface in both themes, and the dark overrides below match the group panel — so pinning is
   visually seamless (nothing appears to change until content scrolls beneath it). */
.region-matrix-group .rmx-stickyhead { background: #fcfcfd; }

.rmx-row { border-bottom: 1px solid var(--border); }
.rmx-row:last-child { border-bottom: none; }
.rmx-row > summary { list-style: none; cursor: pointer; padding: 13px 20px; }
.rmx-row > summary::-webkit-details-marker { display: none; }
.rmx-row > summary:hover { background: #fafbfc; }
.rmx-svc { display: inline-flex; align-items: center; gap: 8px; color: #344054; }
/* Caret is its own click target (it alone expands the row when selection mode is active). */
.rmx-caret { position: relative; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; border-radius: 3px; }
.rmx-caret::before { content: ""; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s; }
.rmx-caret:hover { background: rgba(0,0,0,.06); }
.rmx-row[open] > summary .rmx-caret::before { transform: translateY(-50%) rotate(90deg); }
.rmx-cell { text-align: center; }
.rmx-cell .region-dot { width: 11px; height: 11px; }
.rmx-cell .matrix-na { color: #d0d5dd; }
/* ── Flat measure row (FlatMeasureRow) ──────────────────────────────────────────────────────────
   A region-less measure inside a matrix. It IS a .rmx-row, so it inherits the row's height, flush
   background, borders, hover and selection for free — that inheritance is the whole point, and is
   what the old ComponentRow card (its own --card surface, border, radius and 14px bottom margin)
   broke by tearing a tall bright gap through the matrix. Only the bar cell is new here; anything
   added below that re-specifies background/height for .rmx-flat is probably a bug
   (FlatMeasureRow.axioms.md AC1).

   CASCADE HAZARD (this shipped broken once, see axioms AC6): every rule here that overrides one of
   .rmx-expand's own properties MUST be parent-qualified — `.rmx-flat > .rmx-flat-expand` (0,2,0), not
   a bare `.rmx-flat-expand` (0,1,0). A bare one ties with .rmx-expand and loses purely because
   .rmx-expand is declared later in this file, silently reverting the drawer to the region-card flex
   layout. Guard: Scripts/status/components/shared/check-axioms.mjs. */
.rmx-flat-bar { display: flex; align-items: center; min-width: 0; gap: 10px; margin-right: 30px;}
/* The .uptime wrapper carries top margin for the card layout; inline in a row it must not. */
.rmx-flat-bar .uptime { margin-top: 0; flex: 1; min-width: 0; }

/* Collapsed the span holds the trim bar; open it holds the status instead — the drawer below already
   carries the same 90 days full-height with its own axis, so keeping the trim copy would just draw the
   same data twice. Swapping to the status reproduces the head line the measure card used to show
   (name left, status right), now that the name lives in this summary. Only the bar's contents swap,
   never the span itself, so the grid keeps its area and the trailing actions can't jump sideways. */
.rmx-flat-status { display: none; }
.rmx-flat[open] > .rmx-summary .rmx-flat-bar .uptime { display: none; }
/* `flex`, not `inline-flex`: as a flex item of .rmx-flat-bar it blockifies to `flex` regardless, so
   saying inline-flex would just make the computed value disagree with the source. margin-left:auto
   pushes it to the span's right edge — which needs .rmx-flat-bar to actually BE a flex container. */
.rmx-flat[open] > .rmx-summary .rmx-flat-status { display: flex; margin-left: auto; }

/* Expanded drawer: just the full-height bar + its axis, flush with the row. .rmx-expand already gives
   transparent + the selection tint, so this only sheds the region-card flex-wrap layout. Parent-
   qualified per the cascade hazard above — do NOT flatten these to `.rmx-flat-expand`. */
/* Lead the drawer with 12px of PADDING, not the chart's own collapsing top margin. The full-height
   .uptime carries margin-top:12px (its card-layout spacing); against a zero-top-padding block that
   margin collapses THROUGH the drawer's top edge, opening the 12px ABOVE the drawer — a strip that
   shows the darker panel behind the row and reads as a seam between the summary and the chart on hover
   and when selected (both tint summary + drawer but not that strip). Moving the space into the drawer's
   own padding keeps the same gap but paints it with the drawer's background, so the summary and chart
   read as one continuous block. Zero the child margin so it doesn't add on top of the new padding. */
.rmx-flat > .rmx-flat-expand { display: block; padding: 12px 20px 16px 20px; }
.rmx-flat > .rmx-flat-expand .uptime { margin-top: 0; }

/* Flex (not grid) so a partial last row stretches to fill the width instead of leaving a gap for the
   missing 3rd chart. All spacing between charts — horizontal AND the row-wrap gutter — comes from the
   single --rmx-gap (never per-card margins, which would double up on wrap). The flex-basis derives its
   gutter allowance from that same var, so basis and gap can never drift out of sync. */
/* The expanded region detail shares the row's background (no distinct grey panel). */
.rmx-expand { --rmx-gap: 18px; padding: 16px 20px 20px 20px; background: transparent; display: flex; flex-wrap: wrap; gap: var(--rmx-gap); }
.rmx-expand > .rmx-region { flex: 1 1 calc((100% - 2 * var(--rmx-gap)) / 3); min-width: 240px; box-sizing: border-box; }
/* Breakpoints track the GROUP width (container query), not the viewport: 3/row wide, 2/row under
   1400px, 1/row (full width) under 800px. flex-grow fills any partial last row. */
@container rmx (max-width: 1400px) { .rmx-expand > .rmx-region { flex-basis: calc((100% - var(--rmx-gap)) / 2); } }
@container rmx (max-width: 800px) { .rmx-expand > .rmx-region { flex-basis: 100%; } }
.rmx-region-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.rmx-region-name { font-weight: 600; }
.rmx-region-status { color: var(--muted); margin-left: auto; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .rmx-caret::before { transition: none; } }

/* Incident-selection affordance (signed-in): whole-row click toggles selecting a service. */
.component-row.selectable { cursor: pointer; }
.component-row.selectable:hover { background: #fafbfc; }
.component-row.selected, .rmx-row.selected > summary { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--sel-accent); }
/* A selected + expanded row reads as one highlighted block: carry the selection tint into the drawer. */
.rmx-row.selected[open] > .rmx-expand { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--sel-accent); }

/* Keyboard focus on a row: a Popdock-accent ring (--sel-accent #5b5fc7 — the same accent selection
   uses), never the browser's bright-white default outline. On an expandable matrix row the focusable
   element is the <summary> (its top line only); wrap the whole <details> via :has() so an OPEN row
   reads as one focused block — summary + drawer — instead of a ring around only the top row. The bare
   summary rule is the graceful fallback where :has() is unsupported (the ring then hugs the summary,
   still in the accent, still not white). The ComponentRow card is itself the focusable element
   (tabIndex=0), so its ring wraps the whole card directly. Inset (-2px) so it reads inside the flush
   row/card edges rather than bleeding past the group panel. */
.rmx-row > summary:focus-visible { outline: 2px solid var(--sel-accent); outline-offset: -2px; }
.rmx-row:has(> summary:focus-visible) { outline: 2px solid var(--sel-accent); outline-offset: -2px; border-radius: var(--radius); }
.rmx-row:has(> summary:focus-visible) > summary { outline: none; }
.component-row.selectable:focus-visible { outline: 2px solid var(--sel-accent); outline-offset: -2px; }

/* ── Condensed group (Connectors): header + proportion bar + needs-attention + expander ── */
.condensed-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fcfcfd;
}
.condensed-title { font-size: 15px; font-weight: 600; margin: 0; }
.condensed-count { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.condensed-count strong { color: #101828; font-weight: 700; }
.condensed-count .status-dot.dot-ok { background: var(--ok); }
.condensed-count .status-dot.dot-warn { background: var(--degraded); }

/* Proportion bar: green operational majority + one slim segment per attention item. */
.condensed-bar { display: flex; gap: 2px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.condensed-bar .seg { height: 8px; border-radius: 2px; min-width: 3px; }
.condensed-bar .seg-ok { background: var(--ok); }
.condensed-bar .seg-degraded, .condensed-bar .seg-upstream { background: var(--degraded); }
.condensed-bar .seg-partial { background: var(--partial); }
.condensed-bar .seg-major { background: var(--major); }
.condensed-bar .seg-maintenance { background: var(--maintenance); }
.condensed-bar .seg-unknown { background: var(--unknown); }

.condensed-note { font-size: 13px; color: var(--muted); padding: 12px 20px 0; margin: 0; }
.condensed-note.all-ok { color: #2e7d4f; }
.condensed-more > summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: #475467; list-style: none;
    padding: 14px 20px; user-select: none; border-top: 1px solid var(--border);
}
.condensed-more > summary::-webkit-details-marker { display: none; }
.condensed-more > summary::before { content: "▸ "; color: var(--muted); }
.condensed-more[open] > summary::before { content: "▾ "; }
.condensed-more > summary:hover { color: #101828; }

/* ── Board legend (shown once at the bottom) ─────────────────────────────────── */
.status-legend {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; padding-top: 14px;
    border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.status-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.status-legend .legend-swatch { display: inline-block; width: 22px; height: 10px; border-radius: 2px; background: var(--unknown); }
.status-legend .legend-swatch.bar-green { background: var(--ok); }
.status-legend .legend-swatch.bar-amber { background: var(--degraded); }
.status-legend .legend-swatch.bar-orange { background: var(--partial); }
.status-legend .legend-swatch.bar-red { background: var(--major); }
.status-legend .legend-swatch.bar-nodata { background: #eaecf0; }
.status-legend .legend-swatch.bar-asserted {
    opacity: .55;
    background-image: repeating-linear-gradient(
        45deg, rgba(255,255,255,.65) 0, rgba(255,255,255,.65) 1px, transparent 1px, transparent 3px);
}

@media (prefers-reduced-motion: reduce) { .uptime-bars .bar { transition: none; } }

/* ── Subscribe ──────────────────────────────────────────────── */
.subscribe-section {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px; margin-top: 24px;
}
.subscribe-section h2 { font-size: 17px; margin-bottom: 4px; }
.subscribe-form { display: flex; gap: 10px; margin-top: 12px; max-width: 460px; }
/* Public subscribe field — a raw <input> (not an eone-ui component), so it needs the Popdock field
   chrome painted here, with fallbacks to the board's own tokens so it renders on the standalone public
   page too. The admin forms use eone-ui/forms components, which bring their OWN field chrome via the
   popdock-themes tokens; styling their internal <input>/<select>/<textarea> here would paint a second
   border/background on top of eone-ui's (the fields looked doubled), so they are deliberately NOT
   targeted — eone-ui renders them exactly like Popdock. */
.subscribe-form input {
    outline: none;
    border: thin solid var(--border-color, var(--border));
    border-radius: var(--border-radius, 2px);
    background: var(--control-background-color, var(--card));
    color: var(--text-color, var(--text));
    transition: border-color .12s, box-shadow .12s;
}
.subscribe-form input:hover { border-color: var(--primary-color, var(--brand)); }
.subscribe-form input:focus {
    border-color: var(--primary-color, var(--brand));
    box-shadow: 0 0 0 1px var(--primary-color, var(--brand));
}
/* --card (not the shared --control-background-color) so the field reads as a distinct control: in
   dark theme it sits one step LIGHTER (#313131) than the #181818 subscribe section — a lighter field
   on a darker panel, matching Popdock's form fields — instead of blending into the section. */
.subscribe-form input { flex: 1; height: 42px; padding: 0 12px; font-size: 14px; background: var(--card); }
.subscribe-hint { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Autofilled subscribe field: the browser repaints it with a light background + dark text that breaks
   the dark theme (the box showed as white). Pin the field's own surface with an inset shadow and keep
   the themed text colour. */
.subscribe-form input:-webkit-autofill,
.subscribe-form input:-webkit-autofill:hover,
.subscribe-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color, var(--text));
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
    caret-color: var(--text-color, var(--text));
}

/* ── History ────────────────────────────────────────────────── */
.history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.history-head h1 { font-size: 30px; font-weight: 700; color: var(--text); }
.history-day { margin-bottom: 26px; }
.history-date { font-size: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); margin-bottom: 12px; }
.no-incidents { color: var(--muted); font-size: 14px; }
.history-incident { margin-bottom: 18px; }
.history-incident-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.history-incident-head .incident-title { margin-bottom: 0; flex: 1 1 auto; }
.incident-title { font-size: 16px; margin-bottom: 8px; }
.impact-major { color: var(--major); }
.impact-partial { color: var(--partial); }
.impact-degraded { color: #b58800; }
.impact-ok { color: var(--text); }
.badge-impact { text-transform: capitalize; }
.badge-impact.impact-major { background: #fde8e7; color: #b42318; }
.badge-impact.impact-partial { background: #fff4e0; color: #b54708; }
.badge-impact.impact-degraded { background: #fff8e6; color: #8a6d00; }
.badge-impact.impact-ok { background: #eef0f3; color: #475467; }
.history-update { margin: 6px 0; padding-left: 14px; border-left: 2px solid var(--border); }
.update-label { font-weight: 700; margin-right: 6px; }
.update-time { color: var(--muted); font-size: 12px; margin-left: 8px; }
.history-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; font-size: 14px; color: var(--muted); }
.loading { color: var(--muted); padding: 40px 0; text-align: center; }

/* ── Scheduled maintenance ──────────────────────────────────── */
.maintenance-window { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.maintenance-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.maintenance-title { font-size: 16px; font-weight: 700; color: var(--text); }
.maintenance-when { color: var(--muted); font-size: 13px; margin-top: 4px; }
.maintenance-body { margin-top: 10px; color: var(--text); font-size: 14px; }
.maintenance-badge { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.maintenance-badge.maintenance-in_progress { color: #b58800; border-color: #b58800; }

/* ── Centered (login) ───────────────────────────────────────── */
.centered-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.centered-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 36px; width: 100%; max-width: 400px; }
.login h1 { font-size: 22px; margin: 16px 0 8px; }
.login p { color: var(--muted); margin: 8px 0 18px; font-size: 14px; }
.login .dev-note { background: #fff8e6; border: 1px solid #ffe7a3; color: #7a5b00; padding: 10px 12px; border-radius: 8px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.login-back { margin-top: 20px; text-align: center; }

/* ── Admin ──────────────────────────────────────────────────── */
.page-admin { display: flex; min-height: 100vh; align-items: flex-start; }
/* Sticky, viewport-tall sidebar so the nav + user/sign-out stay visible while the main content
   scrolls (without it the column stretches to the page height and the footer falls off-screen). */
.admin-sidebar { width: 230px; background: #0b0c0e; color: #cdd5e4; display: flex; flex-direction: column; padding: 18px 14px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-sidebar nav { flex: 1 1 auto; }
.admin-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: #fff; font-weight: 600; padding: 8px 8px 34px; text-decoration: none; }
.admin-brand:hover { text-decoration: none; opacity: .9; }
.brand-logo.logo-light { color: #fff; }                 /* white wordmark on the black sidebar */
.admin-brand .brand-logo { height: 24px; width: auto; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand .brand-logo { height: 22px; width: auto; color: var(--text); }
.admin-nav-link { display: block; padding: 9px 12px; border-radius: 7px; color: #cdd5e4; font-size: 14px; margin-bottom: 2px; }
.admin-nav-link:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.admin-nav-link.active { background: rgba(255,255,255,.16); color: #fff; }
.admin-sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.admin-sidebar-footer a { color: #cdd5e4; display: block; margin-bottom: 10px; }
.admin-user { color: #fff; margin-bottom: 10px; font-size: 13px; }
.admin-main { flex: 1; padding: 28px 34px; max-width: 1100px; }
/* Admin pages now render directly in the Popdock shell (no AdminLayout .admin-main wrapper),
   so the padding/max-width that used to come from .admin-main lives here instead. */
/* .pd-setup-page is a fixed-height (100vh - header) clip viewport with overflow:hidden — the admin
   wrapper is its sole child here (the tab bar is hidden on /admin), so it must own its scroll or the
   content runs off-page unscrollable. The wrapper is a FULL-WIDTH scroller (scrollbar at the window
   edge); .eone-status-admin-content centers the page at a readable max-width inside it (previously the
   wrapper itself carried max-width, which left the scrollbar stranded mid-screen). */
.eone-status-admin { height: 100%; overflow-y: auto; box-sizing: border-box; }
.eone-status-admin-content { max-width: 1100px; margin: 0 auto; padding: 28px 34px; }
.admin-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-page-head h1 { font-size: 24px; }
.admin-subhead { font-size: 16px; margin: 28px 0 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; }
.stat-num { font-size: 28px; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 13px; }
.status-summary { display: flex; flex-wrap: wrap; gap: 14px; }

/* Dashboard "needs attention" groups (Outages / Degraded) reuse the public board's group cards. */
.dashboard-attention { margin-top: 28px; }
.dashboard-group-name { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 10px; }
.dashboard-attention .condensed-note.all-ok { padding: 16px 20px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; }
/* The admin forms use eone-ui/forms components — their labels and fields carry their own Popdock
   styling, so no .form-card label / input / select / textarea overrides here (they would fight the
   component CSS). .form-row just lays the eone-ui fields out side by side. */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.checkbox { display: flex !important; align-items: center; gap: 8px; }
.checkbox input { width: auto !important; margin: 0 !important; }

.component-picker { margin: 12px 0; }
.picker-label { font-size: 14px; font-weight: 500; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.picker-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; }

.data-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); background: #fcfcfd; }
.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
/* Action-cell buttons sit in a row (eone-ui Button/RowButtonDanger would otherwise stack). */
.row-actions { display: flex; align-items: center; gap: 6px; }
/* Slug shown under the component name only when it differs from the name (see components-admin.jsx). */
.component-slug { font-size: 12px; margin-top: 2px; }
/* Long monitor targets (URLs) truncate with an ellipsis instead of stretching the table;
   full value is available on hover (title attr). */
.col-target { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The backfill day count is an eone-ui FormNumber (width set via its Style prop) — no inner-input override. */
.mono, .err { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }
.err { color: var(--muted); }
.muted { color: var(--muted); font-size: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: #eef0f3; color: #475467; font-weight: 500; }
.badge-ok { background: #e6f9ee; color: #137a3b; }
.badge-bad { background: #fde8e7; color: #b42318; }
.badge-investigating { background: #fde8e7; color: #b42318; }
.badge-identified { background: #fff4e0; color: #b54708; }
.badge-monitoring { background: #fff8e6; color: #8a6d00; }
.badge-resolved { background: #e6f9ee; color: #137a3b; }
.badge-role-admin { background: #ede9fe; color: #5b21b6; }
.badge-role-editor { background: #e0f2fe; color: #075985; }
.badge-role-viewer { background: #eef0f3; color: #475467; }
.badge-internal { background: #0b0c0e; color: #fff; font-size: 11px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }

/* The "internal" marker — an icon-only lock chip; the word lives in its tooltip / accessible name.
   Its OWN class on purpose: .badge-internal above is independently reused by services-repos-admin for
   a text "needs repo" chip, so styling the lock through it would silently turn that into a lock too
   (InternalBadge.axioms.md AC3). Sized to sit inline with row text without changing the line box. */
.internal-lock {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 17px; height: 17px; padding: 0; margin-left: 8px;
    border-radius: 20px; background: #0b0c0e; color: #fff;
    font-size: 9px; line-height: 0; vertical-align: middle;
}
body.dark-theme .internal-lock { background: #2a3039; color: #c7cdd6; }
/* .rmx-svc is a flex row with its own 8px gap — the chip's margin would double it to 16px. */
.rmx-svc .internal-lock { margin-left: 0; }
/* Floating "you're signed in" banner: fixed, centred over the app header (not in the board flow),
   dismissible via the X (persisted to local storage). z-index clears the popdock header. */
.signed-in-note {
    position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1200;
    display: inline-flex; align-items: center; gap: 10px;
    max-width: min(92vw, 760px);
    background: #f3f0ff; border: 1px solid #d9d2ff; color: #4a3a8a;
    padding: 7px 8px 7px 14px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.signed-in-note-text { min-width: 0; }
.signed-in-note-close {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer;
    background: rgba(0,0,0,.08); color: inherit; font-size: 13px; line-height: 0;
}
.signed-in-note-close:hover { background: rgba(0,0,0,.16); }

/* ── Incident selection (signed-in): row/region checkboxes + floating action bar ─────── */
.inc-select { accent-color: #5b5fc7; cursor: pointer; margin-right: 6px; vertical-align: middle; }
.rmx-region-head .inc-select { margin-right: 6px; }
.incident-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    background: #101828; color: #fff; padding: 9px 12px 9px 18px; border-radius: 999px;
    box-shadow: 0 10px 30px rgba(16,24,40,.35);
}
.incident-bar[hidden] { display: none; }
.incident-bar-count { font-size: 14px; color: #e5e7eb; }
.incident-bar-count strong { color: #fff; font-size: 15px; }
.incident-bar .incident-bar-clear { background: transparent; color: #cbd5e1; border: 1px solid #475467; padding: 6px 12px; }
.incident-bar .incident-bar-clear:hover { background: #1d2939; color: #fff; }
.incident-bar .btn-primary { padding: 7px 16px; }

/* Teams chat button (Teams brand purple) */
.btn-teams { display: inline-flex; align-items: center; gap: 6px; background: #5b5fc7; color: #fff; border-color: #5b5fc7; }
.btn-teams:hover { background: #4f52b5; text-decoration: none; }
/* Icon-only Teams action (Team table): just the glyph, tooltip via title. */
.btn-teams-icon { padding: 5px 8px; }
.teams-glyph { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: #fff; color: #5b5fc7; font-weight: 700; font-size: 11px; line-height: 1; }

.incident-card-head { display: flex; align-items: center; gap: 10px; }
.incident-card-head h3 { font-size: 16px; }
.incident-meta { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.update-list { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.update-list li { margin-bottom: 4px; }
/* The update row holds eone-ui FormSelect + FormString (they carry their own field chrome and are
   sized via their Style props), so no inner input/select overrides here. */
.update-form { display: flex; gap: 8px; align-items: center; }
.flash { background: #e6f4ff; border: 1px solid #b3ddff; color: #0b5394; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }

@media (max-width: 720px) {
    .page-admin { flex-direction: column; align-items: stretch; }
    .admin-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; height: auto; overflow: visible; }
    .admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
    .admin-sidebar-footer { width: 100%; }
    .subscribe-form { flex-direction: column; }
}

/* Header actions cluster (theme toggle + subscribe) */
.header-actions { display: flex; align-items: center; gap: 12px; }
.admin-nav-icon { margin-right: 9px; opacity: .85; width: 16px; }
.admin-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
/* Markdown bodies: keep tight so inline use doesn't add stray margins. */
.incident-body p:first-child, .incident-body p:last-child { margin: 0; }
.update-body p { margin: 0; display: inline; }

/* ── Dark mode ───────────────────────────────────────────────────────────────────────────────
   popdock-dark.css handles the eone-ui component tokens under body.dark-theme; here we re-point our
   own bespoke board/admin tokens + the handful of light surfaces baked into the rules above. */
body.dark-theme {
    /* Three-step popdock neutral scale, matching Popdock.Web's dashboard: tab bar =
       --surface-base-default (#181818), the dashboard/page = --surface-base-subtle
       (neutral-850 #2b2b2b, i.e. --pd-dashboard-background), cards = --surface-base-light
       (neutral-800 #313131). So the page is the dashboard color, cards sit one step lighter. */
    --bg: var(--surface-base-subtle, #2b2b2b);   /* page background = popdock dashboard color */
    --card: var(--surface-base-light, #313131);  /* group / row card surface */
    --border: #2b2b2b;      /* subtle neutral divider / card outline (neutral-850) */
    --text: #e6e9ee;
    --muted: #838383;       /* neutral grey — no blue tint (was #9aa4b2) */
    --brand: #6ea8ff;
    --radius: 4px;          /* match popdock --border-radius */
    /* Operational green: brighter/more prominent than before so the uptime bars read as the
       primary signal, while the axis text below fades back (see .uptime-legend / .uptime-pct). */
    --ok: #4e9d6b;
    --shadow: none;
}
body.dark-theme { background: var(--bg); color: var(--text); }

/* ── Groups are filled panels, like popdock dashboard tiles: --surface-elevated-default (#181818),
   one step DARKER than the #2b2b2b page, so each group reads as a recessed panel. The group title
   is the panel's header; measure cards sit one step lighter (--card #313131) inside the panel. ── */
body.dark-theme .component-group { background: var(--surface-elevated-default, #181818); border: none; box-shadow: none; overflow: clip; margin-bottom: 16px; padding: 4px 20px 20px; }
body.dark-theme .group-title { background: transparent; border-bottom: none; padding: 16px 2px 12px; font-size: 18px; font-weight: 600; color: #fff; }
body.dark-theme .component-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; padding: 16px 20px; }
body.dark-theme .component-row:last-child { margin-bottom: 20px; }
/* In the wrap-up-to-3 grid the gap owns the spacing — drop the stacked card margins. */
body.dark-theme .component-grid .component-row,
body.dark-theme .component-grid .component-row:last-child { margin-bottom: 0; }
/* Uptime axis % fades back (neutral grey, no blue) so the bars are the primary signal. */
body.dark-theme .uptime-pct { color: #9a9a9a; }
body.dark-theme .uptime-bars .bar-green { background: var(--ok); }
body.dark-theme .status-pill.status-ok { background: var(--ok); color: #fff; }
body.dark-theme .component-status.status-ok { color: var(--ok); }
body.dark-theme .component-status.status-ok .status-dot { background: var(--ok); }

/* Regional matrix (Platform Services, Connectors): the #181818 group panel (inherited above), with
   header + rows sharing that surface and divided by the subtle --border separator; the panel keeps
   its own internal padding (no group padding), expanded region drawer slightly recessed. */
body.dark-theme .region-matrix-group { padding: 0; }
body.dark-theme .matrix-head,
body.dark-theme .rmx-headrow { background: transparent; border-bottom-color: var(--border); }
/* Sticky headers need an opaque backing in dark too (the head rows above are transparent). Match the
   #181818 group panel so pinning is seamless while occluding the rows that scroll beneath. */
body.dark-theme .region-matrix-group .rmx-stickyhead,
body.dark-theme .component-group.component-grid > .group-title { background: var(--surface-elevated-default, #181818); }
body.dark-theme .rmx-row { border-bottom-color: var(--border); }
/* The opened region drawer sits flush with the panel — the same dark surface as a collapsed
   (unhighlighted) row — rather than a lightened tint. It only lifts to the hover surface when the
   open row is hovered (see the hover block below), matching how every other row behaves. */
body.dark-theme .rmx-expand { background: transparent; }
/* Day-detail popover floats over cards, so — unlike the flush dark cards (--shadow:none) — it needs a
   visible edge + elevation to read as a distinct card surface. The whole popover (interior + its thick
   edge) is the darker elevated panel color, so title/date/status/uptime all sit on one solid dark field. */
body.dark-theme .day-detail {
    background: var(--surface-elevated-default, #181818);
    border-color: var(--surface-elevated-default, #181818);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
/* Each expanded region chart is a card matching the Public Web usage charts (--card surface). */
body.dark-theme .rmx-region { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
/* Condensed connector group manages its own internal padding — keep the panel flush. */
body.dark-theme .condensed-group { padding: 0; }

/* Neutral subtle surfaces for the admin/condensed chrome (were a blue-ish #1f242d). */
body.dark-theme .condensed-header,
body.dark-theme .afflist-head,
body.dark-theme .region-chip,
body.dark-theme .picker-grid,
body.dark-theme .rgn-toggle { background: #2b2b2b; }

/* Admin data tables: the dark Popdock/eone-ui table surface — the recessed #181818 elevated
   panel (same as the status-board group panels), transparent header, subtle row dividers. */
body.dark-theme .data-table { background: var(--surface-elevated-default, #181818); border: none; box-shadow: none; }
body.dark-theme .data-table th { background: transparent; color: var(--muted); border-bottom-color: var(--table-row-border-color, #2b2b2b); }
body.dark-theme .data-table td { border-bottom-color: var(--table-row-border-color, #2b2b2b); }

/* Hover / selected use popdock's neutral surfaces (were blue-ish #1c2129 / #20263a). */
body.dark-theme .rmx-row > summary:hover,
body.dark-theme .component-row.selectable:hover,
body.dark-theme .aff-main:hover { background: var(--surface-base-hover, #383838); }
/* An opened row highlights as a whole: hovering anywhere in it lifts both the summary and the
   expanded drawer to the hover surface (the drawer is otherwise flush/dark, per .rmx-expand above). */
body.dark-theme .rmx-row[open]:hover > .rmx-summary,
body.dark-theme .rmx-row[open]:hover > .rmx-expand { background: var(--surface-base-hover, #383838); }
/* Selected-row highlight is a theme-agnostic translucent accent (see --sel-bg); no dark-theme
   override needed — the base rule composites correctly over the dark palette too. */

/* Native selection checkboxes (.inc-select) render in the browser's LIGHT scheme by default — no
   color-scheme is declared anywhere — so on the dark board an unchecked box paints as a jarring
   bright-white square that reads as "not a checkbox", and its checked state is easy to miss. Opt the
   control into the dark scheme in dark theme: unchecked becomes a proper dark empty box, and the
   checked / indeterminate states show the accent (accent-color: #5b5fc7 from the base .inc-select
   rule) clearly. Scoped to dark theme so the light board keeps its normal light-scheme checkbox. */
body.dark-theme .inc-select { color-scheme: dark; }

/* No-data bars + badges. Neutral grey (#494949) — no blue tint, so empty days don't read as purple. */
body.dark-theme .uptime-bars .bar-nodata,
body.dark-theme .status-legend .legend-swatch.bar-nodata { background: #494949; }
body.dark-theme .uptime-chart .bar-nodata,
body.dark-theme .day-detail-strip .slice-nodata { fill: #494949; }
body.dark-theme .badge { background: #2a3039; color: #c7cdd6; }
/* Dashboard stat tiles sit directly on the #2b2b2b page, where the default --border (#2b2b2b) is
   invisible — give them a lighter outline so the grid gap reads and each tile is a distinct widget. */
body.dark-theme .stat-card { border-color: #3d3d3d; }
body.dark-theme .copy-btn:hover { background: #2a3039; }

/* Mid-tone text baked into a few rules. */
body.dark-theme .incident-body,
body.dark-theme .aff-name,
body.dark-theme .rmx-svc { color: #c7cdd6; }
body.dark-theme .condensed-count strong { color: #f0f2f5; }

/* Tinted callouts. */
body.dark-theme .maintenance-callout { background: #16233f; border-color: #294a86; }
body.dark-theme .maintenance-callout h3, body.dark-theme .maint-status { color: #8ab4ff; }
body.dark-theme .signed-in-note { background: #241f3a; border-color: #3a3170; color: #c3b9ff; }
body.dark-theme .signed-in-note-close { background: rgba(255,255,255,.1); }
body.dark-theme .signed-in-note-close:hover { background: rgba(255,255,255,.2); }
body.dark-theme .flash { background: #11314a; border-color: #1f4d70; color: #add4f5; }
body.dark-theme .login .dev-note { background: #2a2410; border-color: #574b1a; color: #e3cf86; }

/* Subscribe section: match the group panels (one step darker than the page, no border/shadow) —
   .component-group uses --surface-elevated-default in dark. */
body.dark-theme .subscribe-section { background: var(--surface-elevated-default, #181818); border: none; box-shadow: none; }

/* Admin form fields are eone-ui/forms components: their surface, border, hover and focus all come
   from the popdock-themes control tokens (the same ones Popdock uses), so there are no field
   background/border overrides here — overriding them is exactly what made the fields look wrong. */

/* Plain buttons inherit the theme button variables (set per light/dark by the loaded
   Popdock theme), so no dark-theme colour overrides are needed here. */

/* ── App-header identity slot (AX-UI-APPHEADER-IDENTITY-SLOT) ─────────────────────────────────────
   The signed-in presentation handed to eone-ui AppHeader's IdentitySlot: the Entra avatar plus the
   user's name and email, sitting in the header's right cluster next to the "Eone Solutions" org
   label. Colours inherit the header's --link-color so it matches the account-name button. The
   signed-out slot reuses eone-ui's Button (.eone-ui-app-header-section-container) for the Subscribe
   CTA, so it needs no styling here. */
.status-header-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px;
    color: var(--link-color);
    max-width: 320px;
}

.status-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.status-header-userinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    min-width: 0;
}

.status-header-username {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-header-email {
    font-size: 11px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Admin console chrome (Leptos port) ───────────────────────────────────── */
.admin-top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.admin-top-nav .admin-nav-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--text, #1a1a1a);
    font-size: 13px;
    margin-bottom: 0;
}
.admin-top-nav .admin-nav-link:hover {
    background: rgba(0,0,0,.05);
    text-decoration: none;
}
.admin-top-nav .admin-nav-link.active {
    background: rgba(0,0,0,.08);
    font-weight: 600;
}
.admin-nav-user { margin-left: auto; font-size: 12px; }

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
}
.admin-modal-wide {
    max-width: 720px;
    width: min(720px, 96vw);
}
.admin-modal {
    background: var(--card, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
    width: min(720px, 100%);
    max-width: 100%;
}
.admin-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.admin-modal-head h2 { margin: 0; font-size: 18px; }
.admin-modal-body { padding: 16px 20px; }
.admin-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

.form-field { display: block; margin-bottom: 12px; }
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field select,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 13px;
}
.form-row { display: grid; gap: 12px; margin-bottom: 8px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 720px) {
    .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
}

.aff-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.aff-row { border-bottom: 1px solid var(--border); }
.aff-row.sel { background: #f5f8ff; }
.aff-check {
    width: 18px; height: 18px; border: 1px solid var(--border);
    border-radius: 4px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 12px; color: transparent;
}
.aff-check.on { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; }
.aff-name { flex: 1; font-weight: 500; }
.aff-regions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 0 14px 10px 42px;
}
.aff-regions-label { font-size: 11px; color: var(--muted); }
.aff-regions-hint { font-size: 11px; color: var(--muted); }

.centered-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f4f5f7;
}
.centered-card.login {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 420px;
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.08));
}
.login-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.login-back { margin-top: 16px; }