@import url('./tokens.css');
@import url('./admin-tokens.css');

/* Admin operations workspace. Colour comes from the shared UI tokens; every
   size and spacing value comes from the admin console tokens. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A readable, admin-specific scale independent of the measurement canvas. */
html:root { min-width: 320px; font-size: var(--admin-font-root); }
body { margin: 0; background: var(--bg-app); color: var(--text-primary); font: var(--admin-font-sm)/1.5 var(--font-ui); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
h1, h2, h3, p, dl { margin-top: 0; }
h1 { font-size: var(--admin-font-h1); line-height: 1.2; letter-spacing: -.025em; margin-bottom: var(--admin-space-3); }
h2, .h4 { font-size: var(--admin-font-h2); line-height: 1.3; }
.h5 { font-size: var(--admin-font-h3); line-height: 1.35; }
button, input, select, textarea, option { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
code, .font-monospace { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
small, .small { font-size: var(--admin-font-xs); }

.site-header { position: sticky; top: 0; z-index: 20; min-height: var(--admin-header-h); background: var(--bg-surface); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; padding: 0 var(--admin-gutter); gap: var(--admin-space-6); }
.site-brand-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.site-brand { display: inline-flex; align-items: center; gap: var(--admin-space-2); flex-shrink: 0; font-size: var(--admin-font-h2); font-weight: 800; letter-spacing: -.035em; text-decoration: none; color: var(--text-primary); }
.site-header a:not(.site-brand) { color: var(--text-secondary); text-decoration: none; font-size: var(--admin-font-sm); }
.site-header a:hover { color: var(--accent); }
.theme-toggle { margin-left: auto; flex: none; padding: var(--admin-space-2) var(--admin-space-3); border: 1px solid var(--border); border-radius: var(--admin-radius-md); background: var(--bg-surface-tool); color: var(--text-primary); font-size: var(--admin-font-xs); font-weight: 700; }
.theme-toggle:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.workspace { display: grid; grid-template-columns: var(--admin-nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--admin-header-h)); }
.workspace:has(.entry-content) { display: block; }
/* Signed-out pages (Admin sign-in/denied) render no nav, so they get the full width instead of
   being pressed into the 224px nav column. See PROBLEMS.md 329. */
.workspace:not(:has(.admin-nav)) { display: block; }
.admin-nav { position: sticky; top: var(--admin-header-h); align-self: start; height: calc(100vh - var(--admin-header-h)); height: calc(100dvh - var(--admin-header-h)); overflow-y: auto; background: var(--bg-surface); border-right: 1px solid var(--border-light); padding: var(--admin-space-6) var(--admin-space-3); display: block; }
.admin-menu { height: 100%; }
.admin-menu-toggle { display: none; }
.admin-nav-content { min-height: 100%; display: flex; flex-direction: column; gap: var(--admin-space-6); }
.admin-menu-current { color: var(--text-secondary); font-size: var(--admin-font-2xs); font-weight: 400; }
.skip-link { position: fixed; top: var(--admin-space-2); left: var(--admin-space-2); z-index: 100; transform: translateY(-200%); padding: var(--admin-space-3) var(--admin-space-4); background: var(--bg-surface); color: var(--accent); border: 2px solid var(--border-accent); border-radius: var(--admin-radius-md); }
.skip-link:focus { transform: translateY(0); }
.page-header { margin-bottom: var(--admin-space-4); }
.page-header h1 { margin-bottom: 0; overflow-wrap: anywhere; }
.breadcrumbs { margin-bottom: var(--admin-space-4); font-size: var(--admin-font-2xs); color: var(--text-secondary); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--admin-space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--admin-space-2); color: var(--text-secondary); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs [aria-current='page'] { color: var(--text-primary); }
.nav-heading { padding: 0 var(--admin-space-3); color: var(--accent); text-transform: uppercase; font-size: var(--admin-font-3xs); font-weight: 700; letter-spacing: .08em; }
.admin-links { display: grid; gap: var(--admin-space-1); margin-top: var(--admin-space-2); }
.admin-links a { display: flex; align-items: center; gap: var(--admin-space-2); border-radius: var(--admin-radius-md); color: var(--text-secondary); text-decoration: none; font-size: var(--admin-font-xs); font-weight: 600; padding: var(--admin-space-3) var(--admin-space-3); }
.admin-links a:hover { background: var(--bg-hover-item); color: var(--text-primary); }
.admin-links a[aria-current='page'] { background: var(--bg-accent-subtle); color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.nav-icon { display: block; width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; }
.admin-account { margin-top: auto; padding: var(--admin-space-4) var(--admin-space-3) 0; border-top: 1px solid var(--border-light); display: grid; gap: var(--admin-space-3); overflow-wrap: anywhere; font-size: var(--admin-font-2xs); color: var(--text-secondary); }
.admin-account .btn-sm { font-size: var(--admin-font-2xs); }
.workspace-main { min-width: 0; width: 100%; padding: var(--admin-gutter-main); }
.page-intro { max-width: var(--admin-measure-narrow); color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--admin-space-6); }
.filter-bar { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--admin-radius-lg); padding: var(--admin-space-4); max-width: var(--admin-measure-wide); }
.filter-bar .col-md { flex: 1 1 260px; }
.filter-bar .form-control { max-width: none; }
.page-kicker { display: block; color: var(--text-secondary); font-size: var(--admin-font-2xs); font-weight: 600; margin-bottom: var(--admin-space-2); }
.entry-content { width: 100%; margin: 6vh 0; padding: 0 var(--admin-gutter-main); }

.card, .list-group { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--admin-radius-lg); overflow: hidden; }
.list-group { list-style: none; margin-top: 0; padding: 0; }
.card-body { padding: var(--admin-card-pad); }
.card-header { padding: var(--admin-space-4) var(--admin-space-5); background: var(--bg-surface-tool); border-bottom: 1px solid var(--border-light); }
.card-header h2 { margin: 0; }
.card .card { border-radius: var(--admin-radius-md); }
.list-group-item { padding: var(--admin-space-3) var(--admin-space-4); border-bottom: 1px solid var(--border-light); }
.list-group-item:last-child { border-bottom: 0; }
a.list-group-item { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--admin-space-4); row-gap: var(--admin-space-1); text-decoration: none; color: var(--text-primary); }
a.list-group-item:hover { background: var(--bg-hover-item); }
a.list-group-item > .fw-semibold { min-width: 9rem; }
.list-unstyled { list-style: none; padding: 0; }
.list-unstyled li { margin-bottom: var(--admin-space-2); }
.alert { border: 1px solid var(--border-light); background: var(--bg-surface-tool); border-radius: var(--admin-radius-md); padding: var(--admin-space-3) var(--admin-space-4); margin-bottom: var(--admin-space-4); }
.alert-success { border-color: var(--text-success); background: var(--bg-accent-faint); }
.alert-warning { border-color: var(--border-warning); background: var(--bg-warning); }
.alert-danger { border-color: var(--border-danger); background: var(--bg-danger); }
.alert a { font-weight: 600; }
.badge { display: inline-block; border-radius: var(--admin-radius-sm); padding: var(--admin-space-1) var(--admin-space-2); font-size: var(--admin-font-2xs); line-height: 1.4; font-weight: 700; white-space: nowrap; background: var(--bg-surface-tool); color: var(--text-secondary); border: 1px solid var(--border-light); }
.text-bg-primary { color: var(--accent); background: var(--bg-accent-subtle); border-color: var(--border-accent); }
.text-bg-success { color: var(--text-success); background: var(--bg-accent-faint); border-color: var(--text-success); }
.text-bg-warning { color: var(--text-warning); background: var(--bg-warning); border-color: var(--border-warning); }
.text-bg-danger { color: var(--text-danger); background: var(--bg-danger); border-color: var(--border-danger); }

