/* Color tokens + body font + dark mode live in theme.css (loaded first). */
body { font-size: 14px; }
.page-body { padding: 24px 32px 48px 32px; }

/* Pending-edits banner (admin). Theme-aware amber that adapts to dark mode;
   the [hidden] guard is required because a class with display:flex would
   otherwise override the hidden attribute. */
.pending-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, #F59E0B 15%, var(--bg));
    border: 1px solid color-mix(in srgb, #F59E0B 50%, var(--bg));
    color: var(--text);
    border-radius: 4px;
    padding: 10px 16px;
    margin-bottom: 12px;
}
.pending-banner[hidden] { display: none; }

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.tab {
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Toolbar */
.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--branch-bg);
    border-radius: 6px;
}
.toolbar input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
}
.toolbar select {
    padding: 8px 12px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
}
button {
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
button:hover { background: var(--accent-hover); }
button.secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
button.secondary:hover { background: var(--header-bg); }
button.danger { background: var(--danger); }

.notice {
    padding: 12px;
    background: var(--branch-bg);
    border-left: 3px solid var(--accent);
    margin-bottom: 16px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    padding: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    background: var(--header-bg);
    position: sticky;
    top: 0;
}

/* Sortable column headers */
th[data-sort-field] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th[data-sort-field]:hover { color: var(--text); }
th[data-sort-field]::after {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.4;
    content: '⇅';
}
th[data-sort-field][data-sort-dir='asc']::after  { content: ' ↑'; opacity: 1; color: var(--accent); }
th[data-sort-field][data-sort-dir='desc']::after { content: ' ↓'; opacity: 1; color: var(--accent); }
th[data-sort-field][data-sort-rank]::before {
    content: attr(data-sort-rank);
    font-size: 9px;
    color: var(--accent);
    vertical-align: super;
    margin-right: 1px;
}

/* Sort hint line above the people table */
.sort-hint {
    font-size: 11px;
    color: var(--text-subtle);
    margin-bottom: 6px;
}
td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 13px;
}
tr:hover td { background: var(--row-hover); }
.id-cell { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: var(--text-muted); }
.name-cell { font-weight: 600; }
.bloodline-y { color: var(--text); }
.bloodline-n { color: var(--text-muted); font-style: italic; }
.action-btn { padding: 4px 10px; font-size: 12px; margin-right: 4px; }
.undo-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
}
.undo-btn:hover { background: var(--bg-card); }
.undo-btn:disabled { opacity: 0.5; cursor: wait; }

/* Activity tab — sub-view toggle buttons sit in the toolbar; only one
   table is visible at a time, controlled by the .activity-pane[hidden]
   attribute set by edit.js renderActivity(). */
.activity-view-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 999px;
}
.activity-view-btn:hover {
    background: var(--bg-card);
    color: var(--text);
}
.activity-view-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    font-weight: 600;
}

/* Admin-only tabs: Recent Changes + Activity. Hidden for non-admins via
   a body-class flag set by RFAPI.applyAdminVisibility() in edit.js init.
   The check is also enforced server-side — non-admins get 403 from
   /api/audit-log and /api/activity even if they manipulate the DOM. */
