/*
 * ACP component styles — utility classes that pair with the Acp*.razor layout components.
 * Every color, spacing, and font value here MUST resolve to a token from acp-tokens.css.
 * No literal hex values in this file.
 */

/* ============================================================
 * BASE — the page-level ground and typography
 * ============================================================ */
.acp-page {
    background: var(--acp-bg);
    color: var(--acp-ink);
    font-family: var(--acp-font-sans);
    font-size: var(--acp-fs-13);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * SHELL — top bar + sidebar + main grid used by AcpAppShell
 * ============================================================ */
.acp-shell {
    display: grid;
    grid-template-rows: var(--acp-topbar-h) 1fr;
    min-height: 100vh;
    background: var(--acp-bg);
    color: var(--acp-ink);
    font-family: var(--acp-font-sans);
    font-size: var(--acp-fs-13);
    line-height: 1.5;
}
.acp-shell-body {
    display: grid;
    grid-template-columns: var(--acp-sidebar-w) 1fr;
    min-height: 0;
    overflow: hidden;
}
.acp-shell-main {
    overflow: auto;
    background: var(--acp-bg);
    min-width: 0;
}

/* --- Top bar --- */
.acp-topbar {
    display: flex;
    align-items: center;
    gap: var(--acp-space-5);
    padding: 0 var(--acp-space-6);
    background: var(--acp-card);
    border-bottom: 1px solid var(--acp-line);
    z-index: var(--acp-z-topbar);
}
.acp-topbar-brand {
    display: flex; align-items: center; gap: var(--acp-space-2);
    font-weight: 600; font-size: var(--acp-fs-14); letter-spacing: -0.01em;
}
.acp-topbar-brand-mark {
    width: 26px; height: 26px; background: var(--acp-primary);
    color: var(--acp-primary-on); border-radius: var(--acp-radius);
    display: grid; place-items: center;
    font-family: var(--acp-font-mono); font-weight: 600; font-size: 13px;
}
.acp-topbar-brand small {
    color: var(--acp-muted); font-weight: 500; font-size: 11px; margin-left: 8px;
    font-family: var(--acp-font-mono); letter-spacing: 0.02em;
}
.acp-topbar-search {
    flex: 1; max-width: 420px; position: relative;
}
.acp-topbar-search input {
    width: 100%; padding: 7px 10px 7px 30px; font-size: var(--acp-fs-12);
    background: var(--acp-surface); border: 1px solid transparent; color: var(--acp-ink);
    border-radius: var(--acp-radius); font-family: var(--acp-font-sans);
}
.acp-topbar-search input:focus {
    background: var(--acp-card); border-color: var(--acp-primary); outline: none;
}
.acp-topbar-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; color: var(--acp-muted);
}
.acp-topbar-actions { display: flex; align-items: center; gap: var(--acp-space-1); margin-left: auto; }

/* --- Sidebar --- */
.acp-sidebar {
    background: var(--acp-bg);
    border-right: 1px solid var(--acp-line);
    padding: var(--acp-space-3) 0;
    overflow-y: auto;
}
.acp-sidebar-section { padding: 2px 0; }
/* Section title is a full-width button. Reset browser button chrome so it looks
   like the original static heading, then add hover + chevron affordance. */
.acp-sidebar-section-title {
    display: flex; align-items: center;
    /* Bounded box, inset from the sidebar's right edge more than items are
       so the chevron column sits close to the labels (not floating out at
       the far right). Left inset matches item rows (6px). Right inset is
       intentionally larger (36px) — that's what pulls the whole title block
       toward the left and gives the chevrons a tight, obvious column. */
    width: calc(100% - 42px);
    margin: 2px 36px 2px 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: var(--acp-radius-sm);
    text-align: left;
    cursor: pointer;
    /* Match the sub-section titles' family/weight. */
    font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--acp-ink); font-weight: 700;
    transition: background 0.12s ease, color 0.12s ease;
}
.acp-sidebar-section-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Pull the label to the very left of the button and let the chevron
       take the far right via margin-left: auto — every chevron ends up
       at exactly the same X (button-right - padding-right = 14px inset). */
}
.acp-sidebar-section-title .acp-sidebar-chevron {
    flex-shrink: 0;
    margin-left: auto;
}
.acp-sidebar-section-title:hover {
    background: var(--acp-surface);
}
.acp-sidebar-section-title:focus-visible {
    outline: 2px solid var(--acp-primary);
    outline-offset: -2px;
}
.acp-sidebar-section-title:hover {
    background: var(--acp-surface);
    color: var(--acp-ink);
}
.acp-sidebar-section-title:focus-visible {
    outline: 2px solid var(--acp-primary);
    outline-offset: -2px;
}
.acp-sidebar-section-label { flex: 1; }
.acp-sidebar-chevron {
    width: 12px; height: 12px;
    opacity: 0.6;
    transition: transform 0.15s ease;
    /* Collapsed default: chevron points down (▼). */
    transform: rotate(0deg);
}
.acp-sidebar-section.expanded .acp-sidebar-chevron {
    /* Expanded: chevron points up (▲) to indicate "click to close". */
    transform: rotate(-180deg);
    opacity: 0.9;
}
.acp-sidebar-section.expanded .acp-sidebar-section-title {
    color: var(--acp-ink);
    background: var(--acp-surface);
}
.acp-sidebar-section-body {
    padding: 4px 0 6px 0;
}

/* --- Sub-section (nested under an expanded top-level section) --- */
/* Rendered indented so the hierarchy reads at a glance, with a lighter title
   than the top-level section and its own local expand/collapse state. */
