/* =========================================================================
   auxilium.admin.css
   Stili condivisi dalle pagine di amministrazione (/admin/utenti,
   /admin/utenti/{id}, e future admin views).
   Vengono importati globalmente da app.css, così tutte le pagine admin
   possono riferirsi alle stesse classi senza duplicarle nei file *.razor.css.
   ========================================================================= */

.admin-page {
    padding: var(--ax-space-6) var(--ax-page-padding);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-5);
    max-width: var(--ax-page-max);
    margin: 0 auto;
    min-width: 0;
    width: 100%;
}

/* ---------- HEADER ---------- */
.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-6);
    flex-wrap: wrap;
}

.admin-kicker {
    font-size: var(--ax-fs-11);
    font-weight: 600;
    color: var(--ax-primary-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-title {
    margin: 6px 0 0 0;
    font-size: var(--ax-fs-32);
    line-height: 1.15;
    font-weight: 700;
    color: var(--ax-primary-700);
    letter-spacing: -0.02em;
}

.admin-subtitle {
    margin: var(--ax-space-2) 0 0 0;
    max-width: 640px;
    color: var(--ax-text-3);
    font-size: var(--ax-fs-13);
    line-height: 1.5;
}

.theme-dark .admin-kicker {
    color: #2f6fe4;
}

.theme-dark .admin-title {
    color: #2f6fe4;
}

/* ---------- STATS ---------- */
.admin-stats {
    display: flex;
    gap: var(--ax-space-3);
    flex-wrap: wrap;
}

.admin-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 92px;
    padding: var(--ax-space-3) var(--ax-space-4);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-md);
    box-shadow: var(--ax-shadow-1);
}

.admin-stat-value {
    font-size: var(--ax-fs-24);
    font-weight: 600;
    color: var(--ax-text-1);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.admin-stat-label {
    font-size: var(--ax-fs-11);
    font-weight: 600;
    color: var(--ax-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- ALERT ---------- */
.admin-alert {
    padding: var(--ax-space-3) var(--ax-space-4);
    border-radius: var(--ax-radius-sm);
    font-size: var(--ax-fs-13);
    line-height: 1.4;
    border: 1px solid transparent;
}

.admin-alert.is-success {
    background: var(--ax-success-bg);
    border-color: var(--ax-success-border);
    color: var(--ax-success-strong);
}

.admin-alert.is-error {
    background: var(--ax-danger-bg);
    border-color: var(--ax-danger-border);
    color: var(--ax-danger-strong);
}

/* Avviso non bloccante (es. quota vicina al limite).
   Usa le variabili semantiche del design system — si adatta automaticamente
   al tema scuro senza hardcodare colori. */
.admin-alert.is-warning {
    background: var(--ax-warning-bg);
    border-color: var(--ax-warning-border);
    color: var(--ax-warning-strong);
}

/* ---------- TABLE ---------- */
.admin-table-wrap {
    overflow-x: auto;
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-md);
    box-shadow: var(--ax-shadow-1);
    min-width: 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    font-size: var(--ax-fs-13);
}

.admin-table thead th {
    text-align: left;
    padding: var(--ax-space-3) var(--ax-space-4);
    background: var(--ax-panel-bg-soft);
    border-bottom: 1px solid var(--ax-border-soft);
    font-weight: 600;
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: var(--ax-space-3) var(--ax-space-4);
    border-bottom: 1px solid var(--ax-border-soft);
    vertical-align: middle;
    color: var(--ax-text-1);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--ax-panel-bg-soft);
}

.admin-row-self {
    background: var(--ax-primary-50);
}

.admin-row-self:hover {
    background: var(--ax-primary-100) !important;
}

/*
 * In dark mode i token --ax-primary-50/100 restano chiari e produrrebbero
 * una riga bianca con testo bianco: sovrascriviamo con un overlay
 * traslucido del primario così la riga resta leggibile su sfondo scuro
 * e mantiene comunque il significato visivo di "questa sei tu".
 */
[data-theme="dark"] .admin-row-self,
.theme-dark .admin-row-self {
    background: rgba(53, 96, 199, 0.18);
}

[data-theme="dark"] .admin-row-self:hover,
.theme-dark .admin-row-self:hover {
    background: rgba(53, 96, 199, 0.28) !important;
}

[data-theme="dark"] .admin-row-self td,
.theme-dark .admin-row-self td {
    color: var(--ax-text-1);
}

.admin-empty {
    text-align: center;
    padding: var(--ax-space-6);
    color: var(--ax-text-3);
    font-style: italic;
}

/* ---------- KEBAB MENU (azioni admin pericolose) ---------- */
.admin-kebab {
    position: relative;
    display: inline-block;
}

.admin-kebab-trigger {
    min-width: 36px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px;
}

.admin-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius-md, 8px);
    box-shadow: var(--ax-shadow-2);
    padding: 6px 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.admin-kebab-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 14px;
    color: var(--ax-text-1);
    font-size: var(--ax-fs-13);
    cursor: pointer;
    white-space: nowrap;
}