body.is-non-admin .tab[data-tab="audit"],
body.is-non-admin .tab[data-tab="activity"],
body.is-non-admin .tab-pane[data-pane="audit"],
body.is-non-admin .tab-pane[data-pane="activity"] {
    display: none !important;
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
    background: var(--bg);
    border-radius: 8px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px var(--shadow);
}
.modal h2 { margin-top: 0; }
.modal label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.modal label .label-text {
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.modal input, .modal select, .modal textarea {
    width: 100%;
    padding: 8px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}
/* Inside a .pw-wrap the input is sized by flex, not by width:100% */
.modal .pw-wrap input { width: auto; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 20px var(--shadow);
    font-size: 13px;
    z-index: 200;
}
.error {
    padding: 8px 12px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    border-radius: 3px;
    font-size: 13px;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }

/* ──────────────────────────────────────────────────────────────────────
   UTILITIES (used by edit.js's generated table cells, modal helpers,
   pending-edit cards, and the admin toolbar). Lifted out of inline
   style="" attributes so the markup is readable and a dark-mode token
   change ripples in one place. */

/* Table cell "states" — used by Activity, Audit, People, Households
   tables when they're loading / empty / errored. */
td.cell-loading,
td.cell-empty   { color: var(--text-subtle); }
td.cell-error   { color: var(--danger); }

/* Numeric column — right-aligned tabular nums for table cells where
   the visual scan is for the numbers, not the text. */
td.num,
th.num          { font-variant-numeric: tabular-nums; }

/* Timestamp cell — used wherever a row shows a "when". Compact, muted,
   single-line. */
td.cell-ts      { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Compact body cells inside the People + Households tables. */
td.cell-sm      { font-size: 12px; }
td.cell-xs      { font-size: 11px; }
td.cell-muted   { color: var(--text-muted); }
td.cell-path    { font-size: 12px; color: var(--text-muted); }

/* Nickname tag rendered inside the Name cell on the People table. */
.nickname-tag   { color: var(--text-muted); font-style: italic; }

/* Inline em-dash placeholder for empty values inside table cells. */
.subtle-dash    { color: var(--text-subtle); }

/* "Blank" placeholder shown inside the Field/Current/Proposed table
   when an audit-log value is empty. */
.blank-marker   { color: var(--text-muted); font-style: italic; }

/* Empty-state notice — used in the Pending edits tab when the queue
   is empty, and in the modal-loading placeholders inside the pending
   list section. */
.notice-empty   { padding: 16px; color: var(--text-muted); }
.notice-error   { padding: 16px; color: var(--danger); }

/* ID inputs in the Person + Household modals — readonly identifier
   field that needs monospace rendering. */
input.id-input  { font-family: 'SF Mono', Monaco, monospace; color: var(--text-muted); }

/* Modal width modifiers — narrow modal is used for the password-change
   form; claim modal is even narrower. */
.modal.modal-narrow { max-width: 380px; }
.modal.modal-claim  { max-width: 360px; }

/* Modal error placeholder — same as .error but accepts an [hidden]
   guard so the rendered margin doesn't fight display:none. */
.error.with-margin  { margin-bottom: 8px; }

/* Button size variants — match signups.css's .small. xsmall is used
   for the inline admin-toolbar shortcuts. */
button.small    { padding: 5px 12px; font-size: 13px; }
button.xsmall   { padding: 4px 10px; font-size: 12px; }

/* Admin toolbar — a flex row above the tab strip that's empty for
   non-admins (filled at runtime by edit.js with the "Change My
   Password" button). The [hidden]-style attr was being managed
   inline; now the markup just sets .admin-toolbar and the JS
   toggles visibility via the body.is-non-admin guard below. */
.admin-toolbar {
    display: none;
    justify-content: flex-end;
    margin-bottom: 8px;
}
body.is-admin .admin-toolbar { display: flex; }

/* Flex row utilities used by the pending-edit card. */
.row-flex       { display: flex; gap: 8px; }
.row-flex-baseline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

/* Pending edit card (admin-only Pending tab) — was being assembled
   from inline styles in edit.js renderPendingEdits(). Same look,
   declared once. */
.pending-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 14px;
}
.pending-card .pending-when {
    font-size: 11px;
    color: var(--text-muted);
}
.pending-card .diff-table {
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}
.pending-card .diff-table th,
.pending-card .diff-table td { padding: 4px 8px; text-align: left; }
.pending-card .diff-table th { color: var(--text-muted); font-weight: 500; }
.pending-card .diff-table td.field-label { font-weight: 500; }
.pending-card .diff-table td.old-val {
    color: var(--danger);
    text-decoration: line-through;
}
.pending-card .diff-table td.new-val { color: var(--success); }

/* Pending-edit action buttons. Three states use semantic tokens so
   the colors are right in light and dark mode. */
.pending-card .pe-btn {
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}
.pending-card .pe-btn.approve-btn      { background: var(--success); }
.pending-card .pe-btn.edit-approve-btn { background: var(--info);    }
.pending-card .pe-btn.reject-btn       { background: var(--danger);  }

/* Back link — used on admin sub-pages (admin-records.html, audit.html). */
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--link);
    text-decoration: none;
    font-size: 13px;
}
.back-link:hover { text-decoration: underline; }

/* Page title on admin sub-pages that have a back link above them. */
.records-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
}