.acp-sidebar-subsection {
    margin: 2px 6px 2px 12px;
    border-left: 1px solid var(--acp-line);
}
.acp-sidebar-subsection-title {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 6px 10px 6px 14px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    /* Match the visual weight of plain AcpSidebarItem entries (see
       .acp-sidebar-item: font-size 13px, font-weight 500, color --acp-ink-2)
       so sub-sections read as sibling navigation rows rather than competing
       with the top-level SECTION headers above them. */
    font-size: var(--acp-fs-13);
    color: var(--acp-ink-2);
    font-weight: 500;
    letter-spacing: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.acp-sidebar-subsection-title:hover {
    background: var(--acp-surface);
    color: var(--acp-ink);
}
.acp-sidebar-subsection-title:focus-visible {
    outline: 2px solid var(--acp-primary);
    outline-offset: -2px;
}
.acp-sidebar-subsection.expanded .acp-sidebar-subsection-title {
    color: var(--acp-ink);
}
.acp-sidebar-subsection-label { flex: 1; }
.acp-sidebar-subsection .acp-sidebar-chevron {
    /* Sub-section chevrons are slightly smaller than top-level ones. */
    width: 10px; height: 10px;
}
.acp-sidebar-subsection.expanded .acp-sidebar-chevron {
    transform: rotate(-180deg);
}
.acp-sidebar-subsection-body {
    padding: 2px 0 4px 0;
}
/* Items inside a sub-section indent slightly for the hierarchy read. */
.acp-sidebar-subsection-body .acp-sidebar-item {
    padding-left: 18px;
}
.acp-sidebar-item {
    display: flex; align-items: center; gap: var(--acp-space-3);
    padding: 6px 14px; margin: 1px 6px;
    font-size: var(--acp-fs-13); color: var(--acp-ink-2); font-weight: 500;
    cursor: pointer; border-radius: var(--acp-radius-sm);
    text-decoration: none;
}
.acp-sidebar-item svg { width: 15px; height: 15px; opacity: 0.75; flex-shrink: 0; }
.acp-sidebar-item .acp-sidebar-count {
    margin-left: auto; font-family: var(--acp-font-mono);
    font-size: 10.5px; color: var(--acp-muted); font-weight: 500;
}
.acp-sidebar-item:hover { background: var(--acp-surface); color: var(--acp-ink); }
.acp-sidebar-item.active {
    background: var(--acp-primary-soft); color: var(--acp-primary); font-weight: 600;
}
.acp-sidebar-item.active svg { color: var(--acp-primary); opacity: 1; }
.acp-sidebar-item.active .acp-sidebar-count { color: var(--acp-primary); }

/* ============================================================
 * DETAIL WORKSPACE — list rail + main + activity rail
 * ============================================================ */
.acp-detail {
    display: grid;
    grid-template-columns: var(--acp-list-rail-w) 1fr;
    min-height: 0; height: 100%;
}
.acp-list-rail {
    border-right: 1px solid var(--acp-line);
    background: var(--acp-card);
    display: flex; flex-direction: column; min-width: 0;
}
.acp-list-rail-head {
    padding: 12px var(--acp-space-4);
    border-bottom: 1px solid var(--acp-line);
    background: var(--acp-card);
    position: sticky; top: 0; z-index: var(--acp-z-sticky);
    display: flex; flex-direction: column; gap: 8px;
}
.acp-list-rail-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
    color: var(--acp-ink);
}
.acp-list-rail-count {
    font-family: var(--acp-font-mono); font-size: 12px; font-weight: 600;
    color: var(--acp-muted);
    padding: 2px 10px; border-radius: 999px; background: var(--acp-surface);
}
.acp-list-rail-body { overflow-y: auto; flex: 1; padding: 4px 0; }

/* --- Residents list uses TelerikGrid but renders .acp-list-item inside each row.
       Strip the grid chrome so the row template flows edge-to-edge, and route
       the "selected" background through design tokens instead of the hard-coded
       blues in the legacy app.css. --- */
.acp-resident-grid.k-grid,
.acp-resident-grid .k-grid-container,
.acp-resident-grid .k-grid-content { background: var(--acp-card); }
.acp-resident-grid .k-grid-header { display: none !important; }
.acp-resident-grid .k-grid-content td.k-table-td,
.acp-resident-grid .k-grid-content td {
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
}
.acp-resident-grid .k-grid-content .k-table-row,
.acp-resident-grid .k-grid-content .k-table-row:hover {
    background: transparent !important;
    color: inherit !important;
    font-weight: inherit !important;
}
.acp-resident-grid .k-grid-content .k-table-row.k-selected,
.acp-resident-grid .k-grid-content .k-table-row.k-selected:hover,
.acp-resident-grid .k-grid-content .k-table-row.k-selected > td {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-weight: inherit !important;
}

.acp-detail-main { overflow-y: auto; }

/* Two-column split inside the main content: cards column + activity rail */
.acp-workspace {
    padding: var(--acp-space-5) var(--acp-space-7) 40px;
    display: grid;
    grid-template-columns: 1fr var(--acp-activity-w);
    gap: var(--acp-space-4);
    align-items: start;
}
.acp-workspace-single { grid-template-columns: 1fr; }

/* ============================================================
 * HERO BAND — the resident/entity header
 * ============================================================ */
.acp-hero {
    padding: var(--acp-space-5) var(--acp-space-7);
    background: var(--acp-card);
    border-bottom: 1px solid var(--acp-line);
}
/* Hero + photo composition — photo on the LEFT (legacy .frm:4592 picpatient sits at
   the top-left of the identity band in the desktop form). Grid so the hero fills the
   remaining space and the photo stays a fixed width tile. */
