/* scripts/utility/mcp server/oauth_lambda/static/admin.css */
body { font-family: -apple-system, system-ui, sans-serif; max-width: 980px; margin: 2em auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 12px; border-bottom: 1px solid #eee; text-align: left; }
fieldset { margin: 1em 0; }
legend { font-weight: bold; }
.help { color: #666; font-size: 0.9em; margin-top: 4px; }
.muted { color: #888; font-size: 0.85em; }
button.select-all { margin-top: 6px; }

/* ---------------------------------------------------------------------------
 * Login picker page (/oauth/admin/login with no provider= query param).
 * Scoped to `body.login-page` so the regular dashboard/scope/history pages
 * keep their own simpler layout.
 * ------------------------------------------------------------------------- */
body.login-page {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* .login-bg and .login-logo are class-only (not scoped to .login-page) so
 * they work on every picker / sign-in page that needs the Kapoq background
 * photo and centered logo (login picker, pick-tenant picker, future pages).
 * Critical: .login-bg MUST be position:fixed — without that rule, an
 * <img class="login-bg"> renders as a normal inline image, takes up flex
 * space inside the page body, and pushes sibling elements off-center. */
.login-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.55;
}
.login-logo {
    width: 220px;
    margin: 0 auto 1.25rem;
    display: block;
}
.login-page .login-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    margin: 8vh auto;
    text-align: center;
    position: relative;
}
.login-page .login-logo {
    /* Override the default 0 0 1.25rem from the global .login-logo so the
     * login card uses the slightly tighter top margin. */
    margin: 0 auto 1.25rem;
}
.login-page h1 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: #222;
}
.login-page .login-subtitle {
    color: #444;
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}
.login-page .login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    color: #aaa;
    font-size: 0.8rem;
}
.login-page .login-divider::before,
.login-page .login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ddd;
}
.login-page .sso-btn {
    display: block;
    width: 100%;
    margin: 0.75rem auto;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.login-page .sso-btn img {
    height: 46px;
    width: auto;
    transition: opacity 0.15s;
    display: block;
    margin: 0 auto;
}
.login-page .sso-btn img:hover {
    opacity: 0.85;
}
.login-page .login-footer {
    margin-top: 1.25rem;
    color: #666;
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
 * Multi-tenant picker (/oauth/admin/pick-tenant). Reuses the login page's
 * background and logo via the .login-bg / .login-logo classes; adds a
 * scrollable list + hex-icon-prefixed button style matching the main
 * customer-facing /oauth/select-tenant page so the visual language stays
 * consistent between the two pickers.
 * ------------------------------------------------------------------------- */
body.pick-tenant-page {
    max-width: none;
    margin: 0;
    padding: 1rem;
    min-height: 100vh;
    background: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pick-tenant-page .pick-tenant-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 2rem);
    text-align: center;
    position: relative;
}
.pick-tenant-page h1 {
    font-size: 1.2rem;
    margin: 0 0 1rem;
    color: #222;
}
.pick-tenant-page .pick-tenant-meta {
    color: #444;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.pick-tenant-page .pick-tenant-email {
    color: #222;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    word-break: break-all;
}
.pick-tenant-page .pick-tenant-prompt {
    color: #444;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.pick-tenant-page .pick-tenant-list {
    overflow-y: auto;
    /* Fade the top + bottom edges so users know content continues when scrolled. */
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    padding: 0.25rem 0.25rem;
    margin: -0.25rem -0.25rem;
    min-height: 0; /* lets flexbox shrink below content height on small screens */
}
.pick-tenant-page .pick-tenant-form {
    margin: 0.5rem 0;
}
.pick-tenant-page .pick-tenant-form:first-child {
    margin-top: 0;
}
.pick-tenant-page .pick-tenant-form:last-child {
    margin-bottom: 0;
}
.pick-tenant-page .tenant-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1.5px solid #d0d7de;
    border-radius: 6px;
    cursor: pointer;
    color: #24292f;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.pick-tenant-page .tenant-btn:hover {
    background: #f3f4f6;
    border-color: #0969da;
}
.pick-tenant-page .db-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Dashboard (/oauth/admin). Same Kapoq background + translucent card
 * pattern as the picker pages; wider card to fit the user table; the
 * table body is scrollable so the page stays usable even at 200+ users.
 * ------------------------------------------------------------------------- */
