/* Admin dashboard shell — riusa i token globali (--quindi-*) per coerenza
   visiva con la dashboard utente, ma con accenti piu' "operativi": niente
   ombre dense, niente animazioni hover su righe (vogliamo che l'operatore
   scorra liste lunghe senza distrazioni). */

.admin-shell {
    /* Fluid on large screens (was a hard 1400px cap that wasted full-screen width). Matches the
       user dashboard's shell so both use the display consistently. */
    padding: 32px clamp(24px, 3.5vw, 52px);
    max-width: 1720px;
    margin: 0 auto;
}

/* Keep the product lockup at the same scale as the dashboard topbar. */
.admin-shell > .page-topbar .brand h1 {
    font-size: 20px;
    white-space: nowrap;
}

.admin-body.with-rail {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.admin-rail {
    position: sticky;
    /* Clears the floating .page-topbar (sticky at top:12px, ~62px tall). */
    top: 88px;
    align-self: start;
    background: linear-gradient(180deg, var(--quindi-surface-2), var(--quindi-surface));
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    box-shadow: var(--glass-shadow-soft);
}

/* Idle items sit back (muted) so the selected item and hover target read first —
   scanning a 16-item rail is the operator's primary job here. */
/* Group label in the admin rail. */
.admin-nav-section {
    margin: 16px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
    opacity: 0.7;
}
.admin-nav-section:first-child { margin-top: 0; }

.admin-nav {
    position: relative;
    display: block;
    padding: 9px 12px 9px 15px;
    color: var(--quindi-text-soft);
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.admin-nav:hover {
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    text-decoration: none;
}
.admin-nav.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
/* Selected-tab marker: a short accent bar pinned to the rail edge. */
.admin-nav.active::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.admin-main {
    min-width: 0; /* niente overflow su tabelle larghe */
}
.admin-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
}
.admin-loading {
    color: var(--quindi-text-soft);
    font-size: 13px;
    padding: 24px 0;
}

/* ── Panels, toolbars, form rows & text utilities ───────────────────────────
   Shared chrome for the filter/toolbar blocks above admin tables. .admin-panel
   replaces the never-defined .glass-panel the admin pages leaned on, which
   left those blocks with no surface or border at all. */
.admin-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent), var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow-soft);
}
/* Controls inside a panel span their cell — drops the repeated inline
   style="width:100%" the filter forms carried on every input/select. */
.admin-panel .search-input { width: 100%; }

/* Intro paragraph spacing under the page title (all admin pages). */
.admin-intro { margin-bottom: 16px; }

/* Responsive filter grid (audit log): controls wrap below ~180px;
   align-items:end keeps the Clear button on the inputs' baseline. */
.admin-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

/* Horizontal control strip (email outbox). Combine with .admin-panel when the
   strip is itself the panel; .push-right pins a trailing count to the right. */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
/* Search field inside a toolbar caps its width (was inline style="max-width:…"). */
.admin-toolbar .search-input { max-width: 360px; }
.admin-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrapping form row (external guests): fields + action button, bottom-aligned,
   wrapping on narrow viewports. .admin-field grows; --wide takes double share. */
.admin-form-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-field { flex: 1 1 220px; }
.admin-field-wide { flex: 2 1 220px; }

