/* =============================================================
   NSS Charter — Design System (v3, Stripe-like moderno)
   Convenzione: tutto qui dentro; calendar.css per il calendario.
   ============================================================= */

:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --color-primary:        #0F2A44;
    --color-primary-hover:  #173D62;
    --color-primary-soft:   #E5EEF7;
    --color-accent:         #2E7D7A;
    --color-cta:            #F4761C;
    --color-cta-hover:      #DA661A;

    /* ── Neutrali ────────────────────────────────────────────── */
    --color-bg:             #F4F6FA;
    --color-surface:        #FFFFFF;
    --color-surface-alt:    #FAFBFC;
    --color-border:         #E4E8EF;
    --color-border-strong:  #C7CFD9;
    --color-text:           #1B2733;
    --color-text-muted:     #5A6776;
    --color-text-faint:     #98A2B3;

    /* ── Stati ──────────────────────────────────────────────── */
    --color-success:        #1F8F5F;
    --color-success-soft:   #E0F2EA;
    --color-warning:        #C97A0E;
    --color-warning-soft:   #FCF3DD;
    --color-danger:         #C7423F;
    --color-danger-soft:    #FBE5E4;
    --color-info:           #1E5FA3;
    --color-info-soft:      #E1ECF8;

    /* ── Radius / shadow / motion ───────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15,42,68,.06);
    --shadow-md: 0 4px 12px rgba(15,42,68,.10);
    --shadow-lg: 0 10px 28px rgba(15,42,68,.14);
    --shadow-focus: 0 0 0 3px rgba(15,42,68,.15);

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --duration: 180ms;

    --layout-sidebar-w: 240px;
    --layout-topbar-h:  56px;
}

/* ── Reset + base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
code, pre, .coord {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
}
h1, h2, h3, h4 { color: var(--color-text); font-weight: 600; }
h1 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 1rem; }
h2 { font-size: 0.95rem; }
.text-muted, .text-muted * { color: var(--color-text-muted); }
.small { font-size: 0.82rem; }

/* ── Auth shell (split layout: hero + form panel) ─────── */
.auth-body { background: var(--color-primary); }
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--color-bg);
}

/* Hero panel — brand storytelling */
.auth-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3rem 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(46,125,122,.38) 0%, transparent 55%),
        radial-gradient(80% 60% at 0% 100%, rgba(244,118,28,.18) 0%, transparent 60%),
        linear-gradient(155deg, #0A1E32 0%, #0F2A44 45%, #173D62 100%);
}
.auth-hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,.10) 1px, transparent 1.5px),
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.06) 1px, transparent 1.5px);
    background-size: 30px 30px, 44px 44px;
    pointer-events: none;
    opacity: .55;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
}
.auth-hero__compass {
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 520px;
    height: 520px;
    color: rgba(255,255,255,.08);
    pointer-events: none;
}
.auth-hero__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}
.auth-hero__mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 100%);
    border: 1px solid rgba(255,255,255,.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 8px rgba(0,0,0,.18);
}
.auth-hero__mark svg { width: 22px; height: 22px; }
.auth-hero__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.auth-hero__brand-name {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}
.auth-hero__brand-sub {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .06em;
    margin-top: 2px;
}

.auth-hero__copy {
    position: relative;
    z-index: 1;
    max-width: 440px;
}
.auth-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    margin: 0 0 1rem;
}
.auth-hero__title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 .95rem;
    color: #fff;
}
.auth-hero__lead {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 38ch;
}
.auth-hero__features {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    color: rgba(255,255,255,.78);
    font-size: .9rem;
}
.auth-hero__features li {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.auth-hero__features li svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--color-cta);
}
.auth-hero__footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .76rem;
    color: rgba(255,255,255,.50);
    letter-spacing: .02em;
}

/* Form panel */
.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(70% 50% at 100% 0%, rgba(244,118,28,.06) 0%, transparent 60%),
        radial-gradient(60% 50% at 0% 100%, rgba(46,125,122,.05) 0%, transparent 60%),
        var(--color-bg);
}
.auth-card {
    position: relative;
    z-index: 2;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    padding: 2.25rem 2.25rem 1.9rem;
}
.auth-card h1 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 .4rem;
    color: var(--color-text);
}
.auth-card .auth-lead {
    color: var(--color-text-muted);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0 0 1.65rem;
}

/* legacy markup no-op (the layout no longer renders .brand inside card) */
.auth-card .brand { display: none; }

/* ── Auth form ─────────────────────────────────────────── */
.auth-form .auth-field { margin-bottom: 1.1rem; }
.auth-form .auth-field__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
}
.auth-form .auth-field__head .form-label { margin-bottom: 0; }
.auth-form .auth-field__link {
    font-size: .78rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--duration);
}
.auth-form .auth-field__link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Input affix (leading icon + optional trailing action) */
.input-affix {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-affix__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    pointer-events: none;
    transition: color var(--duration);
}
.input-affix .form-control {
    padding-left: 40px;
    height: 44px;
    font-size: .94rem;
}
.input-affix:focus-within .input-affix__icon { color: var(--color-primary); }
.input-affix--with-action .form-control { padding-right: 44px; }
.input-affix__action {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration), color var(--duration);
    padding: 0;
}
.input-affix__action svg { width: 18px; height: 18px; }
.input-affix__action:hover { background: var(--color-bg); color: var(--color-text); }
.input-affix__action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.input-affix__action .icon-eye-off { display: none; }
.input-affix__action[aria-pressed="true"] .icon-eye { display: none; }
.input-affix__action[aria-pressed="true"] .icon-eye-off { display: block; }

.auth-submit {
    width: 100%;
    min-height: 46px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
    margin-top: .5rem;
    gap: .5rem;
}
.auth-submit svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration) var(--ease-out);
}
.auth-submit:hover svg { transform: translateX(3px); }

.auth-card__footnote {
    text-align: center;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: 1.6rem 0 0;
    line-height: 1.5;
}
.auth-card__footnote a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}
.auth-card__footnote a:hover { text-decoration: underline; }

/* Tablet & below — branded hero + lifted card (mobile-first auth) */
@media (max-width: 1023px) {
    .auth-body { background: var(--color-primary); }
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .auth-hero {
        padding: calc(env(safe-area-inset-top, 0px) + 1.9rem) 1.5rem 4.5rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        min-height: auto;
    }
    /* Compass restituito come decoro di sfondo, ma molto sottile */
    .auth-hero__compass {
        display: block;
        right: -180px;
        top: -180px;
        bottom: auto;
        width: 380px;
        height: 380px;
        color: rgba(255, 255, 255, .045);
    }
    .auth-hero__copy,
    .auth-hero__features,
    .auth-hero__footer { display: none; }
    .auth-hero__brand { position: relative; z-index: 1; }

    .auth-panel {
        padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
        background: var(--color-bg);
        min-height: auto;
        align-items: stretch;
        justify-content: flex-start;
    }
    .auth-card {
        max-width: 480px;
        width: 100%;
        margin: -2.75rem auto 0;
        padding: 1.9rem 1.6rem 1.5rem;
        border-color: rgba(15, 42, 68, .06);
        border-radius: 18px;
        box-shadow:
            0 14px 36px rgba(10, 30, 50, .22),
            0 4px 10px rgba(10, 30, 50, .08);
    }
    .auth-card h1 { font-size: 1.45rem; line-height: 1.25; }
    .auth-card .auth-lead {
        font-size: .92rem;
        margin-bottom: 1.45rem;
    }
    /* Touch target più generosi su mobile */
    .btn.auth-submit { min-height: 50px; font-size: .98rem; }
    .input-affix__action { width: 40px; height: 40px; }
    .input-affix__action svg { width: 20px; height: 20px; }
    .auth-card__footnote { margin-top: 1.55rem; }
}