body.dashboard-page {
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    min-height: 100vh;
    background: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.dashboard-page .dashboard-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
    padding: 1.75rem 2rem 1.5rem;
    width: 100%;
    max-width: 1080px;
    max-height: calc(100vh - 3rem);
    position: relative;
}
.dashboard-page .dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e4e8;
    flex-wrap: wrap;
}
/* .dashboard-logo and .dashboard-meta are class-only (not scoped to
 * .dashboard-page) so the scope-edit and history pages reuse the same
 * compact header sizing without each page needing to redeclare it.
 * The login picker keeps its own larger .login-logo. */
.dashboard-logo {
    width: 110px;
    height: auto;
    flex-shrink: 0;
}
.dashboard-meta {
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.15rem;
}
.dashboard-page .dashboard-tenant {
    flex: 1 1 auto;
    min-width: 0;
}
.dashboard-page .dashboard-tenant h1 {
    font-size: 1.4rem;
    margin: 0;
    color: #222;
    word-break: break-word;
}
.dashboard-page .dashboard-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.dashboard-page .header-form {
    display: inline-block;
    margin: 0;
}
.header-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    color: #24292f;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.header-btn:hover {
    background: #f3f4f6;
    border-color: #0969da;
}
.header-btn-logout:hover {
    background: #ffebe9;
    border-color: #cf222e;
    color: #cf222e;
}
/* Disabled <button class="header-btn">: applies to the scope editor's
 * Cancel button while the form has no unsaved changes. The :hover above
 * still wins for non-disabled buttons because `:disabled:hover` is more
 * specific than `:hover`. */
.header-btn:disabled,
.header-btn:disabled:hover {
    background: #f6f8fa;
    border-color: #e0e4e8;
    color: #9aa4af;
    cursor: not-allowed;
}

/* Rows the JS filter excluded carry .filtered-out — CSP-safe class toggle
 * so we don't need Element.style writes. Same rule serves the scope
 * editor's account/brand hides. */
.filtered-out {
    display: none !important;
}

/* Per-column funnel filter UI. Layout: each filterable <th> contains
 * [.th-label] [.filter-anchor[button, popover-input]]. The anchor owns
 * the positioning context (the th itself can't because the history
 * table headers are `position: sticky` which can't combine with
 * `position: relative`). The input is absolute-positioned under the
 * funnel so it appears as a popover, unaffected by the th's white-space
 * or width constraints. */
.th-label {
    display: inline-block;
    vertical-align: middle;
}
.filter-anchor {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    cursor: pointer;
    color: #8a929b;
    line-height: 1;
}
.filter-toggle:hover {
    color: #0969da;
}
/* Active filter — the column currently hides at least one row. */
.filter-toggle.filter-active,
.filter-toggle.filter-active:hover {
    color: #0969da;
}
.filter-toggle svg {
    display: block;
}
.col-filter {
    /* `position: fixed` so the popover escapes any ancestor's
     * overflow:auto clipping (the history table wrap has it for the
     * horizontal-scroll min-width:1100px layout). JS computes top/left
     * from the funnel's getBoundingClientRect() on open and on scroll
     * (capture so we catch the inner table-wrap's scroll events). */
    position: fixed;
    width: 220px;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #24292f;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 50;
}
.col-filter:focus {
    outline: none;
    border-color: #0969da;
    box-shadow: 0 0 0 1px #0969da, 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* The HTML `hidden` attribute already gives display:none, but the
 * sticky table-header rules in some browsers compute layout before
 * applying it. Force it explicitly. */
.col-filter[hidden] {
    display: none !important;
}
.scope-filter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.85rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    background: #fff;
    color: #24292f;
}
.scope-filter:focus {
    outline: none;
    border-color: #0969da;
    box-shadow: 0 0 0 1px #0969da;
}

.dashboard-page .add-user-form {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0.75rem;
}
.dashboard-page .add-user-input {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: inherit;
}
.dashboard-page .add-user-input:focus {
    outline: none;
    border-color: #0969da;
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
}
.dashboard-page .add-user-btn {
    padding: 0.5rem 1rem;
    background: #2da44e;
    color: #fff;
    border: 1px solid #2da44e;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.dashboard-page .add-user-btn:hover {
    background: #1f7a39;
    border-color: #1f7a39;
}

