/*
 * Tema del core: token e override di AdminLTE 3 / Bootstrap 4.
 * Caricato dopo dist/css/adminlte.min.css (vedi _header.php): a parita' di specificita' vince per ordine.
 * Un progetto custom cambia il tema ridefinendo i token :root in custom_dist/css/custom.css.
 */

:root {
    --ink: #14181f;
    --paper: #f7f7f4;
    --surface: #ffffff;
    --accent: #2f6f6b;
    --accent-strong: #21504d;
    --accent-soft: #e4efee;
    --line: #e3e1db;
    --text: #1c1f26;
    --muted: #62666f;

    --success: #3f7d5c;
    --warning: #b8863b;
    --danger: #b3413a;
    --info: #3d6fa8;

    /* Tinte tenui degli stati: fondo degli alert e fascia delle righe di tabella */
    --success-soft: #eaf3ee;
    --warning-soft: #faf1e2;
    --danger-soft: #f8ebe9;
    --info-soft: #e9eff5;
}

/* Typography */
body {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--paper);
    color: var(--text);
}
code, kbd, pre, .cms-content-status-badge {
    font-family: "IBM Plex Mono", SFMono-Regular, Menlo, monospace;
}
::selection {
    background: var(--accent-soft);
}

/* Links & primary accent */
a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-strong);
}
.text-primary {
    color: var(--accent) !important;
}
.bg-primary {
    background-color: var(--accent) !important;
}
.border-primary {
    border-color: var(--accent) !important;
}

/* Buttons
 * Bootstrap colora anche :focus e :disabled con la sua palette, e assPost disabilita il bottone
 * durante la richiesta: senza la matrice completa degli stati un bottone appena cliccato torna
 * al blu di Bootstrap finche' non perde il focus. Stessi selettori di Bootstrap: vince l'ordine. */
.btn-primary, .btn-primary:focus, .btn-primary.focus, .btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

/* Le altre varianti piene non hanno un token "strong": la tinta di hover/active e' il token base scurito */
.btn-success, .btn-success:focus, .btn-success.focus, .btn-success:disabled, .btn-success.disabled { background-color: var(--success); border-color: var(--success); }
.btn-warning, .btn-warning:focus, .btn-warning.focus, .btn-warning:disabled, .btn-warning.disabled { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-danger,  .btn-danger:focus,  .btn-danger.focus,  .btn-danger:disabled,  .btn-danger.disabled  { background-color: var(--danger);  border-color: var(--danger); }
.btn-info,    .btn-info:focus,    .btn-info.focus,    .btn-info:disabled,    .btn-info.disabled    { background-color: var(--info);    border-color: var(--info); }
.btn-secondary, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:disabled, .btn-secondary.disabled { background-color: var(--muted); border-color: var(--muted); }
.btn-dark,    .btn-dark:focus,    .btn-dark.focus,    .btn-dark:disabled,    .btn-dark.disabled    { background-color: var(--ink);     border-color: var(--ink); }

.btn-success:hover, .btn-success:focus:hover, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { background-color: var(--success); border-color: var(--success); filter: brightness(0.9); }
.btn-warning:hover, .btn-warning:focus:hover, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { background-color: var(--warning); border-color: var(--warning); color: #fff; filter: brightness(0.9); }
.btn-danger:hover,  .btn-danger:focus:hover,  .btn-danger:not(:disabled):not(.disabled):active,  .btn-danger:not(:disabled):not(.disabled).active,  .show > .btn-danger.dropdown-toggle  { background-color: var(--danger);  border-color: var(--danger);  filter: brightness(0.9); }
.btn-info:hover,    .btn-info:focus:hover,    .btn-info:not(:disabled):not(.disabled):active,    .btn-info:not(:disabled):not(.disabled).active,    .show > .btn-info.dropdown-toggle    { background-color: var(--info);    border-color: var(--info);    filter: brightness(0.9); }
.btn-secondary:hover, .btn-secondary:focus:hover, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { background-color: var(--muted); border-color: var(--muted); filter: brightness(0.9); }
.btn-dark:hover,    .btn-dark:focus:hover,    .btn-dark:not(:disabled):not(.disabled):active,    .btn-dark:not(:disabled):not(.disabled).active,    .show > .btn-dark.dropdown-toggle    { background-color: var(--ink);     border-color: var(--ink);     filter: brightness(1.25); }

.btn-success:focus, .btn-success.focus, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem var(--success-soft); }
.btn-warning:focus, .btn-warning.focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem var(--warning-soft); }
.btn-danger:focus,  .btn-danger.focus,  .btn-danger:not(:disabled):not(.disabled):active:focus,  .btn-danger:not(:disabled):not(.disabled).active:focus  { box-shadow: 0 0 0 0.2rem var(--danger-soft); }
.btn-info:focus,    .btn-info.focus,    .btn-info:not(:disabled):not(.disabled):active:focus,    .btn-info:not(:disabled):not(.disabled).active:focus    { box-shadow: 0 0 0 0.2rem var(--info-soft); }
.btn-secondary:focus, .btn-secondary.focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-dark:focus,    .btn-dark.focus,    .btn-dark:not(:disabled):not(.disabled):active:focus,    .btn-dark:not(:disabled):not(.disabled).active:focus    { box-shadow: 0 0 0 0.2rem var(--accent-soft); }

.btn-link {
    color: var(--accent);
}

/* Anche le varianti outline leggono i token: senza queste tornerebbe la palette grezza di Bootstrap */
.btn-outline-primary,   .btn-outline-primary:disabled,   .btn-outline-primary.disabled   { color: var(--accent);  border-color: var(--accent);  background-color: transparent; }
.btn-outline-secondary, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled { color: var(--muted);   border-color: var(--muted);   background-color: transparent; }
.btn-outline-success,   .btn-outline-success:disabled,   .btn-outline-success.disabled   { color: var(--success); border-color: var(--success); background-color: transparent; }
.btn-outline-warning,   .btn-outline-warning:disabled,   .btn-outline-warning.disabled   { color: var(--warning); border-color: var(--warning); background-color: transparent; }
.btn-outline-danger,    .btn-outline-danger:disabled,    .btn-outline-danger.disabled    { color: var(--danger);  border-color: var(--danger);  background-color: transparent; }
.btn-outline-info,      .btn-outline-info:disabled,      .btn-outline-info.disabled      { color: var(--info);    border-color: var(--info);    background-color: transparent; }
.btn-outline-dark,      .btn-outline-dark:disabled,      .btn-outline-dark.disabled      { color: var(--ink);     border-color: var(--ink);     background-color: transparent; }