.acp-hero-with-photo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--acp-space-4);
    align-items: start;
    background: var(--acp-card);
    border-bottom: 1px solid var(--acp-line);
    padding: var(--acp-space-4) var(--acp-space-5) var(--acp-space-4) var(--acp-space-7);
}
.acp-hero-with-photo > .acp-hero {
    padding: 0;
    border-bottom: none;
    background: transparent;
    min-width: 0;
}
.acp-hero-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--acp-space-5); margin-bottom: var(--acp-space-3);
}
.acp-hero-name-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.acp-hero-title {
    font-size: 24px; font-weight: 700;
    letter-spacing: -0.02em; margin: 0;
    color: var(--acp-ink);
}
.acp-hero-num {
    font-family: var(--acp-font-mono); font-size: 13px; color: var(--acp-muted);
    background: var(--acp-surface); padding: 2px 8px; border-radius: var(--acp-radius-sm);
}
.acp-hero-meta {
    display: flex; gap: 22px; font-size: var(--acp-fs-12);
    color: var(--acp-muted); margin-bottom: var(--acp-space-3);
    flex-wrap: wrap;
}
.acp-hero-meta b { color: var(--acp-ink); font-weight: 500; }
.acp-hero-tags { display: flex; gap: var(--acp-space-2); flex-wrap: wrap; }
.acp-hero-actions { display: flex; gap: var(--acp-space-2); }

/* --- Crumb row above the hero (optional) --- */
.acp-crumb-row {
    padding: var(--acp-space-3) var(--acp-space-7) 10px;
    font-size: var(--acp-fs-12); color: var(--acp-muted);
    background: var(--acp-card); border-bottom: 1px solid var(--acp-line);
    display: flex; justify-content: space-between; align-items: center;
}
.acp-crumb-row b { color: var(--acp-ink); font-weight: 500; }
.acp-crumb-sep { margin: 0 6px; color: var(--acp-muted-2); }

/* ============================================================
 * TAGS / PILLS — used in hero and inline
 * ============================================================ */
.acp-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; font-size: var(--acp-fs-12); font-weight: 500;
    border-radius: var(--acp-radius-sm);
    background: var(--acp-surface); color: var(--acp-ink-2);
}
.acp-tag .acp-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acp-tag--primary  { background: var(--acp-primary-soft);  color: var(--acp-primary); }
.acp-tag--good     { background: var(--acp-good-soft);     color: var(--acp-good); }
.acp-tag--info     { background: var(--acp-info-soft);     color: var(--acp-info); }
.acp-tag--warn     { background: var(--acp-warn-soft);     color: var(--acp-warn); }
.acp-tag--critical { background: var(--acp-critical-soft); color: var(--acp-critical); }

/* ============================================================
 * KPI TILES — small stat cards
 * ============================================================ */
.acp-kpi-row {
    padding: var(--acp-space-3) var(--acp-space-7);
    background: var(--acp-bg); border-bottom: 1px solid var(--acp-line);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--acp-space-3);
}
.acp-kpi {
    background: var(--acp-card); border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg); padding: 12px 14px; position: relative;
}
.acp-kpi-label {
    font-family: var(--acp-font-mono); font-size: 12px; letter-spacing: 0.04em;
    color: var(--acp-muted); text-transform: uppercase; margin-bottom: 6px;
    font-weight: 600;
}
.acp-kpi-value {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--acp-ink);
}
.acp-kpi-unit {
    font-family: var(--acp-font-mono); font-size: 11px; color: var(--acp-muted);
    font-weight: 400; margin-left: 3px;
}
.acp-kpi-trend { font-size: 11px; color: var(--acp-muted); margin-top: 3px; }
.acp-kpi--primary .acp-kpi-value  { color: var(--acp-primary); }
.acp-kpi--good     .acp-kpi-value { color: var(--acp-good); }
.acp-kpi--warn     .acp-kpi-value { color: var(--acp-warn); }
.acp-kpi--critical .acp-kpi-value { color: var(--acp-critical); }

/* ============================================================
 * CARDS — the primary content block on every detail page
 * ============================================================ */
.acp-card {
    background: var(--acp-card); border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    padding: var(--acp-space-4) var(--acp-space-5);
    margin-bottom: var(--acp-space-3);
}
.acp-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.acp-card-title {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    color: var(--acp-ink);
}
.acp-card-sub { font-size: 13px; color: var(--acp-muted); margin-bottom: var(--acp-space-4); font-weight: 500; }
.acp-card-link {
    font-size: var(--acp-fs-12); color: var(--acp-primary);
    font-weight: 500; cursor: pointer; text-decoration: none;
}
.acp-card-link:hover { color: var(--acp-primary-2); }

/* ============================================================
 * KV GRID — label / value pairs inside cards
 * ============================================================ */
.acp-kv-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--acp-space-3) var(--acp-space-6);
}
.acp-kv-grid--2col { grid-template-columns: repeat(2, 1fr); }
.acp-kv-grid--4col { grid-template-columns: repeat(4, 1fr); }
.acp-kv-label {
    display: block; font-family: var(--acp-font-mono);
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--acp-muted); font-weight: 500; margin-bottom: 3px;
}
.acp-kv-value { font-size: 13.5px; color: var(--acp-ink); font-weight: 500; }
.acp-kv-value--none { color: var(--acp-muted-2); font-weight: 400; }
.acp-kv-value .acp-mono { font-family: var(--acp-font-mono); font-size: 12.5px; }

/* ============================================================
 * BUTTONS — for inline actions where TelerikButton is overkill
 * ============================================================ */
.acp-btn {
    padding: 6px 12px; font-size: var(--acp-fs-12); font-weight: 500;
    border-radius: var(--acp-radius); border: 1px solid var(--acp-line-2);
    background: var(--acp-card); color: var(--acp-ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--acp-font-sans);
}
.acp-btn:hover:not(:disabled) { border-color: var(--acp-primary); color: var(--acp-primary); }
.acp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.acp-btn svg { width: 13px; height: 13px; }
.acp-btn--solid {
    background: var(--acp-primary); color: var(--acp-primary-on); border-color: var(--acp-primary);
}
.acp-btn--solid:hover:not(:disabled) { background: var(--acp-primary-2); color: var(--acp-primary-on); }
.acp-btn--critical { color: var(--acp-critical); border-color: var(--acp-critical); }
.acp-btn--critical:hover:not(:disabled) {
    background: var(--acp-critical); color: var(--acp-card); border-color: var(--acp-critical);
}

/* ============================================================
 * ACTIVITY RAIL — lock banner + timeline
 * ============================================================ */