.admin-kebab-item:hover:not(:disabled) {
    background: var(--ax-panel-bg-soft);
}

.admin-kebab-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-kebab-danger {
    color: var(--ax-danger, #b91c1c);
}

.admin-kebab-danger:hover:not(:disabled) {
    background: var(--ax-danger-bg, rgba(185, 28, 28, 0.08));
}

.admin-text-muted {
    color: var(--ax-text-3);
    font-variant-numeric: tabular-nums;
}

/* User-Agent: spesso è lunghissimo, tronchiamolo in tabella. */
.admin-ua {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ax-font-mono, monospace);
    font-size: var(--ax-fs-11);
}

/* =========================================================================
   HUB /admin: riga KPI + sezioni raggruppate.
   Questi stili stanno QUI (globale) e non nel .razor.css scoped perché
   colpiscono anche elementi resi da componenti figli — NavLink genera <a>,
   FluentIcon genera <svg> — a cui l'isolamento CSS di Blazor non applica
   l'attributo di scope. Nello scoped le righe restavano senza stile e
   andavano a capo.
   ========================================================================= */

/* ---------- RIGA KPI ---------- */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ax-space-4);
}

.admin-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--ax-space-4);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
}

/* Etichetta con icona piccola in linea (non una chip grande a fianco). */
.admin-kpi-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ax-fs-13);
    font-weight: 600;
    color: var(--ax-text-3);
}

.admin-kpi-label svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex-shrink: 0;
}

.admin-kpi-value {
    font-size: var(--ax-fs-32, 2rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ax-text-1);
    font-variant-numeric: tabular-nums;
}

.admin-kpi-delta {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
}

/* Delta "positivo" (crescita utenti, zero incidenti) in verde. */
.admin-kpi-delta.is-up {
    color: var(--ax-success-strong);
}

/* ---------- SEZIONI RAGGRUPPATE ---------- */
.admin-nav-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--ax-space-4);
    align-items: start;
}

.admin-nav-group {
    padding: var(--ax-space-4) var(--ax-space-5) var(--ax-space-3);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
}

.admin-nav-group-title {
    margin: 0 0 var(--ax-space-3);
    padding-bottom: var(--ax-space-3);
    border-bottom: 1px solid var(--ax-border-soft);
    font-size: var(--ax-fs-16);
    font-weight: 600;
    color: var(--ax-text-1);
    letter-spacing: -0.005em;
}

.admin-nav-row {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3);
    border-radius: var(--ax-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease;
}

.admin-nav-row:hover {
    background: var(--ax-panel-bg-soft);
}

.admin-nav-row.is-static {
    cursor: default;
}

.admin-nav-row.is-static:hover {
    background: transparent;
}

.admin-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ax-radius-md);
    flex-shrink: 0;
}

.admin-nav-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Colori per categoria della chip icona: token semantici già theme-aware. */
.admin-nav-icon.is-persone { background: var(--ax-info-bg); color: var(--ax-info-strong); }
.admin-nav-icon.is-studi { background: var(--ax-success-bg); color: var(--ax-success-strong); }
.admin-nav-icon.is-sicurezza { background: var(--ax-danger-bg); color: var(--ax-danger-strong); }
.admin-nav-icon.is-piattaforma { background: var(--ax-warning-bg); color: var(--ax-warning-strong); }