.btn-outline-primary:hover,   .btn-outline-primary:not(:disabled):not(.disabled):active,   .btn-outline-primary:not(:disabled):not(.disabled).active,   .show > .btn-outline-primary.dropdown-toggle   { background-color: var(--accent);  border-color: var(--accent);  color: #fff; }
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { background-color: var(--muted);   border-color: var(--muted);   color: #fff; }
.btn-outline-success:hover,   .btn-outline-success:not(:disabled):not(.disabled):active,   .btn-outline-success:not(:disabled):not(.disabled).active,   .show > .btn-outline-success.dropdown-toggle   { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-outline-warning:hover,   .btn-outline-warning:not(:disabled):not(.disabled):active,   .btn-outline-warning:not(:disabled):not(.disabled).active,   .show > .btn-outline-warning.dropdown-toggle   { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-outline-danger:hover,    .btn-outline-danger:not(:disabled):not(.disabled):active,    .btn-outline-danger:not(:disabled):not(.disabled).active,    .show > .btn-outline-danger.dropdown-toggle    { background-color: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-outline-info:hover,      .btn-outline-info:not(:disabled):not(.disabled):active,      .btn-outline-info:not(:disabled):not(.disabled).active,      .show > .btn-outline-info.dropdown-toggle      { background-color: var(--info);    border-color: var(--info);    color: #fff; }
.btn-outline-dark:hover,      .btn-outline-dark:not(:disabled):not(.disabled):active,      .btn-outline-dark:not(:disabled):not(.disabled).active,      .show > .btn-outline-dark.dropdown-toggle      { background-color: var(--ink);     border-color: var(--ink);     color: #fff; }

.btn-outline-primary:focus,   .btn-outline-primary.focus,   .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:focus,      .btn-outline-dark.focus,      .btn-outline-dark:not(:disabled):not(.disabled):active:focus      { box-shadow: 0 0 0 0.2rem var(--accent-soft); }
.btn-outline-success:focus,   .btn-outline-success.focus,   .btn-outline-success:not(:disabled):not(.disabled):active:focus   { box-shadow: 0 0 0 0.2rem var(--success-soft); }
.btn-outline-warning:focus,   .btn-outline-warning.focus,   .btn-outline-warning:not(:disabled):not(.disabled):active:focus   { box-shadow: 0 0 0 0.2rem var(--warning-soft); }
.btn-outline-danger:focus,    .btn-outline-danger.focus,    .btn-outline-danger:not(:disabled):not(.disabled):active:focus    { box-shadow: 0 0 0 0.2rem var(--danger-soft); }
.btn-outline-info:focus,      .btn-outline-info.focus,      .btn-outline-info:not(:disabled):not(.disabled):active:focus      { box-shadow: 0 0 0 0.2rem var(--info-soft); }

/* Una sola forma: .btn-flat resta nei template ma non toglie piu' il raggio (gruppi e input-group lo azzerano da soli) */
.btn.btn-flat {
    border-radius: 0.25rem;
}
.btn-sm.btn-flat {
    border-radius: 0.2rem;
}

/*
 * Colonna azioni delle tabelle (CmsRowActions/CmsRowButton): icona e testo sempre sulla stessa riga — .btn in
 * Bootstrap 4.6 non imposta white-space — e gruppo che va a capo invece di sfondare la cella.
 */
.cms-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}
.cms-row-btn {
    white-space: nowrap;
}

/* Badges, alerts, text variants — desaturated status colors */
.badge-primary { background-color: var(--accent); }
.badge-success { background-color: var(--success); }
.badge-warning { background-color: var(--warning); color: #fff; }
.badge-danger  { background-color: var(--danger); }
.badge-info    { background-color: var(--info); }

.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }

.alert-success { background-color: var(--success-soft); border-color: #cfe4d8; color: var(--success); }
.alert-warning { background-color: var(--warning-soft); border-color: #f0ddb8; color: var(--warning); }
.alert-danger  { background-color: var(--danger-soft);  border-color: #edcdc9; color: var(--danger); }
.alert-info    { background-color: var(--info-soft);    border-color: #c9d8e8; color: var(--info); }

/* Forms */
.form-control:focus,
.custom-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--accent);
    background-color: var(--accent);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.input-group-text {
    background-color: var(--paper);
    border-color: var(--line);
    color: var(--muted);
}

/* Cards */
.card {
    border: 1px solid var(--line);
    box-shadow: none;
}
.card-header {
    background-color: var(--surface);
    border-bottom-color: var(--line);
}
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--accent);
    color: #fff;
}
.card-outline.card-primary {
    border-top-color: var(--accent);
}
.card-outline.card-secondary {
    border-top-color: var(--line);
}
.card-outline.card-info {
    border-top-color: var(--info);
}
.card-outline.card-success {
    border-top-color: var(--success);
}
.card-outline.card-warning {
    border-top-color: var(--warning);
}
.card-outline.card-danger {
    border-top-color: var(--danger);
}

/* Testata card con azioni a destra: sotto md il bottone va a capo, allineato al titolo */
@media (max-width: 767.98px) {
    .card-header .row > .text-right {
        text-align: left !important;
        margin-top: 0.5rem;
    }
}

/* Tables */
.table td, .table th {
    padding: 0.55rem 0.75rem;
}

/* DataTables: barra sopra (lunghezza + ricerca) e sotto (conteggio + paginazione) su una riga sola
   finche' ci stanno, allineate verticalmente. Sotto i 768px vanno a capo e le centra il CSS del plugin. */
.datatable-header,
.datatable-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.datatable-header > div,
.datatable-footer > div {
    margin-bottom: 0;
}
.datatable-header .dataTables_length label,
.datatable-header .dataTables_filter label {
    margin-bottom: 0;
}
/* stessa forma dei selettori del plugin: a parita' di specificita' vince l'ordine di caricamento */
div.datatable-header div.dataTables_filter,
div.datatable-footer div.dataTables_paginate {
    margin-left: auto;
}
div.datatable-footer div.dataTables_info {
    padding-top: 0; /* il plugin mette .85em e lo abbassa rispetto alla paginazione */
}
.datatable-footer .dataTables_paginate .pagination {
    margin: 0;
}
/* i filtri per colonna compaiono qui quando la tabella nasconde colonne: riga intera */
.datatable-footer .extraSearch {
    flex: 1 1 100%;
    margin-left: 0;
}
@media (max-width: 767.98px) {
    .datatable-header,
    .datatable-footer {
        justify-content: center;
    }
    div.datatable-header div.dataTables_filter,
    div.datatable-footer div.dataTables_paginate {
        margin-left: 0;
    }
}

/*
 * Strato dichiarativo delle tabelle (run_plugins.js): faccette, contatore, stato vuoto, stati di
 * riga, scheletro di caricamento. Tutte classi opzionali, il markup lo scrive la pagina.
 * Il colore non basta mai da solo: la fascia colorata su una riga e' un rinforzo, la colonna di
 * stato deve comunque portare il testo.
 */
.cms-dt-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
}
.cms-dt-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
/* Stessa forma delle .nav-pills: una barra di faccette e una barra di schede non devono stonare */
.cms-dt-facet {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: none;
    color: var(--accent);
    font-size: inherit;
    line-height: 1.5;
    white-space: nowrap;
}
.cms-dt-facet:hover {
    background-color: var(--accent-soft);
    color: var(--accent-strong);
}
.cms-dt-facet:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.cms-dt-facet.is-active,
.cms-dt-facet.is-active:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cms-dt-count {
    color: var(--muted);
    font-size: 0.9rem;
}

.cms-dt-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
}
.cms-dt-empty .fas,
.cms-dt-empty .far,
.cms-dt-empty .fab {
    font-size: 3rem;
    color: var(--line);
    margin-bottom: 0.75rem;
}
.cms-dt-empty p {
    margin-bottom: 1rem;
}

/*
 * Stati di riga. Due accortezze: con border-collapse i bordi delle celle vincono su quelli della
 * <tr>, quindi la fascia sta sulla prima <td>; e il fondo sta sulle <td>, non sulla <tr>, perche'
 * altrimenti .table-striped ci passerebbe sopra.
 */
.table tbody tr.cms-dt-row--ok > td      { background-color: var(--success-soft); }
.table tbody tr.cms-dt-row--warning > td { background-color: var(--warning-soft); }
.table tbody tr.cms-dt-row--danger > td  { background-color: var(--danger-soft); }
.table tbody tr.cms-dt-row--muted > td   { background-color: var(--paper); }

.table tbody tr.cms-dt-row--ok > td:first-child      { border-left: 3px solid var(--success); }
.table tbody tr.cms-dt-row--warning > td:first-child { border-left: 3px solid var(--warning); }
.table tbody tr.cms-dt-row--danger > td:first-child  { border-left: 3px solid var(--danger); }
.table tbody tr.cms-dt-row--muted > td:first-child   { border-left: 3px solid var(--line); }

/* Scheletro di caricamento: al posto del contenuto, non sopra */
.cms-skeleton {
    display: block;
    height: 0.9rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, var(--line), var(--paper), var(--line));
    background-size: 200% 100%;
    animation: cms-skeleton-pulse 1.4s ease-in-out infinite;
}
.cms-skeleton-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;   /* stessa gabbia delle celle di .table */
}
.cms-skeleton-row > .cms-skeleton {
    flex: 1 1 0;
}
@keyframes cms-skeleton-pulse {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-skeleton {
        animation: none;
        background: var(--line);
    }
}

/* Componenti lasciati da AdminLTE sul blu Bootstrap di default */
.page-link {
    color: var(--accent);
}
.page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--accent);
}
.nav-pills .nav-link:not(.active):hover {
    color: var(--accent-strong);
}
.card-primary.card-outline-tabs > .card-header a.active,
.card-primary.card-outline-tabs > .card-header a.active:hover {
    border-top-color: var(--accent);
}
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
    background-color: var(--accent);
    border-color: var(--accent);
}
.progress-bar {
    background-color: var(--accent);
}
.alert-primary {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
}
.table-primary,
.table-primary > td,
.table-primary > th {
    background-color: var(--accent-soft);
}
blockquote {
    border-left-color: var(--accent);
}
blockquote h1, blockquote h2, blockquote h3,
blockquote h4, blockquote h5, blockquote h6 {
    color: var(--accent);
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background: var(--accent);
}