/* Right-aligned action buttons inside a table cell. */
.admin-row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
/* Centered prev/next pager under a table. */
.admin-pager {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
/* Inline error line (replaces off-theme raw hex like #d24). */
.admin-error {
    color: var(--quindi-red);
    margin-top: 8px;
}

.muted { color: var(--quindi-text-soft); }
.text-right { text-align: right; }
.push-right { margin-left: auto; }
.clickable { cursor: pointer; }
.admin-table-scroll { overflow-x: auto; }
.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.admin-table-link {
    color: var(--accent);
    text-decoration: none;
}
.admin-table-link:hover {
    text-decoration: underline;
}
.admin-panel-head > .admin-table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid rgba(0, 214, 143, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(0, 214, 143, 0.08);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.admin-panel-head > .admin-table-link:hover {
    border-color: rgba(0, 214, 143, 0.45);
    background: rgba(0, 214, 143, 0.13);
    color: var(--quindi-text);
    text-decoration: none;
}
.glass-button.disabled,
.glass-button:disabled {
    opacity: 0.55;
    pointer-events: none;
}
.glass-button.danger {
    color: var(--quindi-red);
    border-color: rgba(229, 72, 77, 0.4);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--quindi-border);
    color: var(--quindi-text-soft);
    background: rgba(255, 255, 255, 0.04);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.badge-ok {
    color: var(--accent);
    border-color: rgba(0, 214, 143, 0.35);
    background: rgba(0, 214, 143, 0.08);
}
.badge-info {
    color: #8FB6FF;
    border-color: rgba(91, 154, 255, 0.35);
    background: rgba(91, 154, 255, 0.12);
}
.badge-warn {
    color: #f6c76d;
    border-color: rgba(246, 199, 109, 0.35);
    background: rgba(246, 199, 109, 0.1);
}
.badge-danger {
    color: var(--quindi-red);
    border-color: rgba(229, 72, 77, 0.4);
    background: rgba(229, 72, 77, 0.1);
}
.badge-muted {
    color: var(--quindi-text-soft);
}

.admin-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.admin-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--quindi-text-soft);
}
.admin-detail-meta > * {
    min-width: 0;
}
.admin-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--quindi-border-soft);
}
.admin-panel-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.admin-version-notes {
    width: min(520px, 100%);
    min-width: 320px;
    resize: vertical;
    font-size: 13px;
    line-height: 1.4;
}
.admin-version-current {
    margin-left: 8px;
    vertical-align: middle;
}
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}
.admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.admin-action-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.admin-inline-form .search-input {
    min-width: 0;
    width: 100%;
}
.admin-empty-inline {
    color: var(--quindi-text-soft);
    font-size: 13px;
    padding: 6px 0;
}
.admin-stat-compact {
    font-size: 20px;
    line-height: 1.25;
}
.admin-canvas-preview {
    position: relative;
    height: min(680px, calc(100vh - 240px));
    min-height: 420px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Fullscreen view of the canvas preview (browser Fullscreen API on the container).
   The host inside is position:absolute inset:0, so it follows to fill the screen. */
.admin-canvas-preview:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: var(--quindi-bg, #0A0A0A);
}

/* On-theme "missing" pill for orphaned-FK rows (was an inline #f87171 pill). */
.admin-tag-missing {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--quindi-red);
    border: 1px solid var(--quindi-red);
    background: rgba(229, 72, 77, 0.1);
}

/* ── Tools / cards grid ──────────────────────────────────────────────────────
   Card grid used by /admin/tools and /admin/announcements. Lived in a <style>
   block inside AdminTools.razor, which meant the classes were undefined on any
   other page that reused them (the announcements card rendered with no
   surface). Hoisted here so every page gets them. */
.admin-tools-section {
    margin: 24px 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
}
.admin-tools-section:first-of-type { margin-top: 0; }
/* ...but a section heading sitting right under a stat-card grid keeps its air even
   when it's the page's first one (Versions "Application", System info "Runtime"). */
.admin-stat-grid + .admin-tools-section { margin-top: 24px; }
.admin-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.admin-tools-card {
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-tools-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.admin-tools-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.admin-tools-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--quindi-border);
    color: var(--quindi-text-soft);
}
.admin-tools-badge.ok {
    color: var(--accent);
    border-color: rgba(0, 214, 143, 0.35);
    background: rgba(0, 214, 143, 0.08);
}
.admin-tools-desc {
    margin: 0;
    font-size: 13px;
    color: var(--quindi-text-soft);
    line-height: 1.45;
    flex: 1;
}
.admin-tools-actions {
    display: flex;
    justify-content: flex-end;
}

/* Overview: griglia di card statistiche compatte. */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.admin-stat-card {
    background: linear-gradient(180deg, var(--quindi-surface-2), var(--quindi-surface));
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 18px;
    /* Catch-light along the top edge — matches the gallery/trash card family. */
    box-shadow: var(--glass-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.admin-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--quindi-text-soft);
    margin-bottom: 6px;
}
.admin-stat-value {
    font-size: 30px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--quindi-text);
    font-variant-numeric: tabular-nums;
}
.admin-stat-hint {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--quindi-text-soft);
}

/* Coverage meter — the signature element of the thumbnails page: a slim bar that
   turns the headline percentage into an at-a-glance read of how close to 100% the
   live scenes are. Brand-green fill on a faint track; height stays understated. */