.admin-nav-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.admin-nav-title {
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: var(--ax-text-1);
}

.admin-nav-sub {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
}

.admin-nav-arrow {
    display: inline-flex;
    color: var(--ax-text-3);
    flex-shrink: 0;
}

.admin-nav-arrow svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 640px) {
    .admin-kpi-grid,
    .admin-nav-groups {
        grid-template-columns: 1fr;
    }
}

/* ---------- BADGES ---------- */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ax-radius-pill);
    font-size: var(--ax-fs-11);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.admin-badge-free {
    background: var(--ax-gray-100);
    color: var(--ax-gray-700);
    border-color: var(--ax-gray-200);
}

.admin-badge-pro {
    background: var(--ax-primary-50);
    color: var(--ax-primary-700);
    border-color: var(--ax-primary-200);
}

.admin-badge-enterprise {
    background: var(--ax-accent-100);
    color: var(--ax-accent-800);
    border-color: var(--ax-accent-200);
}

.admin-badge-admin {
    background: var(--ax-primary-700);
    color: var(--ax-text-on-primary);
    border-color: var(--ax-primary-800);
}

.admin-tag {
    display: inline-block;
    margin-left: var(--ax-space-2);
    padding: 1px 8px;
    border-radius: var(--ax-radius-pill);
    font-size: var(--ax-fs-11);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-tag-self {
    background: var(--ax-accent-500);
    color: #ffffff;
}

/* ---------- STATUS DOT ---------- */
.admin-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--ax-space-2);
    vertical-align: middle;
}

.admin-dot-ok {
    background: var(--ax-success);
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
}

.admin-dot-warn {
    background: var(--ax-warning);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15);
}

/* ---------- ACTIONS ---------- */
.admin-col-actions {
    text-align: right;
}

.admin-actions {
    display: inline-flex;
    gap: var(--ax-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-action {
    min-height: 30px;
    padding: 4px 10px;
    font-size: var(--ax-fs-12);
    font-weight: 500;
}

/* Azioni nelle tabelle: l'attributo data-table-action seleziona l'icona.
   La stessa convenzione vale per tabelle admin, dashboard e studi. */
table [data-table-action] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

/* L'icona va impostata con background-image diretto su ::before. Passando
   l'url tramite una custom property dentro lo shorthand `background` il
   browser spesso non dipinge l'immagine al primo render: l'icona spuntava
   solo dopo un ricalcolo di stile (es. l'hover). Con l'url diretto si vede
   sempre. */
table [data-table-action]::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

table [data-table-action="open"]::before {
    background-image: url("/css/Icons8/icons8-modifica-file-50.png");
}

table [data-table-action="detail"]::before {
    background-image: url("/css/Icons8/icons8-occhio-50.png");
}

table [data-table-action="edit"]::before,
table [data-table-action="rename"]::before {
    background-image: url("/css/Icons8/icons8-matita-50.png");
}

table [data-table-action="save"]::before,
table [data-table-action="publish"]::before {
    background-image: url("/css/Icons8/icons8-salva-50.png");
}

table [data-table-action="confirm"]::before {
    background-image: url("/css/Icons8/icons8-spunta-50.png");
}

table [data-table-action="delete"]::before,
table [data-table-action="close"]::before {
    background-image: url("/css/Icons8/icons8-elimina-50.png");
}

/* Disattiva ≠ Elimina: il divieto rosso distingue il blocco dalla cancellazione. */
table [data-table-action="disable"]::before {
    background-image: url("/css/Icons8/icons8-divieto-50.png");
}

/* Revoca ruolo (es. Rimuovi Admin): utente con X, distinto dal cestino. */
table [data-table-action="remove"]::before {
    background-image: url("/css/Icons8/icons8-rimuovi-utente-50.png");
}

table [data-table-action="new"]::before,
table [data-table-action="duplicate"]::before {
    background-image: url("/css/Icons8/icons8-creare-nuovo-50.png");
}

/* Promuovi ad Admin: scudo con utente, niente più matita fuorviante. */
table [data-table-action="promote"]::before {
    background-image: url("/css/Icons8/icons8-scudo-utente-50.png");
}

table [data-table-action="refresh"]::before,
table [data-table-action="download"]::before {
    background-image: url("/css/Icons8/icons8-download-degli-aggiornamenti-50.png");
}

table [data-table-action="cancel"]::before {
    background-image: url("/css/Icons8/icons8-cancella-simbolo-50.png");
}

table [data-table-action="archive"]::before {
    background-image: url("/css/Icons8/icons8-nastro-segnalibro-50.png");
}

table [data-table-action]:disabled::before,
table [data-table-action][aria-disabled="true"]::before {
    opacity: 0.5;
    filter: grayscale(0.35);
}

.admin-table-actions,
.admin-col-actions {
    white-space: nowrap;
}

.admin-table-actions > [data-table-action] + [data-table-action] {
    margin-left: 4px;
}

.admin-action-danger {
    background: transparent;
    color: var(--ax-danger);
    border: 1px solid var(--ax-danger-border);
}

.admin-action-danger:hover:not(:disabled):not([disabled]) {
    background: var(--ax-danger);
    color: #ffffff;
    border-color: var(--ax-danger);
}

/* ---------- DETAIL PAGE ---------- */
.admin-detail-back {
    font-size: var(--ax-fs-12);
}

/* EditForm che ospita Anagrafica + Indirizzo fatturazione: si comporta da
   cella della griglia e impila verticalmente le due CardChiudibile + le
   azioni del form, con lo stesso gap delle altre card. */
.admin-detail-form {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-4);
    min-width: 0;
}

.admin-detail-form-actions {
    margin-top: 0;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ax-space-4);
}