/* DataTables Responsive: il "+"/"-" della colonna di espansione */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--accent);
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    background-color: var(--accent-strong);
}

/* Tom Select: anello di focus */
.focus .ts-control,
.plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

/* Select2 usa il tema "default": l'attributo serve per superare select2.min.css */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent);
    color: #fff;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--accent);
}

/* Top navbar (mobile) */
.main-header.navbar-white {
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
}

/* Sidebar */
.sidebar-dark-primary,
.sidebar-dark-primary .brand-link:not([class*="navbar"]) {
    background-color: var(--ink);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    border-left: 3px solid transparent;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent);
    color: #fff;
}
.sidebar-dark-primary .brand-text::after {
    content: ".";
    color: var(--accent);
}

/* Pagine di accesso: login, registrazione, 2FA, reset, attivazione, collegamento LDAP, errore.
 * Struttura: .login-box > .login-logo + .card > .login-card-body con titolo .login-box-msg, guida .cms-auth-lead,
 * form e azione secondaria in .cms-auth-footer. Le regole con !important neutralizzano mt-5 / text-xs nei
 * template auth custom scritti sul vecchio markup. */
.login-page, .register-page {
    background-color: var(--paper);
    height: auto;              /* AdminLTE: height 100vh, che taglia le card alte (setup 2FA con QR) */
    min-height: 100vh;
    padding: 2.5rem 0;
}
.login-box, .register-box {
    width: 380px;
}
.login-box.cms-auth-wide {
    width: 440px;
}
@media (max-width: 576px) {
    .login-box.cms-auth-wide {
        width: 90%;
    }
}
.login-logo, .register-logo {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    text-align: center;
    margin-bottom: 1.25rem;
}
.login-logo::after, .register-logo::after {
    content: ".";
    color: var(--accent);
}
.login-box > .login-logo.mt-5, .register-box > .register-logo.mt-5,
.login-box > .card.mt-5, .register-box > .card.mt-5 {
    margin-top: 0 !important;
}
.login-box .card, .register-box .card {
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 24px rgba(20, 24, 31, 0.05);
    margin-bottom: 0;
}
.login-card-body, .register-card-body {
    padding: 28px 28px 24px;
    color: var(--text);
    border-radius: 8px;
}
.login-card-body .alert {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.25rem;
}
.login-box-msg, .register-box-msg {
    padding: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
.login-card-body .btn-block {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}
.login-card-body .btn.text-xs {
    font-size: 0.9375rem !important;   /* template custom sul vecchio markup: text-xs = .75rem !important */
}
.login-card-body .custom-control-label {
    line-height: 1.4;
}
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
    border-color: var(--accent);
}

