/* ============================================================
   BrandPriceMonitor — Backend CSS
   Design: Professional SaaS Dashboard
   Font: Figtree (Google Fonts)
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    /* Palette */
    --sidebar-bg:       #0d1b2e;
    --sidebar-hover:    #162640;
    --sidebar-active:   #1a3a5c;
    --sidebar-border:   rgba(255,255,255,.07);
    --accent:           #2f80ed;
    --accent-hover:     #1a6bd4;
    --accent-light:     rgba(47,128,237,.12);

    /* Colori semantici */
    --clr-danger:       #ef4444;
    --clr-danger-bg:    rgba(239,68,68,.1);
    --clr-warning:      #f59e0b;
    --clr-warning-bg:   rgba(245,158,11,.1);
    --clr-success:      #22c55e;
    --clr-success-bg:   rgba(34,197,94,.1);
    --clr-info:         #06b6d4;
    --clr-info-bg:      rgba(6,182,212,.1);
    --clr-critical:     #dc2626;

    /* Layout */
    --sidebar-w:        260px;
    --topbar-h:         64px;
    --content-bg:       #f5f7fa;
    --card-bg:          #ffffff;
    --card-border:      #e8ecf0;
    --card-radius:      12px;
    --card-shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);

    /* Testo */
    --text-primary:     #0f1c35;
    --text-secondary:   #64748b;
    --text-muted:       #94a3b8;
    --text-sidebar:     #a8b8cc;
    --text-sidebar-act: #ffffff;

    /* Tipografia */
    --font-main:        'Figtree', system-ui, sans-serif;
    --fs-xs:            .75rem;
    --fs-sm:            .875rem;
    --fs-base:          1rem;
    --fs-lg:            1.125rem;
    --fs-xl:            1.25rem;
    --fs-2xl:           1.5rem;
    --fs-3xl:           2rem;

    /* Transizioni */
    --ease:             cubic-bezier(.4,0,.2,1);
    --dur:              .2s;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.layout-backend {
    font-family: var(--font-main);
    font-size:   var(--fs-base);
    color:       var(--text-primary);
    background:  var(--content-bg);
    display:     flex;
    min-height:  100vh;
    line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width:         var(--sidebar-w);
    min-height:    100vh;
    background:      linear-gradient(160deg, #0d1b2e 0%, #0d2a4a 60%, #0a3060 100%);
    display:       flex;
    flex-direction: column;
    position:      fixed;
    top:           0;
    left:          0;
    bottom:        0;
    z-index:       1000;
    transition:    transform var(--dur) var(--ease);
    overflow-y:    auto;
    overflow-x:    hidden;
}

/* Brand */
.sidebar-brand {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        1.5rem 1.25rem 1.25rem;
    border-bottom:  1px solid var(--sidebar-border);
}

.sidebar-logo {
    width:        32px;
    height:       32px;
    border-radius: 6px;
    flex-shrink:  0;
}

.sidebar-brand-name {
    font-size:   1.125rem;
    color:       #fff;
}

/* Navigation */
.sidebar-nav { flex: 1; padding: .75rem 0; }

.nav-list {
    list-style: none;
    padding:    0 .75rem;
}

.nav-item { margin-bottom: 2px; }

.nav-link {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        .625rem .875rem;
    border-radius:  8px;
    color:          var(--text-sidebar);
    font-size:      var(--fs-sm);
    font-weight:    500;
    transition:     background var(--dur) var(--ease), color var(--dur) var(--ease);
    text-decoration: none;
    position:       relative;
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color:      #fff;
    text-decoration: none;
}

.nav-item.active .nav-link {
    background: var(--sidebar-active);
    color:      var(--text-sidebar-act);
}

.nav-link i { font-size: 1.125rem; width: 20px; flex-shrink: 0; }

.nav-divider {
    height:     1px;
    background: var(--sidebar-border);
    margin:     .625rem .75rem;
}

/* Badge count */
.badge-count {
    background:    var(--clr-danger);
    color:         #fff;
    font-size:     .65rem;
    font-weight:   700;
    padding:       1px 6px;
    border-radius: 20px;
    margin-left:   auto;
    min-width:     20px;
    text-align:    center;
    line-height:   1.5;
}

/* User footer */
.sidebar-footer {
    padding:        1rem .75rem;
    border-top:     1px solid var(--sidebar-border);
    display:        flex;
    align-items:    center;
    gap:            .5rem;
}

.sidebar-user {
    display:     flex;
    align-items: center;
    gap:         .625rem;
    flex:        1;
    min-width:   0;
}

.sidebar-user-avatar {
    width:          34px;
    height:         34px;
    background:     var(--accent);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          #fff;
    font-weight:    700;
    font-size:      var(--fs-sm);
    flex-shrink:    0;
}

.sidebar-user-info {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.sidebar-user-name {
    font-size:   var(--fs-sm);
    font-weight: 600;
    color:       #fff;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.sidebar-user-plan {
    font-size: var(--fs-xs);
    color:     var(--text-sidebar);
}

.btn-logout {
    width:        32px;
    height:       32px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        var(--text-sidebar);
    border-radius: 6px;
    transition:   background var(--dur), color var(--dur);
    text-decoration: none;
    flex-shrink:  0;
}

.btn-logout:hover {
    background:     rgba(239,68,68,.15);
    color:          var(--clr-danger);
    text-decoration: none;
}

/* ── Main content ───────────────────────────────────────────── */
.main-content {
    margin-left:  var(--sidebar-w);
    flex:         1;
    display:      flex;
    flex-direction: column;
    min-height:   100vh;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
    height:         var(--topbar-h);
    background:     var(--card-bg);
    border-bottom:  1px solid var(--card-border);
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        0 1.5rem;
    position:       sticky;
    top:            0;
    z-index:        900;
}

.topbar-toggle {
    display:     none;
    background:  none;
    border:      none;
    padding:     .5rem;
    cursor:      pointer;
    color:       var(--text-secondary);
    font-size:   1.25rem;
    border-radius: 6px;
    transition:  background var(--dur);
}

.topbar-toggle:hover { background: var(--content-bg); }

.topbar-title h1 {
    font-size:   1.125rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.topbar-actions {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.topbar-meta {
    font-size:   var(--fs-xs);
    color:       var(--text-muted);
    display:     flex;
    align-items: center;
    gap:         .35rem;
}

/* ── Page content ───────────────────────────────────────────── */
.page-content {
    flex:    1;
    padding: 1.5rem;
}

/* ── Flash messages ─────────────────────────────────────────── */
.flash-message {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        .875rem 1.5rem;
    font-size:      var(--fs-sm);
    font-weight:    500;
    border-left:    4px solid transparent;
}

.flash-success {
    background:  var(--clr-success-bg);
    border-color: var(--clr-success);
    color:       #166534;
}

.flash-error {
    background:  var(--clr-danger-bg);
    border-color: var(--clr-danger);
    color:       #991b1b;
}

.flash-warning {
    background:  var(--clr-warning-bg);
    border-color: var(--clr-warning);
    color:       #92400e;
}

.flash-info {
    background:  var(--clr-info-bg);
    border-color: var(--clr-info);
    color:       #164e63;
}

/* ── Demo banner (account non attivo) ───────────────────────── */
.demo-banner {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    margin:         1rem 1.5rem 0;
    padding:        1rem 1.25rem;
    border-radius:  12px;
    background:     linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border:         1px solid #fdba74;
    border-left:    4px solid #ea580c;
    box-shadow:     0 1px 3px rgba(234, 88, 12, .08);
}

.demo-banner-icon {
    flex-shrink:    0;
    width:          44px;
    height:         44px;
    border-radius:  50%;
    background:     #ea580c;
    color:          #fff;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      1.25rem;
}

.demo-banner-body {
    flex: 1;
    min-width: 0;
}

.demo-banner-title {
    font-size:    var(--fs-sm, .9rem);
    font-weight:  700;
    color:        #7c2d12;
    margin-bottom:.15rem;
    line-height:  1.3;
}

.demo-banner-text {
    font-size:   var(--fs-xs, .8rem);
    color:       #9a3412;
    line-height: 1.5;
}

.demo-banner-actions {
    flex-shrink: 0;
}

.demo-banner-cta {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .demo-banner {
        flex-wrap: wrap;
    }
    .demo-banner-actions {
        flex-basis: 100%;
    }
    .demo-banner-cta {
        width: 100%;
        justify-content: center;
    }
}

/* Badge "Demo" nella topbar (riusa la stessa palette del banner) */
.topbar-badge--demo {
    background:   #fff7ed;
    color:        #9a3412;
    border:       1px solid #fdba74;
}

/* Variante "grace" del banner: account in sospeso (export-only,
   countdown alla disattivazione). Palette rosso-warning per
   distinguerla dal demo (arancio informativo). */
.demo-banner.demo-banner--grace {
    background:   linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
    border-left-color: #dc2626;
    box-shadow:   0 1px 3px rgba(220, 38, 38, .08);
}
.demo-banner.demo-banner--grace .demo-banner-icon {
    background: #dc2626;
}
.demo-banner.demo-banner--grace .demo-banner-title {
    color: #7f1d1d;
}
.demo-banner.demo-banner--grace .demo-banner-text {
    color: #991b1b;
}

/* ── Pulsanti/link disabilitati in modalità demo ───────────────
   Visual treatment + cursor; il click è impedito da un handler
   delegato in backend.js (CSP-safe, nessun onclick inline).
   Manteniamo pointer-events: auto per permettere al tooltip
   nativo di apparire al hover. */
.is-demo-locked {
    opacity:       .55;
    cursor:        not-allowed !important;
    filter:        grayscale(.4);
    box-shadow:    none !important;
    text-decoration: none !important;
}
.is-demo-locked:hover,
.is-demo-locked:focus,
.is-demo-locked:active {
    opacity:       .55;
    transform:     none !important;
    box-shadow:    none !important;
    background:    inherit;
}
button.is-demo-locked,
input.is-demo-locked {
    /* I form control nativi gestiscono già :disabled, ma se non
       hanno l'attributo `disabled` (es. perché il bottone deve
       restare keyboard-focusabile per il tooltip) il look va
       allineato qui. */
    pointer-events: auto;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background:    var(--card-bg);
    border:        1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow:    var(--card-shadow);
    overflow:      hidden;
}

.card-header {
    padding:        1rem 1.25rem;
    border-bottom:  1px solid var(--card-border);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            .75rem;
}

.card-title {
    font-size:   var(--fs-base);
    font-weight: 600;
    color:       var(--text-primary);
    margin:      0;
}

.card-body { padding: 1.25rem; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.5rem;
}

.stat-card {
    background:    var(--card-bg);
    border:        1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding:       1.25rem;
    box-shadow:    var(--card-shadow);
    display:       flex;
    flex-direction: column;
    gap:           .5rem;
    position:      relative;
    overflow:      hidden;
}

.stat-card-danger  { border-left: 3px solid var(--clr-danger); }
.stat-card-warning { border-left: 3px solid var(--clr-warning); }
.stat-card-success { border-left: 3px solid var(--clr-success); }
.stat-card-info    { border-left: 3px solid var(--accent); }

.stat-label {
    font-size:   var(--fs-xs);
    font-weight: 600;
    color:       var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stat-value {
    font-size:   var(--fs-3xl);
    font-weight: 700;
    color:       var(--text-primary);
    line-height: 1;
}

.stat-icon {
    position:  absolute;
    right:     1rem;
    top:       1rem;
    font-size: 1.5rem;
    opacity:   .15;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--card-radius);
}

.pw-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--fs-sm);
}

.pw-table thead tr {
    background:    #f8fafc;
    border-bottom: 2px solid var(--card-border);
}

.pw-table th {
    padding:       .75rem 1rem;
    font-weight:   600;
    color:         var(--text-secondary);
    text-align:    left;
    white-space:   nowrap;
    font-size:     var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pw-table td {
    padding:     .75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.pw-table tbody tr:hover { background: #f8fafc; }
.pw-table tbody tr:last-child td { border-bottom: none; }

/* ── Status badges (semaforo) ───────────────────────────────── */
.status-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .375rem;
    padding:       .25rem .625rem;
    border-radius: 20px;
    font-size:     var(--fs-xs);
    font-weight:   600;
    white-space:   nowrap;
}

.status-ok {
    background: var(--clr-success-bg);
    color:      #166534;
}

.status-warning {
    background: var(--clr-warning-bg);
    color:      #92400e;
}

.status-danger {
    background: var(--clr-danger-bg);
    color:      #991b1b;
}

.status-critical {
    background: rgba(220,38,38,.15);
    color:      var(--clr-critical);
    animation:  pulse-critical 2s ease-in-out infinite;
}

@keyframes pulse-critical {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}

/* Riga di tabella con anomalia di coerenza (es. PDF mancante) */
.row-warning > td { background: var(--clr-warning-bg); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-pw {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    padding:        .5rem 1rem;
    border-radius:  8px;
    font-family:    var(--font-main);
    font-size:      var(--fs-sm);
    font-weight:    500;
    border:         none;
    cursor:         pointer;
    transition:     background var(--dur), transform var(--dur), box-shadow var(--dur);
    text-decoration: none;
    line-height:    1.5;
}

.btn-pw:active { transform: translateY(1px); }

.btn-primary {
    background: var(--accent);
    color:      #fff;
    box-shadow: 0 1px 3px rgba(47,128,237,.35);
}

.btn-primary:hover {
    background:      var(--accent-hover);
    color:           #fff;
    text-decoration: none;
    box-shadow:      0 2px 8px rgba(47,128,237,.4);
}

.btn-secondary {
    background: #e8ecf0;
    color:      var(--text-primary);
}

.btn-secondary:hover {
    background:      #dde3ea;
    color:           var(--text-primary);
    text-decoration: none;
}

.btn-danger {
    background: var(--clr-danger);
    color:      #fff;
}

.btn-danger:hover {
    background:      #dc2626;
    color:           #fff;
    text-decoration: none;
}

.btn-outline {
    background:  transparent;
    border:      1px solid var(--card-border);
    color:       var(--text-secondary);
}

.btn-outline:hover {
    background:      var(--content-bg);
    color:           var(--text-primary);
    text-decoration: none;
}

.btn-sm { padding: .35rem .75rem; font-size: var(--fs-xs); }
.btn-lg { padding: .75rem 1.5rem; font-size: var(--fs-base); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display:      block;
    font-size:    var(--fs-sm);
    font-weight:  600;
    color:        var(--text-primary);
    margin-bottom: .375rem;
}

.form-control {
    width:         100%;
    padding:       .5rem .875rem;
    font-family:   var(--font-main);
    font-size:     var(--fs-sm);
    color:         var(--text-primary);
    background:    #fff;
    border:        1px solid #cbd5e1;
    border-radius: 8px;
    transition:    border-color var(--dur), box-shadow var(--dur);
    appearance:    none;
}

.form-control:focus {
    outline:      none;
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--accent-light);
}

.form-control::placeholder { color: var(--text-muted); }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .25rem; }

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .75rem center;
    background-size:     12px;
    padding-right:       2.25rem;
}

/* Upload area */
.upload-area {
    border:         2px dashed #cbd5e1;
    border-radius:  var(--card-radius);
    padding:        2.5rem;
    text-align:     center;
    transition:     border-color var(--dur), background var(--dur);
    cursor:         pointer;
}

.upload-area.drag-over {
    border-color: var(--accent);
    background:   var(--accent-light);
}

.upload-icon {
    font-size: 2.5rem;
    color:     var(--text-muted);
    margin-bottom: .75rem;
}

.upload-text { font-weight: 600; color: var(--text-primary); }
.upload-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .25rem; }

/* ── Filters bar ────────────────────────────────────────────── */
.filters-bar {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    flex-wrap:      wrap;
    margin-bottom:  1rem;
    padding:        .75rem 1rem;
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    border-radius:  var(--card-radius);
}

.filters-bar .form-control,
.filters-bar .form-select { width: auto; min-width: 150px; }

/* ── Pagination ─────────────────────────────────────────────── */
.pw-pagination {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            .25rem;
    padding:        1rem 0;
}

.pw-page-btn {
    width:          34px;
    height:         34px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    border-radius:  6px;
    font-size:      var(--fs-sm);
    font-weight:    500;
    color:          var(--text-secondary);
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    text-decoration: none;
    transition:     background var(--dur), color var(--dur);
}

.pw-page-btn:hover,
.pw-page-btn.active {
    background:      var(--accent);
    color:           #fff;
    border-color:    var(--accent);
    text-decoration: none;
}

.pw-page-btn.disabled { opacity: .4; pointer-events: none; }

/* ── Footer ─────────────────────────────────────────────────── */
.page-footer {
    padding:        1rem 1.5rem;
    font-size:      var(--fs-xs);
    color:          var(--text-muted);
    border-top:     1px solid var(--card-border);
    background:     var(--card-bg);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .35rem;
    flex-shrink:    0;
}

.pf-row {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             .4rem;
    justify-content: center;
}

.pf-credits {
    font-size: var(--fs-xs);
    opacity:   .65;
    gap:       .75rem;
}

.pf-link {
    color:           var(--text-secondary);
    text-decoration: none;
    transition:      color .2s;
}
.pf-link:hover { color: var(--accent); }

.page-footer .separator { opacity: .4; }

/* Footer frontend riusato nelle pagine auth standalone */
.front-footer {
    border-top:      1px solid rgba(15,23,42,.08);
    background:      #ffffff;
    padding:         1.25rem 2rem;
    font-size:       .8125rem;
    color:           var(--text-muted);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .5rem;
}

.fe-footer-row {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             .5rem;
    justify-content: center;
}

.fe-footer-sep { opacity: .35; }

.fe-footer-credits {
    font-size: .75rem;
    opacity:   .7;
    gap:       1rem;
}

.footer-exit-link {
    color:           var(--accent);
    text-decoration: none;
    font-weight:     500;
}

.footer-exit-link:hover { text-decoration: underline; }

/* Credits (condivisi con frontend) */
.fe-footer-credit      { color: #4caf50; }
.fe-footer-heart       { color: #e53935; }
.fe-footer-credit-link { color: #4caf50; text-decoration: underline; }
.fe-footer-credit-link:hover { color: #81c784; text-decoration: none; }

/* ── Login layout (body) ─────────────────────────────────────── */
body.layout-login {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    font-family:    var(--font-main);
    background:     var(--content-bg);
}

/* ── Split container ─────────────────────────────────────────── */
.login-split {
    flex:    1;
    display: flex;
}

/* ── Left: brand panel ───────────────────────────────────────── */
.login-panel-brand {
    width:           50%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(160deg, #0d1b2e 0%, #0d2a4a 60%, #0a3060 100%);
    padding:         3rem;
    position:        relative;
    overflow:        hidden;
}

.login-brand-glow {
    position:       absolute;
    width:          500px;
    height:         500px;
    background:     radial-gradient(circle, rgba(47,128,237,.13) 0%, transparent 70%);
    border-radius:  50%;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    pointer-events: none;
}

.login-brand-inner {
    position:   relative;
    z-index:    1;
    text-align: center;
}

.login-brand-logo {
    display: block;
    margin:  0 auto 1.5rem;
}

.login-brand-name {
    font-size:      3.25rem;
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: 0;
    line-height:    1;
    margin-bottom:  .75rem;
}

.login-brand-mark {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.35em;
    height:          1.35em;
    margin-left:     .25em;
    border-radius:   50%;
    font-size:       .38em;
    font-weight:     400;
    line-height:     1;
    vertical-align:  super;
}

.login-brand-slogan {
    font-size:    1.0625rem;
    color:        rgba(255,255,255,.6);
    line-height:  1.65;
    max-width:    300px;
    margin:       0 auto 2.25rem;
}

.login-brand-features {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
    text-align:     left;
}

.login-brand-feature {
    display:     flex;
    align-items: center;
    gap:         .625rem;
    color:       rgba(255,255,255,.72);
    font-size:   .9375rem;
}

.login-brand-feature i {
    color:       var(--accent);
    font-size:   1rem;
    flex-shrink: 0;
}

/* ── Right: form panel ───────────────────────────────────────── */
.login-panel-form {
    width:           50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem 2rem;
    background:      var(--content-bg);
}

.login-card {
    background:    var(--card-bg);
    border-radius: 16px;
    box-shadow:    0 4px 24px rgba(0,0,0,.08);
    padding:       2.5rem;
    width:         100%;
    max-width:     400px;
}

.login-logo {
    text-align:    center;
    margin-bottom: 2rem;
}

.login-card-title {
    font-size:      1.625rem;
    font-weight:    700;
    color:          var(--text-primary);
    letter-spacing: 0;
}

.login-tagline {
    font-size:  var(--fs-sm);
    color:      var(--text-muted);
    margin-top: .25rem;
}

/* ── Extra links sotto il form ───────────────────────────────── */
.login-links {
    margin-top:     1.25rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .625rem;
    font-size:      var(--fs-sm);
    color:          var(--text-secondary);
}

.login-links a {
    color:           var(--accent);
    text-decoration: none;
    font-weight:     500;
}
.login-links a:hover { text-decoration: underline; }

/* ── Footer della login ──────────────────────────────────────── */
.login-footer {
    background: #262626;
    border-top: 1px solid var(--card-border);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .login-split        { flex-direction: column; }
    .login-panel-brand  { width: 100%; min-height: 200px; padding: 2rem 1.5rem; }
    .login-brand-name   { font-size: 2.25rem; }
    .login-brand-features { display: none; }
    .login-panel-form   { width: 100%; padding: 2rem 1.25rem; }
}

/* ── Responsive ─────────────────────────────────────────────── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    999;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-w)));
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.visible {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .topbar-toggle {
        display: flex;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-content { padding: 1rem; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-bar .form-control,
    .filters-bar .form-select { width: 100%; }
}

/* ── Utility ────────────────────────────────────────────────── */
.text-danger  { color: var(--clr-danger) !important; }
.text-warning { color: var(--clr-warning) !important; }
.text-success { color: var(--clr-success) !important; }
.text-muted   { color: var(--text-muted) !important; }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.ms-auto { margin-left: auto; }

.empty-state {
    text-align:  center;
    padding:     3rem 1rem;
    color:       var(--text-muted);
}

.empty-state-icon {
    font-size:     3rem;
    margin-bottom: .75rem;
    opacity:       .4;
}

.empty-state-title {
    font-size:   var(--fs-lg);
    font-weight: 600;
    color:       var(--text-secondary);
    margin-bottom: .5rem;
}

.page-section-title {
    font-size:    var(--fs-xl);
    font-weight:  600;
    color:        var(--text-primary);
    margin-bottom: 1rem;
}

/* ── Delta indicator ────────────────────────────────────────── */
.delta-positive { color: var(--clr-success); font-weight: 600; }
.delta-negative { color: var(--clr-danger);  font-weight: 600; }
.delta-neutral  { color: var(--text-muted);  font-weight: 600; }

/* ── Cella "Sito" con toggle escludi (violations/index) ─────── */
.site-cell {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    flex-wrap:       nowrap;
}
.site-cell__link {
    display:         inline-flex;
    align-items:     center;
    gap:             .25rem;
}
.site-cell__toggle-form {
    display:         inline-flex;
    margin:          0;
}
.site-cell__toggle {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.75rem;
    height:          1.75rem;
    padding:         0;
    border:          1px solid var(--border-color, #d1d5db);
    background:      transparent;
    border-radius:   .375rem;
    cursor:          pointer;
    color:           var(--text-muted, #6b7280);
    transition:      background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-cell__toggle:hover {
    background:      var(--clr-danger-bg, #fee2e2);
    color:           var(--clr-danger, #dc2626);
    border-color:    var(--clr-danger, #dc2626);
}
.site-cell__toggle--active {
    background:      var(--clr-danger-bg, #fee2e2);
    color:           var(--clr-danger, #dc2626);
    border-color:    var(--clr-danger, #dc2626);
}
.site-cell__toggle--active:hover {
    background:      transparent;
    color:           var(--text-muted, #6b7280);
    border-color:    var(--border-color, #d1d5db);
}
.site-cell__toggle--global {
    cursor:          help;
    color:           var(--text-muted, #6b7280);
    border-color:    transparent;
    background:      transparent;
}

/* ── SMTP / sede settings ───────────────────────────────────── */
.smtp-status-badge {
    margin-left: .75rem;
    font-size:   .75rem;
    vertical-align: middle;
}
.smtp-test-form {
    margin-top: 1rem;
}
.divider-soft {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 1.25rem 0;
}
.align-end       { align-items: flex-end; }
.flex-grow-1     { flex: 1 1 auto; }
.text-danger     { color: var(--clr-danger, #dc2626); }
.text-success    { color: var(--clr-success, #16a34a); }

/* ── Card "dati dalla rubrica" in send.php ──────────────────── */
.rubrica-card {
    border:        1px solid var(--clr-info, #93c5fd);
    background:    var(--clr-info-bg, #eff6ff);
    border-radius: .5rem;
    padding:       .75rem 1rem;
}
.rubrica-card--empty {
    border-color: var(--border-color, #e5e7eb);
    background:   var(--bg-soft, #f9fafb);
}
.rubrica-card__header {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    margin-bottom: .5rem;
    font-size:     .875rem;
}
.rubrica-card__edit {
    margin-left:  auto;
    color:        var(--text-muted, #6b7280);
    text-decoration: none;
    padding:      .125rem .375rem;
    border-radius: .25rem;
}
.rubrica-card__edit:hover {
    background: var(--bg-hover, rgba(0, 0, 0, .05));
    color:      var(--text-primary, #111827);
}
.rubrica-card__body > div {
    margin-bottom: .15rem;
}
.rubrica-card__body > div:last-child {
    margin-bottom: 0;
}

/* ── Textarea editabile Template 2 ──────────────────────────── */
.retailer-body-textarea {
    font-family: inherit;
    font-size:   .9375rem;
    line-height: 1.55;
    min-height:  180px;
    resize:      vertical;
}

/* ── Input con pulsante azione (es. "Compila da web") ───────── */
.input-with-action {
    display:     flex;
    gap:         .5rem;
    align-items: stretch;
}
.input-with-action > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
.input-with-action > .btn-pw {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Feedback fetch contatti (informativo / successo / errore) */
.fetch-feedback {
    padding:       .625rem .875rem;
    border-radius: .375rem;
    font-size:     .875rem;
    line-height:   1.45;
    margin-top:    .625rem;
    border:        1px solid transparent;
}
.fetch-feedback--info {
    background:   var(--clr-info-bg, #eff6ff);
    border-color: var(--clr-info, #93c5fd);
    color:        var(--clr-info-text, #1e40af);
}
.fetch-feedback--success {
    background:   var(--clr-success-bg, #ecfdf5);
    border-color: var(--clr-success, #16a34a);
    color:        var(--clr-success-text, #166534);
}
.fetch-feedback--warning {
    background:   var(--clr-warning-bg, #fef3c7);
    border-color: var(--clr-warning, #f59e0b);
    color:        var(--clr-warning-text, #92400e);
}
.fetch-feedback--error {
    background:   var(--clr-danger-bg, #fee2e2);
    border-color: var(--clr-danger, #dc2626);
    color:        var(--clr-danger-text, #991b1b);
}

/* ── Spinner inline per pulsanti AJAX ───────────────────────── */
.spinner-inline {
    display:        inline-block;
    width:          .85em;
    height:         .85em;
    margin-right:   .35em;
    border:         2px solid currentColor;
    border-right-color: transparent;
    border-radius:  50%;
    animation:      spinner-rot .7s linear infinite;
    vertical-align: -.15em;
}
@keyframes spinner-rot {
    to { transform: rotate(360deg); }
}

/* ── Anteprima dati automatici (details/summary) ────────────── */
.retailer-preview-details {
    border:        1px solid var(--border-color, #e5e7eb);
    border-radius: .375rem;
    padding:       0;
    background:    var(--bg-soft, #f9fafb);
}
.retailer-preview-summary {
    cursor:    pointer;
    padding:   .625rem .875rem;
    font-size: .875rem;
    color:     var(--text-secondary, #4b5563);
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.retailer-preview-summary::-webkit-details-marker {
    display: none;
}
.retailer-preview-details[open] .retailer-preview-summary {
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    width: 100%;
}
.retailer-preview-details .preview-box {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* ── Utility: spacing ───────────────────────────────────────── */
.m-0  { margin: 0; }
.p-0  { padding: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-1-25 { margin-bottom: 1.25rem; }
.mb-1-5  { margin-bottom: 1.5rem; }
.mt-1-25 { margin-top: 1.25rem; }
.mt-5    { margin-top: .5rem; }

/* ── Utility: sizing ────────────────────────────────────────── */
.mw-160 { max-width: 160px; }
.mw-440 { max-width: 440px; }
.mw-860 { max-width: 860px; }
.w-full { width: 100%; }

/* ── Utility: display ───────────────────────────────────────── */
.d-none   { display: none; }
.d-inline { display: inline; }
.d-grid   { display: grid; }

/* ── Utility: flex helpers ──────────────────────────────────── */
.align-start   { align-items: flex-start; }
.flex-col-gap  { display: flex; flex-direction: column; gap: 1rem; }
.aside-panel   { width: 260px; flex-shrink: 0; }
.content-panel { flex: 1; min-width: 0; }
.card-flex-2   { flex: 2; min-width: 300px; }
.card-flex-1   { flex: 1; min-width: 250px; }
.card-flex-1-260 { flex: 1; min-width: 260px; }
.flex-1-min0   { flex: 1; min-width: 0; }

/* ── Utility: text ──────────────────────────────────────────── */
.text-info   { color: var(--clr-info) !important; }
.text-accent { color: var(--accent); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .8125rem; }
.text-xxs    { font-size: .75rem; }
.text-lg     { font-size: var(--fs-lg); }
.text-meta   { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
.nowrap      { white-space: nowrap; }
.text-mono   { font-family: monospace; }

/* Uppercase micro-label */
.label-meta {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.label-field {
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

/* ── Utility: icon sizes ────────────────────────────────────── */
.icon-sm { font-size: .75rem; }
.icon-xs { font-size: .7rem; }

/* ── Utility: opacity / misc ────────────────────────────────── */
.opacity-60 { opacity: .6; }
.hr-section { border: none; border-top: 1px solid var(--card-border); margin: 1.25rem 0; }

/* ── Card body variants ─────────────────────────────────────── */
.card-body--flush  { padding: 0; }
.card-body--chart  { height: 220px; position: relative; }
.card-body--chart-lg { height: 240px; position: relative; }
* Empty state dentro il chart */
.chart-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;
    gap:             .5rem;
    color:           var(--text-muted);
    font-size:       var(--fs-sm);
    text-align:      center;
}
.chart-empty i { font-size: 2rem; opacity: .35; display: block; }
.card-header-info {
    padding:     .875rem 1.25rem;
    background:  #f8fafc;
    border-top:  1px solid var(--card-border);
}

/* ── Grid layouts ───────────────────────────────────────────── */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
}
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .875rem;
    margin-top: 1.25rem;
}

/* ── Page header (title + actions row) ──────────────────────── */
.page-header {
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    margin-bottom: 1.25rem;
    flex-wrap:     wrap;
    gap:           .75rem;
}
.page-header .page-section-title { margin: 0; }

/* ── Boxes ──────────────────────────────────────────────────── */
.preview-box {
    background:    #f8fafc;
    border:        1px solid var(--card-border);
    border-radius: 8px;
    padding:       .875rem;
    font-size:     .8125rem;
    margin-bottom: 1rem;
}
.meta-box {
    background:    #f8fafc;
    border-radius: 8px;
    padding:       .875rem;
}
.scroll-list {
    max-height:  240px;
    overflow-y:  auto;
    border:      1px solid var(--card-border);
    border-radius: 8px;
}
.list-row    { padding: .875rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.list-row-sm { padding: .75rem 1.25rem;  border-bottom: 1px solid #f1f5f9; }

/* ── Price boxes (view.php) ─────────────────────────────────── */
.price-box {
    background:    #f8fafc;
    border-radius: 8px;
    padding:       .875rem;
}
.price-box--danger { background: rgba(239,68,68,.06); }
.price-box__label {
    font-size:       .75rem;
    color:           var(--text-muted);
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .04em;
}
.price-box__value {
    font-size:   1.375rem;
    font-weight: 700;
    margin-top:  .25rem;
}
.price-box__value--accent { color: var(--accent); }

/* ── Status badge variants ──────────────────────────────────── */
.status-badge--resolved { background: #f1f5f9; color: #64748b; }

/* ── Tab navigation ─────────────────────────────────────────── */
.tab-nav {
    display:       flex;
    gap:           .25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0;
}
.tab-link {
    padding:       .625rem 1rem;
    font-size:     .875rem;
    font-weight:   400;
    color:         var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition:    color .2s;
    white-space:   nowrap;
}
.tab-link:hover { color: var(--accent); text-decoration: none; }
.tab-link.active {
    font-weight:        600;
    color:              var(--accent);
    border-bottom-color: var(--accent);
}
.tab-badge {
    font-size:    .75rem;
    background:   #f1f5f9;
    color:        var(--text-secondary);
    padding:      1px 7px;
    border-radius: 20px;
    margin-left:  .375rem;
}
.tab-link.active .tab-badge {
    background: var(--accent-light);
    color:      var(--accent);
}

/* ── Violation list item (send.php) ─────────────────────────── */
.viol-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .75rem 1rem;
    border-bottom:   1px solid #f1f5f9;
    background:      transparent;
    text-decoration: none;
    color:           inherit;
    transition:      background .15s;
}
.viol-item:hover       { background: #f8fafc; text-decoration: none; }
.viol-item.selected    { background: var(--accent-light); }
.viol-item__name       { font-size: .875rem; }
.viol-item__domain     { font-size: .75rem; color: var(--text-muted); }

/* ── Email log rows ─────────────────────────────────────────── */
.email-log-type          { font-size: .8125rem; font-weight: 600; }
.email-log-status--sent  { font-size: .7rem; color: var(--clr-success); }
.email-log-status--error { font-size: .7rem; color: var(--clr-danger); }
.email-log-recipient {
    font-size:     .75rem;
    color:         var(--text-muted);
    margin-top:    .2rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.email-log-date { font-size: .7rem; color: var(--text-muted); }

/* ── Notification sent indicators ───────────────────────────── */
.notif-sent { color: var(--clr-success); }
.notif-info { color: var(--clr-info); }
.notif-none { color: var(--text-muted); }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-nav  { font-size: .875rem; margin-bottom: 1.25rem; color: var(--text-muted); }
.breadcrumb-sep  { margin: 0 .5rem; }
.breadcrumb-link { color: var(--accent); }

/* ── Logo upload (sede.php) ─────────────────────────────────── */
.logo-upload-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.logo-preview {
    height:       48px;
    width:        auto;
    object-fit:   contain;
    background:   #f8fafc;
    padding:      .375rem;
    border-radius: 6px;
    border:       1px solid var(--card-border);
}
.logo-input { flex: 1; min-width: 200px; }

/* ── Semaphore legend (sede.php) ─────────────────────────────── */
.semaphore-legend       { display: flex; flex-direction: column; gap: .375rem; }
.semaphore-legend-row   { display: flex; align-items: center; gap: .5rem; }

/* ── Doc table (upload.php) ─────────────────────────────────── */
.doc-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.doc-table thead tr   { border-bottom: 2px solid var(--card-border); }
.doc-table th {
    text-align:  left;
    padding:     .25rem .375rem;
    color:       var(--text-secondary);
}
.doc-table td         { padding: .375rem; border-bottom: 1px solid #f1f5f9; }
.doc-table td.col-key { font-family: monospace; font-size: .75rem; color: var(--accent); }
.doc-table td.col-note { color: var(--text-secondary); }

.example-table { width: 100%; border-collapse: collapse; font-size: .75rem; min-width: 350px; }
.example-table thead tr { background: #f8fafc; border-bottom: 2px solid var(--card-border); }

/* ── Guida utente ───────────────────────────────────────────── */
.help-wrap {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.help-side {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    max-height: calc(100vh - var(--topbar-h) - 2rem);
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1rem;
}

.help-wrap .brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.help-wrap .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.help-wrap .brand-name {
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 700;
}

.help-wrap .brand-tag,
.toc-section {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.search-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.search-wrap i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

#helpSearch {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text-primary);
    padding: .55rem .75rem .55rem 2.15rem;
    font-size: var(--fs-sm);
}

#helpSearch:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.toc-section { margin: 1rem .5rem .35rem; }

.toc {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--dur), color var(--dur);
}

.toc a i {
    width: 18px;
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.toc a:hover,
.toc a.active {
    background: var(--accent-light);
    color: var(--text-primary);
    text-decoration: none;
}

.help-main {
    min-width: 0;
    max-width: 980px;
}

.help-eyebrow {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.help-title {
    color: var(--text-primary);
    font-size: clamp(1.9rem, 4vw, 2.65rem);
    line-height: 1.12;
    margin: .35rem 0 .75rem;
}

.help-intro,
.section-lede {
    color: var(--text-secondary);
    max-width: 70ch;
}

.help-main section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1.35rem;
    margin-top: 1rem;
}

.help-main h2.section-title {
    color: var(--text-primary);
    font-size: var(--fs-2xl);
    margin: 0 0 .35rem;
}

.help-main h3.sub-title {
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 1.25rem 0 .45rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.feature-card,
.tip,
.warn,
.info,
ol.steps li {
    background: #f8fafc;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

.feature-card {
    padding: 1rem;
}

.feature-card i {
    display: block;
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: .45rem;
}

.feature-card h4 {
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 700;
    margin-bottom: .2rem;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0;
}

.tip,
.warn,
.info {
    padding: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary);
}

.tip { border-left: 3px solid var(--clr-success); }
.warn { border-left: 3px solid var(--clr-warning); }
.info { border-left: 3px solid var(--accent); }

.tip strong,
.warn strong,
.info strong {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-primary);
    margin-bottom: .35rem;
}

.tip strong i { color: var(--clr-success); }
.warn strong i { color: var(--clr-warning); }
.info strong i { color: var(--accent); }

ol.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

ol.steps li {
    counter-increment: step;
    position: relative;
    padding: 1rem 1rem 1rem 3.25rem;
    margin-bottom: .65rem;
    color: var(--text-secondary);
}

ol.steps li::before {
    content: counter(step);
    position: absolute;
    left: .9rem;
    top: 1rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
}

ol.steps li strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: .2rem;
}

.tbl-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

table.help-tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

table.help-tbl th,
table.help-tbl td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    font-size: var(--fs-sm);
}

table.help-tbl th {
    background: #f8fafc;
    color: var(--text-secondary);
    font-weight: 700;
}

table.help-tbl tr:last-child td { border-bottom: none; }

.badge-pw {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.help-main .badge-danger { background: var(--clr-danger-bg); color: var(--clr-danger); }
.help-main .badge-warning { background: var(--clr-warning-bg); color: var(--clr-warning); }
.help-main .badge-success { background: var(--clr-success-bg); color: var(--clr-success); }

.help-main .accordion-item {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.help-main .accordion-button {
    color: var(--text-primary);
    font-weight: 600;
}

.help-main .accordion-button:not(.collapsed) {
    background: var(--accent-light);
    color: var(--text-primary);
    box-shadow: none;
}

.help-main .accordion-button:focus { box-shadow: 0 0 0 3px var(--accent-light); }
.help-main .accordion-body { color: var(--text-secondary); }

dl.gloss {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .65rem 1.25rem;
    margin: 1rem 0 0;
}

dl.gloss dt {
    color: var(--accent);
    font-weight: 700;
}

dl.gloss dd {
    margin: 0;
    color: var(--text-secondary);
}

.help-main code {
    background: #eef4ff;
    color: var(--accent);
    border-radius: 5px;
    padding: .1rem .4rem;
    font-size: .9em;
}

.help-main kbd {
    background: #f8fafc;
    border: 1px solid var(--card-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    color: var(--text-primary);
    padding: .15rem .45rem;
    font-size: .85em;
}

a.help-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

a.help-link:hover { text-decoration: underline; }

.help-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.heart { color: var(--clr-danger); }
.section-hidden { display: none; }
.hl {
    background: rgba(47,128,237,.18);
    color: var(--text-primary);
    border-radius: 3px;
    padding: 0 .12rem;
}

#toTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--accent);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    z-index: 20;
}

#toTop.show { display: flex; }

@media (max-width: 991px) {
    .help-wrap {
        grid-template-columns: 1fr;
    }

    .help-side {
        position: static;
        max-height: none;
    }
}

@media (max-width: 600px) {
    .help-main section {
        padding: 1rem;
    }

    dl.gloss {
        grid-template-columns: 1fr;
    }
}
.example-table th { padding: .25rem .5rem; text-align: left; }
.example-table td { padding: .25rem .5rem; }

/* ── Form helpers ───────────────────────────────────────────── */
.form-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .875rem; }
.form-check-input { width: 16px; height: 16px; }
.form-dest-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-start; }
.form-dest-select { flex: 1; min-width: 200px; }
.form-dest-or { align-self: center; color: var(--text-muted); font-size: .875rem; }
.form-group--sm { margin-bottom: .75rem; }
.form-group--none { margin-bottom: 0; }

/* ── Inline code ────────────────────────────────────────────── */
.code-inline { background: #f1f5f9; padding: 1px 4px; border-radius: 4px; font-family: monospace; }

/* ── Stat value size variant ────────────────────────────────── */
.stat-value--sm { font-size: var(--fs-base); }

/* ── Upload filename hint ───────────────────────────────────── */
.upload-filename { margin-top: .5rem; font-weight: 600; color: var(--accent); font-size: .875rem; }

/* ── Gap utilities ──────────────────────────────────────────── */
.gap-375 { gap: .375rem; }
.gap-1rem { gap: 1rem; }

/* ── Overflow utilities ─────────────────────────────────────── */
.overflow-x-auto { overflow-x: auto; }

/* ── Import progress bar ────────────────────────────────────── */
.import-progress { margin-bottom: 1.25rem; }

.import-progress-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   .5rem;
    font-size:       .875rem;
    color:           var(--text-secondary);
}

.import-progress-track {
    background:    var(--card-border);
    border-radius: 99px;
    height:        8px;
    overflow:      hidden;
}

.import-progress-bar {
    height:        100%;
    width:         0%;
    background:    var(--accent);
    border-radius: 99px;
    transition:    width .2s ease;
}

.import-progress-bar.is-indeterminate {
    width:           100% !important;
    background:      linear-gradient(90deg,
                         var(--accent-light) 0%,
                         var(--accent)       50%,
                         var(--accent-light) 100%);
    background-size: 200% 100%;
    animation:       import-shimmer 1.4s ease-in-out infinite;
    transition:      none;
}

@keyframes import-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Typography variants ────────────────────────────────────── */
.product-title { font-size: 1.375rem; }
.h4-section { font-size: .9375rem; }

/* ============================================================
   SaaS Multi-tenant — Componenti (v2)
   Tutti gli stili sono classi CSS, nessun inline style.
   ============================================================ */

/* ── Ruolo badge sidebar ─────────────────────────────────────── */
.sidebar-role-badge {
    display: inline-block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: .375rem;
    vertical-align: middle;
    line-height: 1.4;
}
.sidebar-role-badge.sidebar-role-collab {
    background: #7c3aed;
}
/*.role-superadmin .sidebar {
    background: linear-gradient(180deg, #0d1b2e 0%, #1a0a2e 100%);
}*/
.role-superadmin .sidebar-brand {
    border-bottom-color: rgba(139,92,246,.4);
}

/* ── Info banner ─────────────────────────────────────────────── */
.info-banner {
    /*display: flex;*/
    align-items: flex-start;
    gap: .625rem;
    background: rgba(47,128,237,.08);
    border: 1px solid rgba(47,128,237,.25);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.info-banner i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ── Topbar badge abbonamento ────────────────────────────────── */
.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .03em;
}
.topbar-badge--trial   { background: rgba(245,158,11,.12); color: #d97706; }
.topbar-badge--sospeso { background: rgba(239,68,68,.10);  color: #dc2626; }
.topbar-badge--scaduto { background: rgba(107,114,128,.12);color: #6b7280; }

/* ── Subscription badges ─────────────────────────────────────── */
.badge-attivo  { background: rgba(34,197,94,.15);  color: #15803d; }
.badge-trial   { background: rgba(245,158,11,.15); color: #b45309; }
.badge-sospeso { background: rgba(239,68,68,.12);  color: #dc2626; }
.badge-scaduto { background: rgba(107,114,128,.12);color: #6b7280; }

/* ── Plan badges ─────────────────────────────────────────────── */
.plan-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .03em;
}
.plan-badge--starter    { background: rgba(107,114,128,.12); color: #374151; }
.plan-badge--growth     { background: rgba(47,128,237,.12);  color: #1d4ed8; }
.plan-badge--pro        { background: rgba(124,58,237,.12);  color: #6d28d9; }
.plan-badge--enterprise { background: rgba(245,158,11,.12);  color: #92400e; }

/* ── Sedi grid ───────────────────────────────────────────────── */
.sedi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
.sede-card { transition: box-shadow .2s; }
.sede-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.10); }
.sede-card--principale { border-left: 3px solid var(--warning); }
.sede-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.sede-card-title {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .9375rem;
}
.sede-card-actions { display: flex; gap: .25rem; }
.sede-card-body { display: flex; flex-direction: column; gap: .375rem; }
.sede-detail {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-secondary);
}
.sede-detail i { flex-shrink: 0; margin-top: 2px; font-size: .875rem; }
.sede-detail a { color: var(--accent); text-decoration: none; }
.sede-detail a:hover { text-decoration: underline; }
.sede-note { color: var(--text-muted); font-style: italic; }

/* ── Bottoni icon ─────────────────────────────────────────────── */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.btn-icon:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-icon--danger:hover { background: rgba(239,68,68,.10); color: var(--danger); }

/* ── Bottoni sm ───────────────────────────────────────────────── */
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity .15s;
    text-decoration: none;
}
.btn-sm:hover { opacity: .85; }
.btn-sm:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm--danger  { background: rgba(239,68,68,.12); color: #dc2626; }
.btn-sm--success { background: rgba(34,197,94,.12);  color: #15803d; }

/* ── Bottone disabled (span) ─────────────────────────────────── */
.btn-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Section header ──────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.section-sub { color: var(--text-muted); font-size: .875rem; margin: 0; }

/* ── Plan limit bar ──────────────────────────────────────────── */
.plan-limit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .875rem 1.25rem;
}
.plan-limit-info {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--text-secondary);
    font-size: .9375rem;
}
.plan-limit-info i { color: var(--accent); }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-backdrop[aria-hidden="true"] { display: none; }
.modal-dialog {
 /*   background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;*/
    pointer-events: auto; /* Override Bootstrap che lo imposta a none */
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .15s;
    text-decoration: none;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.modal-body { padding: 1.5rem; }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* ── Grid 4col ────────────────────────────────────────────────── */
.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.grid-col-2 { grid-column: span 2; }
@media (max-width: 600px) {
    .grid-4col { grid-template-columns: 1fr 1fr; }
    .grid-col-2 { grid-column: span 2; }
}

/* ── Form check ───────────────────────────────────────────────── */
.form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.form-check-input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.form-check-label { font-size: .9375rem; cursor: pointer; user-select: none; }

/* ── Text utilities ───────────────────────────────────────────── */
.text-upper { text-transform: uppercase; }
.text-sm    { font-size: .8125rem; }
.text-center{ text-align: center; }
.color-warning { color: var(--warning); }
.color-muted   { color: var(--text-muted); }

/* ── User cell ────────────────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: .625rem; }
.user-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Row states ───────────────────────────────────────────────── */
.row-disabled td { opacity: .55; }
.row-note td { background: #fafafa; padding-top: .25rem !important; padding-bottom: .5rem !important; }

/* ── Actions cell ─────────────────────────────────────────────── */
.actions-cell { display: flex; align-items: center; gap: .25rem; }
.th-actions { width: 90px; }

/* ── Filter bar ───────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: .25rem; }
.filter-group .form-label { margin: 0; }
.filter-actions { display: flex; gap: .5rem; align-items: flex-end; }

/* ── Card count badge ─────────────────────────────────────────── */
.card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background: var(--accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 5px;
    margin-left: .5rem;
}

/* ── Card header action link ──────────────────────────────────── */
.card-header-action {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .25rem;
    transition: opacity .15s;
}
.card-header-action:hover { opacity: .75; }

/* ── Piano distribution bar ───────────────────────────────────── */
.piano-dist { display: flex; flex-direction: column; gap: .75rem; }
.piano-dist-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}
.piano-dist-name { width: 90px; font-weight: 600; flex-shrink: 0; }
.piano-dist-bar-wrap {
    flex: 1;
    background: var(--surface-hover);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.piano-dist-bar {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    width: 0%;
    transition: width .4s ease;
}
.piano-dist-count {
    width: 24px;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-muted);
}
.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--border); font-size: .75rem; }

/* ── Card danger variant ──────────────────────────────────────── */
.card--danger { border-color: rgba(239,68,68,.3); }
.card--danger .card-header { border-bottom-color: rgba(239,68,68,.2); }
.card-title--danger { color: var(--danger); }
.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: .5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9375rem;
}
.btn-danger:hover { opacity: .85; }

/* ── Stat grid sm variant ─────────────────────────────────────── */
.stat-grid--sm { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
    .stat-grid--sm { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stat icon variants ───────────────────────────────────────── */
.stat-icon--primary { background: rgba(47,128,237,.12);  color: var(--accent); }
.stat-icon--success { background: rgba(34,197,94,.12);   color: #15803d; }
.stat-icon--warning { background: rgba(245,158,11,.12);  color: #b45309; }
.stat-icon--danger  { background: rgba(239,68,68,.12);   color: var(--danger); }

/* ── Table compact ────────────────────────────────────────────── */
.table-compact td,
.table-compact th { padding: .5rem .875rem; font-size: .8125rem; }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center;
               text-align: center; padding: 2.5rem 1rem; }
.empty-state-icon { font-size: 2.5rem; color: var(--text-muted); margin-bottom: .75rem; }
.empty-state-title { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.empty-state-sub   { color: var(--text-muted); font-size: .875rem; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .15s;
}
.page-btn:hover { background: var(--surface-hover); }
.page-info { font-size: .875rem; color: var(--text-muted); }

/* ── Piani CRUD ──────────────────────────────────────────────── */
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }
.text-sm     { font-size: var(--fs-sm); }

.badge-featured {
    background: rgba(245,158,11,.15);
    color: #92400e;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: .25rem;
}

.btn-sm--edit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: rgba(47,128,237,.1);
    color: var(--accent);
}
.btn-sm--edit:hover { background: rgba(47,128,237,.18); color: var(--accent); text-decoration: none; }

.modal-dialog--lg { max-width: 720px; }
.modal-dialog--scrollable {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}
.modal-dialog--scrollable > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.modal-dialog--scrollable .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Form piano */
.form-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}
.grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: var(--fs-sm);
}
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checkbox-label--block {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.checkbox-label--block:hover { border-color: var(--accent); background: var(--accent-light); }
.checkbox-label--block input { margin-top: .15rem; }

/* ── Abbonamento / Pricing ────────────────────────────────────── */
.badge-lg { font-size: var(--fs-sm); padding: .35rem .75rem; }

.billing-toggle {
    display: inline-flex;
    background: var(--content-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.billing-toggle--inline { margin-bottom: 1rem; }
.billing-btn {
    padding: .35rem .875rem;
    border-radius: 6px;
    border: none;
    font-family: var(--font-main);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.billing-btn.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.billing-save {
    font-size: .7rem;
    font-weight: 700;
    background: rgba(34,197,94,.15);
    color: #15803d;
    padding: .05rem .35rem;
    border-radius: 999px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
}
.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    transition: box-shadow .2s, border-color .2s;
}
.pricing-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.09); }
.pricing-card--featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.pricing-card--current {
    background: #f8faff;
    border-color: #c7d9f9;
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-badge--current {
    background: #64748b;
}
.pricing-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: .5rem;
}
.pricing-desc {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.pricing-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    flex-wrap: wrap;
}
.pricing-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.pricing-amount.pricing-custom {
    font-size: 1.25rem;
    color: var(--text-secondary);
}
.pricing-period {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.pricing-monthly-equiv {
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.pricing-trial {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #15803d;
    background: rgba(34,197,94,.1);
    padding: .25rem .6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: fit-content;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.pricing-features li i {
    color: var(--clr-success);
    flex-shrink: 0;
    margin-top: .15rem;
}
.gap-5 { gap: .5rem; }
.align-items-center { align-items: center; }

/* ── Riepilogo pagamento ──────────────────────────────────────── */
.pay-summary {
    background: var(--content-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.pay-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 1rem;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--card-border);
}
.pay-summary-row:last-child { border-bottom: none; }
.pay-summary-total {
    background: var(--card-bg);
    font-weight: 700;
    font-size: var(--fs-base);
}

/* ── Info banner danger ───────────────────────────────────────── */
.info-banner--danger {
    background: var(--clr-danger-bg);
    border-color: rgba(239,68,68,.3);
    color: var(--clr-danger);
}

/* ── Info banner CTA (demo / attivazione piano) ─────────────────
   Stessa palette del banner demo globale, per coerenza visiva. */
.info-banner--cta {
    display: flex;
    background:    linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border:        1px solid #fdba74;
    border-left:   4px solid #ea580c;
    color:         #7c2d12;
    font-size:     var(--fs-sm, .9rem);
    line-height:   1.5;
}
.info-banner--cta i { color: #ea580c; }
.info-banner--cta strong { color: #7c2d12; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sedi-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; }
    .filter-group { width: 100%; }
    .filter-group .form-control { width: 100%; }
    .plan-limit-bar { flex-direction: column; align-items: flex-start; }
    .pricing-grid { grid-template-columns: 1fr; }
    .grid-3col { grid-template-columns: 1fr; }
    .modal-dialog--lg { max-width: 100%; }
}

.tab-nav {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--card-border);
    margin-bottom: 1.25rem;
}
.tab-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab-link:hover {
    color: var(--accent);
    text-decoration: none;
}
.tab-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--accent-light);
}
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--content-bg);
    border: 1px solid var(--card-border);
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}
.tab-link.active .tab-badge {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Filters bar (violations) ─────────────────────────────────── */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.filters-bar .form-control { max-width: 220px; }
.filters-bar .form-select  { max-width: 180px; }

/* ── Notification badges ──────────────────────────────────────── */
.notif-sent {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--clr-success);
}
.notif-info {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent);
}
.notif-none {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ── Status badge: resolved ───────────────────────────────────── */
.status-badge--resolved {
    background: rgba(100,116,139,.1);
    color: #64748b;
    border: 1px solid rgba(100,116,139,.25);
}

/* ── Utility ──────────────────────────────────────────────────── */
.text-xxs   { font-size: .7rem; }
.opacity-60 { opacity: .6; }
.gap-375    { gap: .375rem; }
.d-inline   { display: inline; }

/* ── Pagination active state (mancava) ────────────────────────── */
.page-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.page-btn.disabled {
    opacity: .38;
    pointer-events: none;
    cursor: default;
}

/* ── Icons chevron (alias per paginazione) ────────────────────── */
/* Aggiungere in icons.php se mancanti:                           */
/* 'chevron_left'  => 'bi bi-chevron-left'                        */
/* 'chevron_right' => 'bi bi-chevron-right'                       */
/* 'download'      => 'bi bi-download'                            */

/* ── Responsive violations table ─────────────────────────────── */
@media (max-width: 900px) {
    .filters-bar .form-control,
    .filters-bar .form-select { max-width: 100%; width: 100%; }
    .filters-bar { flex-direction: column; align-items: stretch; }
}

/* ================================================================
   BrandPriceMonitor — Upload wizard CSS
   Appendere in fondo a backend.css
   ================================================================ */

/* ── Step indicator ────────────────────────────────────────────── */
.upload-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.75rem;
}
.upload-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.upload-step__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
}
.upload-step__lbl {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color .2s;
}
.upload-step.active .upload-step__num {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.upload-step.active .upload-step__lbl { color: var(--accent); }
.upload-step.completed .upload-step__num {
    background: var(--clr-success);
    border-color: var(--clr-success);
    color: #fff;
}
.upload-step.completed .upload-step__lbl { color: var(--clr-success); }
.upload-step__line {
    flex: 1;
    height: 2px;
    background: var(--card-border);
    margin: 0 .5rem;
    min-width: 24px;
    max-width: 80px;
}

/* ── Destination tab toggle ────────────────────────────────────── */
.upload-dest-tabs {
    display: flex;
    gap: .375rem;
    margin-bottom: .625rem;
}
.upload-dest-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.upload-dest-btn:hover { border-color: var(--accent); color: var(--accent); }
.upload-dest-btn.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── File drop zone ─────────────────────────────────────────────── */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--card-border);
    border-radius: var(--card-radius);
    background: var(--content-bg);
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.file-drop-zone:hover,
.file-drop-zone.is-dragging {
    border-color: var(--accent);
    background: var(--accent-light);
}
.file-drop-zone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.file-drop-zone__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    pointer-events: none;
}
.file-drop-zone__icon {
    font-size: 2.25rem;
    color: var(--text-muted);
    margin-bottom: .5rem;
}
.file-drop-zone__text {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .25rem;
}
.file-drop-zone__hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.text-accent { color: var(--accent); }

/* File selezionato */
.upload-file-selected {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    background: var(--clr-success-bg);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    margin-top: .5rem;
}
.btn-clear-file {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 .2rem;
}
.btn-clear-file:hover { color: var(--clr-danger); }

/* ── Progress bar upload ────────────────────────────────────────── */
.upload-progress-box {
    margin-bottom: 1rem;
}
.upload-progress-bar-wrap {
    height: 8px;
    background: var(--content-bg);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: .375rem;
}
.upload-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .25s ease;
}
.upload-progress-bar.is-indeterminate {
    width: 100% !important;
    animation: progress-indeterminate 1.2s ease-in-out infinite;
}
@keyframes progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.upload-progress-msg {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ── Mapping table ──────────────────────────────────────────────── */
.map-col-orig code {
    background: var(--content-bg);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .8rem;
}
.map-auto-tag {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .1rem .35rem;
    border-radius: 999px;
    background: rgba(34,197,94,.12);
    color: #15803d;
    vertical-align: middle;
    margin-left: .3rem;
}
.col-mapped  { color: var(--accent); font-weight: 600; }
.col-ignored { color: var(--text-muted); font-style: italic; }

/* ── Preview table ──────────────────────────────────────────────── */
.preview-table { font-size: .8rem; }
.preview-table th { white-space: nowrap; }
.overflow-x-auto { overflow-x: auto; }

/* ── Format hint table (sidebar) ────────────────────────────────── */
.format-hint-table {
    width: 100%;
    font-size: .8125rem;
    border-collapse: collapse;
    margin-bottom: .75rem;
}
.format-hint-table th {
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--card-border);
}
.format-hint-table td {
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}
.format-hint-table tr:last-child td { border-bottom: none; }
.divider { border: none; border-top: 1px solid var(--card-border); margin: .875rem 0; }

/* ================================================================
   BrandPriceMonitor — Scan manuale CSS
   Appendere in fondo a backend.css
   ================================================================ */

/* ── Progress bar globale scansione ────────────────────────────── */
.scan-global-progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 180px;
}
.scan-global-progress__bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--content-bg);
    border-radius: 999px;
    overflow: hidden;
    min-width: 100px;
}
.scan-global-progress__bar {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .3s ease;
}

/* ── Summary contatori ──────────────────────────────────────────── */
.scan-summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.scan-summary__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
}
.scan-summary__item--ok     { color: var(--clr-success); }
.scan-summary__item--danger { color: var(--clr-danger); }
.scan-summary__item--muted  { color: var(--text-muted); }

/* ── Stato riga tabella scan ────────────────────────────────────── */
.scan-status-cell,
.scan-result-cell { white-space: nowrap; }

/* Spinner rotante per riga in scanning */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spin { display: inline-block; animation: spin .8s linear infinite; }

/* ── Col checkbox ────────────────────────────────────────────────── */
.col-check { width: 36px; text-align: center; }

/* ── Nowrap ──────────────────────────────────────────────────────── */
.nowrap { white-space: nowrap; }

/* ── Status badge varianti extra ─────────────────────────────────── */
.status-critical {
    background: rgba(220,38,38,.12);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.25);
}

/* ── Pagina SuperAdmin: Consumo API ─────────────────────────────── */

/* Tab metrica nel card-header dei grafici */
.api-chart-tabs {
    display: inline-flex;
    background: var(--surface-hover, #f1f5f9);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.api-chart-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.api-chart-tab:hover { color: var(--text-primary); }
.api-chart-tab.is-active {
    background: var(--card-bg, #fff);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Cella crediti nella tabella per gestore */
.api-credit-cell {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: flex-end;
    min-width: 130px;
}
.api-credit-bar-wrap {
    width: 100%;
    height: 6px;
}

/* Card body per chart leggermente più alto */
.card-body--chart-tall { height: 320px; position: relative; }

/* ============================================================
   Wizard "Attiva piano"
   File: backoffice/settings/attiva_piano.php
   ============================================================ */

.wizard-header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.wizard-back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--fs-sm);
    color: var(--text-muted, #64748b);
    text-decoration: none;
    width: max-content;
}
.wizard-back:hover { color: var(--accent); }
.wizard-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Stepper pillole ─────────────────────────────────────────── */
.wizard-stepper {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding: .75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.wizard-step-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--card-border);
    color: var(--text-muted, #64748b);
    font-size: .8rem;
    font-weight: 700;
    transition: background .2s, color .2s;
}
.wizard-step-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.wizard-step-pill.is-active .wizard-step-num {
    background: var(--accent);
    color: #fff;
}
.wizard-step-pill.is-active .wizard-step-label {
    color: var(--accent);
}
.wizard-step-pill.is-completed .wizard-step-num {
    background: #22c55e;
    color: #fff;
}
.wizard-step-pill.is-completed .wizard-step-num::before {
    content: '\2713';
    font-size: .85rem;
}
.wizard-step-pill.is-completed .wizard-step-num {
    font-size: 0;          /* nasconde il numero, mostra solo il check */
    line-height: 1;
}
.wizard-step-pill.is-completed .wizard-step-label {
    color: #16a34a;
}
.wizard-step-divider {
    flex: 1 1 auto;
    height: 2px;
    background: var(--card-border);
    border-radius: 2px;
    min-width: 1rem;
}
@media (max-width: 640px) {
    .wizard-step-label { display: none; }
    .wizard-stepper    { padding: .5rem; }
}

/* ── Step (card) ─────────────────────────────────────────────── */
.wizard-step {
    transition: opacity .2s;
}
.wizard-step.is-collapsed .wizard-step-body {
    display: none;
}
.wizard-step.is-collapsed.is-completed { opacity: .85; }
.wizard-step.is-collapsed:not(.is-completed) { opacity: .55; }
.wizard-step.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-light);
}

.wizard-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.wizard-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    margin-right: .35rem;
}
.wizard-step.is-completed .wizard-step-badge {
    background: #dcfce7;
    color: #16a34a;
}
.wizard-step.is-completed .wizard-step-badge::before {
    content: '\2713';
}
.wizard-step.is-completed .wizard-step-badge {
    font-size: 0;
    line-height: 1.5rem;
}
.wizard-step.is-completed .wizard-step-badge::before {
    font-size: .9rem;
}

.wizard-edit {
    font-size: var(--fs-sm);
    color: var(--accent);
    background: none;
    border: none;
    padding: .25rem .5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.wizard-edit:hover { text-decoration: underline; }

.wizard-step-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.wizard-step-actions .btn-pw {
    min-width: 8rem;
    justify-content: center;
}

/* Spinner per il bottone "Reindirizzo a Stripe…" */
.spin {
    display: inline-block;
    animation: wizard-spin 1s linear infinite;
}
@keyframes wizard-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.color-success { color: #16a34a; }
.ml-5 { margin-left: .5rem; }