.admin-card {
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-5);
    box-shadow: var(--ax-shadow-1);
    min-width: 0;
}

.admin-card-title {
    margin: 0 0 var(--ax-space-3) 0;
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: var(--ax-text-1);
    letter-spacing: 0.01em;
}

/* Sottotitolo opzionale subito sotto il titolo di una card
   (usato nel form anagrafica admin). */
.admin-card-subtitle {
    margin: calc(-1 * var(--ax-space-2)) 0 var(--ax-space-4) 0;
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    line-height: 1.5;
}

/* ===== Card collapsibile (CardChiudibile component) ===== */
/* Riusa lo stile .admin-card, ma l'header (summary) è cliccabile e
   compare un chevron che ruota in apertura. Implementata sopra il
   tag nativo <details>: zero JS, accessibile da tastiera di default. */

.admin-card-collapsible > summary {
    list-style: none;          /* via il triangolino di default del browser */
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-3);
    /* Compensa il padding della admin-card così l'area cliccabile copre
       tutto il bordo superiore della card. */
    margin: calc(-1 * var(--ax-space-5));
    margin-bottom: 0;
    padding: var(--ax-space-5);
    border-radius: var(--ax-radius-md);
}

.admin-card-collapsible > summary::-webkit-details-marker {
    display: none; /* Safari/Chromium */
}

.admin-card-collapsible > summary:hover {
    background: color-mix(in srgb, var(--ax-primary-50) 50%, transparent);
}

.admin-card-collapsible > summary:focus-visible {
    outline: 2px solid var(--ax-primary-500);
    outline-offset: -2px;
}

.admin-card-collapsible-text .admin-card-title,
.admin-card-collapsible-text .admin-card-subtitle {
    margin: 0;
}

.admin-card-collapsible-text .admin-card-subtitle {
    margin-top: 4px;
}

.admin-card-collapsible-chevron {
    flex-shrink: 0;
    font-size: var(--ax-fs-16);
    color: var(--ax-text-3);
    transition: transform 160ms ease;
    line-height: 1;
}

.admin-card-collapsible[open] .admin-card-collapsible-chevron {
    transform: rotate(180deg);
}

.admin-card-collapsible-body {
    /* Riapre lo spazio fra summary (con margini negativi) e il contenuto. */
    margin-top: var(--ax-space-4);
}

/* ===== Form admin (anagrafica, override limiti, ecc.) ===== */

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

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

/* Due campi affiancati a partire da 520px */
.admin-form-row-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ax-space-3);
}