/* Testo guida sotto il titolo */
.cms-auth-lead {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}
.login-box-msg + .cms-auth-lead {
    margin-top: -0.75rem;
}
.cms-auth-lead strong {
    color: var(--text);
    font-weight: 600;
}

/* Icona di stato in cerchio (attesa, errore) */
.cms-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: var(--accent-soft);
    color: var(--accent);
    font-size: 1.5rem;
}
.cms-auth-icon--warning {
    background-color: var(--warning-soft);
    color: var(--warning);
}
.cms-auth-icon--danger {
    background-color: var(--danger-soft);
    color: var(--danger);
}

/* Campo codice a 6 cifre: mono e spaziato, text-indent compensa il letter-spacing dell'ultima cifra */
.cms-auth-code {
    font-family: "IBM Plex Mono", SFMono-Regular, Menlo, monospace;
    font-size: 1.375rem;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    text-align: center;
    padding: 0.5rem 0.75rem;
}
.cms-auth-code::placeholder {
    color: var(--muted);
    opacity: 0.45;
}

/* Segreto TOTP da copiare a mano */
.cms-auth-secret {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: var(--paper);
    color: var(--text);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    word-break: break-all;
}

/* Azione secondaria in fondo alla card: link, oppure bottone .btn-link quando deve fare do-logout via assPost.
 * Specificita' (0,2,1): batte `a { color: var(--accent) }` senza dipendere dall'ordine nel file */
.cms-auth-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.875rem;
}
.login-card-body .cms-auth-footer a,
.login-card-body .cms-auth-footer .btn-link,
.login-card-body .cms-auth-inline-link .btn-link {
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
    vertical-align: baseline;
    color: var(--muted);
    text-decoration: none;
}
.login-card-body .cms-auth-footer a:hover, .login-card-body .cms-auth-footer a:focus,
.login-card-body .cms-auth-footer .btn-link:hover, .login-card-body .cms-auth-footer .btn-link:focus,
.login-card-body .cms-auth-inline-link .btn-link:hover, .login-card-body .cms-auth-inline-link .btn-link:focus {
    color: var(--accent);
    text-decoration: underline;
    box-shadow: none;
}
.cms-auth-footer .fas {
    font-size: 0.85em;
}

/* Azione secondaria dentro il form di login ("Password dimenticata?"): come il footer, senza filo */
.cms-auth-inline-link {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
}

/* "oppure" fra il form e i bottoni OAuth: filo a sinistra e a destra */
.cms-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.8125rem;
}
.cms-auth-divider::before, .cms-auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

/* Bottoni OAuth: neutri, l'icona del brand basta */
.cms-auth-oauth {
    margin-bottom: 0.5rem;
}
.cms-auth-oauth .btn {
    font-weight: 500;
}

/* Captcha locale */
.cms-auth-captcha-img {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
}
.login-card-body .captcha-container {
    margin-bottom: 1rem;
}

/* Componenti del core */
.custom-switch {
    margin-bottom: 18px;
}