.admin-meter {
    height: 4px;
    margin: 12px 0 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.admin-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

/* Header con titolo + meta inline (es. timestamp di refresh nella pagina
   /admin/system). Usato come alternativa al solo <h2 class="admin-title"> quando
   serve mostrare info a destra sulla stessa baseline. */
.admin-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.admin-section-header .admin-title {
    margin: 0;
}

/* Database browser: dense operator layout with a table rail, summary cards and
   sticky headers for large row sets. */
.admin-db-summary {
    margin-bottom: 16px;
}

.admin-db-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.admin-db-sidebar {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 12px;
}

.admin-db-table-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-db-table-btn {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--quindi-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-db-table-btn:hover {
    background: var(--quindi-surface-2);
}

.admin-db-table-btn.active {
    border-color: rgba(0, 214, 143, 0.28);
    background: var(--accent-soft);
}

.admin-db-table-btn > span:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-db-table-btn strong {
    font-size: 13px;
    line-height: 1.2;
}

.admin-db-table-btn small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--quindi-text-soft);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 11px;
    line-height: 1.2;
}

.admin-db-panel {
    min-width: 0;
}

.admin-db-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 124px auto minmax(210px, auto);
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.admin-db-search {
    max-width: none;
}

.admin-db-page-size {
    max-width: 124px;
}

.admin-db-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-db-page-label {
    min-width: 72px;
    color: var(--quindi-text-soft);
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.admin-db-table-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--quindi-text-soft);
    font-size: 11px;
}

.admin-db-table-wrap {
    max-height: min(680px, calc(100vh - 360px));
    min-height: 320px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    overflow: auto;
}

.admin-db-table {
    min-width: 920px;
}

.admin-db-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--quindi-surface);
}

.admin-db-table th,
.admin-db-table td {
    white-space: nowrap;
}

.admin-db-cell {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-db-cell-empty {
    color: var(--quindi-text-soft);
}

.admin-db-null {
    color: var(--quindi-text-soft);
    font-style: italic;
}

.admin-db-id {
    color: var(--quindi-text);
    font-variant-numeric: tabular-nums;
}

.admin-db-empty {
    min-height: 260px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px dashed var(--quindi-border);
    border-radius: var(--radius-md);
}

/* Logs console: dense, process-local output for live diagnostics. */
.admin-log-panel {
    min-height: min(720px, calc(100vh - 180px));
}

.admin-log-toolbar {
    display: grid;
    grid-template-columns: 160px minmax(240px, 1fr) auto auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

.admin-log-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-log-field > span {
    color: var(--quindi-text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-log-search {
    min-width: 0;
}

.admin-log-auto {
    min-height: 36px;
    white-space: nowrap;
}

.admin-log-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--quindi-text-soft);
    font-size: 11px;
}

.admin-log-console {
    height: min(680px, calc(100vh - 320px));
    min-height: 420px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: #05070a;
}

.admin-log-row {
    padding: 9px 10px 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.admin-log-row + .admin-log-row {
    margin-top: 8px;
}

.admin-log-row.level-information {
    border-left-color: #8FB6FF;
}

.admin-log-row.level-warning {
    border-left-color: #f6c76d;
}

.admin-log-row.level-error,
.admin-log-row.level-critical {
    border-left-color: var(--quindi-red);
}

.admin-log-row.level-debug,
.admin-log-row.level-trace {
    border-left-color: var(--accent);
}

.admin-log-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--quindi-text-soft);
    font-size: 11px;
}

.admin-log-source {
    min-width: 0;
    max-width: min(560px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-log-row pre {
    margin: 7px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(255, 255, 255, 0.88);
    font: 11px/1.45 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (max-width: 900px) {
    .admin-db-layout {
        grid-template-columns: 1fr;
    }

    .admin-db-sidebar {
        position: static;
        max-height: none;
    }

    .admin-db-table-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .admin-db-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-db-page-size {
        max-width: none;
    }

    .admin-db-pager {
        justify-content: space-between;
    }

    .admin-log-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-log-auto {
        min-height: 0;
    }

    .admin-log-console {
        height: min(620px, calc(100vh - 360px));
        min-height: 360px;
    }
}

/* Key/value list per metadati "stringa" non quantitativi (es. OS, runtime).
   Diversa dalle stat-card perche' qui il valore e' testuale e ha senso vederlo
   in linea, non in un riquadro grande. */
.admin-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 13px;
}
.admin-info-grid > div {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--quindi-border-soft);
}
.admin-info-grid > div:last-child {
    border-bottom: none;
}
.admin-info-key {
    flex: 0 0 140px;
    color: var(--quindi-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    align-self: center;
}
.admin-info-val {
    margin-left: auto;
    text-align: right;
    color: var(--quindi-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.admin-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.admin-usage-card {
    min-width: 0;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--quindi-surface-2);
}

.admin-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--quindi-text-soft);
    margin-bottom: 10px;
}

.admin-usage-head strong {
    color: var(--quindi-text);
    font-size: 16px;
}

.admin-usage-bars {
    height: 132px;
    display: grid;
    grid-template-columns: repeat(14, minmax(8px, 1fr));
    gap: 5px;
    align-items: end;
}

.admin-usage-bar-slot {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.admin-usage-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--accent), rgba(0, 214, 143, 0.38));
}