/* Phone refinement */
@media (max-width: 480px) {
    .auth-hero {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 4.25rem;
    }
    .auth-hero__mark { width: 40px; height: 40px; border-radius: 12px; }
    .auth-hero__mark svg { width: 20px; height: 20px; }
    .auth-hero__brand-name { font-size: .82rem; letter-spacing: .14em; }
    .auth-hero__brand-sub { font-size: .68rem; }

    .auth-panel { padding-left: .85rem; padding-right: .85rem; }
    .auth-card {
        padding: 1.7rem 1.35rem 1.4rem;
        border-radius: 16px;
    }
    .auth-card h1 { font-size: 1.3rem; margin-bottom: .35rem; }
    .auth-card .auth-lead { font-size: .88rem; margin-bottom: 1.35rem; }
    .auth-card__footnote { font-size: .78rem; margin-top: 1.5rem; }
}

/* Phone molto piccolo (iPhone SE 1ª gen e simili ≤ 360px) */
@media (max-width: 360px) {
    .auth-hero { padding: 1.5rem 1.1rem 3.75rem; }
    .auth-hero__brand { gap: .7rem; }
    .auth-card {
        margin-top: -2.5rem;
        padding: 1.5rem 1.15rem 1.25rem;
    }
    .auth-card h1 { font-size: 1.2rem; }
    .auth-card .auth-lead { font-size: .85rem; margin-bottom: 1.2rem; }
}

/* Landscape phone — viewport molto basso, evita scroll inutile */
@media (max-width: 1023px) and (max-height: 520px) {
    .auth-hero { padding-top: 1.25rem; padding-bottom: 3.5rem; }
    .auth-card { margin-top: -2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit:hover svg { transform: none; }
}

/* ── App shell ─────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--layout-sidebar-w) 1fr;
    min-height: 100vh;
}

/* Sidebar ─────────────────────────────────────────────── */
.app-sidebar {
    background: var(--color-primary);
    color: #fff;
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 30;
}
.app-sidebar .brand {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 0.75rem;
}
.app-sidebar .brand-name {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.app-sidebar .brand-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,.55);
    margin-top: 0.25rem;
}
.app-sidebar nav { padding: 0; }
.app-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: 0.88rem;
    border-left: 3px solid transparent;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.app-sidebar nav a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.app-sidebar nav a.active {
    background: rgba(244,118,28,.12);
    color: #fff;
    border-left-color: var(--color-cta);
    font-weight: 500;
}
.app-sidebar .sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 0.72rem;
    color: rgba(255,255,255,.45);
}

/* Backdrop drawer (visibile solo su mobile quando aperto) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,42,68,.4);
    backdrop-filter: blur(2px);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease-out);
}

/* ── Main + topbar ────────────────────────────────────── */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--layout-topbar-h);
    position: sticky;
    top: 0;
    z-index: 10;
}
.app-topbar .topbar-left,
.app-topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.app-topbar .breadcrumb {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Brand-pill nel topbar: mark navy + nome brand. Sostituisce il vecchio
   "Portale ..." che era un <p> muted senza identità. */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-text);
    text-decoration: none;
    min-width: 0;
}
.topbar-brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(15,42,68,.18);
}
.topbar-brand__mark svg { width: 15px; height: 15px; }
.topbar-brand__text {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-topbar .env-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    background: var(--color-warning);
    color: #fff;
}
.app-topbar .env-badge.env-production { background: var(--color-danger); }
.app-topbar .env-badge.env-staging    { background: var(--color-warning); }
.app-topbar .env-badge.env-local      { background: var(--color-text-muted); }

/* Content area:
   - padding orizzontale fluido (clamp): respira sui wide screen, compatto sui laptop
   - max-width 1760px: copre comodamente le dashboard ricche (KPI a 4 colonne +
     tabelle larghe + sidebar widget) senza diluire il testo all'infinito
   - margin: 0 auto: centra il content quando il viewport supera il max,
     elimina il "vuoto" asimmetrico a destra sui monitor wide/4K
   - width: 100%: occupa tutto lo spazio disponibile sotto al max */
.app-content {
    padding: 1.5rem clamp(1.5rem, 2.5vw, 2.5rem);
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
}
.app-content > h1 { margin-bottom: 1.25rem; }

/* Riga "titolo pagina + azione" usata in molte show admin (boa show, ecc.).
   Su desktop sta in linea, su mobile stacca per evitare strizzature. */
.page-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.page-actions-row h1 { font-size: 1.4rem; line-height: 1.2; flex: 1 1 auto; }
.page-actions-row > .btn { flex: 0 0 auto; }

/* Pannello tariffe stagionali su /admin/boe/{id} */
.pricing-panel__header {
    padding: 1rem 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.pricing-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pricing-actions form { display: inline; }

/* ── Hamburger ─────────────────────────────────────────── */
.btn-icon {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--color-text-muted);
    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.btn-icon:hover { background: var(--color-bg); color: var(--color-text); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 16px;
    height: 11px;
}
.hamburger span { display: block; height: 2px; background: currentColor; border-radius: 1px; }

/* Sidebar collassata (desktop): grid mono-colonna così .app-main
   occupa la larghezza piena. Con `0 1fr` + sidebar display:none,
   l'auto-placement metteva app-main nella colonna di 0 → contenuto
   schiacciato in una striscia verticale a sinistra. */
html.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
html.sidebar-collapsed .app-sidebar { display: none; }

/* ── Panel / card ─────────────────────────────────────── */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.panel:last-child { margin-bottom: 0; }
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.panel-header h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* ── Stat cards (dashboard admin) ─────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration), box-shadow var(--duration);
}
.stat:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.stat-value {
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 0.3rem;
    color: var(--color-primary);
    line-height: 1.2;
}
.stat-sub { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.4rem; }

/* ── Tables ────────────────────────────────────────────── */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.table thead th {
    background: var(--color-bg);
    text-align: left;
    padding: 0.55rem 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.table tbody td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.table tbody tr { transition: background-color 100ms var(--ease-out); }
.table tbody tr:hover { background: var(--color-surface-alt); }
.table tbody tr:last-child td { border-bottom: none; }
.table-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ── Forms ─────────────────────────────────────────────── */
.form-section + .form-section { margin-top: 1.25rem; }
.form-section-heading {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0.6rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.35rem;
    font-weight: 600;
}
.form-label {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: border-color var(--duration), box-shadow var(--duration);
    width: 100%;
}
.form-control:hover, .form-select:hover { border-color: var(--color-primary); }
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
.form-text { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 0.25rem; }
.invalid-feedback {
    color: var(--color-danger);
    font-size: 0.78rem;
    margin-top: 0.25rem;
    display: block;
}
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--color-danger);
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(199,66,63,.18); }