input[type=radio] {
    width: 20px;
    height: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

.my-dropzone-onefile {
    background: var(--paper);
    border-radius: 5px;
    border: 2px dashed var(--muted);
    border-image: none;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.dz-upload {
    display: block;
    background-color: var(--success);
    height: 10px;
    width: 0%;
}

.dz-success-mark,
.dz-error-mark,
.dz-image {
    display: none;
}

html, body {
    min-height: 100vh;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wrapper .content-wrapper {
    flex: 1 0 auto;
    min-height: 0 !important; /* override Layout plugin inline style */
}
.wrapper .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}
.content-wrapper > .content {
    padding-bottom: 2rem;
}
.main-footer {
    padding: 1rem 1rem 1.5rem;
}

body.login-page .wrapper {
    align-items: center;
    justify-content: center;
}

.main-sidebar .user-panel {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.main-sidebar .user-panel .info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0;
}

.modal-open .ts-dropdown {
    z-index: 1060;
}

.ts-dropdown .ts-loading-msg {
    display: flex;
    align-items: center;
}
.ts-dropdown .ts-loading-msg > span {
    white-space: nowrap;
}

.ts-wrapper.multi .ts-control {
    overflow: visible;
    min-height: calc(1.5em + .75rem + 2px);
    height: auto;
}
.ts-wrapper.multi .ts-control > .item {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    color: var(--text);
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    margin: 0 0.35rem 0.25rem 0;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}
.ts-wrapper.multi .ts-control > .item.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

select.tom-select-multiline + .ts-wrapper.multi .ts-control {
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    min-height: 5.5rem;
    padding: 0.5rem 0.65rem 0.65rem;
    background-color: var(--paper);
    border-color: var(--line);
}
select.tom-select-multiline + .ts-wrapper.multi .ts-control > .item {
    flex: 0 1 auto;
    background-color: var(--surface);
    border-color: var(--muted);
}
select.tom-select-multiline + .ts-wrapper.multi .ts-control > input {
    flex: 1 0 100%;
    order: 999;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 2.5rem;
    margin: 0.4rem 0 0 !important;
    padding: 0.45rem 0.6rem !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--muted) !important;
    border-radius: 0.25rem;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    color: var(--text);
}
select.tom-select-multiline + .ts-wrapper.multi.focus .ts-control > input,
select.tom-select-multiline + .ts-wrapper.multi .ts-control > input:focus {
    background-color: var(--surface) !important;
    border-color: var(--accent) !important;
    border-width: 2px !important;
    padding: calc(0.45rem - 1px) calc(0.6rem - 1px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0.2rem var(--accent-soft);
}
select.tom-select-multiline + .ts-wrapper.multi .ts-control > input::placeholder {
    color: var(--muted);
    opacity: 1;
    font-style: italic;
}
select.tom-select-multiline + .ts-wrapper.multi.input-hidden .ts-control > input {
    left: auto !important;
    opacity: 1 !important;
    position: relative !important;
    clip: auto !important;
    width: 100% !important;
}
select.tom-select-multiline + .ts-wrapper.multi.input-hidden .ts-control {
    overflow: visible;
}

/* CMS content editor (_cms_manage_content) */
.cms-content-editor .cms-content-page-title {
    font-size: 1.5rem;
    line-height: 1.4;
}
.cms-content-editor .cms-content-status-badge {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4em 0.85em;
    vertical-align: middle;
}
@media (max-width: 575.98px) {
    .cms-content-editor .cms-content-page-title {
        font-size: 1.25rem;
    }
    .cms-content-editor .cms-content-status-badge {
        display: inline-block;
        margin-left: 0 !important;
        margin-top: 0.35rem;
    }
}
.cms-content-editor .cms-sidebar-sticky {
    margin-bottom: 1rem;
}
@media (min-width: 992px) {
    .cms-content-editor .cms-sidebar-sticky {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
    }
}
.cms-content-editor .cms-dropzone.my-dropzone-onefile {
    max-width: none;
    width: 100%;
    min-height: 120px;
    margin-left: 0;
    margin-right: 0;
    padding: 0.75rem;
}
.cms-content-editor .cms-dropzone .dz-message {
    margin: 1.5rem 0;
}
.cms-content-editor .cms-cover-dropzone .dz-preview {
    display: none !important;
}
.cms-content-editor .cms-upload-file {
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    background: var(--paper);
}
.cms-content-editor .cms-cover-thumb {
    max-height: 160px;
    width: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--line);
}
.cms-content-editor .min-width-0 {
    min-width: 0;
}
.cms-cover-crop-wrap {
    max-height: 60vh;
    overflow: hidden;
    background: var(--paper);
}
.cms-cover-crop-wrap img {
    display: block;
    max-width: 100%;
}
#cms_cover_crop_modal .cropper-container {
    max-height: 60vh;
}
.cms-cover-staging-hint {
    border-left: 3px solid var(--info);
    padding-left: 0.5rem;
}

.cms-field-options-sortable .cms-field-option-handle {
    cursor: grab;
}

.cms-field-option-placeholder {
    min-height: 2.5rem;
    background: var(--paper);
    border: 1px dashed var(--muted);
}

.cursor-grab {
    cursor: grab;
}

/* Wizard metodi di accesso */
.login-wizard-card .lw-step-intro {
    max-width: 46rem;
    margin-bottom: 1.25rem;
}
.login-wizard-card .lw-help-tip {
    cursor: help;
    font-size: 0.85em;
    vertical-align: 0.05em;
}
.login-wizard-card .lw-field-label {
    font-weight: 600;
}
.login-wizard-card .lw-methods-table th {
    white-space: nowrap;
}
.login-wizard-card .bs-stepper-label {
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .login-wizard-card .bs-stepper-header {
        flex-wrap: wrap;
    }
}

.settings-checklist-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
}
.settings-checklist-tabs .nav-link .badge {
    white-space: nowrap;
}

/* Gestione menu (_manage_menu): sezione = contenitore scuro, voce = riga chiara */
.menu-section-block {
    background: var(--ink);
    border-radius: 6px;
    border-left: 4px solid var(--accent);
    margin-bottom: 14px;
    padding: 0;
}
.menu-section-header {
    padding: 10px 14px;
    color: #fff;
}
.menu-section-header .section-glyph {
    color: var(--accent-soft);
}
.menu-section-header .section-meta,
.menu-section-empty {
    color: rgba(255, 255, 255, 0.6) !important;
}
.menu-section-header .section-meta code {
    color: var(--warning);
    background: transparent;
}
.section-drag-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    padding: 2px 4px;
}
.section-drag-handle:hover {
    color: #fff;
}
.menu-section-body {
    background: rgba(255, 255, 255, 0.06);
    margin: 0;
    padding: 10px 12px 6px 28px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    min-height: 46px;
}
.menu-section-empty {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}
.menu-item-box {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--surface);
}
.menu-item-box:hover {
    background: var(--paper);
}
.item-drag-handle {
    cursor: grab;
}
.ui-sortable-placeholder {
    visibility: visible !important;
}
/* jQuery UI Sortable: unica regola utile del CSS del plugin, che le pagine non caricano piu'. Senza, su touch il
   trascinamento fa scorrere la pagina invece di spostare l'elemento. */