.admin-usage-bar-slot span {
    font-size: 10px;
    line-height: 1;
    color: var(--quindi-text-soft);
}

/* Tabelle admin: dense, monospaced sugli id, niente alternating row colors
   (rumore visivo per liste lunghe). */
.admin-table {
    width: 100%;
    /* Contained surface (separate + spacing:0 lets the outer border round cleanly) so the table
       reads as a panel instead of floating bare on the page. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--glass-shadow-soft);
}
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    /* Header band, so the column labels read as a distinct row. */
    background: var(--quindi-surface-2);
    border-bottom: 1px solid var(--quindi-border);
    color: var(--quindi-text-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}
.admin-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--quindi-border-soft);
    vertical-align: top;
    color: var(--quindi-text);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tr:hover td {
    background: var(--quindi-surface-2);
}
.admin-table td.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--quindi-text-soft);
}
/* Keyboard-accessible sort controls. The neutral indicator stays visible so
   every sortable column is discoverable before the first click. */
.admin-table th.sortable {
    padding: 0;
    user-select: none;
}
.admin-sort-button {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.admin-table th.text-right .admin-sort-button {
    justify-content: flex-end;
}
.admin-sort-button:hover,
.admin-table th[aria-sort="ascending"] .admin-sort-button,
.admin-table th[aria-sort="descending"] .admin-sort-button {
    color: var(--quindi-text);
}
.admin-sort-button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}
.admin-sort-indicator {
    width: 10px;
    color: var(--quindi-text-soft);
    font-size: 12px;
    line-height: 1;
    opacity: 0.55;
}
.admin-table th[aria-sort="ascending"] .admin-sort-indicator,
.admin-table th[aria-sort="descending"] .admin-sort-indicator {
    color: var(--accent);
    opacity: 1;
}

/* The document browser can contain hundreds of rows. Keep its header visible,
   preserve compact numeric columns and scroll inside the list rather than
   stretching the entire admin page several screens tall. */
.admin-documents-table-scroll {
    max-height: max(360px, calc(100vh - 260px));
    border-radius: var(--radius-md);
    scrollbar-gutter: stable;
}
.admin-documents-table {
    min-width: 940px;
}
.admin-documents-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.admin-documents-table .admin-select-column {
    width: 36px;
    padding-inline: 12px;
}
.admin-documents-table td:nth-child(2) {
    min-width: 210px;
}
.admin-documents-table td:nth-child(3) {
    min-width: 175px;
}
.admin-nowrap {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.admin-document-title-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.admin-document-title-link {
    min-width: 0;
    color: var(--quindi-text);
    font-weight: 500;
    text-decoration: none;
}
.admin-document-title-link:hover,
.admin-document-title-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.admin-document-preview-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 3px 7px;
    border: 1px solid var(--quindi-border-soft);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--quindi-text-soft);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.admin-document-preview-button:hover,
.admin-document-preview-button:focus-visible {
    border-color: rgba(0, 214, 143, 0.32);
    background: var(--accent-soft);
    color: var(--accent);
}
.admin-document-preview-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-document-preview-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
}
.admin-document-preview-modal .modal-header {
    min-width: 0;
}
.admin-document-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
}
.admin-document-preview-meta span:not(:first-child)::before {
    content: "·";
    margin: 0 7px;
    color: var(--quindi-text-soft);
}
.admin-document-preview-canvas {
    overflow: hidden;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    background: #fff;
}
.admin-document-preview-canvas:fullscreen {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
}
.admin-document-preview-canvas:fullscreen .excalidraw-host {
    position: absolute;
    inset: 0;
}
.admin-preview-readonly {
    margin-right: auto;
    color: var(--quindi-text-soft);
    font-size: 12px;
}
.admin-preview-fullscreen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 720px) {
    .glass-modal.wide.admin-document-preview-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100vh - 16px);
    }
    .admin-preview-fullscreen {
        font-size: 0;
        gap: 0;
    }
}