@media (min-width: 520px) {
    .admin-form-row-split {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-form-label {
    font-size: var(--ax-fs-11);
    font-weight: 600;
    color: var(--ax-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-input {
    width: 100%;
    padding: 8px 10px;
    font-size: var(--ax-fs-13);
    color: var(--ax-text-1);
    background: var(--ax-panel-bg-soft);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-sm);
    transition: border-color 120ms, background 120ms;
}

.admin-input:focus {
    outline: none;
    border-color: var(--ax-primary-500);
    background: var(--ax-panel-bg);
}

.admin-input:disabled {
    color: var(--ax-text-3);
    background: var(--ax-panel-bg-soft);
    cursor: not-allowed;
}

.admin-form-section-title {
    margin: var(--ax-space-4) 0 var(--ax-space-2) 0;
    font-size: var(--ax-fs-12);
    font-weight: 600;
    color: var(--ax-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--ax-border-soft);
    padding-top: var(--ax-space-4);
}

.admin-form-actions {
    display: flex;
    gap: var(--ax-space-2);
    flex-wrap: wrap;
    margin-top: var(--ax-space-2);
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ax-space-4);
    margin-bottom: var(--ax-space-3);
    flex-wrap: wrap;
}

.admin-card-header .admin-card-title {
    margin: 0;
}

.admin-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--ax-space-5);
    row-gap: var(--ax-space-2);
    margin: 0;
    font-size: var(--ax-fs-13);
}

.admin-kv dt {
    font-size: var(--ax-fs-11);
    font-weight: 600;
    color: var(--ax-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: center;
}

.admin-kv dd {
    margin: 0;
    color: var(--ax-text-1);
    word-break: break-word;
}

.admin-detail-actions {
    margin-top: var(--ax-space-4);
    justify-content: flex-start;
}

/* Toolbar sopra la tabella (es. pulsante Ricarica elenco). */
.admin-toolbar {
    justify-content: flex-end;
    margin-bottom: var(--ax-space-3);
}

.admin-chart-card .apexcharts-canvas {
    margin: 0 auto;
}

.admin-period-switch {
    display: inline-flex;
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-pill);
    padding: 2px;
    background: var(--ax-panel-bg-soft);
}

.admin-period-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px 12px;
    border-radius: var(--ax-radius-pill);
    font-size: var(--ax-fs-12);
    font-weight: 500;
    color: var(--ax-text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.admin-period-btn:hover {
    color: var(--ax-text-1);
}

.admin-period-btn.is-active {
    background: var(--ax-primary-700);
    color: var(--ax-text-on-primary);
    box-shadow: var(--ax-shadow-1);
}

.admin-history-card .admin-table {
    min-width: 720px;
}

/* ---------- CARD LIMITI E PERMESSI ---------- */
.admin-card-span2 {
    grid-column: 1 / -1;
}

.admin-card-intro {
    margin: 0 0 var(--ax-space-4) 0;
    font-size: var(--ax-fs-13);
    line-height: 1.5;
}

.admin-limits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3) 0;
    border-top: 1px solid var(--ax-border-soft);
    border-bottom: 1px solid var(--ax-border-soft);
    margin-bottom: var(--ax-space-4);
}

.admin-limits-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--ax-space-4);
    align-items: center;
}

.admin-limits-label {
    font-size: var(--ax-fs-13);
    font-weight: 500;
    color: var(--ax-text-2);
}

.admin-limits-control {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    flex-wrap: wrap;
}

.admin-limits-number {
    width: 120px;
}

.admin-limits-select {
    max-width: 320px;
}

.admin-limits-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
}

.admin-limits-hint {
    font-size: var(--ax-fs-12);
}

/* ---------- KPI ROW (calcoli effettuati) ---------- */
/* Riga di indicatori sintetici mostrata in cima alla card "Calcoli effettuati".
   Segue l'impronta delle altre card admin: fondo surface-2, bordo sottile,
   tipografia coerente con le dt/dd dell'anagrafica. */
.admin-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ax-space-2);
    margin: var(--ax-space-3) 0;
}

.admin-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--ax-space-3);
    background: var(--ax-surface-2);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
}

