/* ============================================================
   ITINERA GF — Design system
   ============================================================ */
:root {
    --navy-1: #16345f;
    --navy-2: #0e2340;
    --navy-3: #0a1a30;
    --sidebar-w: 264px;
    --bg: #eef1f5;
    --card: #ffffff;
    /* Tinte derivate dal colore card (si adattano quando l'utente lo cambia) */
    --border: color-mix(in srgb, var(--card) 85%, #67788f);
    --card-tint: color-mix(in srgb, var(--card) 93%, #56657c);      /* sfondi soft (bottoni, thead) */
    --card-tint-hover: color-mix(in srgb, var(--card) 88%, #56657c);
    --card-row-border: color-mix(in srgb, var(--card) 93%, #67788f);
    --card-row-hover: color-mix(in srgb, var(--card) 96%, var(--primary));
    --card-accent: color-mix(in srgb, var(--card) 88%, var(--primary));
    --text: #1f2d3d;
    --muted: #7a8aa0;
    --primary: #1f4f88;
    --primary-dark: #163a66;
    /* Design personalizzabile (sovrascritti dal layout in base alle impostazioni utente) */
    --header-color: #0e2340;
    --nav-color: #14315a;
    --nav-text: #c4d0e2;
    --nav-text-active: #ffffff;
    --nav-section: #6f86a6;
    --bg-color: #eef1f5;
    --bg-image: url('/imgs/background.png');
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 8px 26px rgba(12, 26, 52, .20);
    --shadow-hover: 0 12px 34px rgba(12, 26, 52, .28);
    /* tinte badge */
    --t-blue-bg: #e6eefa;   --t-blue: #1f4f88;
    --t-green-bg: #e6f7ee;  --t-green: #1ea45c;
    --t-purple-bg: #efeafc; --t-purple: #7b5bd6;
    --t-orange-bg: #fff0e3; --t-orange: #ef8a3c;
    --t-red-bg: #fdeaea;    --t-red: #dc4c4c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

/* Sfondo dell'app: immagine sfocata + velo chiaro, dietro al contenuto */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -2;
    background: var(--bg-image) center center / cover no-repeat;
    filter: blur(16px);
    transform: scale(1.12);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(238, 241, 245, .25);
}

/* Sfondo: colore statico */
body[data-bg="colore"]::before,
body[data-bg="colore"]::after { display: none; }
body[data-bg="colore"] { background: var(--bg-color); }

/* Sfondo: animazione (canvas Three.js) */
body[data-bg="animazione"]::before,
body[data-bg="animazione"]::after { display: none; }
body[data-bg="animazione"] { background: #0a1420; }
#bgCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; }
body[data-bg="animazione"] #bgCanvas { display: block; }

a { text-decoration: none; color: var(--primary); }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--nav-color) 80%, #ffffff) 0%,
        var(--nav-color) 32%,
        color-mix(in srgb, var(--nav-color) 82%, #000000) 100%);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.sidebar .brand {
    padding: 18px 18px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    margin-bottom: 12px;
}
.sidebar .brand img { max-width: 220px; width: 100%; height: auto; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 12px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.nav-section {
    color: var(--nav-section);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 14px 3px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font-weight: 500;
    margin-bottom: 1px;
    transition: background .15s, color .15s;
}
.nav-link i { font-size: 17px; width: 20px; text-align: center; opacity: .9; }
.nav-link:hover { background: rgba(127,127,127,.14); color: var(--nav-text-active); }
.nav-link.active { background: rgba(31,79,136,.85); color: #fff; box-shadow: inset 3px 0 0 #bed9ff; }

.sidebar-bottom { margin-top: auto; opacity: .5; }
.sidebar-bottom img { width: 100%; display: block; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Topbar ---------- */
.topbar {
    height: 66px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }

.btn-back {
    width: 38px; height: 38px;
    border: 1px solid var(--border);
    background: var(--card-tint);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.btn-back:hover { background: var(--card-tint-hover); }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs .current { color: var(--text); font-weight: 600; }
.crumbs .sep { color: #c2ccda; font-size: 11px; }

.topbar-right { display: flex; align-items: center; gap: 16px; }
.icon-btn {
    position: relative;
    width: 40px; height: 40px;
    border: none; background: var(--card-tint); border-radius: 50%;
    color: #45566d; cursor: pointer; font-size: 17px;
}
.icon-btn .badge-dot {
    position: absolute; top: -3px; right: -3px;
    background: var(--t-red); color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 17px; height: 17px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.user-btn {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer; color: var(--text);
}
.user-btn .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--t-blue-bg); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.user-btn .user-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-btn .user-info small { color: var(--muted); font-size: 11.5px; }

/* ---------- Ricerca globale (topbar) ---------- */
.gsearch { position: relative; flex: 1; max-width: 470px; margin: 0 18px; }
.gsearch > i.bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.gsearch input {
    width: 100%; border: 1px solid var(--border); background: var(--card-tint);
    border-radius: 12px; padding: 9px 14px 9px 38px; font-size: 13.5px; color: var(--text); outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.gsearch input:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px rgba(31,79,136,.13); }
.gsearch-panel {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-hover); overflow-y: auto; max-height: 430px;
}
.gsearch-panel.show { display: block; }
.gs-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gs-clear { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.gs-item { display: flex; align-items: center; gap: 11px; padding: 9px 14px; color: var(--text); }
.gs-item:hover, .gs-item.active { background: var(--card-tint); }
.gs-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--t-blue-bg); color: var(--t-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.gs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gs-txt strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cat { font-size: 11px; color: var(--muted); background: var(--card-tint); border-radius: 12px; padding: 3px 9px; flex-shrink: 0; }
.gs-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) { .gsearch { display: none; } }

/* ---------- Content ---------- */
.content { padding: 24px 26px 40px; }

/* Header di pagina = card con immagine di sfondo (per-pagina via --page-bg) */
.page-head {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-bottom: 20px; padding: 24px 28px;
    border-radius: var(--radius); overflow: hidden;
    background-image: var(--page-bg, none); background-size: cover; background-position: center;
    box-shadow: var(--shadow); color: #fff;
}
.page-head::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--header-color) 90%, transparent) 0%,
        color-mix(in srgb, var(--header-color) 62%, transparent) 55%,
        color-mix(in srgb, var(--header-color) 32%, transparent) 100%);
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { font-size: 24px; font-weight: 800; margin: 0; color: #fff; }
.page-head .sub { color: rgba(255,255,255,.85); font-size: 13.5px; margin-top: 3px; }

/* ---------- Card ---------- */
.card-x {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
    overflow-x: clip; /* la card non panna: lo scroll orizzontale avviene solo dentro .table-scroll */
}
/* Nelle griglie lo spazio lo dà il gap, non il margine */
.stat-grid .card-x,
.grid-2 > .card-x,
.grid-2-60 > .card-x,
.form-2col > .card-x { margin-bottom: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-head h2 { font-size: 16px; font-weight: 700; margin: 0; }

/* ---------- Icon badge ---------- */
.icon-badge {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.b-blue { background: var(--t-blue-bg); color: var(--t-blue); }
.b-green { background: var(--t-green-bg); color: var(--t-green); }
.b-purple { background: var(--t-purple-bg); color: var(--t-purple); }
.b-orange { background: var(--t-orange-bg); color: var(--t-orange); }
.b-red { background: var(--t-red-bg); color: var(--t-red); }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.stat-card { display: flex; align-items: center; gap: 16px; }
.stat-card .num { font-size: 30px; font-weight: 800; line-height: 1; }
.stat-card .lbl { color: var(--muted); font-size: 13px; }
.stat-card .sub { font-size: 12px; margin-top: 4px; font-weight: 600; }

/* ---------- Grid helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-2-60 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    padding: 30px 32px;
    color: #fff;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--header-color) 85%, transparent) 0%,
        color-mix(in srgb, var(--header-color) 48%, transparent) 55%,
        color-mix(in srgb, var(--header-color) 16%, transparent) 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; }
.hero p { margin: 0; opacity: .9; }
.hero .chip {
    background: rgba(10,22,44,.60);
    border: 1px solid rgba(255,255,255,.30);
    padding: 10px 16px; border-radius: 10px; font-weight: 600; color: #fff;
    display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ---------- Quick actions ---------- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qa {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card); color: var(--text); transition: box-shadow .15s, transform .1s;
}
.qa:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.qa .icon-badge { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
.qa .qa-txt { flex: 1; }
.qa .qa-txt strong { display: block; font-size: 14px; }
.qa .qa-txt span { color: var(--muted); font-size: 12px; }
.qa .bi-chevron-right { color: #c2ccda; }

/* ---------- Activity list ---------- */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--card-row-border); }
.activity li:last-child { border-bottom: none; }
.activity .icon-badge { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.activity .a-txt { flex: 1; }
.activity .a-txt strong { display: block; font-size: 13.5px; font-weight: 600; }
.activity .a-txt span { color: var(--muted); font-size: 12px; }
.activity .a-time { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- Empty state ---------- */
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.empty i { font-size: 34px; opacity: .5; display: block; margin-bottom: 8px; }

/* ---------- Blocco unità locale (in Condominio) ---------- */
.ul-block { border: 1px solid var(--border); border-radius: 12px; padding: 0 16px 6px; margin-bottom: 14px; background: color-mix(in srgb, var(--card) 97%, #1f2d3d); }
.ul-block:last-child { margin-bottom: 0; }
.ul-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; flex-wrap: wrap; }
.ul-codice { font-weight: 700; font-size: 15px; color: var(--text); }
.ul-codice:hover { color: var(--primary); }
.ul-block .tbl thead th { background: transparent; }

/* ---------- Tabs ---------- */
.tabs-x { border-bottom: 1px solid var(--border); gap: 4px; }
.tabs-x .nav-link {
    border: none; border-bottom: 2.5px solid transparent; border-radius: 0;
    color: var(--muted); font-weight: 600; padding: 10px 16px; background: transparent;
}
.tabs-x .nav-link:hover { color: var(--text); }
.tabs-x .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }

/* ---------- Accordion letture ---------- */
.lett-acc .accordion-item { border: 1px solid var(--border); border-radius: 12px !important; margin-bottom: 10px; overflow: hidden; }
.lett-acc .accordion-button { font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--card) 97%, #1f2d3d); padding: 12px 16px; }
.lett-acc .accordion-button:not(.collapsed) { background: var(--card-accent); color: var(--text); box-shadow: none; }
.lett-acc .accordion-body { background: var(--card); }
/* Il contenuto dell'accordion non può mai "pannare" in orizzontale: scorre solo la tabella */
.lett-acc .accordion-collapse { overflow-x: clip; }
.lett-acc .accordion-button::after { filter: grayscale(1); }
.lett-acc .accordion-button:focus { box-shadow: none; border-color: var(--border); }
.ul-codice-acc { font-weight: 700; font-size: 15px; }

/* ---------- Tables (DataTables) ---------- */
/* Scroll orizzontale SOLO sul contenuto della tabella (header + righe) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { min-width: 100%; margin: 0; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--card-tint-hover); border-radius: 4px; }

table.dataTable, table.tbl { width: 100% !important; border-collapse: collapse; }
/* Colonna azione duplicata per il mobile: nascosta su desktop */
.tbl .az-mob { display: none; }
table.dataTable thead th, table.tbl thead th {
    background: var(--card-tint); color: var(--muted); font-weight: 600; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .02em;
    border-bottom: 1px solid var(--border) !important; padding: 12px 14px;
}
table.dataTable tbody td, table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--card-row-border) !important; }
table.dataTable tbody tr:hover { background: var(--card-row-hover); }
table.dataTable, table.tbl { color: var(--text); }
table.dataTable tbody tr, table.tbl tbody tr { background: transparent; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; outline: none;
    background: var(--card); color: var(--text);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important; color: #fff !important; border-radius: 8px; border: none !important;
}
/* Paginazione DataTables (tema Bootstrap 5) */
.dataTables_wrapper .pagination .page-link { background: var(--card); color: var(--text); border-color: var(--border); }
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { background: var(--card-tint); color: var(--muted); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--text); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: 9px 16px; font-size: 13.5px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-soft { background: var(--card-tint); border: 1px solid var(--border); color: var(--text); }
.btn-soft:hover { background: var(--card-tint-hover); color: var(--text); }
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }

.row-actions { display: inline-flex; gap: 6px; }
.row-actions a, .row-actions button {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.row-actions a:hover { background: var(--t-blue-bg); color: var(--primary); border-color: var(--t-blue-bg); }
.row-actions .del:hover { background: var(--t-red-bg); color: var(--t-red); border-color: var(--t-red-bg); }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 13px; color: #45566d; margin-bottom: 5px; }
.form-control, .form-select { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: var(--card); color: var(--text); }
.form-control::placeholder { color: var(--muted); }
.form-check-input:not(:checked) { background-color: var(--card); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,79,136,.16); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,79,136,.16); }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }

/* Pagine-form: form a sinistra + card immagine a destra */
.form-2col { display: grid; grid-template-columns: minmax(0, 820px) 1fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.form-2col > .card-x { margin: 0; }
.side-card {
    border-radius: var(--radius); background-size: cover; background-position: center;
    min-height: 340px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.side-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14,35,64,.20) 0%, rgba(14,35,64,.35) 55%, rgba(14,35,64,.78) 100%); }
.side-card-body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 26px 28px; color: #fff; }
.side-card-body h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.side-card-body p { margin: 0; opacity: .92; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1100px) { .form-2col { grid-template-columns: 1fr; } .side-card { display: none; } }

/* ---------- Badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill-green { background: var(--t-green-bg); color: var(--t-green); }
.pill-red { background: var(--t-red-bg); color: var(--t-red); }
.pill-gray { background: var(--card-tint); color: var(--muted); }

/* ---------- Superfici (modali, dropdown) seguono il colore card ---------- */
.modal-content { background: var(--card); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--card-row-border); }
.dropdown-menu { background: var(--card); border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--card-tint); color: var(--text); }