.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none;
}
.menu-section-placeholder,
.menu-item-placeholder {
    border: 2px dashed var(--accent);
    background: var(--accent-soft);
    border-radius: 6px;
    margin-bottom: 14px;
}
.menu-item-placeholder {
    border-radius: 4px;
    height: 42px;
    margin-bottom: 6px;
}
.menu-section-block.ui-sortable-helper {
    opacity: .92;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Select2 con data-select2-icon-picker (run_plugins.js) */
.select2-icon-option {
    display: inline-flex;
    align-items: center;
}
.select2-icon-option i {
    font-style: normal;
    line-height: 1;
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}

/* Modali: testata scura uguale alla sidebar */
.modal-header.bg-dark {
    background-color: var(--ink) !important;
}
.modal-header.bg-dark .close {
    color: #fff;
    text-shadow: none;
}

/*
 * Finestre di dialogo e toast (SweetAlert2 >= 11.20).
 * Il plugin espone misure, colori e animazioni come variabili --swal2-* su :root e usa selettori :where() a
 * specificita' zero: si ritematizza tutto da qui, senza toccare plugins/sweetalert2. Le variabili vincono
 * Le variabili stanno su body e non su :root: il bundle "all" inietta il proprio CSS in un <style> a fine head,
 * dopo questo file, e su :root vincerebbe lui; body e' piu' vicino al popup e prevale per ereditarieta'.
 * Le regole sotto vincono per specificita'. Un progetto custom cambia le finestre ridefinendo i token del tema.
 */
body {
    --swal2-width: 26rem;
    --swal2-padding: 1.75rem 1.5rem 1.5rem;
    --swal2-border: 1px solid var(--line);
    --swal2-border-radius: 0.3rem;               /* stesso raggio di .modal-content */
    --swal2-background: var(--surface);
    --swal2-color: var(--text);
    --swal2-backdrop: color-mix(in srgb, var(--ink) 55%, transparent);
    --swal2-backdrop-transition: background-color 0.15s;
    --swal2-outline: 0 0 0 0.2rem var(--accent-soft);
    --swal2-title-padding: 0 0 0.375rem;
    --swal2-html-container-padding: 0;

    /* Entrata: dissolvenza con un leggero sollevamento, come un menu che si apre. Niente rimbalzo. */
    --swal2-show-animation: cms-dialog-show 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
    --swal2-hide-animation: cms-dialog-hide 0.12s ease-in forwards;
    --swal2-toast-show-animation: cms-toast-show 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
    --swal2-toast-hide-animation: cms-toast-hide 0.12s ease-in forwards;
    /* Le icone non "ballano" (rimbalzo del !, rotazione della X): un'icona ferma e' piu' sobria.
       Rimettere a true per riavere il disegno progressivo della spunta e degli altri segni. */
    --swal2-icon-animations: false;

    --swal2-actions-margin: 1.5rem 0 0;
    --swal2-actions-justify-content: center;
    --swal2-action-button-transition: background-color 0.15s, box-shadow 0.15s, filter 0.15s;
    --swal2-confirm-button-background-color: var(--accent);
    --swal2-confirm-button-border-radius: 0.25rem;
    --swal2-cancel-button-background-color: var(--muted);   /* "Annulla" = btn-secondary, come nei footer delle modali */
    --swal2-cancel-button-border-radius: 0.25rem;
    --swal2-deny-button-background-color: var(--danger);
    --swal2-deny-button-border-radius: 0.25rem;
    --swal2-action-button-focus-box-shadow: var(--swal2-outline);

    --swal2-close-button-position: absolute;
    --swal2-close-button-inset: 0.625rem 0.625rem auto auto;
    --swal2-close-button-font-size: 1.5rem;
    --swal2-close-button-color: var(--muted);
    --swal2-close-button-focus-box-shadow: var(--swal2-outline);

    /* Campi (Swal.fire con input): stessa gabbia di .form-control */
    --swal2-input-border: 1px solid var(--line);
    --swal2-input-border-radius: 0.25rem;
    --swal2-input-background: var(--surface);
    --swal2-input-box-shadow: none;
    --swal2-input-hover-box-shadow: none;
    --swal2-input-focus-border: 1px solid var(--accent);
    --swal2-input-focus-box-shadow: 0 0 0 0.2rem var(--accent-soft);
    --swal2-validation-message-background: var(--danger-soft);
    --swal2-validation-message-color: var(--danger);
    --swal2-footer-border-color: var(--line);
    --swal2-timer-progress-bar-background: color-mix(in srgb, var(--accent) 35%, transparent);

    --swal2-toast-border: 1px solid var(--line);
    --swal2-toast-box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 14%, transparent),
                              0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
@keyframes cms-dialog-show {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes cms-dialog-hide {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(4px) scale(0.99); }
}
@keyframes cms-toast-show {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cms-toast-hide {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body {
        --swal2-show-animation: none;
        --swal2-hide-animation: none;
        --swal2-toast-show-animation: none;
        --swal2-toast-hide-animation: none;
        --swal2-backdrop-transition: none;
    }
}

/* Testo: titolo come un .card-title, corpo in tinta smorzata; gli elenchi (errori di validazione) a sinistra */
.swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}
.swal2-popup .swal2-html-container ul {
    display: inline-block;
    margin: 0;
    padding-left: 1.25rem;
    text-align: left;
}
.swal2-popup .swal2-html-container ul li + li {
    margin-top: 0.25rem;
}

/* Icona: disco pieno in tinta tenue con il segno in tinta piena, come gli alert. Le misure interne del plugin
   sono in em: basta il font-size per ridurla da 80 a 48px; la toast tiene le sue (32px).
   Gli elementi ausiliari della spunta (anello, fix, semicerchi) servono solo al disegno progressivo e il JS li
   colora inline con lo sfondo del popup: senza !important resterebbero due mezzelune bianche sopra il disco. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    font-size: 0.6rem;
    margin: 0 auto 1.125rem;
}
.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-icon-content {
    font-size: 3.25em;
    font-weight: 600;
}
.swal2-popup .swal2-icon.swal2-warning  { color: var(--warning); background-color: var(--warning-soft); border-color: transparent; }
.swal2-popup .swal2-icon.swal2-error    { color: var(--danger);  background-color: var(--danger-soft);  border-color: transparent; }
.swal2-popup .swal2-icon.swal2-info     { color: var(--info);    background-color: var(--info-soft);    border-color: transparent; }
.swal2-popup .swal2-icon.swal2-question { color: var(--accent);  background-color: var(--accent-soft);  border-color: transparent; }
.swal2-popup .swal2-icon.swal2-success  { color: var(--success); background-color: var(--success-soft); border-color: transparent; }
.swal2-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"],
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: currentColor;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring,
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-circular-line"] {
    border-color: transparent;
    background-color: transparent !important;
}

/* Bottoni: stessa gabbia di .btn (38px), staccati di 0.5rem, larghezza minima per non avere un "OK" a francobollo */
.swal2-popup .swal2-actions {
    gap: 0.5rem;
}
.swal2-popup .swal2-styled {
    margin: 0;
    padding: 0.375rem 1rem;
    min-width: 5.5rem;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.swal2-popup .swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-styled.swal2-confirm:active {
    background-color: var(--accent-strong);
}
.swal2-popup .swal2-styled.swal2-cancel:hover,
.swal2-popup .swal2-styled.swal2-cancel:active {
    background-color: var(--swal2-cancel-button-background-color);
    filter: brightness(0.9);
}
.swal2-popup .swal2-styled.swal2-deny:hover,
.swal2-popup .swal2-styled.swal2-deny:active {
    background-color: var(--swal2-deny-button-background-color);
    filter: brightness(0.9);
}
/* Conferma distruttiva (p_assistCustomConfirm da un bottone rosso): il bottone che agisce e' rosso come l'origine */
.swal2-popup .swal2-styled.swal2-confirm.cms-swal-confirm--danger {
    background-color: var(--danger);
}
.swal2-popup .swal2-styled.swal2-confirm.cms-swal-confirm--danger:hover,
.swal2-popup .swal2-styled.swal2-confirm.cms-swal-confirm--danger:active {
    background-color: var(--danger);
    filter: brightness(0.9);
}
.swal2-popup .swal2-styled.swal2-confirm.cms-swal-confirm--danger:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--danger-soft);
}