.dashboard-page .user-table-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    min-height: 0;
}
.dashboard-page .user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.dashboard-page .user-table thead th {
    position: sticky;
    top: 0;
    background: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dashboard-page .user-table .th-actions {
    text-align: right;
}
.dashboard-page .user-table td {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid #f0f3f5;
    vertical-align: middle;
    font-size: 0.9rem;
    color: #24292f;
}
.dashboard-page .user-table tbody tr:last-child td {
    border-bottom: none;
}
.dashboard-page .user-table tbody tr:hover {
    background: #f9fafb;
}
.dashboard-page .cell-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    word-break: break-all;
}
.dashboard-page .admin-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: #fff8c5;
    border: 1px solid #d4a72c;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #7d4e00;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dashboard-page .cell-updated {
    font-size: 0.82rem;
    color: #57606a;
    white-space: nowrap;
}
.dashboard-page .cell-updated-by {
    display: block;
    font-size: 0.75rem;
    color: #8d96a0;
}
.dashboard-page .cell-actions {
    text-align: right;
}
.dashboard-page .row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.dashboard-page .row-form {
    display: inline-flex;
    margin: 0;
}
.row-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    color: #24292f;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.row-btn:hover {
    background: #f3f4f6;
    border-color: #0969da;
}
.row-btn-edit:hover {
    color: #0969da;
}
.row-btn-remove {
    color: #cf222e;
}
.row-btn-remove:hover {
    background: #ffebe9;
    border-color: #cf222e;
    color: #cf222e;
}

/* ---------------------------------------------------------------------------
 * Scope editor (/oauth/admin/users/<email>/scope). Same Kapoq background
 * + outer card as the dashboard; an INNER white panel (.scope-edit-brands)
 * holds the dense per-account fieldsets so the checkboxes stay readable
 * even against the photo.
 * ------------------------------------------------------------------------- */
body.scope-edit-page {
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    min-height: 100vh;
    background: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.scope-edit-page .scope-edit-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
    padding: 1.75rem 2rem 1.5rem;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 3rem);
    position: relative;
}
.scope-edit-page .scope-edit-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e4e8;
    flex-wrap: wrap;
}
.scope-edit-page .scope-edit-title {
    flex: 1 1 auto;
    min-width: 0;
}
.scope-edit-page .scope-edit-title h1 {
    font-size: 1.3rem;
    margin: 0;
    color: #222;
    word-break: break-all;
}
.scope-edit-page .scope-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    min-height: 0;
    flex: 1 1 auto;
}
.scope-edit-page .scope-mode-fieldset {
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0;
    background: #fff;
}
.scope-edit-page .scope-mode-fieldset legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #57606a;
}
.scope-edit-page .scope-mode-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-size: 0.9rem;
}
.scope-edit-page .scope-edit-brands {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}
/* Set by admin.js when scope_mode === "unrestricted". The grant checkboxes
 * and select-all buttons are also `disabled` so they're non-interactive;
 * the panel just fades to make it obvious they aren't active. */
.scope-edit-page .scope-edit-brands.disabled {
    opacity: 0.55;
}
.scope-edit-page .scope-edit-brands h2 {
    font-size: 1rem;
    margin: 0 0 0.25rem;
    color: #222;
}
.scope-edit-page .scope-edit-brands .muted {
    color: #57606a;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.scope-edit-page .account-fieldset {
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}
.scope-edit-page .account-fieldset legend {
    padding: 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
}
.scope-edit-page .account-id {
    color: #57606a;
    font-weight: 400;
    font-size: 0.82rem;
}
.scope-edit-page .brand-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.scope-edit-page .brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    cursor: pointer;
    font-size: 0.88rem;
}
.scope-edit-page .brand-name {
    color: #24292f;
}
.scope-edit-page .brand-id {
    color: #8d96a0;
    font-size: 0.78rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.scope-edit-page .secondary-btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    color: #24292f;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.scope-edit-page .secondary-btn:hover {
    background: #f3f4f6;
    border-color: #0969da;
}
.scope-edit-page .help {
    color: #57606a;
    font-size: 0.78rem;
    margin-top: 0.5rem;
    font-style: italic;
}
.scope-edit-page .form-footer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e4e8;
    margin-top: 0.5rem;
}
.scope-edit-page .primary-btn {
    padding: 0.5rem 1.25rem;
    background: #0969da;
    color: #fff;
    border: 1px solid #0969da;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.scope-edit-page .primary-btn:hover {
    background: #0860c8;
}

/* ---------------------------------------------------------------------------
 * Flash banner — shown above the user table / scope form / history card
 * after a successful POST action. Rendered server-side from the redirect's
 * ?ok=<action>&t=<target> query params. Allowlisted to known action names,
 * `t` is HTML-escaped, no JS dependency.
 * ------------------------------------------------------------------------- */
