/* Minimal hand-rolled styles for the JHAA web app skeleton.
 * Replace with a framework (Tailwind / Pico / Bootstrap) later if the polish
 * pass calls for it. Per memory the CSS choice was left open for Phase 1.
 */

:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --border: #d1d1d6;
    --text: #1c1c1e;
    --text-muted: #6e6e73;
    --primary: #0a84ff;
    --primary-hover: #006edc;
    --error: #d93025;
    --radius: 8px;
    --max-content-width: 480px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

header .brand {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    font-size: 1.125rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.header-actions .inline-form {
    margin: 0;
}

.header-user {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.header-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.header-link:hover {
    text-decoration: underline;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
}

footer {
    padding: 1rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: var(--max-content-width);
}

.card h1 {
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="email"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    color: var(--text);
}

input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

button {
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
}

button:hover {
    background: var(--primary-hover);
}

.error {
    color: var(--error);
    background: rgba(217, 48, 37, 0.08);
    border: 1px solid rgba(217, 48, 37, 0.2);
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.tenant-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tenant-list form {
    margin: 0;
}

.tenant-button {
    width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    text-align: left;
    padding: 0.875rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tenant-button:hover {
    background: var(--bg);
    border-color: var(--primary);
}

.tenant-name {
    font-weight: 500;
}

.tenant-role {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-transform: lowercase;
}

.notice {
    color: var(--text);
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.2);
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.muted {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.signout-form,
.inline-form {
    margin-top: 1rem;
}

.row-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.row-actions .inline-form {
    margin-top: 0;
}

.button-link {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    background: var(--surface);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.button-link:hover {
    border-color: var(--primary);
    background: var(--bg);
}

.link-button {
    background: transparent;
    color: var(--text-muted);
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: underline;
}

.link-button:hover {
    background: transparent;
    color: var(--text);
}

.link-button:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: none;
}

.card--wide {
    max-width: 1000px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.back-link:hover {
    text-decoration: underline;
}

.link-button.danger,
.button-link.danger,
button.danger {
    color: var(--error);
    border-color: rgba(217, 48, 37, 0.35);
}

button.danger {
    background: var(--error);
    color: white;
    border: none;
}

button.danger:hover {
    background: #b1281e;
}

button.danger:disabled {
    background: rgba(217, 48, 37, 0.35);
    cursor: not-allowed;
}

.sql-editor {
    width: 100%;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    min-height: 8rem;
}

.sql-editor:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.checkbox-row {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-row input[type="checkbox"] {
    margin: 0;
}

.crumbs {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.crumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
}

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

.row-header h1 {
    margin: 0;
}

.row-header .row-actions {
    margin-top: 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table th {
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.data-table th.num,
.data-table td.num {
    text-align: right;
    width: 60px;
}

.data-table th.actions,
.data-table td.actions {
    width: 110px;
}

.data-table .actions .inline-form {
    margin: 0;
}

.data-table td.actions--multi {
    width: 280px;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.data-table tr.row-inactive td {
    color: var(--text-muted);
}

.pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.pill-active {
    background: rgba(46, 160, 67, 0.08);
    color: #1f883d;
    border-color: rgba(46, 160, 67, 0.25);
}

.pill-revoked {
    background: rgba(217, 48, 37, 0.06);
    color: var(--error);
    border-color: rgba(217, 48, 37, 0.2);
}

.locked {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.row-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
}

.row-form select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--text);
}

.section-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.875rem;
}

.section-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.section-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.08);
}

.section-title {
    font-weight: 600;
    font-size: 1rem;
}

.section-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin: 0.75rem 0 1rem 0;
}

.filter-grid label {
    margin: 0;
}

.filter-grid select,
.filter-grid input[type="text"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--text);
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.details-cell {
    color: var(--text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    max-width: 560px;
    word-break: break-word;
    white-space: pre-wrap;
}

.two-pane {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.pane-left h2,
.pane-right h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.link-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    justify-content: space-between;
    font-size: 0.9rem;
}

.link-list a {
    color: var(--text);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    flex: 1;
}

.link-list a:hover {
    background: var(--bg);
    color: var(--primary);
}

.link-list a.link-active {
    background: rgba(10, 132, 255, 0.08);
    color: var(--primary);
}

@media (max-width: 720px) {
    .two-pane {
        grid-template-columns: 1fr;
    }
}

/* ----- Per-client shell (sidebar + content) ----- */

.client-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    align-items: start;
}

.client-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 1rem;
}

.client-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.client-sidebar-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.client-sidebar-head strong {
    font-size: 1rem;
    color: var(--text);
}

.client-sidebar-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.client-sidebar-scope {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    background: rgba(80, 120, 200, 0.15);
    border: 1px solid rgba(80, 120, 200, 0.35);
    border-radius: 999px;
    color: var(--text-muted);
}

.client-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
}

.client-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

.client-nav-link:hover {
    background: var(--bg);
    color: var(--primary);
}

.client-nav-link.is-active {
    background: rgba(10, 132, 255, 0.08);
    color: var(--primary);
    font-weight: 500;
}

.client-sidebar-foot {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.client-content {
    min-width: 0; /* let cards/tables shrink inside the grid track */
}

.panel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

.panel-card h1 {
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .client-shell {
        grid-template-columns: 1fr;
    }
    .client-sidebar {
        position: static;
    }
}

/* ----- Generic Records Browser ----- */

.row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.table-scroll {
    overflow-x: auto;
    margin: 0.5rem -0.5rem;
    padding: 0 0.5rem;
}

.row-actions-cell {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.row-actions-cell a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.row-actions-cell a:hover {
    text-decoration: underline;
}

.row-actions-cell a.danger {
    color: var(--error);
}

.is-current-row td {
    background: rgba(10, 132, 255, 0.04);
}

.required {
    color: var(--error);
}

.inline-text {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
    width: 160px;
}

.button-link--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.button-link--ghost:hover {
    background: var(--bg);
}

/* ----- DDC Stats Graph + summary strip ----- */

.summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.summary-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-cell strong {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.chart-wrap {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ----- Tenant warmup loading page ----- */

.warmup-card {
    text-align: center;
    max-width: 480px;
}

.warmup-card h1 {
    margin-top: 1rem;
    font-size: 1.25rem;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

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

#warmup-status {
    font-weight: 500;
}

#warmup-elapsed {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ----- Wide layout modifier for data-heavy panels (records list/history) ----- */

.client-shell--wide {
    max-width: none;
}

/* ----- Records entry form (Add / Edit) — Tk-tight, label-left layout -----
 * Labels are horizontal pairs: 180px label column right-aligned, input on
 * the right, tight row gap. Mirrors Tk's compact entry panel shape. */

.records-entry-form {
    gap: 0.4rem;
}

.records-entry-form label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
    margin: 0;
}

.records-entry-form .field-label {
    flex-shrink: 0;
    width: 200px;
    text-align: right;
    color: var(--text-muted);
}

.records-entry-form input[type="text"],
.records-entry-form input[type="number"],
.records-entry-form input[type="date"],
.records-entry-form input[type="datetime-local"],
.records-entry-form textarea {
    padding: 0.2rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

.records-entry-form input[type="date"]            { width: 170px; }
.records-entry-form input[type="datetime-local"]  { width: 210px; }
.records-entry-form input[type="number"]          { width: 140px; }
.records-entry-form input[type="text"]            { width: 360px; max-width: 100%; }
.records-entry-form textarea                      { width: 500px; max-width: 100%; min-height: 56px; }

.records-entry-form input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Drop the type-hint `<small>` lines that crept in from v1 — Tk forms
 * don't carry inline help; if a field needs explanation it earns its
 * own copy elsewhere on the page. */
.records-entry-form label small {
    display: none;
}

/* Align the submit row with the input column so buttons sit under the
 * inputs (not under the labels). */
.records-entry-form .row-actions {
    margin-left: calc(200px + 0.5rem);
}

/* Wide shell forces inner panel-cards to fill — overrides the 1000px
 * .card--wide cap so history tables and charts use the available
 * viewport. Admin panels (outside .client-shell--wide) keep the cap. */
.client-shell--wide .panel-card,
.client-shell--wide .card--wide {
    max-width: none;
}

/* ----- Records list v2.6: inner scroll container with sticky thead ----- */

/* Panel card holds the scroll container; no internal scrollbars on the
   card itself so the scroll happens only inside the table area. */
.records-panel-card {
    display: flex;
    flex-direction: column;
}

/* The scroll container fills the remaining viewport height after the
   panel header + breadcrumbs + h1 row. The 320px deduction is a rough
   estimate of the chrome above (page header + breadcrumbs + filter
   chrome + footer hint); tweak if the table feels cramped on smaller
   screens. min-height keeps small viewports from collapsing the table
   to a useless slit. */
.records-scroll {
    overflow: auto;
    max-height: calc(100vh - 320px);
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

/* Sticky header inside the scroll container — both rows (column labels
   + filter inputs) stay visible as rows scroll. Background is required
   so rows scrolling beneath the thead don't show through. */
.records-thead-sticky th {
    position: sticky;
    background: var(--surface);
    z-index: 2;
}
.records-thead-sticky tr:first-child th {
    top: 0;
}
.records-thead-sticky tr.filter-row th {
    /* The 36px is roughly the height of the column-label row above; if
       fonts change and the header gets taller, this drifts and filters
       partially hide. Acceptable for v2.6 — easy to recompute if needed. */
    top: 36px;
}

.records-footer-hint {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

/* ----- Records add/edit modal (v2.7) ----- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
}
.modal[hidden] {
    display: none;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: -1;
}
.modal-dialog {
    position: relative;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    max-width: 720px;
    width: 100%;
    margin-bottom: 4vh;
}
.modal-title {
    margin: 0 0 0.5rem 0;
    padding-right: 2.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.modal-close:hover {
    background: var(--bg);
    color: var(--text);
}
.modal-loading {
    padding: 1.5rem 0;
    text-align: center;
}
body.modal-open {
    overflow: hidden;
}

/* ----- Org Chart admin panel ----- */

.org-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0 1rem 0;
}
.org-picker .picker-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-right: 0.25rem;
}
.picker-button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.875rem;
}
.picker-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.picker-button--active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.picker-button--active:hover {
    color: white;
    filter: brightness(0.95);
}

.org-summary {
    margin: 0.5rem 0 1rem 0;
    font-size: 0.875rem;
}

.org-tree,
.org-tree ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.org-tree .org-children,
.org-tree .org-members {
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
    margin-left: 0.5rem;
}
.org-node {
    padding: 0.25rem 0;
}
.org-node--inactive .org-role-name {
    color: var(--text-muted);
    text-decoration: line-through;
}
.org-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.org-role-name {
    font-weight: 500;
}
.org-role-counts {
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.pill-muted {
    background: var(--bg);
    color: var(--text-muted);
    border-color: var(--border);
}

.org-member {
    padding: 0.15rem 0.4rem;
    font-size: 0.875rem;
    color: var(--text);
}
.org-member--manager .org-member-name {
    font-weight: 500;
}
.org-member-kind {
    display: inline-block;
    width: 70px;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ----- ANC bespoke (stats + funnel) filter forms ----- */

.filter-row-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.inline-field input,
.inline-field select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
}
.stats-filter-form,
.funnel-filter-form {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* ----- Records list v2: sort, filter, numeric alignment ----- */

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.button-link--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.button-link--ghost:hover {
    background: var(--bg);
    color: var(--text);
}

/* Right-align numeric headers + cells, including the filter inputs row. */
.data-table--records th.num,
.data-table--records td.num {
    text-align: right;
    width: auto;
}
.data-table--records td.num {
    font-variant-numeric: tabular-nums;
}

/* Soft-deleted rows — only visible when ?show_deleted=1. Visually
   distinct so operators don't confuse them with current rows: muted
   text + strikethrough + a small "deleted" pill in the first cell. */
.data-table--records tr.row--soft-deleted td {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(217, 48, 37, 0.55);
}
.data-table--records tr.row--soft-deleted td:first-child::before {
    content: "deleted";
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    background: rgba(217, 48, 37, 0.15);
    color: rgb(217, 48, 37);
    border: 1px solid rgba(217, 48, 37, 0.4);
    border-radius: 999px;
    text-decoration: none;
    vertical-align: middle;
}

/* Sortable column headers — entire label is a click target. */
.data-table--records th.sortable {
    cursor: pointer;
    user-select: none;
}
.data-table--records th .sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}
.data-table--records th .sort-link:hover {
    color: var(--primary);
}
.data-table--records th.sorted {
    color: var(--text);
    background: var(--bg);
}
.data-table--records th.sorted .sort-link {
    font-weight: 600;
}

/* Filter inputs row — slim, type-aware. */
.data-table--records tr.filter-row th {
    padding: 0.25rem 0.375rem;
    background: var(--surface);
    border-bottom: 2px solid var(--border);
}
.filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0.4rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
}
.filter-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
.filter-range {
    display: flex;
    gap: 0.25rem;
}
.filter-input--num {
    text-align: right;
    min-width: 0;
}
.filter-input--date {
    min-width: 0;
}
.filter-apply-cell {
    padding: 0.25rem 0.5rem;
}
.filter-apply {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.filter-apply:hover {
    filter: brightness(0.95);
}

.empty-row {
    padding: 1.25rem 0.625rem !important;
    text-align: center;
}

/* ----- Records list v2.6: row selection (click + ctrl/shift) ----- */

/* Whole row is clickable for selection. Pointer cursor signals it. */
.data-table--records tbody tr[data-entry-id] {
    cursor: pointer;
    user-select: none;
}

/* Selected-row highlight — light primary tint, slightly darker on hover. */
.data-table--records tr.row-selected td {
    background: rgba(26, 115, 232, 0.12);
}
.data-table--records tbody tr[data-entry-id]:hover td {
    background: rgba(26, 115, 232, 0.04);
}
.data-table--records tr.row-selected:hover td {
    background: rgba(26, 115, 232, 0.16);
}

/* Selection chip — tiny status indicator above the table when ≥1 selected. */
.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    background: rgba(26, 115, 232, 0.1);
    border: 1px solid rgba(26, 115, 232, 0.3);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
}
.selection-chip[hidden] {
    display: none;
}
.selection-chip-clear {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0 0.2rem;
    font-size: 1rem;
    line-height: 1;
}
.selection-chip-clear:hover {
    color: var(--text);
}

/* Context menu — disabled items render greyed-out and inert. */
.records-context-menu .ctx-disabled {
    display: block;
    padding: 0.5rem 0.875rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: not-allowed;
    user-select: none;
}
.records-context-menu hr.ctx-sep {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--border);
}

.duplicate-banner {
    padding: 0.5rem 0.75rem;
    background: rgba(26, 115, 232, 0.06);
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    margin: 0.5rem 0 1rem 0;
}

/* Business-key fields on a Duplicate form — yellow border + ⚠ marker
   so the operator knows they need to enter new values. */
.field--business-key input,
.field--business-key textarea {
    border-color: #f6a623;
    box-shadow: 0 0 0 1px rgba(246, 166, 35, 0.25);
}
.field--business-key input:focus,
.field--business-key textarea:focus {
    border-color: #d68900;
    box-shadow: 0 0 0 2px rgba(246, 166, 35, 0.4);
}
.bk-marker {
    color: #d68900;
    margin-left: 0.25rem;
}

/* ----- Right-click context menu ----- */

.records-context-menu {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    z-index: 1000;
    padding: 0.25rem 0;
}

.records-context-menu[hidden] {
    display: none;
}

.records-context-menu a {
    display: block;
    padding: 0.5rem 0.875rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.875rem;
}

.records-context-menu a:hover {
    background: var(--bg);
    color: var(--primary);
}

.records-context-menu a.danger {
    color: var(--error);
}

.records-context-menu a.danger:hover {
    background: rgba(217, 48, 37, 0.08);
}