/* Chiusura in alto a destra, come nelle modali; il plugin la colorerebbe di rosso all'hover */
.swal2-popup .swal2-close {
    border-radius: 0.25rem;
    font-family: inherit;
    font-weight: 300;
}
.swal2-popup .swal2-close:hover {
    color: var(--text);
}

/* Campi e messaggi di validazione */
.swal2-popup:not(.swal2-toast) .swal2-input,
.swal2-popup:not(.swal2-toast) .swal2-textarea,
.swal2-popup:not(.swal2-toast) .swal2-select {
    width: 100%;
    margin: 1rem 0 0;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}
.swal2-popup:not(.swal2-toast) .swal2-input {
    height: calc(1.5em + 0.75rem + 2px);
}
.swal2-popup .swal2-input.swal2-inputerror,
.swal2-popup .swal2-textarea.swal2-inputerror {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 0.2rem var(--danger-soft) !important;
}
.swal2-popup .swal2-validation-message {
    border-radius: 0.25rem;
    font-weight: 400;
}
.swal2-popup .swal2-validation-message::before {
    background-color: var(--danger);
}
.swal2-popup .swal2-timer-progress-bar {
    height: 0.1875rem;
}

/* Toast: stessa carta delle finestre, piu' compatta */
.swal2-popup.swal2-toast {
    padding: 0.625rem 0.875rem;
    border-radius: 0.3rem;
}
.swal2-popup.swal2-toast .swal2-title {
    font-size: 0.9375rem;
    font-weight: 600;
}
.swal2-popup.swal2-toast .swal2-html-container {
    font-size: 0.9375rem;
    line-height: 1.45;
}
.swal2-popup.swal2-toast .swal2-close {
    font-size: 1.5rem;
}

/*
 * Campi data nativi (date, datetime-local, time, month, week).
 * Il popup del calendario lo disegna il browser fuori dallo scope del documento: nessun selettore CSS lo raggiunge.
 * Qui si tematizza tutto il resto. Su desktop il popup viene poi sostituito da flatpickr (run_plugins.js), quindi
 * queste regole sono quelle che contano su touch e quando il JS non parte.
 * Gli pseudo-elementi ::-webkit-* esistono solo su Chromium: altrove resta il form-control gia' a tema.
 */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    accent-color: var(--accent);
    /* Il CMS non ha tema scuro: senza questo, con sistema operativo scuro il campo si scurisce da solo */
    color-scheme: light;
}

/* Senza questo il segmento attivo (gg / mm / aaaa) resta evidenziato col blu di sistema */
::-webkit-datetime-edit-year-field:focus,
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus,
::-webkit-datetime-edit-second-field:focus,
::-webkit-datetime-edit-millisecond-field:focus,
::-webkit-datetime-edit-ampm-field:focus {
    background-color: var(--accent);
    color: #fff;
    border-radius: 2px;
    outline: none;
}
::-webkit-datetime-edit-text {
    color: var(--muted);
    padding: 0 1px;
}

/* L'icona del calendario del campo nativo */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .7;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Il glifo di sistema non e' colorabile: la maschera lo riduce a una silhouette che prende la tinta da
   background-color, quindi segue i token senza esadecimali cablati. Sotto @supports perche' senza maschera
   background-image:none lascerebbe un rettangolo pieno al posto dell'icona. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
        background-color: var(--accent);
        background-image: none;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.75' y='3.25' width='10.5' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.5 1.75v2.5M10.5 1.75v2.5M2.75 6.75h10.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.75' y='3.25' width='10.5' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.5 1.75v2.5M10.5 1.75v2.5M2.75 6.75h10.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* Il campo dell'ora merita un orologio, non un calendario */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    input[type="time"]::-webkit-calendar-picker-indicator {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 4.5V8l2.4 1.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 4.5V8l2.4 1.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

/*
 * flatpickr (run_plugins.js, on-demand).
 * Il CSS del plugin lo inietta p_assistEnsurePlugin a runtime, quindi arriva DOPO questo file: a parita' di
 * specificita' vincerebbe lui. Il prefisso "body" aggiunge un elemento al selettore e ribalta il confronto senza
 * !important e senza forkare il CSS del plugin. Il calendario e' appeso al body, o alla modale quando e' static.
 * Tutto su fondo chiaro, come un menu a tendina: una testata scura sopra una griglia bianca spezzava il popup in
 * due. L'accento sta solo dove c'e' un'azione o una selezione (giorno scelto, hover, oggi).
 */
body .flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font-family: inherit;
}
body .flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--line);
}
body .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--surface);
}
body .flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--line);
}
body .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--surface);
}