.admin-link {
    /* Match GlassButton ghost spacing/look anche su <a> in topbar. */
    text-decoration: none;
}

/* ── Import log list (admin/import) ──────────────────────────────────────────
   The processed-documents panel used to be an 8-column table where each row's
   conversion log was squeezed into a word-broken 360px cell — unreadable for
   failures, where the log matters most. This lays each attempt out as a card:
   a status rail, a one-line header, a meta strip, and the full log given its
   own monospace block underneath. */
.import-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.import-log-item {
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 14px;
    padding: 12px 14px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border-soft);
    border-radius: var(--radius-md);
}
/* Status rail: green for a clean import, red for a failure — an at-a-glance
   read down the left edge of the list. */
.import-log-rail {
    border-radius: 999px;
    background: var(--accent);
}
.import-log-item.is-failed .import-log-rail {
    background: var(--quindi-red);
}
.import-log-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.import-log-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.import-log-file {
    font-size: 13px;
    font-weight: 600;
    color: var(--quindi-text);
    word-break: break-word;
    min-width: 0;
}
/* Meta strip: timestamp · target · size · duration · by, middot-separated. */
.import-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--quindi-text-soft);
}
.import-log-meta > * + *::before {
    content: "·";
    margin-right: 8px;
    color: var(--quindi-border);
}
.import-log-meta .mono { font-size: 11px; }
.import-log-meta a { color: var(--accent); text-decoration: none; }
.import-log-meta a:hover { text-decoration: underline; }
/* The log itself — wraps, scrolls past a sensible height, tinted red on failure. */
.import-log-detail {
    margin: 1px 0 0;
    padding: 8px 10px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border-soft);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 11px;
    line-height: 1.45;
    color: var(--quindi-text-soft);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
}
.import-log-item.is-failed .import-log-detail {
    color: var(--quindi-red);
    border-color: rgba(229, 72, 77, 0.25);
    background: rgba(229, 72, 77, 0.06);
}

/* ── Audit payload modal ────────────────────────────────────────────────── */
/* "view" trigger on each audit row opens a floating modal with the pretty-
   printed JSON. The cell is 1% wide and would otherwise force the JSON into
   an unreadable strip — the modal floats above the table and gives the
   payload room to breathe. */
.audit-payload-trigger {
    /* link-btn already gives us the accent color + cursor; just tighten the
       hit target so the cell stays compact. */
    font-size: 11px;
    padding: 0 4px;
}
.audit-payload-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
    outline: none;
    animation: glass-fade 0.18s ease;
}
.audit-payload-modal {
    width: min(820px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: 8px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.audit-payload-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--quindi-border);
    background: var(--quindi-surface-2);
}
.audit-payload-head-meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.audit-payload-head-actions {
    display: flex;
    gap: 8px;
}
.audit-payload-body {
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--quindi-text);
    background: var(--quindi-surface);
    white-space: pre;
    /* The whole payload should be selectable for copy-fallback when the
       clipboard API is blocked. */
    user-select: text;
}

/* Below 920px the 200px nav rail would squeeze the tables; collapse the grid
   to one column and lay the nav out as horizontal, wrapping tabs above the
   content instead of a sticky side column. */