.table-responsive { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-sm); text-align: left; }
.table caption { caption-side: bottom; text-align: left; color: var(--text-secondary); padding: var(--admin-space-3) var(--admin-space-4); border-top: 1px solid var(--border-light); }
.table th { background: var(--bg-surface-tool); color: var(--text-secondary); font-size: var(--admin-font-2xs); white-space: nowrap; font-weight: 700; }
.table th, .table td { padding: var(--admin-space-3) var(--admin-space-4); border-bottom: 1px solid var(--border-light); vertical-align: middle; white-space: nowrap; }
.table .list-unstyled { display: inline-flex; flex-wrap: nowrap; gap: var(--admin-space-3); margin: 0; }
.table .list-unstyled li { margin: 0; }
.table .danger-zone[open] { white-space: normal; overflow-wrap: anywhere; max-width: 32rem; }
.table tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: var(--bg-hover-item); }
.table td a { font-weight: 600; }
.logs-table { font-size: var(--admin-font-2xs); line-height: 1.3; }
.logs-table th, .logs-table td { padding: var(--admin-space-1) var(--admin-space-2); }
.logs-table td { white-space: normal; }
.logs-table td:nth-child(-n+3) { white-space: nowrap; }
.log-exception { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

.form-label { display: block; color: var(--text-secondary); font-size: var(--admin-font-xs); font-weight: 600; margin-bottom: var(--admin-space-2); }
.form-control, .form-select { display: block; width: 100%; max-width: var(--admin-measure-form); min-height: var(--admin-control-h); padding: var(--admin-space-2) var(--admin-space-3); border: 1px solid var(--border); border-radius: var(--admin-radius-md); background: var(--bg-input); color: var(--text-primary); font-size: var(--admin-font-xs); line-height: 1.3; }
.form-control:focus, .form-select:focus { outline: 2px solid var(--border-accent); outline-offset: 1px; border-color: var(--border-accent); }
.form-check { display: flex; align-items: flex-start; gap: var(--admin-space-2); margin-bottom: var(--admin-space-3); }
.form-check-input { flex: none; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; }
.form-check-label { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: var(--admin-space-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--admin-space-2); min-height: var(--admin-control-h); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--admin-radius-md); padding: var(--admin-space-2) var(--admin-space-3); font-size: var(--admin-font-xs); line-height: 1.3; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap; }
.btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.btn-sm, .btn-group-sm .btn { min-height: var(--admin-control-h); padding: var(--admin-space-1) var(--admin-space-2); font-size: var(--admin-font-xs); }
.btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); border-color: var(--accent-hover); }
.btn-success { background: var(--text-success); color: var(--bg-surface); border-color: var(--text-success); }
.btn-success:hover { background: var(--text-success); color: var(--bg-surface); }
.btn-outline-primary { color: var(--accent); border-color: var(--border-accent); }
.btn-outline-primary:hover { background: var(--bg-accent-subtle); color: var(--accent); }
.btn-outline-danger { color: var(--text-danger); border-color: var(--border-danger); }
.btn-outline-danger:hover { background: var(--bg-danger); color: var(--text-danger); }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--admin-space-1); }