/* Testata: piu' alta del plugin (34px), che non lasciava aria a mese e anno */
body .flatpickr-months {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: 5px 5px 0 0;
    padding: 4px 0;
}
body .flatpickr-months .flatpickr-month {
    height: 42px;
    background: transparent;
    color: var(--text);
    fill: var(--text);
}
body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month {
    height: 42px;
    padding: 14px 10px;
    background: transparent;
    color: var(--muted);
    fill: var(--muted);
}
body .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent);
}
body .flatpickr-current-month {
    height: 42px;
    padding: 6px 0 0;
    font-size: 118%;
}

/* Mese e anno: il plugin li lascia come testo nudo e non si capisce che sono modificabili. Qui sono due chip
   con bordo, che si tingono al passaggio del mouse come i campi del tema. */
body .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-current-month .numInputWrapper {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
}
body .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--text);
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 4px 2px 8px;
    margin: 0 2px 0 0;
}
body .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
body .flatpickr-months .numInputWrapper:hover,
body .flatpickr-months .numInputWrapper:focus-within {
    background: var(--accent-soft);
    border-color: var(--accent);
}
body .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--surface);
    color: var(--text);
}
body .flatpickr-current-month .numInputWrapper {
    width: 7.5ch;
    margin-left: 2px;
}
body .flatpickr-current-month input.cur-year {
    color: var(--text);
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 14px 2px 6px;
}
/* Il plugin tiene le frecce invisibili fino al passaggio del mouse: cosi' non si capisce che l'anno si cambia */
body .flatpickr-months .numInputWrapper span {
    opacity: 1;
    border: 0;
    width: 13px;
    right: 1px;
}
body .flatpickr-months .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--muted);
}
body .flatpickr-months .numInputWrapper span.arrowDown:after {
    border-top-color: var(--muted);
}
body .flatpickr-months .numInputWrapper span:hover {
    background: var(--accent-soft);
}
body .flatpickr-months .numInputWrapper span.arrowUp:hover:after {
    border-bottom-color: var(--accent);
}
body .flatpickr-months .numInputWrapper span.arrowDown:hover:after {
    border-top-color: var(--accent);
}

/* Giorni della settimana: etichette piccole e attenuate, senza fascia */
body .flatpickr-weekdays {
    background: var(--surface);
}
body span.flatpickr-weekday {
    background: var(--surface);
    color: var(--muted);
    font-weight: 600;
}

body .flatpickr-day {
    color: var(--text);
    border-radius: 4px;
}
body .flatpickr-day:hover,
body .flatpickr-day:focus,
body .flatpickr-day.inRange,
body .flatpickr-day.prevMonthDay:hover,
body .flatpickr-day.nextMonthDay:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--text);
}
body .flatpickr-day.today {
    border-color: var(--accent);
}
body .flatpickr-day.today:hover,
body .flatpickr-day.today:focus {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
}
body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange,
body .flatpickr-day.selected:hover,
body .flatpickr-day.selected:focus,
body .flatpickr-day.selected.today {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay,
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover {
    color: var(--muted);
    opacity: .6;
}

/* Ora e minuti: il plugin li lascia come due numeri nudi, alti 40px, con le frecce invisibili e il separatore
   largo il 2%. Qui diventano due campi con aria, su una fascia appena piu' scura del foglio (--paper) che li
   stacca dalla griglia senza cambiare tono al popup. */
body .flatpickr-calendar.hasTime .flatpickr-time {
    height: 52px;
}
body .flatpickr-time {
    background: var(--paper);
    border-top: 1px solid var(--line);
    line-height: 52px;
    max-height: 52px;
    padding: 0 10px;
}
/* Solo ora (noCalendar): la fascia e' l'intero popup, senza riga sopra e con gli angoli del contenitore */
body .flatpickr-calendar.noCalendar .flatpickr-time {
    border-top: 0;
    border-radius: 5px;
}
body .flatpickr-time .numInputWrapper {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    height: 34px;
    margin: 9px 0;
    line-height: 0;   /* l'input e' inline-block: con la riga da 52px cadrebbe in basso */
}
body .flatpickr-time .numInputWrapper:hover,
body .flatpickr-time .numInputWrapper:focus-within {
    background: var(--accent-soft);
    border-color: var(--accent);
}
body .flatpickr-time input,
body .flatpickr-time input.flatpickr-hour,
body .flatpickr-time .flatpickr-am-pm {
    display: block;
    height: 32px;
    line-height: 32px;
    padding-right: 22px;   /* lascia spazio alle frecce, che sono in posizione assoluta a destra */
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
body .flatpickr-time input:hover,
body .flatpickr-time input:focus,
body .flatpickr-time .flatpickr-am-pm:hover,
body .flatpickr-time .flatpickr-am-pm:focus {
    background: transparent;   /* lo sfondo lo mette il contenitore, che e' il campo vero */
}
/* Il plugin seleziona tutto il testo al click sul campo. La ::selection del tema e' --accent-soft, cioe' proprio
   il fondo che ora e minuti prendono col mouse sopra: la selezione ci sparisce dentro. Qui e' piena. */
body .flatpickr-time input::selection,
body .flatpickr-current-month input.cur-year::selection {
    background: var(--accent);
    color: #fff;
}
body .flatpickr-time .flatpickr-time-separator {
    flex: 0 0 22px;
    width: 22px;
    color: var(--muted);
    font-weight: 600;
}
/* Frecce sempre visibili e larghe abbastanza da centrarle col mouse (il plugin le fa 14px e le mostra solo al
   passaggio) */
body .flatpickr-time .numInputWrapper span {
    opacity: 1;
    border: 0;
    width: 20px;
    right: 1px;
}
body .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--muted);
}
body .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--muted);
}
body .flatpickr-time .numInputWrapper span:hover {
    background: var(--accent-soft);
}
body .flatpickr-time .numInputWrapper span.arrowUp:hover:after {
    border-bottom-color: var(--accent);
}
body .flatpickr-time .numInputWrapper span.arrowDown:hover:after {
    border-top-color: var(--accent);
}

/* Dentro le modali flatpickr lavora in static e incapsula il campo: il suo inline-block toglierebbe al
   form-control la larghezza piena */
body .flatpickr-wrapper {
    display: block;
}