.acp-activity-h {
    font-family: var(--acp-font-mono);
    font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--acp-muted); font-weight: 600;
    margin-bottom: var(--acp-space-3);
}

/* --- Lock banner --- */
.acp-lock-panel {
    background: var(--acp-critical-soft);
    border-left: 3px solid var(--acp-critical);
    padding: 12px 14px; margin-bottom: var(--acp-space-5);
    border-radius: 0 var(--acp-radius) var(--acp-radius) 0;
}
.acp-lock-head {
    color: var(--acp-critical); font-family: var(--acp-font-mono);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.acp-lock-head svg { width: 14px; height: 14px; flex-shrink: 0; }
.acp-lock-body {
    font-size: var(--acp-fs-12); color: var(--acp-ink-2);
    line-height: 1.55; margin-bottom: 10px;
}
.acp-lock-actions { display: flex; gap: 6px; }
.acp-lock-actions button {
    background: var(--acp-card); border: 1px solid var(--acp-critical);
    color: var(--acp-critical); padding: 5px 12px;
    font-family: var(--acp-font-mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; border-radius: var(--acp-radius-sm); cursor: pointer;
    font-weight: 600;
}
.acp-lock-actions button:hover { background: var(--acp-critical); color: var(--acp-card); }

/* --- Timeline --- */
.acp-timeline { position: relative; }
.acp-timeline-event {
    display: grid; grid-template-columns: 18px 1fr; gap: 12px;
    padding: 12px 0; position: relative;
}
.acp-timeline-event::after {
    content: ""; position: absolute; left: 7px; top: 22px; bottom: -10px;
    width: 2px; background: var(--acp-line);
}
.acp-timeline-event:last-child::after { display: none; }
.acp-timeline-mark {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 6px;
    background: var(--acp-primary); border: 2px solid var(--acp-card);
    box-shadow: 0 0 0 1px var(--acp-primary);
    z-index: 1; position: relative;
}
.acp-timeline-event--critical .acp-timeline-mark {
    background: var(--acp-critical); box-shadow: 0 0 0 1px var(--acp-critical);
}
.acp-timeline-event--info .acp-timeline-mark {
    background: var(--acp-info); box-shadow: 0 0 0 1px var(--acp-info);
}
.acp-timeline-event--warn .acp-timeline-mark {
    background: var(--acp-warn); box-shadow: 0 0 0 1px var(--acp-warn);
}
.acp-timeline-event--good .acp-timeline-mark {
    background: var(--acp-good); box-shadow: 0 0 0 1px var(--acp-good);
}
.acp-timeline-headline {
    font-size: 13px; font-weight: 600; color: var(--acp-ink); margin-bottom: 3px;
    letter-spacing: -0.005em;
}
.acp-timeline-body {
    font-size: var(--acp-fs-12); color: var(--acp-muted); line-height: 1.5;
}
.acp-timeline-when {
    font-family: var(--acp-font-mono); font-size: 10px;
    color: var(--acp-muted-2); margin-top: 5px;
    letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}

/* ============================================================
 * TABS — pairs with AcpTabs (wraps TelerikTabStrip)
 * ============================================================ */
.acp-tabs {
    padding: 0 var(--acp-space-7);
    display: flex; border-bottom: 1px solid var(--acp-line);
    background: var(--acp-card);
}
.acp-tab {
    padding: 12px 14px; font-size: var(--acp-fs-13); font-weight: 500;
    color: var(--acp-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acp-tab:hover { color: var(--acp-ink); }
.acp-tab.active {
    color: var(--acp-ink); border-bottom-color: var(--acp-primary); font-weight: 600;
}
.acp-tab-count {
    display: inline-block; margin-left: 5px; padding: 1px 6px;
    font-family: var(--acp-font-mono); font-size: 10px; border-radius: var(--acp-radius-sm);
    background: var(--acp-surface); color: var(--acp-muted);
}
.acp-tab.active .acp-tab-count { background: var(--acp-primary-soft); color: var(--acp-primary); }

/* ============================================================
 * RESIDENT / ENTITY LIST ITEM — for the list rail
 * ============================================================ */
.acp-list-item {
    display: grid; grid-template-columns: 6px 30px 1fr auto; gap: 10px; align-items: center;
    padding: 9px var(--acp-space-4); cursor: pointer;
}
.acp-list-item:hover { background: var(--acp-surface); }
.acp-list-item.selected { background: var(--acp-surface); }
.acp-list-item-strip { width: 3px; height: 32px; background: transparent; border-radius: 2px; }
.acp-list-item.selected .acp-list-item-strip { background: var(--acp-primary); }
.acp-list-item-avatar {
    width: 30px; height: 30px; border-radius: var(--acp-radius);
    background: var(--acp-info-soft); color: var(--acp-info);
    display: grid; place-items: center; font-weight: 600; font-size: 11px;
}
.acp-list-item-avatar--critical { background: var(--acp-critical-soft); color: var(--acp-critical); }
.acp-list-item-name {
    font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em;
    color: var(--acp-ink);
}
.acp-list-item.selected .acp-list-item-name {
    color: var(--acp-primary); font-weight: 700;
}
.acp-list-item-meta {
    font-family: var(--acp-font-mono); font-size: 10.5px;
    color: var(--acp-muted); margin-top: 3px;
    font-weight: 500;
}
.acp-list-item-trailing {
    font-family: var(--acp-font-mono); font-size: 10.5px;
    color: var(--acp-ink-2); font-weight: 500; letter-spacing: 0.02em;
}

/* --- Filter block: legend + segmented chip row. Rendered as a segmented control so
       one tap switches the filter, no radio-button chrome. Buttons are semantic; the
       aria-pressed state carries the selection for screen readers. --- */
.acp-filter-block {
    display: flex; flex-direction: column; gap: 4px;
}
.acp-filter-legend {
    font-family: var(--acp-font-mono);
    font-size: 11px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--acp-muted);
    font-weight: 600;
}
.acp-filter-row {
    display: inline-flex; gap: 2px;
    background: var(--acp-surface);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius);
    padding: 2px;
    width: 100%;
}
/* Segmented pill row: native <label><input type=radio><span>Text</span></label>. The
   radio itself is visually hidden via the sr-only pattern (NOT pointer-events:none, which
   would kill the click); the wrapping label captures all clicks, toggles the radio, and
   the browser's native radio behavior fires @onchange on the input. */
.acp-radio-pills {
    display: flex;
    flex-direction: row;
    gap: 2px;
    background: var(--acp-surface);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius);
    padding: 2px;
    width: 100%;
}
.acp-radio-pill {
    flex: 1;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 5px 10px;
    color: var(--acp-muted);
    cursor: pointer;
    font-family: var(--acp-font-sans);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-radius: calc(var(--acp-radius) - 2px);
    background: transparent;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}
.acp-radio-pill:hover {
    color: var(--acp-ink);
    background: rgba(255, 255, 255, 0.7);
}
.acp-radio-pill.active {
    background: var(--acp-card);
    color: var(--acp-primary);
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
/* Reset button UA styles — the pill class handles all visual state. */
button.acp-radio-pill {
    border: none;
    appearance: none;
    outline: none;
    font-family: var(--acp-font-sans);
}
.acp-radio-pill:focus-visible {
    outline: 2px solid var(--acp-primary);
    outline-offset: -1px;
}

/* ============================================================
 * CONTACTS TAB (ResidentContactsPanel) — richer form + grid look
 * ============================================================ */
/* Contacts list is framed by the same .acp-add-card treatment used on the Add
   form below it (see the .razor) — so we only need to strip the grid's own
   border and let the outer card carry the frame. No `min-width` and no
   `overflow-x` wrapper: columns are proportional so one horizontal scrollbar
   at most, and only on truly narrow viewports. */
.acp-contacts-list {
    margin-bottom: var(--acp-space-4);
    padding: 0;
    overflow: hidden;
}
.acp-contacts-list > .acp-add-card-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--acp-line);
    background: var(--acp-surface);
}
.acp-contacts-list > .acp-add-card-head h4 {
    margin: 0 0 2px; font-size: 14px; font-weight: 650;
}
.acp-contacts-list > .acp-add-card-head .acp-add-card-sub {
    font-size: 12px; color: var(--acp-muted-2);
}
.acp-contacts-grid.k-grid {
    border: none !important;
    background: var(--acp-card) !important;
    max-width: 100%;
}
.acp-contacts-grid .k-grid-header,
.acp-contacts-grid .k-grid-header-wrap {
    border: none !important;
}
.acp-contacts-grid .k-grid-header th {
    background: var(--acp-surface) !important;
    color: var(--acp-muted) !important;
    font-family: var(--acp-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--acp-line) !important;
    border-right: 1px solid var(--acp-line) !important;
    padding: 8px 10px !important;
    white-space: nowrap;
    height: 34px;
}
.acp-contacts-grid .k-grid-header th:last-child { border-right: none !important; }
.acp-contacts-grid .k-grid-content tr {
    border-bottom: 1px solid var(--acp-line);
}
.acp-contacts-grid .k-grid-content tr:hover td {
    background: var(--acp-primary-soft) !important;
}
.acp-contacts-grid .k-grid-content td {
    font-size: 12.5px;
    color: var(--acp-ink);
    padding: 6px 10px !important;
    vertical-align: middle !important;
    line-height: 1.35;
    border-right: 1px solid var(--acp-line) !important;
    border-bottom: none !important;
    height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.acp-contacts-grid .k-grid-content td:last-child { border-right: none !important; }
/* Locked (right-pinned) actions cell — visual separator + card background so it
   never bleeds through when scrolling under it. */
.acp-contacts-grid .k-grid-content td.k-grid-content-sticky,
.acp-contacts-grid .k-grid-header th.k-grid-header-sticky {
    background: var(--acp-card) !important;
    box-shadow: -2px 0 4px rgba(15, 23, 42, 0.06);
    border-left: 1px solid var(--acp-line) !important;
}
.acp-contacts-grid .k-grid-header th.k-grid-header-sticky {
    background: var(--acp-surface) !important;
}
/* Grid handles its own horizontal scroll on ONE container only (the .k-grid-content
   pane). The header syncs via Telerik. The user's original double-scrollbar bug
   was an outer wrap that duplicated the grid's scroll — that wrapper is gone. */
.acp-contacts-grid .k-grid-content {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 320px;
}
.acp-contacts-grid .k-grid-header {
    overflow: hidden !important;
    padding-inline-end: 0 !important;
}

/* Authority summary text — truncate with ellipsis, hover reveals full via title. */
.acp-contacts-authority {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--acp-muted);
}