/* Input testuale abbinato a un <datalist>: mostra il chevron a destra come un <select>. */
.form-combobox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235C4248' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 12px;
    padding-right: 2.25rem;
    cursor: pointer;
}
.form-combobox::-webkit-calendar-picker-indicator {
    opacity: 0; /* nasconde l'indicatore nativo Chrome/Edge per evitare doppio chevron */
}

/* Checkbox / radio Bootstrap */
.form-check-input { border-color: var(--color-border-strong); }
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
.form-switch .form-check-input:checked {
    background-color: var(--color-cta);
    border-color: var(--color-cta);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid transparent;
    font-weight: 500;
    transition: background-color var(--duration), border-color var(--duration), box-shadow var(--duration), transform 80ms var(--ease-out);
    text-decoration: none;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.btn-primary {
    background: var(--color-cta);
    color: #fff;
    border-color: var(--color-cta);
}
.btn-primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(244,118,28,.25); }

.btn-secondary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-hover); color: #fff; }

.btn-outline-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn-outline-secondary:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.btn-link-danger {
    color: var(--color-danger);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.btn-link-danger:hover { text-decoration: underline; }

/* ── Badges & status ───────────────────────────────────── */
.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    text-transform: lowercase;
}
.badge-status.pending   { background: var(--color-warning-soft); color: #7A4500; border-color: #F0DEA9; }
.badge-status.active    { background: var(--color-success-soft); color: #135C3F; border-color: #B5DEC7; }
.badge-status.suspended { background: var(--color-bg); color: #5C4248; border-color: var(--color-border-strong); }
.badge-status.on        { background: var(--color-success-soft); color: #135C3F; border-color: #B5DEC7; }
.badge-status.off       { background: var(--color-bg); color: #5C4248; border-color: var(--color-border-strong); }

.badge-code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.log-level-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.log-level-badge.log-level-debug    { background: var(--color-bg); color: var(--color-text-muted); }
.log-level-badge.log-level-info     { background: var(--color-info-soft); color: var(--color-info); }
.log-level-badge.log-level-warning  { background: var(--color-warning-soft); color: var(--color-warning); }
.log-level-badge.log-level-error    { background: var(--color-danger-soft); color: var(--color-danger); }
.log-level-badge.log-level-critical { background: var(--color-danger); color: #fff; }

/* ── Meta list (detail pages) ──────────────────────────── */
.meta-list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.55rem 1rem;
    margin: 0;
}
.meta-list dt {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.82rem;
}
.meta-list dd { margin: 0; font-size: 0.9rem; }

/* ── Audit meta JSON details ──────────────────────────── */
.audit-meta summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.82rem;
    user-select: none;
}
.audit-meta pre {
    background: var(--color-bg);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    margin-top: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
    /* Word-wrap su parole lunghe (es. ID, hash) per evitare overflow orizzontale
       della pagina che spinge la bottom-nav fuori vista su mobile. */
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--color-border);
}

/* Cella Payload in /admin/payment-events */
.events-table .payload-cell { max-width: 280px; }
.events-table .payload-cell .audit-meta { max-width: 100%; }

/* ── Classifica skipper (premio produzione) ───────────────────── */
.stats-period-bar { padding: .85rem 1rem; }
.stats-period-form { display: flex; flex-direction: column; gap: .9rem; width: 100%; }

/* Preset come chip moderni (pill) */
.stats-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.stats-chip {
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration), border-color var(--duration), color var(--duration);
    white-space: nowrap;
}
.stats-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.stats-chip.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Custom range in <details>: meno rumore quando non serve */
.stats-custom-details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: .82rem;
    font-weight: 500;
    user-select: none;
    padding: .25rem 0;
}
.stats-custom-details summary:hover { text-decoration: underline; }
.stats-custom-details[open] summary { margin-bottom: .6rem; }
.stats-custom-range {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.stats-custom-range > div { flex: 0 0 auto; }
.stats-custom-range input { min-width: 140px; }

/* Tabella classifica desktop */
.stats-pos { text-align: center; font-weight: 700; }
.stats-pos-num { color: var(--color-text-muted); font-size: 1rem; }
.stats-medal { font-size: 1.4rem; line-height: 1; }

.stats-row--podium { background: rgba(15, 42, 68, .03); }
.stats-row--podium.stats-row--pos-1 td:first-child { border-left: 4px solid #D4AF37; }
.stats-row--podium.stats-row--pos-2 td:first-child { border-left: 4px solid #B8BCC2; }
.stats-row--podium.stats-row--pos-3 td:first-child { border-left: 4px solid #CD7F32; }
.stats-row--inactive { opacity: .55; }
.stats-row--inactive .stats-medal { display: none; }

.stats-skipper strong { font-size: .95rem; }

/* ──────────────────────────────────────────────────────────────
   Tab switcher Statistiche (skipper / boe)
   ────────────────────────────────────────────────────────────── */
.stats-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-border);
}
.stats-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--duration), border-color var(--duration);
}
.stats-tab:hover {
    color: var(--color-text);
    text-decoration: none;
}
.stats-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.stats-tab__icon svg { width: 18px; height: 18px; }

/* ──────────────────────────────────────────────────────────────
   Leaderboard skipper (lista cliccabile → dettaglio)
   ────────────────────────────────────────────────────────────── */
.stats-leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
}
.stats-lb__item {
    border-bottom: 1px solid var(--color-border);
}
.stats-lb__item:last-child { border-bottom: none; }
.stats-lb__link {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    align-items: center;
    column-gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--duration);
    border-left: 4px solid transparent;
}
.stats-lb__link:hover {
    background: rgba(15, 42, 68, .04);
    color: var(--color-text);
    text-decoration: none;
}
.stats-lb__link:focus-visible {
    outline: none;
    background: rgba(15, 42, 68, .06);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.stats-lb__pos { text-align: center; }
.stats-lb__medal { font-size: 2rem; line-height: 1; }
.stats-lb__num {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.stats-lb__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.stats-lb__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-lb__email {
    font-size: .78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-lb__meta {
    font-size: .75rem;
    color: var(--color-text-faint);
    margin-top: 3px;
}

.stats-lb__revenue {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-cta);
    white-space: nowrap;
}
.stats-lb__chevron {
    color: var(--color-text-faint);
    font-size: 1.1rem;
}

/* Podio: bordo sinistro colorato + leggera tinta di sfondo */
.stats-lb__item--podium .stats-lb__link { border-left-width: 4px; }
.stats-lb__item--pos-1 .stats-lb__link {
    border-left-color: #D4AF37;
    background: linear-gradient(90deg, rgba(212,175,55,.06) 0%, transparent 50%);
}
.stats-lb__item--pos-2 .stats-lb__link {
    border-left-color: #B8BCC2;
    background: linear-gradient(90deg, rgba(184,188,194,.08) 0%, transparent 50%);
}
.stats-lb__item--pos-3 .stats-lb__link {
    border-left-color: #CD7F32;
    background: linear-gradient(90deg, rgba(205,127,50,.06) 0%, transparent 50%);
}
.stats-lb__item--inactive .stats-lb__link { opacity: .55; }
.stats-lb__item--inactive .stats-lb__revenue { color: var(--color-text-muted); }

/* Header pagina dettaglio skipper */
.stats-detail-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem;
}
.stats-detail-header > div { min-width: 0; }
.stats-detail-header__main { flex: 1 1 220px; }
.stats-detail-header__period { flex: 0 0 auto; }
.stats-detail-header__pos { flex: 0 0 auto; }

/* ──────────────────────────────────────────────────────────────
   Mobile
   Filtri: grid 2x2 (no scroll orizzontale nascosto)
   Leaderboard: 2 colonne (medaglia | nome+stats+fatturato impilati a destra)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Preset filtri: grid 2x2 invece di scroll → sempre tutti visibili */
    .stats-preset-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
    .stats-chip {
        padding: .7rem .5rem;
        font-size: .85rem;
        text-align: center;
        justify-content: center;
        min-height: 44px; /* touch target friendly */
    }

    .stats-custom-range { flex-direction: column; align-items: stretch; }
    .stats-custom-range > div, .stats-custom-range button { width: 100%; }
    .stats-custom-range input { min-width: 0; width: 100%; }

    /* Leaderboard mobile: 2 colonne — medaglia | nome+email+stats+fatturato */
    .stats-lb__link {
        grid-template-columns: 48px 1fr;
        column-gap: .85rem;
        padding: .9rem 1rem;
    }
    .stats-lb__medal { font-size: 1.8rem; }
    .stats-lb__num { font-size: 1.15rem; }

    .stats-lb__body { gap: 3px; }
    .stats-lb__name { font-size: 1rem; }
    .stats-lb__email { font-size: .72rem; }
    .stats-lb__meta { font-size: .72rem; margin-top: 4px; }

    /* Su mobile mostriamo il fatturato grande SOTTO il nome (non a destra)
       per evitare overflow su nomi/email lunghi */
    .stats-lb__revenue {
        grid-column: 2 / 3;
        text-align: left;
        font-size: 1.15rem;
        margin-top: 4px;
    }
    /* Chevron a destra del body, allineato in cima */
    .stats-lb__chevron {
        position: absolute;
        right: 1rem;
        top: .9rem;
    }
    .stats-lb__link { position: relative; }

    /* Header dettaglio: ogni blocco a tutta larghezza, niente flex-wrap squilibrato */
    .stats-detail-header { flex-direction: column; gap: .85rem; }
    .stats-detail-header > div { flex: 1 1 auto; }
}