.admin-kpi-label {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-kpi-value {
    font-size: var(--ax-fs-20);
    font-weight: 600;
    color: var(--ax-text-1);
}

/* Variante: per la cella "Ultimo" il valore è una data/ora (stringa lunga),
   quindi riduciamo il font rispetto ai contatori numerici. */
.admin-kpi-value-sm {
    font-size: var(--ax-fs-14);
    font-weight: 500;
}

.admin-text-danger {
    color: #d9534f;
    font-weight: 600;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
    .admin-limits-row {
        grid-template-columns: 1fr;
        gap: var(--ax-space-2);
    }

    .admin-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 800px) {
    .admin-page {
        padding: var(--ax-space-4) var(--ax-space-3);
    }

    .admin-header {
        flex-direction: column;
    }

    .admin-stats {
        width: 100%;
    }

    .admin-stat {
        flex: 1;
        min-width: 0;
    }
}

/* ---------- CARD A LARGHEZZA CONTENUTO (es. listino token) ---------- */
/* Card che NON si stirano a tutta riga: si dispongono in fila, vanno a capo
   e ognuna è larga quanto il suo contenuto. Vive qui (centrale) così ogni
   pagina admin può usarla senza ridefinirla nel proprio .razor.css. */
.admin-card-flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-5);
}

.admin-card-compact {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
    width: fit-content;
    min-width: 240px;
    max-width: 320px;
}

.admin-card-compact .admin-card-title {
    margin: 0;
}

.admin-card-compact p {
    margin: 0;
    font-size: var(--ax-fs-13);
    line-height: 1.5;
    color: var(--ax-text-2);
}

/* Card che ospita un form: larghezza contenuta per leggibilità (es. assegna
   omaggio). Da combinare con .admin-card. */
.admin-card-narrow {
    max-width: 560px;
}

/* ===== /admin/token: listino a lista + motivo "gettone" ambra ===== */
.token-icon-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-icon-title svg {
    color: var(--ax-accent-600);
    fill: currentColor;
}

.token-riga {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3) 0;
    border-top: 1px solid var(--ax-border-soft);
}

.token-riga-ico {
    width: 36px;
    height: 36px;
    border-radius: var(--ax-radius-md);
    background: var(--ax-panel-bg-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-2);
    flex: none;
}

.token-riga-ico svg { fill: currentColor; }

.token-riga-testo { flex: 1; min-width: 0; }

.token-riga-nome {
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: var(--ax-text-1);
}

.token-riga-desc {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
}

.token-riga-azioni {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    flex: none;
}

/* Gettone ambra: moneta + numero editabile + unita' */
.token-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.32);
    border-radius: var(--ax-radius-md);
    padding: 4px 10px;
    cursor: text;
}

.token-field-coin {
    display: inline-flex;
    color: var(--ax-accent-600);
}

.token-field-coin svg { fill: currentColor; }

.token-field-input {
    width: 3.2rem;
    border: none;
    background: transparent;
    color: var(--ax-accent-700);
    font-weight: 700;
    font-size: var(--ax-fs-14);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0;
    -moz-appearance: textfield;
}

.token-field-input:focus { outline: none; }

.token-field-input::-webkit-outer-spin-button,
.token-field-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.token-field-unit {
    font-size: var(--ax-fs-11);
    color: var(--ax-accent-700);
}

/* Badge "Gratis" quando il costo e' 0 */
.token-gratis {
    font-size: var(--ax-fs-12);
    font-weight: 600;
    color: var(--ax-success-strong);
    background: var(--ax-success-bg);
    border-radius: var(--ax-radius-pill);
    padding: 3px 12px;
}

.token-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ax-space-4);
}

.token-side { border-left: 3px solid var(--ax-accent-500); }

/* Tema scuro: ambra piu' chiara per restare leggibile su fondo scuro */
[data-theme="dark"] .token-icon-title svg,
[data-theme="dark"] .token-field-coin,
[data-theme="dark"] .token-field-input,
[data-theme="dark"] .token-field-unit,
.theme-dark .token-icon-title svg,
.theme-dark .token-field-coin,
.theme-dark .token-field-input,
.theme-dark .token-field-unit {
    color: var(--ax-accent-400);
}