/* ---------- Modale design ---------- */
.dsg-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 20px 0 10px; }
.dsg-sec:first-of-type { margin-top: 0; }
.dsg-bgtipi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dsg-opt input, .dsg-anim input { position: absolute; opacity: 0; pointer-events: none; }
.dsg-opt span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.dsg-opt input:checked + span,
.dsg-anim input:checked + span { border-color: var(--primary); background: var(--t-blue-bg); color: var(--primary); }
.dsg-pan { margin-top: 14px; }
.dsg-anims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dsg-anim span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; text-align: center; }
.dsg-anim span i { font-size: 20px; }
.dsg-fonts { display: flex; gap: 8px; }
.dsg-font.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.form-control-color { height: 42px; padding: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-2-60, .qa-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Loader animato — overlay a schermo intero (web + mobile)
   ============================================================ */
#appLoader {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg-color, #eef1f5) 76%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    opacity: 1; visibility: visible;
    transition: opacity .38s ease, visibility .38s ease;
}
#appLoader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-box { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.loader-rings { position: relative; width: 74px; height: 74px; }
.loader-rings span { position: absolute; border-radius: 50%; border: 3px solid transparent; }
.loader-rings span:nth-child(1) { inset: 0;    border-top-color: var(--primary); animation: ldr-spin 1.1s cubic-bezier(.55,.15,.45,.85) infinite; }
.loader-rings span:nth-child(2) { inset: 9px;  border-top-color: #5b8fd0;        animation: ldr-spin 1.5s cubic-bezier(.55,.15,.45,.85) infinite reverse; }
.loader-rings span:nth-child(3) { inset: 18px; border-top-color: #9cc3f0;        animation: ldr-spin 1.9s cubic-bezier(.55,.15,.45,.85) infinite; }
.loader-core {
    position: absolute; inset: 29px; display: block; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5b8fd0, var(--primary));
    animation: ldr-pulse 1.6s ease-in-out infinite;
}
.loader-logo {
    width: 170px; max-width: 62vw; height: auto;
    animation: ldr-breathe 2s ease-in-out infinite;
    filter: drop-shadow(0 6px 18px rgba(12, 26, 52, .18));
}
.loader-bar {
    width: 172px; height: 4px; border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.loader-bar span {
    display: block; height: 100%; width: 40%; border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), #7fb0ff);
    animation: ldr-sweep 1.15s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ldr-spin { to { transform: rotate(360deg); } }
@keyframes ldr-pulse { 0%, 100% { transform: scale(.78); opacity: .75; } 50% { transform: scale(1); opacity: 1; } }
@keyframes ldr-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ldr-sweep { 0% { margin-left: -42%; } 100% { margin-left: 102%; } }

@media (prefers-reduced-motion: reduce) {
    .loader-rings span, .loader-core, .loader-logo, .loader-bar span { animation: none; }
    .loader-bar { display: none; }
}
@media print { #appLoader { display: none !important; } }

/* ============================================================
   Menu mobile — hamburger e backdrop del drawer
   (invisibili e inerti su desktop)
   ============================================================ */
.menu-btn {
    display: none;
    width: 38px; height: 38px;
    border: 1px solid var(--border);
    background: var(--card-tint);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.menu-btn:hover { background: var(--card-tint-hover); }

.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(8, 18, 34, .52);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* ============================================================
   Responsive mobile — il desktop resta invariato
   ============================================================ */
@media (max-width: 991.98px) {
    /* Sidebar → drawer off-canvas */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        height: 100vh; height: 100dvh;
        width: min(300px, 85vw);
        z-index: 1045;
        transform: translateX(-104%);
        transition: transform .3s cubic-bezier(.2, .8, .3, 1);
        box-shadow: 0 0 44px rgba(5, 12, 24, .45);
    }
    .sidebar.open { transform: translateX(0); }
    body.nav-open { overflow: hidden; }
    .menu-btn { display: inline-flex; }

    /* Topbar compatta */
    .topbar { padding: 0 14px; }
    .topbar-left { gap: 10px; min-width: 0; }
    .topbar-right { gap: 10px; }
    .user-btn { gap: 6px; }
    .user-btn .user-info { display: none; }
    .user-btn .bi-chevron-down { display: none; }
    .crumbs { min-width: 0; overflow: hidden; }
    .crumbs a, .crumbs .sep { display: none; } /* su mobile resta solo la voce corrente */
    .crumbs .current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .content { padding: 16px 14px 32px; }

    /* La scala font personalizzata non deve rompere i breakpoint su mobile */
    .content { zoom: 1 !important; }

    /* Tabelle: scroll orizzontale dentro le card, non nella pagina */
    .card-x, .accordion-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.tbl, table.dataTable { min-width: 560px; }
    table.dataTable thead th, table.tbl thead th { padding: 10px; font-size: 11.5px; }
    table.dataTable tbody td, table.tbl tbody td { padding: 10px; }

    /* Colonna azione: su mobile va per prima, solo icona */
    .tbl .az-mob { display: table-cell; }
    .tbl .az-desk { display: none; }
    .az-mob .btn {
        width: 34px; height: 34px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* Header di pagina e hero */
    .page-head { padding: 18px 16px; }
    .page-head h1 { font-size: 20px; }
    .hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 18px; min-height: 0; }
    .hero h1 { font-size: 22px; }
    .card-head { flex-wrap: wrap; }
    .form-actions { flex-wrap: wrap; }

    /* Accordion letture: intestazioni con pill che vanno a capo */
    .lett-acc .accordion-button { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 575.98px) {
    .content { padding: 14px 10px 28px; }
    .page-head { padding: 16px 14px; }

    .stat-grid { grid-template-columns: 1fr; }
    .stat-card .num { font-size: 26px; }

    /* Modale design */
    .dsg-bgtipi { grid-template-columns: 1fr; }
    .dsg-anims { grid-template-columns: repeat(2, 1fr); }
    .dsg-fonts { flex-wrap: wrap; }

    /* Controlli DataTables impilati */
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { text-align: left; }
    .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
    .dataTables_wrapper .pagination { flex-wrap: wrap; row-gap: 4px; }

    /* Le parole lunghe non devono sfondare la colonna */
    .content code, .content strong { overflow-wrap: anywhere; }
}