/* Empty state — centered, no scroll footprint. */
.acp-contacts-empty {
    padding: 28px 16px;
    text-align: center;
}

/* Contact CARDS list — replaces the wide-scroll grid. One card per contact,
   every legacy field visible in a compact 4-block layout (Address / Phones /
   Contact / Authority) with Notes + Status dates spanning full width when
   present. Fully responsive, no horizontal scroll. */
.acp-contact-cards {
    display: flex; flex-direction: column;
    gap: var(--acp-space-3);
    padding: var(--acp-space-3);
    background: var(--acp-card);
}
.acp-contact-card {
    background: var(--acp-card);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
.acp-contact-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--acp-space-3);
    padding: 10px 14px;
    background: var(--acp-surface);
    border-bottom: 1px solid var(--acp-line);
}
.acp-contact-card-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.acp-contact-card-title {
    font-size: 15px; font-weight: 650; color: var(--acp-ink);
    letter-spacing: -0.005em;
}
.acp-contact-card-rel { font-size: 12.5px; color: var(--acp-muted); font-weight: 500; }
.acp-contact-card-tags {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.acp-contact-card-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 20px;
    padding: 14px;
}
@media (max-width: 1100px) { .acp-contact-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .acp-contact-card-body { grid-template-columns: 1fr; } }
.acp-contact-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acp-contact-block--full { grid-column: 1 / -1; }
.acp-contact-block-h {
    font-family: var(--acp-font-mono);
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--acp-muted); font-weight: 600;
    margin-bottom: 2px;
}
.acp-contact-kv {
    font-size: 12.5px; color: var(--acp-ink); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.acp-contact-kv .acp-kv-l {
    color: var(--acp-muted); font-weight: 500;
    margin-right: 4px;
}
.acp-contact-kv .acp-kv-sep { color: var(--acp-muted-2); margin: 0 8px; }
.acp-contact-note {
    font-size: 12.5px; color: var(--acp-ink);
    background: var(--acp-surface);
    padding: 8px 10px; border-radius: var(--acp-radius);
    white-space: pre-wrap; word-break: break-word;
    line-height: 1.45;
}
.acp-contact-card-foot {
    display: flex; justify-content: flex-end; gap: 6px;
    padding: 10px 14px;
    background: var(--acp-card);
    border-top: 1px solid var(--acp-line);
}
.acp-contacts-empty-title {
    font-size: 14px; font-weight: 600; color: var(--acp-ink);
    margin-bottom: 4px;
}
.acp-contacts-empty-sub {
    font-size: 12.5px; color: var(--acp-muted-2);
}
.acp-contact-row-actions {
    display: inline-flex; gap: 4px; flex-wrap: nowrap;
}
.acp-contact-row-actions .k-button {
    padding-inline: 8px !important;
    font-size: 11.5px !important;
}
.acp-badge-primary {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--acp-radius-sm);
    background: var(--acp-primary-soft);
    color: var(--acp-primary);
    font-family: var(--acp-font-sans);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

/* Add-a-contact card — proper section container matching AcpCard aesthetic. */
.acp-add-card {
    background: var(--acp-card);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    overflow: hidden;
}
.acp-add-card-head {
    padding: var(--acp-space-4) var(--acp-space-5) var(--acp-space-2);
    border-bottom: 1px solid var(--acp-line);
    background: linear-gradient(180deg, var(--acp-card), var(--acp-surface));
}
.acp-add-card-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--acp-ink);
    letter-spacing: -0.005em;
}
.acp-add-card-sub {
    display: block;
    font-size: var(--acp-fs-12);
    color: var(--acp-muted);
    margin-top: 2px;
}
.acp-add-card-body {
    padding: var(--acp-space-4) var(--acp-space-5);
    display: grid;
    gap: 14px;
}
.acp-add-card-body .acp-adt-form-row {
    margin: 0;
}
.acp-add-card-foot {
    padding: var(--acp-space-3) var(--acp-space-5);
    border-top: 1px solid var(--acp-line);
    background: var(--acp-surface);
    display: flex;
    justify-content: flex-end;
    gap: var(--acp-space-2);
}
/* Inputs inside the add-card feel more substantial than defaults. */
.acp-add-card-body .k-input-solid,
.acp-add-card-body .k-picker-solid,
.acp-add-card-body .k-textarea {
    min-height: 34px !important;
    background: var(--acp-card) !important;
    border-color: var(--acp-line-2) !important;
}
/* Fields marked as spanning two grid columns in a 3-col row. */
.acp-add-card-body .acp-field-full-2col {
    grid-column: span 2;
}
/* Checkbox row: label above, then a inline row with the checkbox + text. */
.acp-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}
.acp-checkbox-label {
    font-size: 13px;
    color: var(--acp-ink);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* ============================================================
 * VETERANS PAGE — layout for the detail cards under the records grid
 * ============================================================ */
.acp-vet-cards {
    display: grid;
    gap: var(--acp-space-3);
    padding: var(--acp-space-3) var(--acp-space-7) var(--acp-space-7);
}
/* 2-column variant of the shared demo grid, used for the 8 honors row. */
.acp-demo-columns.acp-demo-columns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px var(--acp-space-6) !important;
    padding: 0 !important;
}
.acp-demo-columns--2 .acp-field { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.acp-demo-columns--2 .acp-field > label { display: block; font-family: var(--acp-font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acp-muted); font-weight: 600; margin: 0 0 4px; }

/* Disability rows — hash index + code field + percent. */
.acp-vet-dis-grid { display: grid; gap: 12px; }
.acp-vet-dis-row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px; gap: 12px;
    align-items: end;
}
.acp-vet-dis-index {
    font-family: var(--acp-font-mono); font-size: 12px; color: var(--acp-muted);
    padding-bottom: 8px;
}