.row { display: flex; flex-wrap: wrap; gap: var(--admin-space-4); }
.row > * { min-width: 0; }
.col-12 { width: 100%; }
.col-auto { flex: 0 0 auto; }
.justify-content-center { justify-content: center; }
.align-items-end { align-items: end; }
.align-items-center { align-items: center; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-block { display: block; }
.gap-2 { gap: var(--admin-space-2); }
.gap-3 { gap: var(--admin-space-4); }
.facts { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 0; }
.facts dt, .facts dd { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--border-light); margin: 0; }
.facts dt { color: var(--text-secondary); font-weight: 600; }
.facts dt:last-of-type, .facts dd:last-of-type { border: 0; }
dl.row:not(.facts) { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 0; }
dl.row:not(.facts) dt, dl.row:not(.facts) dd { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--border-light); margin: 0; }
dl.row:not(.facts) dt { color: var(--text-secondary); }
.text-body-secondary, .text-muted { color: var(--text-secondary); }
.form-text { margin-top: var(--admin-space-2); color: var(--text-secondary); font-size: var(--admin-font-2xs); line-height: 1.5; }
.form-control:disabled, .form-select:disabled { background: var(--bg-surface-tool); color: var(--text-secondary); cursor: not-allowed; }
input[type='search'] { appearance: auto; }
textarea.form-control { min-height: 7rem; resize: vertical; }
.table td { font-variant-numeric: tabular-nums; }
.table td .btn + .btn { margin-left: var(--admin-space-2); }
.btn-link { background: none; border-color: var(--border-light); color: var(--accent); }
.p-0 { padding: 0; }
.my-3 { margin-block: var(--admin-space-4); }
.my-4 { margin-block: var(--admin-space-6); }
.m-0 { margin: 0; }
.justify-content-end { justify-content: flex-end; }
.list-inline { list-style: none; padding: 0; display: flex; gap: var(--admin-space-2); flex-wrap: wrap; }
.col { flex: 1 1 180px; }
.text-danger { color: var(--text-danger); }
.text-break { overflow-wrap: anywhere; }
.text-end { text-align: right; }
.fw-semibold { font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-auto { margin-left: auto; }
.ms-4 { margin-left: var(--admin-space-6); }
.me-2 { margin-right: var(--admin-space-2); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }.mb-1 { margin-bottom: var(--admin-space-1); }.mb-2 { margin-bottom: var(--admin-space-2); }.mb-3 { margin-bottom: var(--admin-space-4); }.mb-4 { margin-bottom: var(--admin-space-6); }
.mt-2 { margin-top: var(--admin-space-2); }.mt-3 { margin-top: var(--admin-space-4); }
.py-2 { padding-top: var(--admin-space-2); padding-bottom: var(--admin-space-2); }.py-3 { padding-top: var(--admin-space-4); padding-bottom: var(--admin-space-4); }
.w-auto { width: auto; }.h-100 { height: 100%; }
.grant-form .card-body > .mb-4 { padding: var(--admin-space-4) 0; border-bottom: 1px solid var(--border-light); }
.grant-form .card-body > .mb-4 h2 { margin-bottom: var(--admin-space-2); }
.grant-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--admin-space-4); padding-top: var(--admin-space-1); }
.search-row { display: flex; gap: var(--admin-space-3); flex-wrap: wrap; }
.search-row .form-control { flex: 1 1 240px; max-width: none; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-4); flex-wrap: wrap; margin-bottom: var(--admin-space-4); }
.section-heading h2 { margin-bottom: 0; }
.queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--admin-space-4); }
.queue-card { display: flex; flex-direction: column; gap: var(--admin-space-3); padding: var(--admin-card-pad); background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--admin-radius-lg); text-decoration: none; color: var(--text-primary); }
.queue-card:hover { color: var(--text-primary); border-color: var(--border-accent); }
.queue-card[aria-current='page'] { border-color: var(--border-accent); background: var(--bg-accent-subtle); }
.order-status-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.order-status-grid .queue-label { font-size: var(--admin-font-xs); }
.order-status-grid .queue-total, .subscription-status-grid .queue-total { margin-top: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--admin-space-4); }
.history-list { list-style: none; padding: 0; }
.history-list li { padding-block: var(--admin-space-3); border-bottom: 1px solid var(--border-light); overflow-wrap: anywhere; }
.roster-row { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); flex-wrap: wrap; overflow-wrap: anywhere; }
.disclosure-panel { padding: var(--admin-space-4); border: 1px solid var(--border-light); border-radius: var(--admin-radius-md); }
.disclosure-panel > summary { cursor: pointer; font-weight: 600; min-height: var(--admin-control-h); align-content: center; }
.decision-secondary { border-left: 1px solid var(--border-light); padding-left: var(--admin-space-4); }
.org-management .disclosure-panel:not([open]) { padding: 0; width: fit-content; max-width: 100%; }
.org-management .disclosure-panel:not([open]) > summary { min-height: var(--admin-control-h-compact); padding: var(--admin-space-1) var(--admin-space-2); font-size: var(--admin-font-2xs); line-height: 1.3; }
.org-management .danger-zone[open] { max-width: min(32rem, 100%); min-width: 0; overflow-wrap: anywhere; }
.domain-action { display: flex; align-items: flex-start; gap: var(--admin-space-2); flex-wrap: wrap; max-width: 100%; }
.danger-zone { border-color: var(--border-danger); }
.danger-zone > summary { color: var(--text-danger); }
.user-row-actions { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: nowrap; gap: var(--admin-space-2); }
.user-row-actions > .danger-zone { padding: 0; text-align: left; }
.user-row-actions > .btn-sm, .user-row-actions > .danger-zone > summary { min-height: var(--admin-control-h-compact); padding: var(--admin-space-1) var(--admin-space-2); font-size: var(--admin-font-2xs); line-height: 1.3; white-space: nowrap; }
.user-row-actions > .danger-zone[open] { padding: var(--admin-space-3); }
.change-preview { padding: var(--admin-space-4); background: var(--bg-surface-tool); border: 1px solid var(--border-light); border-radius: var(--admin-radius-md); align-self: start; }
.filter-shortcuts { display: flex; gap: var(--admin-space-3); flex-wrap: wrap; }
.filter-shortcuts a { font-size: var(--admin-font-xs); }
.align-self-end { align-self: flex-end; }
.queue-label { font-weight: 600; }
.queue-total { font-size: 2.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.queue-action { margin-top: auto; padding-top: var(--admin-space-2); color: var(--accent); font-weight: 600; font-size: var(--admin-font-xs); }
.purchase-slip { max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--admin-radius-md); }
.slip-provider-response { max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--admin-space-3); background: var(--bg-surface-tool); border: 1px solid var(--border-light); border-radius: var(--admin-radius-md); font-size: var(--admin-font-2xs); }