/* ── Credenziali utente (form create + pagina reveal) ─────────── */
.credentials-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.credentials-mode__option {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-surface);
    transition: border-color var(--duration), background-color var(--duration);
}
.credentials-mode__option:hover { border-color: var(--color-primary); }
.credentials-mode__option.is-selected {
    border-color: var(--color-primary);
    background: rgba(15, 42, 68, .03);
    box-shadow: 0 0 0 3px rgba(15, 42, 68, .08);
}
.credentials-mode__option input[type="radio"] { margin-top: .2rem; flex: 0 0 auto; }
.credentials-mode__title { font-weight: 600; font-size: .95rem; }
.credentials-mode__sub   { font-size: .82rem; color: var(--color-text-muted); margin-top: .15rem; line-height: 1.4; }

.password-reveal__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px dashed var(--color-border);
}
.password-reveal__lead { color: var(--color-text-muted); margin-bottom: 1rem; }
.password-reveal__box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.password-reveal__input-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.password-reveal__field {
    flex: 1 1 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.1rem;
    letter-spacing: .03em;
    background: var(--color-surface);
}
.password-reveal__toggle,
.password-reveal__copy { flex: 0 0 auto; }
.password-reveal__share {
    padding-top: .75rem;
    border-top: 1px dashed var(--color-border);
}
.btn-success {
    background: var(--color-success, #2E7D5A);
    color: #fff;
    border-color: var(--color-success, #2E7D5A);
}

@media (max-width: 768px) {
    .credentials-mode { grid-template-columns: 1fr; }
    .password-reveal__field { flex: 1 1 100%; }
    .password-reveal__toggle, .password-reveal__copy { flex: 1 1 calc(50% - .25rem); }
    .password-reveal__meta { flex-direction: column; align-items: flex-start; }
}

/* ── Rules list (dashboard skipper) ────────────────────── */
.rules-list { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.rules-list li {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.rules-list li:last-child { border-bottom: none; }

/* ── Flash messages ────────────────────────────────────── */
.flash {
    border-radius: var(--radius-md);
    padding: 0.7rem 0.95rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.flash::before {
    content: "";
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
}
.flash.success { background: var(--color-success-soft); border-color: #C8E5D5; color: #14573B; }
.flash.success::before { background: var(--color-success); }
.flash.error   { background: var(--color-danger-soft); border-color: #EFC8C7; color: #6A2724; }
.flash.error::before   { background: var(--color-danger); }
.flash.info    { background: var(--color-info-soft); border-color: #CADDF1; color: var(--color-info); }
.flash.info::before    { background: var(--color-info); }

.notice {
    background: var(--color-warning-soft);
    border: 1px solid #F0DEA9;
    color: #6E4500;
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
}

/* ── Tabs (settings) ───────────────────────────────────── */
.tab-nav {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: auto;
}
.tab-nav a {
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--duration), border-color var(--duration);
    white-space: nowrap;
}
.tab-nav a:hover { color: var(--color-text); }
.tab-nav a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-cta);
    font-weight: 600;
}

/* ── Filters bar ───────────────────────────────────────── */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.filters-bar > div { display: flex; flex-direction: column; }
.filters-bar .form-control,
.filters-bar .form-select { min-width: 160px; }

.status-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
    width: 100%;
    align-items: center;
}
.status-filter-chip {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--duration), background var(--duration);
}
.status-filter-chip input { accent-color: var(--color-primary); margin: 0; }
.status-filter-chip:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* ── Pagination ────────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 4px;
    margin-top: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background-color var(--duration), border-color var(--duration);
}
.pagination a:hover { background: var(--color-bg); }
.pagination .current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pagination__nav {
    font-weight: 500;
    padding: 0.4rem 0.85rem !important;
}

/* =============================================================
   Page hero (header sezioni list/admin)
   ============================================================= */
.page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(46,125,122,.32) 0%, transparent 55%),
        radial-gradient(60% 80% at 0% 100%, rgba(244,118,28,.16) 0%, transparent 60%),
        linear-gradient(120deg, #0B2138 0%, #0F2A44 55%, #173D62 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.85rem;
    margin-bottom: 1.4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    box-shadow: var(--shadow-md);
}
.page-hero__decor {
    position: absolute;
    right: -110px;
    top: -110px;
    width: 320px;
    height: 320px;
    color: rgba(255,255,255,.07);
    pointer-events: none;
}
.page-hero__main { position: relative; z-index: 1; min-width: 0; }
.page-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .68rem;
    color: rgba(255,255,255,.6);
    font-weight: 600;
    margin-bottom: .55rem;
}
.page-hero__title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .35rem;
    line-height: 1.2;
}
.page-hero__sub {
    color: rgba(255,255,255,.72);
    margin: 0;
    font-size: .92rem;
    max-width: 56ch;
}
.page-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

/* Buttons styled per page hero (su sfondo scuro) */
.btn-hero {
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
}
.btn-hero:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-color: rgba(255,255,255,.35);
}
.btn-hero svg { width: 16px; height: 16px; }