/* Text + "?" button pair for Honor/Diagnosis fields. */
.acp-vet-picker-field .acp-vet-picker-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center;
}

/* Big service flag row inside the Service card (POW / country / Gold Star / Pearl Harbor). */
.acp-vet-flag-row {
    display: flex; flex-wrap: wrap; gap: var(--acp-space-4);
    align-items: end; margin-top: var(--acp-space-4);
    padding-top: var(--acp-space-3);
    border-top: 1px dashed var(--acp-line);
}
.acp-vet-flag-row .acp-field-inline { display: flex; flex-direction: column; gap: 4px; }
.acp-vet-flag-row .acp-field-inline > label {
    display: block; font-family: var(--acp-font-mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--acp-muted);
    font-weight: 500;
}

/* Tag strip under the read-view Service card. */
.acp-vet-flags {
    display: flex; gap: var(--acp-space-2); flex-wrap: wrap;
    margin-top: var(--acp-space-4);
    padding-top: var(--acp-space-3);
    border-top: 1px dashed var(--acp-line);
}

/* Frame3-style POW fieldset — legacy "Prisoner Of War..." group box. */
.acp-vet-fieldset {
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius);
    padding: 14px 16px 10px;
    margin-top: var(--acp-space-4);
    background: var(--acp-surface);
}
.acp-vet-fieldset > legend {
    padding: 0 8px;
    font-family: var(--acp-font-mono);
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--acp-muted); font-weight: 700;
}