@media (min-width: 768px) {
    .col-md { flex: 1 1 0; }.col-md-8 { width: 66.666%; }.col-sm-3 { width: 25%; }.col-sm-9 { width: 75%; }
}
@media (min-width: 992px) { .col-lg-6 { width: 50%; } }
@media (min-width: 1200px) { .col-xl-6 { width: calc(50% - var(--admin-space-2)); } }
@media (max-width: 767px) {
    .site-header { gap: var(--admin-space-3); }
    .site-header a:not(.site-brand) { display: none; }
    .workspace { display: block; }
    .admin-nav { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border-light); padding: var(--admin-space-2) var(--admin-space-4); }
    .admin-menu { height: auto; }
    .admin-menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); min-height: 44px; cursor: pointer; font-weight: 700; list-style: none; }
    .admin-menu-toggle::-webkit-details-marker { display: none; }
    .admin-menu-toggle::after { content: '+'; color: var(--accent); }
    .admin-menu[open] > .admin-menu-toggle::after { content: '−'; }
    .admin-menu-current { margin-left: auto; }
    .admin-nav-content { padding-block: var(--admin-space-4); gap: var(--admin-space-4); }
    .admin-links { display: grid; gap: var(--admin-space-1); }
    .admin-links a { min-height: 44px; }
    .admin-account { margin-top: 0; padding: var(--admin-space-2) var(--admin-space-3) 0; display: flex; flex-wrap: wrap; align-items: center; }
    .workspace-main { padding: var(--admin-space-5) var(--admin-space-4); }
    .facts, dl.row:not(.facts) { grid-template-columns: 1fr; }
    .facts dt, dl.row:not(.facts) dt { padding-bottom: 0; border: 0; }
    .facts dd, dl.row:not(.facts) dd { padding-top: var(--admin-space-1); }
    .row > .col-auto { max-width: 100%; }
    .decision-secondary { border-left: 0; border-top: 1px solid var(--border-light); padding-left: 0; padding-top: var(--admin-space-4); }
}