.btn-hero-warning {
    background: var(--color-cta);
    color: #fff;
    border: 1px solid var(--color-cta);
}
.btn-hero-warning:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: #fff;
}
.btn-hero-warning svg { width: 16px; height: 16px; }
.btn-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: rgba(0,0,0,.18);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

/* =============================================================
   KPI strip (mini-cruscotto liste admin)
   ============================================================= */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.kpi-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.95rem 1.1rem 1rem 1.3rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 80ms var(--ease-out), box-shadow var(--duration), border-color var(--duration);
}
.kpi-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--color-primary);
}
.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.kpi-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .35rem;
}
.kpi-card__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.kpi-card__icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
}
.kpi-card__value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.kpi-card__value--money { font-size: 1.55rem; }
.kpi-card__sub {
    font-size: .74rem;
    color: var(--color-text-faint);
    margin-top: .35rem;
}
.kpi-card--primary::before { background: var(--color-primary); }
.kpi-card--success::before { background: var(--color-success); }
.kpi-card--success .kpi-card__value { color: var(--color-success); }
.kpi-card--warning::before { background: var(--color-warning); }
.kpi-card--warning .kpi-card__value { color: var(--color-warning); }
.kpi-card--accent::before  { background: var(--color-cta); }
.kpi-card--accent .kpi-card__value { color: var(--color-cta); }

/* =============================================================
   Filters panel (rifacimento .filters-bar)
   ============================================================= */
.filters-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem 1.2rem;
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.filters-panel__search {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .6rem;
}
.filters-panel__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    pointer-events: none;
}
.filters-panel__search-icon svg { width: 18px; height: 18px; }
.filters-panel__search .form-control {
    flex: 1;
    height: 44px;
    padding-left: 42px;
    font-size: .95rem;
    border-color: var(--color-border-strong);
}
.filters-panel__search .btn-primary {
    height: 44px;
    padding: 0 1.3rem;
    flex-shrink: 0;
}

.filters-panel__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
}
.filters-panel__field { display: flex; flex-direction: column; }
.filters-panel__field .form-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: .3rem;
}

.filters-panel__statuses {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem .8rem;
    padding-top: .25rem;
    border-top: 1px dashed var(--color-border);
    padding-top: .85rem;
}
.filters-panel__statuses-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 5px 12px 5px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
    user-select: none;
    position: relative;
}
.status-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.status-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-faint);
    flex-shrink: 0;
}
.status-chip--draft .status-chip__dot            { background: var(--color-text-muted); }
.status-chip--awaiting-payment .status-chip__dot { background: var(--color-warning); }
.status-chip--confirmed .status-chip__dot        { background: var(--color-success); }
.status-chip--cancelled .status-chip__dot        { background: var(--color-text-faint); }
.status-chip--no-show .status-chip__dot          { background: var(--color-danger); }
.status-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.status-chip:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.status-chip:has(input:focus-visible) { box-shadow: var(--shadow-focus); }

.filters-panel__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--color-border);
}
.filters-panel__active-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-right: .25rem;
}
.filter-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 6px 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid #C8DAEC;
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration), border-color var(--duration);
}
.filter-active-chip:hover {
    background: #D6E5F4;
    color: var(--color-primary-hover);
    border-color: #B5CCE2;
}
.filter-active-chip svg {
    width: 14px;
    height: 14px;
    padding: 2px;
    border-radius: 50%;
    background: rgba(15,42,68,.10);
}
.filters-panel__reset {
    margin-left: auto;
    font-size: .8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
}
.filters-panel__reset:hover { color: var(--color-danger); text-decoration: underline; }

/* =============================================================
   Booking table — polish (riusa .table + .table-responsive-cards)
   ============================================================= */
.booking-table-panel { padding: 0; overflow: hidden; }
.booking-table thead th.num { text-align: right; }
.booking-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.booking-table thead th.actions-col { width: 110px; }

.booking-code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    transition: background var(--duration), color var(--duration);
}
.booking-code:hover {
    background: #D6E5F4;
    color: var(--color-primary-hover);
}

.cell-stack { display: flex; flex-direction: column; line-height: 1.25; }
.cell-stack__primary { font-weight: 500; color: var(--color-text); }
.cell-stack__secondary {
    color: var(--color-text-muted);
    font-size: .76rem;
    margin-top: 2px;
}

.cell-boa { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.cell-boa__name {
    font-size: .82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-checkin { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cell-date  { font-variant-numeric: tabular-nums; font-weight: 500; }
.time-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
    border: 1px solid transparent;
}
.time-pill--today  { background: rgba(244,118,28,.13); color: var(--color-cta);     border-color: rgba(244,118,28,.28); }
.time-pill--soon   { background: var(--color-warning-soft); color: #7A4500;          border-color: #F0DEA9; }
.time-pill--future { background: var(--color-info-soft);    color: var(--color-info);border-color: #CADDF1; }
.time-pill--past   { background: var(--color-bg);           color: var(--color-text-muted); border-color: var(--color-border); }

/* Section divider (raggruppamento "operativo") */
.booking-section td {
    padding: 0 !important;
    background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.booking-section:hover td { background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-surface) 100%); }
.booking-section__inner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 10px 14px 9px;
}
.booking-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    flex-shrink: 0;
}
.booking-section__icon svg { width: 14px; height: 14px; }
.booking-section__title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: var(--color-text);
}
.booking-section__sub {
    font-size: .76rem;
    color: var(--color-text-muted);
    margin-left: 2px;
}
.booking-section__count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-text);
    min-width: 26px;
    font-variant-numeric: tabular-nums;
}
.booking-section--today  .booking-section__icon { background: rgba(244,118,28,.14); color: var(--color-cta); }
.booking-section--soon   .booking-section__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.booking-section--future .booking-section__icon { background: var(--color-info-soft);    color: var(--color-info); }
.booking-section--past   .booking-section__icon { background: var(--color-bg);           color: var(--color-text-muted); }

/* Riga "Oggi" leggermente evidenziata */
.booking-row--tier-today td {
    background: rgba(244,118,28,.035);
}
.booking-row--tier-past td {
    /* nulla, già subito muted dal --cancelled se applicabile */
}
.cell-nights {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
}
.cell-total {
    font-weight: 700;
    color: var(--color-text);
    font-size: .92rem;
}

.doc-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
}
.doc-pill--commercial { background: var(--color-bg); color: var(--color-text-muted); border-color: var(--color-border); }
.doc-pill--invoice    { background: var(--color-info-soft); color: var(--color-info); border-color: #CADDF1; }

/* Row tint (subtle, status-aware) */
.booking-row--awaiting-payment td { background: rgba(201,122,14,.03); }
.booking-row--cancelled td        { color: var(--color-text-muted); }
.booking-row--cancelled .booking-code { opacity: .8; }
.booking-row--no-show td          { background: rgba(199,66,63,.04); }

/* Riga "blocco" (admin block, non prenotabile): trattamento distinto */
.booking-row--block td {
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 10px,
            rgba(15,42,68,.025) 10px,
            rgba(15,42,68,.025) 20px
        ),
        var(--color-surface-alt);
    color: var(--color-text);
}
.booking-row--block .cell-stack__primary { color: var(--color-text-muted); font-style: italic; }
.booking-row--block .cell-stack__secondary { color: var(--color-text-faint); }
.block-code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    letter-spacing: .03em;
    transition: background var(--duration), color var(--duration), border-color var(--duration);
}
.block-code:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-primary);
}
.badge-code--all {
    background: var(--color-text-muted) !important;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
}
.cell-nights--block {
    background: transparent !important;
    border: 1px dashed var(--color-border-strong);
    color: var(--color-text-muted) !important;
    font-weight: 600 !important;
}
.cell-empty { color: var(--color-text-faint); font-weight: 500; }