@media (max-width: 920px) {
    .admin-shell > .page-topbar .brand h1 {
        font-size: 16px;
    }

    .admin-body.with-rail {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .admin-rail {
        position: static;
        top: 0;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .admin-nav {
        flex: 0 0 auto;
    }
    .admin-detail-head {
        flex-direction: column;
    }
    .admin-head-actions {
        justify-content: flex-start;
    }
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }
    .admin-inline-form {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 540px) {
    .admin-shell > .page-topbar .brand h1 {
        font-size: 14px;
    }
}

/* Redis key-value detail (admin/redis modal) */
.redis-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow: auto;
}
.redis-entry {
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--quindi-surface);
}
.redis-field {
    display: block;
    font-size: 11px;
    color: var(--quindi-text-soft);
    margin-bottom: 4px;
    word-break: break-all;
}
.redis-val {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--quindi-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Segmented toggle (e.g. heatmap Aggregato | Giorno) — a clear two-state control
   where the inactive option still reads as a button, not plain text. */
.admin-seg {
    /* Two equal columns so both options are the same width regardless of label length. */
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    padding: 2px;
    gap: 2px;
    background: var(--quindi-bg, #0A0A0A);
    border: 1px solid var(--quindi-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 8px);
}
.admin-seg-btn {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--quindi-text-soft, #8B95A5);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Presence controls: the mode toggle is pinned top-right and never moves; the
   state-dependent secondary controls (period select / day stepper + reload) sit on a
   second right-aligned row below it. */
.admin-presence-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.admin-presence-subcontrols {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 34px; /* reserve the row height so nothing jumps between states */
}
.admin-seg-btn:hover { color: var(--quindi-text, #F4F6F9); }
.admin-seg-btn.is-active {
    color: var(--quindi-text, #F4F6F9);
    background: var(--quindi-surface-2, #1C1C1C);
    box-shadow: inset 0 0 0 1px var(--quindi-border, rgba(255, 255, 255, 0.12));
}

/* Day stepper — one atomic control (‹ date ›) so it never wraps mid-group. */
.admin-daystep {
    display: inline-flex;
    align-items: center;
    background: var(--quindi-bg, #0A0A0A);
    border: 1px solid var(--quindi-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}
.admin-daystep-btn {
    border: 0;
    background: transparent;
    color: var(--quindi-text-soft, #8B95A5);
    font-size: 16px;
    line-height: 1;
    padding: 6px 12px;
    cursor: pointer;
}
.admin-daystep-btn:hover:not(:disabled) { color: var(--quindi-text, #F4F6F9); background: var(--quindi-surface-2, #1C1C1C); }
.admin-daystep-btn:disabled { opacity: 0.35; cursor: default; }
.admin-daystep-label {
    min-width: 150px;
    text-align: center;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--quindi-text, #F4F6F9);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.admin-heatmap-empty { padding: 6px 0; }
.admin-heatmap-empty p { margin: 0 0 6px; color: var(--quindi-text, #F4F6F9); }

/* Compact in-row action button (e.g. the background-services "History" toggle) — a
   clearly-bordered button rather than ghost text, sized down for a table row. */
.admin-row-btn {
    padding: 4px 10px;
    font-size: 12px;
}
.admin-row-btn.is-open {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft, rgba(255, 255, 255, 0.06));
}

/* Presence heatmap (/admin/presence): rows = users, columns = 24 hours of the day.
   Cell intensity (activity) is set via inline opacity on the accent fill. */
.admin-heatmap-scroll { overflow-x: auto; padding-bottom: 6px; }
.admin-heatmap-grid {
    display: grid;
    grid-template-columns: 200px repeat(24, minmax(16px, 1fr));
    gap: 3px;
    align-items: center;
    min-width: 680px;
}
.admin-heatmap-corner { font-size: 10px; color: var(--quindi-text-soft); white-space: nowrap; }
.admin-heatmap-hhead { font-size: 10px; color: var(--quindi-text-soft); text-align: center; }
.admin-heatmap-label {
    font-size: 12px;
    color: var(--quindi-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.admin-heatmap-cell {
    height: 18px;
    border-radius: 3px;
    background: var(--accent, #00D68F);
}
.admin-heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.admin-heatmap-legend .admin-heatmap-cell { width: 18px; }

/* Storage browser */
.admin-prefix-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-chip { padding: 4px 12px; font-size: 12px; line-height: 1.4; }
.admin-storage-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: flex-start;
    margin-top: 12px;
}
@media (max-width: 1100px) {
    .admin-storage-grid { grid-template-columns: 1fr; }
}
.admin-storage-aside {
    position: sticky;
    top: 32px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 16px;
    min-height: 200px;
}
.admin-storage-aside-key {
    font-size: 11px;
    color: var(--quindi-text-soft);
    word-break: break-all;
    margin-bottom: 12px;
}
.admin-storage-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0 0 12px;
    font-size: 12px;
}
.admin-storage-meta dt { color: var(--quindi-text-soft); }
.admin-storage-meta dd { margin: 0; word-break: break-all; }
.admin-storage-aside-actions { margin-top: 14px; }
.admin-table tr.is-selected { background: color-mix(in srgb, var(--accent, #00D68F) 12%, transparent); }