.flash {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #dafbe1;
    border: 1px solid #aceebb;
    color: #116329;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}
.flash-icon {
    font-weight: 700;
}
.flash-msg {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.flash-dismiss {
    color: #116329;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.6;
}
.flash-dismiss:hover {
    opacity: 1;
}

/* Working/in-flight variant injected by admin.js on form submit. Amber
 * palette differentiates it from the green success state so a stacked
 * "Working… → success" transition is visually obvious. */
.flash.flash-working {
    background: #fff8c5;
    border-color: #ffd33d;
    color: #5d4506;
}
/* Error variant for inline 4xx-style messages (e.g. last-admin lockout)
 * rendered server-side from `?err=<code>&t=<target>` redirect params. */
.flash.flash-error {
    background: #ffebe9;
    border-color: #ff8182;
    color: #82071e;
}
.flash.flash-error .flash-icon {
    font-weight: 700;
    color: #cf222e;
}
.flash.flash-error .flash-dismiss {
    color: #82071e;
}
.flash-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: flash-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes flash-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * History page (/oauth/admin/history). Reuses the dashboard card layout
 * via `body class="dashboard-page history-page"` — the dashboard rules
 * provide background, card, header, logo, etc. The .history-page rules
 * below tune the audit-log table styling so it stays readable when 200
 * rows scroll inside the card.
 *
 * The wrap is the horizontal+vertical scroller. The table has a min-width
 * so it can grow past the card and the wrap shows a scrollbar — much
 * better than every change cell wrapping into 12 cramped lines.
 * ------------------------------------------------------------------------- */
.history-page .history-empty {
    margin: 1rem 0 0;
    padding: 1.5rem;
    text-align: center;
    color: #57606a;
    font-style: italic;
    background: #f6f8fa;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
}
.history-page .history-table-wrap {
    margin-top: 1rem;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
}
.history-page .history-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 1100px;
    font-size: 0.85rem;
}
.history-page .history-table th {
    position: sticky;
    top: 0;
    background: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
    text-align: left;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
    color: #57606a;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.history-page .history-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #eaeef2;
    vertical-align: top;
}
.history-page .history-table tr:last-child td {
    border-bottom: none;
}
.history-page .history-table tr:hover td {
    background: #f6f8fa;
}
.history-page .cell-action {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: #0550ae;
    white-space: nowrap;
}
.history-page .cell-when {
    white-space: nowrap;
    color: #57606a;
}
.history-page .cell-change {
    min-width: 320px;
    max-width: 460px;
}

/* Structured audit change cell — built by _render_audit_change(). */
.audit-change {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.audit-empty {
    color: #9aa4af;
}
.audit-muted {
    color: #9aa4af;
    font-style: italic;
}
.audit-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.audit-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #57606a;
}
.audit-value {
    font-size: 0.85rem;
    color: #24292f;
}
.audit-field-grants .audit-grants-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.audit-account {
    background: #f6f8fa;
    border: 1px solid #e0e4e8;
    border-radius: 5px;
    padding: 0.4rem 0.55rem;
}
.audit-account-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.audit-account-name {
    font-weight: 600;
    color: #24292f;
    font-size: 0.85rem;
}
.audit-account-id {
    color: #8a929b;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.audit-brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.audit-brand-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
}
.audit-brand-name {
    color: #24292f;
    font-weight: 500;
}
.audit-brand-id {
    color: #9aa4af;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.audit-shortcut-pill {
    display: inline-block;
    background: #ddf4ff;
    color: #0550ae;
    border: 1px solid #b6e3ff;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    margin-right: 0.3rem;
}
.audit-raw {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #24292f;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f6f8fa;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
    padding: 0.3rem 0.45rem;
}

/* -------------------------------------------------------------------------
 * Inactivity-warning modal. The page-level fixed overlay dims the rest of
 * the UI so the warning is hard to miss; the card centers a tight,
 * action-focused layout (countdown + two buttons). Rendered hidden by
 * default — admin.js flips the [hidden] attribute when the timer fires.
 * ------------------------------------------------------------------------- */
.session-warning-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 1rem;
}
.session-warning-modal[hidden] {
    display: none !important;
}
.session-warning-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    padding: 1.5rem 1.5rem 1.25rem;
}
.session-warning-card h2 {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    color: #24292f;
}
.session-warning-card p {
    margin: 0 0 1.1rem;
    color: #4b525a;
    line-height: 1.45;
}
.session-warning-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #b91c1c;
}
.session-warning-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}