/* Badge stato "Blocco" — riprende lo style della legenda del calendario */
.booking-badge--blocked {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-strong);
}

/* Row action button — diverso dai generici btn outline */
.btn-row-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration), border-color var(--duration), transform 80ms var(--ease-out), color var(--duration);
}
.btn-row-action svg {
    width: 14px;
    height: 14px;
    transition: transform var(--duration) var(--ease-out);
    color: var(--color-text-faint);
}
.btn-row-action:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-row-action:hover svg { transform: translateX(2px); color: #fff; }

/* Variante primaria: per CTA "Riprova pagamento" sulle righe awaiting_payment */
.btn-row-action--primary {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: #fff;
}
.btn-row-action--primary:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    filter: brightness(.95);
}

/* Variante ghost (testo destructive sottile) */
.btn-row-action--ghost {
    color: var(--color-danger);
    border-color: rgba(199,66,63,.35);
    background: transparent;
}
.btn-row-action--ghost:hover {
    background: rgba(199,66,63,.08);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Gruppo azioni multiple nella stessa cella (Riprova + Annulla) */
.row-actions-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}
.row-actions-cancel { display: inline; }

/* Countdown pill mostrato sotto allo stato awaiting_payment */
.payment-countdown {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 600;
    color: #7A4500;
    background: var(--color-warning-soft);
    border: 1px solid #F0DEA9;
    border-radius: var(--radius-pill);
    letter-spacing: .02em;
    white-space: nowrap;
}

/* =============================================================
   Dashboard admin — grid 2 col + componenti
   ============================================================= */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 1.1rem;
    align-items: start;
}
.dashboard-grid__main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.dashboard-grid__side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
/* I panel hanno già margin-bottom: 1rem nella base; dentro la dashboard-grid
   il gap della flex column è già sufficiente, evito la doppia spaziatura. */
.dashboard-grid .panel { margin-bottom: 0; min-width: 0; }

/* Empty state inline (panel "Operatività" senza prenotazioni) — più presente */
.booking-table-panel .table-empty {
    padding: 2rem 1.5rem;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Date chip nella riga prenotazioni della dashboard */
.dash-date-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 6px 0 7px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    line-height: 1;
}
.dash-date-chip__day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}
.dash-date-chip__mon {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 3px;
}
.booking-row--tier-today .dash-date-chip {
    background: rgba(244,118,28,.14);
}
.booking-row--tier-today .dash-date-chip__day,
.booking-row--tier-today .dash-date-chip__mon { color: var(--color-cta); }
.booking-row--tier-soon .dash-date-chip { background: var(--color-warning-soft); }
.booking-row--tier-soon .dash-date-chip__day,
.booking-row--tier-soon .dash-date-chip__mon { color: var(--color-warning); }

/* Alert stack (pannello "Da gestire") — stesso pattern di .error-list:
   panel pulito, righe in lista separate da dashed border, no colored
   left-bar (l'icona colorata è già un signal sufficiente). */
.alert-stack__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--color-cta);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.alert-item {
    display: grid;
    grid-template-columns: 36px 1fr 12px;
    align-items: center;
    gap: .8rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: opacity var(--duration);
}
.alert-item:first-child { padding-top: 0; }
.alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.alert-item:hover { opacity: .8; }
.alert-item__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg);
}
.alert-item--warning .alert-item__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.alert-item--danger  .alert-item__icon { background: var(--color-danger-soft);  color: var(--color-danger); }
.alert-item--info    .alert-item__icon { background: var(--color-info-soft);    color: var(--color-info); }
.alert-item__icon svg { width: 18px; height: 18px; }
.alert-item__body { min-width: 0; }
.alert-item__title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.alert-item__sub {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.alert-item__chev {
    color: var(--color-text-faint);
    font-size: 1.3rem;
    line-height: 1;
}
.alert-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    color: var(--color-success);
    font-size: .9rem;
    margin: 0;
}
.alert-empty svg { width: 18px; height: 18px; }

/* Stato sistema · definition list */
.system-list {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .55rem 1rem;
    margin: 0;
    font-size: .88rem;
}
.system-list dt {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: .8rem;
}
.system-list dd { margin: 0; color: var(--color-text); }

/* Provider pill (mock vs live) */
.provider-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    border: 1px solid transparent;
}
.provider-pill--mock    { background: var(--color-bg); color: var(--color-text-muted); border-color: var(--color-border-strong); }
.provider-pill--sandbox { background: var(--color-info-soft); color: var(--color-info); border-color: #CADDF1; }
.provider-pill--live    { background: var(--color-success-soft); color: #135C3F; border-color: #B5DEC7; }

/* Lista errori compatta */
.error-list { list-style: none; padding: 0; margin: 0; }
.error-list__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: .7rem;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--color-border);
    align-items: start;
}
.error-list__item:last-child { border-bottom: none; }
.error-list__item:first-child { padding-top: 0; }
.error-list__msg {
    font-size: .82rem;
    color: var(--color-text);
    word-break: break-word;
    line-height: 1.45;
}
.error-list__meta {
    margin-top: 3px;
    font-size: .74rem;
    color: var(--color-text-muted);
}

/* Activity feed (audit) — stesso pattern di .error-list: pulito,
   senza padding proprio (lo dà il .panel parent), righe separate
   da dashed border. */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}
.activity-feed__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.activity-feed__item:first-child { padding-top: 0; }
.activity-feed__item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-feed__dot {
    width: 10px;
    height: 10px;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
    justify-self: center;
}
.activity-feed__body { min-width: 0; }
.activity-feed__title {
    color: var(--color-text);
    line-height: 1.4;
    font-size: .88rem;
}
.activity-feed__title code {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .78rem;
}
.activity-feed__meta {
    font-size: .76rem;
    color: var(--color-text-muted);
    margin-top: 3px;
}