/* SSTab1 / SSTab2 tab strips inside the vet detail area. Sit below the Service card with
   a card-like shell so the inner content reads as its own section. */
.acp-vet-outer-tabs,
.acp-vet-inner-tabs {
    background: var(--acp-card);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    overflow: hidden;
}
.acp-vet-inner-tabs {
    border: 1px solid var(--acp-line);
    margin-top: 10px;
}
.acp-vet-inner-pad {
    padding: 14px 16px !important;
}

/* Records grid on the read side — muted header, comfortable rows. */
.acp-veterans-grid.k-grid { border: 1px solid var(--acp-line) !important; border-radius: var(--acp-radius) !important; }
.acp-veterans-grid .k-grid-header th {
    background: var(--acp-surface) !important;
    color: var(--acp-muted) !important;
    font-family: var(--acp-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ============================================================
 * LEGACY-CLASS ALIASES — makes the read views in Residents.razor render like AcpKv without
 * touching every call site. The old .acp-field / .acp-readonly-box / .acp-ssn-value classes
 * shipped by the Residents helpers now inherit AcpKv typography and spacing. Any page that
 * still emits these classes benefits automatically; new pages use AcpKvGrid + AcpKv directly.
 * ============================================================ */
.acp-field { display: block; }
.acp-field > label {
    display: block; font-family: var(--acp-font-mono);
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--acp-muted); font-weight: 600; margin-bottom: 4px;
}
.acp-field > .acp-readonly-box,
body .acp-field > .acp-readonly-box,
.acp-field > div:not(:first-child) {
    font-size: 15px !important;
    color: var(--acp-ink);
    font-weight: 500;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    font-variant-numeric: tabular-nums;
}
.acp-field > .acp-readonly-box:empty::before {
    content: "—";
    color: var(--acp-muted-2);
    font-weight: 400;
}

.acp-ssn-value { display: inline-flex; gap: 6px; align-items: baseline; }
.acp-ssn-value .acp-inline-btn { padding: 0; }
.acp-label-hint { color: var(--acp-muted-2); font-weight: 400; margin-left: 4px; font-family: var(--acp-font-sans); text-transform: none; letter-spacing: 0; font-size: 10px; }

/* .acp-demographics-header — the "Demographics" / "Modify Demographics" band above each read
   / edit view. Restyle as a small eyebrow. */
.acp-demographics-header {
    padding: var(--acp-space-3) var(--acp-space-7) 0;
}
.acp-demographics-header h2 {
    font-size: var(--acp-fs-16); font-weight: 600; letter-spacing: -0.01em; margin: 0;
}

/* .acp-demo-columns / .acp-demo-col — the two-column split inside a tab; treat as
   AcpKvGrid --2col so each column reads as a coherent group. */
.acp-demo-columns {
    padding: var(--acp-space-4) var(--acp-space-7);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--acp-space-4) var(--acp-space-6);
}
/* AcpCard already owns the outer padding via .acp-card. Neutralize the legacy
   .acp-demo-columns inner padding when nested inside so the two don't double up. */
.acp-card .acp-demo-columns { padding: 0; }
.acp-demo-col { display: grid; gap: var(--acp-space-3); align-content: start; }

/* --- 3-column variant, row-major. Used for the Personal / Address / Medicare Billing
       read views so field placement matches the Precinct mockup exactly. Fields are direct
       children of the grid (no .acp-demo-col wrappers), so they flow row by row.
       !important on template-columns because the legacy app.css .acp-demo-columns rule
       and hot-reloaded CSS chunks can otherwise linger. --- */
.acp-demo-columns.acp-demo-columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px var(--acp-space-6) !important;
    padding: 0 !important;
}
/* Every field inside the 3-col grid is a stacked cell — label above value, mockup rhythm.
   Forced with !important because the legacy .acp-demo-col grid rule (label right-aligned
   inline with value) is very reachy and can attach through cached selectors. */
.acp-demo-columns--3 .acp-field {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin: 0 !important;
    text-align: left !important;
}
.acp-demo-columns--3 .acp-field > label {
    display: block !important;
    font-family: var(--acp-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: var(--acp-muted) !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    justify-self: start !important;
    white-space: normal !important;
}
.acp-demo-columns--3 .acp-field > .acp-readonly-box,
.acp-demo-columns--3 .acp-field > .acp-ssn-value,
.acp-demo-columns--3 .acp-field > div:not(:first-child) {
    font-family: var(--acp-font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--acp-ink) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 22px !important;
    line-height: 1.35 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.005em !important;
}
.acp-demo-columns--3 .acp-field > .acp-readonly-box:empty::before {
    content: "—";
    color: var(--acp-muted-2);
    font-weight: 400;
}
/* Empty slots to preserve the 3-across rhythm on partial rows without stretching cells. */
.acp-field-spacer { visibility: hidden; min-height: 32px; }

/* .acp-demo-card — the section cards inside edit views. Match AcpCard exactly. */
.acp-demo-card {
    background: var(--acp-card); border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg); margin-bottom: var(--acp-space-3);
}
.acp-demo-sections { padding: var(--acp-space-3) var(--acp-space-7) var(--acp-space-5); display: grid; gap: var(--acp-space-3); }

/* .acp-medicare-billing — the Frame9 override band. Same look as a card. */
.acp-medicare-billing {
    margin: 0 var(--acp-space-7) var(--acp-space-4);
    background: var(--acp-card); border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg); padding: var(--acp-space-4) var(--acp-space-5);
}
.acp-medicare-billing legend {
    font-size: var(--acp-fs-13); font-weight: 600; letter-spacing: -0.005em;
    padding: 0 6px; color: var(--acp-ink);
}

/* .acp-tabs-with-rail — the 2-column layout under the KPI row: tabs + tab content on the left,
   activity rail on the right. Grid so the aside stays a fixed width regardless of tab content. */