/* Quick actions */
.quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .85rem .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    transition: border-color var(--duration), box-shadow var(--duration), transform 80ms var(--ease-out), background var(--duration);
    text-align: center;
}
.quick-action svg { width: 20px; height: 20px; color: var(--color-primary); }
.quick-action:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Responsive — dashboard a colonna unica + reorder su mobile */
@media (max-width: 1023px) {
    /* Le card delle 2 colonne diventano figlie dirette del grid, così
       posso riordinarle con `order` indipendentemente dalla colonna originale.
       `align-items: stretch` (vs `start` del desktop) è cruciale: senza,
       i panel si restringerebbero alla larghezza del loro contenuto. */
    .dashboard-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .dashboard-grid__main,
    .dashboard-grid__side { display: contents; }
    /* I .panel sono già flex-items full-width via stretch; tolgo il min-width */
    .dashboard-grid .panel { width: 100%; }

    /* Ordine richiesto su mobile */
    .dash-card--operativity     { order: 1; }
    .dash-card--checkin-today   { order: 2; }
    .dash-card--checkout-today  { order: 3; }
    .dash-card--alerts          { order: 4; }
    .dash-card--quick-actions   { order: 5; }
    .dash-card--recent-audit    { order: 6; }
    .dash-card--errors          { order: 7; }
    /* Stato sistema (non in lista) chiude la pagina come riferimento secondario */
    .dash-card--system          { order: 8; }
}
@media (max-width: 480px) {
    .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   Empty state
   ============================================================= */
.empty-state {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.empty-state__art {
    color: var(--color-primary);
    margin-bottom: 1.2rem;
    opacity: .85;
}
.empty-state__art svg { width: 160px; height: auto; }
.empty-state__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 .45rem;
    color: var(--color-text);
}
.empty-state__sub {
    color: var(--color-text-muted);
    margin: 0 0 1.2rem;
    max-width: 48ch;
    font-size: .92rem;
    line-height: 1.5;
}

/* =============================================================
   Mobile (≤ 768px) — page hero stack, KPI 2-col, filters compact
   ============================================================= */
@media (max-width: 768px) {
    .page-hero {
        grid-template-columns: 1fr;
        padding: 1.25rem 1.25rem;
        gap: .85rem;
    }
    .page-hero__decor { width: 220px; height: 220px; right: -90px; top: -90px; }
    .page-hero__title { font-size: 1.35rem; }
    .page-hero__sub { font-size: .88rem; }
    .page-hero__actions { justify-content: flex-start; }
    .page-hero__actions .btn { flex: 1; min-width: 0; }

    .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .kpi-card { padding: .8rem .9rem .85rem 1.1rem; }
    .kpi-card__value { font-size: 1.45rem; }
    .kpi-card__value--money { font-size: 1.2rem; }

    .filters-panel { padding: .9rem; gap: .85rem; }
    .filters-panel__search { flex-direction: column; align-items: stretch; }
    .filters-panel__search .btn-primary { width: 100%; }
    .filters-panel__row { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .filters-panel__statuses { flex-direction: column; align-items: flex-start; }

    /* Booking list su mobile usa già .table-responsive-cards di base: il
       panel "perde" la card così le righe trasformate in card non si annidano. */
    .booking-table-panel { padding: 0; background: transparent; border: none; box-shadow: none; }
    /* Eccezione: in dashboard la card di Operatività deve restare una card vera
       (l'utente l'ha vista "spogliata" su mobile, header che fluttua a sinistra). */
    .dashboard-grid .booking-table-panel {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .booking-table.table-responsive-cards tbody tr {
        padding: .65rem .85rem .75rem;
        border-radius: var(--radius-md);
        margin-bottom: .7rem;
    }
    .booking-table.table-responsive-cards tbody td.actions-col { padding-top: .55rem; }
    .booking-table.table-responsive-cards .btn-row-action {
        width: 100%;
        justify-content: center;
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }
    .booking-table.table-responsive-cards .btn-row-action svg { color: #fff; }
    .booking-row--awaiting-payment td { background: transparent; }
    .booking-row--no-show td { background: transparent; }
    .booking-row--tier-today td { background: transparent; }
    .booking-row--tier-today { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--color-cta) !important; }

    /* Section divider su mobile: non diventa una card, è un'etichetta tra le card */
    .booking-table.table-responsive-cards .booking-section {
        display: block;
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: .35rem 0 .25rem;
    }
    .booking-table.table-responsive-cards .booking-section td {
        display: block;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        text-align: left;
    }
    .booking-table.table-responsive-cards .booking-section td::before { content: none; }
    .booking-table.table-responsive-cards .booking-section__inner {
        padding: 14px 2px 6px;
        gap: .55rem;
    }
    .booking-table.table-responsive-cards .booking-section__title { font-size: .72rem; }
    .booking-table.table-responsive-cards .booking-section__sub { display: none; }
    .booking-table.table-responsive-cards .booking-section__icon { width: 22px; height: 22px; }
    .booking-table.table-responsive-cards .booking-section__icon svg { width: 12px; height: 12px; }

    .cell-checkin { gap: 2px; }
    .time-pill { font-size: .62rem; }
}

/* ── Row actions inline ────────────────────────────────── */
.row-actions { display: inline-flex; gap: 0.7rem; font-size: 0.85rem; }
.row-actions a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.row-actions a:hover { text-decoration: underline; }
.row-actions form { display: inline-block; margin: 0; }

/* ── User dropdown (topbar) ────────────────────────────── */
.user-dropdown .user-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px 12px 3px 3px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background-color var(--duration), border-color var(--duration);
}
.user-dropdown .user-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
}
.user-dropdown .user-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.user-dropdown .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}
.user-dropdown .caret { color: var(--color-text-muted); font-size: 0.7rem; }
.user-dropdown .dropdown-menu {
    min-width: 240px;
    padding: 0.4rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.88rem;
}
.user-dropdown .dropdown-header { padding: 0.6rem 1rem; }
.user-dropdown .dropdown-header .user-name-full { font-weight: 600; color: var(--color-text); }
.user-dropdown .dropdown-header .user-email-small {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    word-break: break-all;
}
.user-dropdown .dropdown-item { padding: 0.5rem 1rem; }
.user-dropdown .dropdown-item:hover { background: var(--color-bg); }
.user-dropdown .dropdown-item.text-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.user-dropdown form .dropdown-item {
    width: 100%; text-align: left; border: 0; background: transparent;
    font: inherit; color: inherit;
}

/* ── Actions dropdown (tabelle) ────────────────────────── */
.actions-dropdown { position: relative; display: inline-block; }
.actions-dropdown .actions-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    transition: background-color var(--duration), border-color var(--duration);
}
.actions-dropdown .actions-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.actions-dropdown .actions-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.actions-dropdown .dropdown-menu {
    min-width: 200px;
    font-size: 0.86rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.3rem 0;
}
.actions-dropdown .dropdown-item { padding: 0.5rem 0.9rem; }
.actions-dropdown .dropdown-item:hover { background: var(--color-bg); }
.actions-dropdown .dropdown-item.text-danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.actions-dropdown form { margin: 0; }
.actions-dropdown form .dropdown-item {
    width: 100%; text-align: left; background: transparent; border: 0;
    font: inherit; color: inherit; cursor: pointer;
}

/* ── Profile single-column ─────────────────────────────── */
.profile-single { max-width: 600px; margin: 0 auto; }

/* ── Boa order input "saving" ──────────────────────────── */
.boa-order-input.is-saving {
    border-color: var(--color-info);
    background: var(--color-info-soft);
}

/* ── Upcoming list (dashboard admin) ───────────────────── */
.upcoming-list { display: flex; flex-direction: column; gap: 0.5rem; }
.upcoming-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--duration), box-shadow var(--duration), transform 80ms var(--ease-out);
}
.upcoming-row:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: var(--color-text);
}
.upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0;
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    line-height: 1;
}
.upcoming-date__day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}
.upcoming-date__month {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 2px;
}
.upcoming-date__weekday {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-top: 3px;
}
.upcoming-body { min-width: 0; }
.upcoming-body__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.upcoming-boat { font-weight: 600; font-size: 0.95rem; }
.upcoming-relative {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cta);
    font-weight: 600;
    background: rgba(244, 118, 28, 0.08);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.upcoming-body__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.upcoming-skipper { font-weight: 500; color: var(--color-text); }