.acp-tabs-with-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--acp-activity-w);
    gap: var(--acp-space-4);
    padding: var(--acp-space-3) var(--acp-space-7);
    align-items: start;
}
.acp-tabs-column { min-width: 0; }
.acp-tabs-rail {
    padding: var(--acp-space-4) var(--acp-space-5);
    background: var(--acp-card); border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    position: sticky; top: var(--acp-space-3);
    max-height: calc(100vh - 240px); overflow-y: auto;
}

/* Narrower viewports: fold the rail below the tabs so nothing is squeezed. */
@media (max-width: 1400px) {
    .acp-tabs-with-rail { grid-template-columns: minmax(0, 1fr); }
    .acp-tabs-rail { position: static; max-height: none; }
}

/* .acp-detail-pane — the right splitter side. Padding stripped so children (hero, KPI row,
   tabs, command bar) hit the pane edges edge-to-edge; each section owns its own inline
   padding. .acp-detail-scroll is a passthrough (kept for markup symmetry — the pane itself
   scrolls). */
.acp-detail-pane {
    height: 100%;
    overflow-y: auto;
    padding: 0;
    background: var(--acp-bg);
}
.acp-detail-scroll { display: contents; }

/* .acp-command-bar — action toolbar directly under the hero. Card fill with a soft
   surround so it reads as a proper toolbar band separating hero identity from KPI +
   tab content below. Rounded, floats inside pane padding, subtle hairline border. */
.acp-command-bar {
    margin: 0 var(--acp-space-7) var(--acp-space-3);
    padding: 10px var(--acp-space-4);
    background: var(--acp-card);
    border: 1px solid var(--acp-line);
    border-radius: var(--acp-radius-lg);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--acp-space-5); flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.acp-command-bar--top {
    /* Sits between hero and KPI row — no border-top artifact from the sticky footer. */
    position: static;
}
.acp-command-group {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.acp-command-group .acp-command-label {
    font-family: var(--acp-font-mono); font-size: 11.5px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--acp-muted); font-weight: 600;
    padding-right: 10px; border-right: 1px solid var(--acp-line);
    margin-right: 4px;
}

/* --- Buttons inside the bar. Compact, mono-icon-first, tokenized outline. --- */
.acp-command-bar .k-button {
    min-height: 32px;
    padding-inline: 12px;
    font-family: var(--acp-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: calc(var(--acp-radius) - 2px);
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: none;
}
.acp-command-bar .k-button .k-icon,
.acp-command-bar .k-button .k-svg-icon {
    width: 14px; height: 14px;
}

/* Outline base — the default "just an action" look. Neutralize Bootstrap's black outline. */
.acp-command-bar .k-button.k-button-outline-base,
.acp-command-bar .k-button.k-button-outline {
    background: transparent;
    border-color: transparent;
    color: var(--acp-ink);
}
.acp-command-bar .k-button.k-button-outline-base:hover,
.acp-command-bar .k-button.k-button-outline:hover {
    background: var(--acp-card);
    border-color: var(--acp-line);
    color: var(--acp-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.acp-command-bar .k-button.k-button-outline-base[disabled],
.acp-command-bar .k-button.k-button-outline-base.k-disabled,
.acp-command-bar .k-button.k-button-outline[disabled],
.acp-command-bar .k-button.k-button-outline.k-disabled {
    background: transparent;
    border-color: transparent;
    color: var(--acp-muted-2);
    opacity: 0.55;
}

/* Save — the primary CTA. Solid teal, matches the hero Modify button. */
.acp-command-bar .k-button.k-button-solid-primary {
    background: var(--acp-primary);
    border-color: var(--acp-primary);
    color: var(--acp-primary-on);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}
.acp-command-bar .k-button.k-button-solid-primary:hover {
    background: var(--acp-primary-2);
    border-color: var(--acp-primary-2);
}

/* Delete — destructive, sits inside the commit cluster next to Save. Subtle red. */
.acp-command-bar .k-button.k-button-outline-error {
    background: transparent;
    border-color: transparent;
    color: var(--acp-critical);
}
.acp-command-bar .k-button.k-button-outline-error:hover {
    background: var(--acp-critical-soft);
    border-color: var(--acp-critical);
    color: var(--acp-critical);
}

/* .acp-save-error — the inline save/delete error banner. Semantic critical tint. */
.acp-save-error {
    padding: 10px 14px; margin: 0 var(--acp-space-7) var(--acp-space-3);
    background: var(--acp-critical-soft);
    color: var(--acp-critical); border-radius: var(--acp-radius);
    border-left: 3px solid var(--acp-critical);
    font-size: var(--acp-fs-12);
}

/* .acp-detail-empty — the "Select a resident" and "Loading…" placeholders. */
.acp-detail-empty {
    padding: 40px var(--acp-space-7);
    color: var(--acp-muted); font-size: var(--acp-fs-13); text-align: center;
}

/* .acp-mono — used inside AcpKv values for numeric / code content. */
.acp-mono { font-family: var(--acp-font-mono); font-size: 12.5px; }

/* .acp-kv-hint — the "(###-##-####)" hint appended to the SSN label. */
.acp-kv-hint { color: var(--acp-muted-2); font-weight: 400; margin-left: 6px; font-family: var(--acp-font-sans); text-transform: none; letter-spacing: 0; font-size: 10px; }

/* --- Search input inside list rail --- */
.acp-inline-search { position: relative; }
.acp-inline-search input {
    width: 100%; padding: 7px 10px 7px 30px; font-size: var(--acp-fs-12);
    background: var(--acp-card); border: 1px solid var(--acp-line-2);
    color: var(--acp-ink); border-radius: var(--acp-radius);
    font-family: var(--acp-font-sans);
}
.acp-inline-search input:focus { outline: none; border-color: var(--acp-primary); }
.acp-inline-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; color: var(--acp-muted);
}