.upcoming-meta code { color: var(--color-text-muted); }
.upcoming-arrow {
    font-size: 1.4rem;
    color: var(--color-text-faint);
    line-height: 1;
    padding-left: 4px;
}

@media (max-width: 480px) {
    .upcoming-row {
        grid-template-columns: 56px 1fr;
    }
    .upcoming-arrow { display: none; }
    .upcoming-date__day { font-size: 1.3rem; }
}

/* ── Skeleton (loading) ────────────────────────────────── */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-bg) 0%, #EDF0F4 50%, var(--color-bg) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* =============================================================
   Mobile: media query ≤ 768px
   - Sidebar diventa drawer overlay
   - Topbar mostra hamburger sempre
   - Tabelle con .table-responsive-cards → cards stackate
   - Form full-width, touch target 44px
   ============================================================= */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed;
        top: 0; left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 240ms var(--ease-out);
        box-shadow: var(--shadow-lg);
    }
    html.sidebar-collapsed .app-sidebar { display: flex; transform: translateX(-100%); }
    html.sidebar-open .app-sidebar { transform: translateX(0); }
    html.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .app-content { padding: 1rem; }
    .app-content > h1 { font-size: 1.15rem; }

    .app-topbar { padding: 0.5rem 0.75rem; }

    .filters-bar { padding: 0.75rem; gap: 0.5rem; }
    .filters-bar > div, .filters-bar > div .form-control, .filters-bar > div .form-select {
        width: 100%;
        min-width: 0;
    }

    /* Tabelle responsive → cards ──────────────────────── */
    .table-responsive-cards thead { display: none; }
    .table-responsive-cards tbody tr {
        display: block;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: 0.75rem;
        padding: 0.4rem 0.7rem;
        box-shadow: var(--shadow-sm);
    }
    .table-responsive-cards tbody tr:hover { background: var(--color-surface); }
    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0;
        border-bottom: 1px dashed var(--color-border);
        text-align: right;
    }
    .table-responsive-cards tbody td:last-child { border-bottom: none; }
    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        color: var(--color-text-muted);
        flex-shrink: 0;
        text-align: left;
    }
    .table-responsive-cards tbody td[data-label=""]::before { content: none; }
    .table-responsive-cards .actions-dropdown { width: 100%; }

    /* Pannello tariffe in show boa: header che impila titolo + bottone su mobile,
       e cella azioni che mostra entrambi i bottoni a piena larghezza. */
    .pricing-panel__header { flex-direction: column; align-items: stretch; }
    .pricing-panel__header > .btn { width: 100%; justify-content: center; }

    .pricing-table tbody tr { padding: .65rem .85rem .75rem; }
    .pricing-table tbody td.pricing-actions {
        flex-direction: column;
        gap: .4rem;
        align-items: stretch;
        margin-top: .35rem;
    }
    .pricing-table tbody td.pricing-actions::before { content: none; }
    .pricing-table tbody td.pricing-actions .btn-row-action,
    .pricing-table tbody td.pricing-actions form,
    .pricing-table tbody td.pricing-actions form button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Touch target minimi */
    .btn { padding: 0.65rem 1.2rem; min-height: 44px; }
    .btn-icon { min-height: 40px; min-width: 40px; }
    .actions-dropdown .actions-btn { min-height: 40px; min-width: 40px; }

    .profile-single { max-width: none; }
    .user-dropdown .user-name { display: none !important; }
    .modal-dialog { margin: 1rem; }
}

@media (max-width: 480px) {
    .app-content { padding: 0.75rem; }
    .stat-row { grid-template-columns: 1fr; gap: 0.5rem; }
    h1 { font-size: 1.05rem; }
    .meta-list { grid-template-columns: 1fr; gap: 0.2rem 0; }
    .meta-list dt {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.5rem;
    }
}

/* =============================================================
   Bottom navigation (mobile app-style)
   - Visibile solo su mobile (≤768px)
   - 5 voci per ruolo, sticky in fondo con safe-area-inset
   - Hamburger del topbar e drawer-sidebar restano: bottom-nav è
     l'accesso rapido alle 4-5 sezioni più operative, drawer la
     navigazione completa.
   ============================================================= */
.bottom-nav { display: none; }

@media (max-width: 768px) {
    /* Safety net: se per qualunque motivo un elemento (tabella larga, codice
       lungo, immagine) tenta di uscire dal viewport orizzontale, lo blocchiamo
       qui. Senza questa regola, lo scroll-x mobile sposta la bottom-nav fuori
       dal viewport visibile (è fixed sul viewport, non sul body). */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* Hamburger ridondante su mobile: il drawer è raggiungibile via
       "Più" della bottom-nav (admin) o non serve (skipper). Su desktop
       resta necessario per il collapse/espansione della sidebar. */
    #sidebar-toggle { display: none; }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 14px rgba(15, 42, 68, .06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 25;
    }
    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 4px 7px;
        color: var(--color-text-faint);
        text-decoration: none;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1;
        background: none;
        border: 0;
        cursor: pointer;
        font-family: inherit;
        min-width: 0;
        position: relative;
        transition: color var(--duration);
    }
    .bottom-nav__item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        transition: transform var(--duration) var(--ease-out);
    }
    .bottom-nav__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bottom-nav__item:active svg { transform: scale(.92); }
    .bottom-nav__item.is-active {
        color: var(--color-primary);
    }
    .bottom-nav__item.is-active::before {
        content: "";
        position: absolute;
        top: -1px;  /* sovrapposto al border-top della nav */
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: var(--color-cta);
        border-radius: 0 0 3px 3px;
    }

    /* Nascondi bottom-nav quando il drawer sidebar è aperto:
       evita che resti visibile sopra al drawer translucent. */
    html.sidebar-open .bottom-nav { display: none; }

    /* Spazio in fondo al contenuto perché non finisca sotto la nav.
       64px (altezza nav circa) + safe-area-inset + un po' di aria. */
    .app-content {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
    }
}

/* ── Bottom sheet (azioni mobile) ──────────────────────── */
.bottom-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,42,68,.45);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out);
}
.bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 0.7rem 0 0.5rem;
    z-index: 1060;
    transform: translateY(100%);
    transition: transform 240ms var(--ease-out);
    box-shadow: 0 -8px 24px rgba(15,42,68,.18);
    max-height: 70vh;
    overflow-y: auto;
}
.bottom-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: 2px;
    margin: 0 auto 0.5rem;
}
.bottom-sheet .bs-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
.bottom-sheet .bs-item:hover, .bottom-sheet .bs-item:active { background: var(--color-bg); }
.bottom-sheet .bs-item.bs-item--danger { color: var(--color-danger); }
.bottom-sheet .bs-separator { border-top: 1px solid var(--color-border); margin: 0.25rem 0; }
.bottom-sheet form { margin: 0; }

body.bottom-sheet-open { overflow: hidden; }
body.bottom-sheet-open .bottom-sheet-backdrop { opacity: 1; pointer-events: auto; }
body.bottom-sheet-open .bottom-sheet { transform: translateY(0); }