/* MIIA – tema colorato: base chiara, blu MI-IA, ogni sezione ha un colore proprio. Pensato prima per il cellulare. */
:root {
    --blu-miia: #252D61;
    --viola-miia: #4B548F;
    --primary-miia: #252D61;
    --testo: #1B2033;
    --testo-2: #4A5064;
    --testo-3: #5B6275;
    --sfondo: #F7F7FB;
    --bordo: #E4E6EC;
    --bordo-campo: #C9CDD8;
    --riga-hover: #F0F2FA;
    --link-attivo: #1D4ED8;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 70px;
    --header-h: 60px;
    --nav-basso-h: 64px;
    --raggio: 10px;
    --sezione: var(--blu-miia);
    --sezione-scuro: #1A2048;
    --sezione-chiaro: #EEF0FB;
}
/* Colori di sezione: il primo vale per menu e titoli, gli altri per la pagina aperta */
[data-gruppo="anagrafiche"], body[data-sezione="anagrafiche"] { --sezione: #1D4ED8; --sezione-scuro: #1E40AF; --sezione-chiaro: #E7EEFE; }
[data-gruppo="dati"], body[data-sezione="dati"] { --sezione: #0F766E; --sezione-scuro: #0B5B55; --sezione-chiaro: #E6F4F2; }
[data-gruppo="ordini"], body[data-sezione="ordini"] { --sezione: #C2410C; --sezione-scuro: #9A3412; --sezione-chiaro: #FFEDE3; }
[data-gruppo="marketing"], body[data-sezione="marketing"] { --sezione: #BE185D; --sezione-scuro: #9D174D; --sezione-chiaro: #FCE7F1; }
[data-gruppo="analisi"], body[data-sezione="analisi"] { --sezione: #6D28D9; --sezione-scuro: #5B21B6; --sezione-chiaro: #F0E9FD; }
[data-gruppo="sistema"], body[data-sezione="sistema"] { --sezione: #475569; --sezione-scuro: #334155; --sezione-chiaro: #EDF0F4; }

body { font-family: "Inter", sans-serif; font-size: 14px; color: var(--testo); background: var(--sfondo); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -.005em; }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; }
a { color: var(--link-attivo); }

/* Intestazione */
.miia-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: #fff; border-bottom: 1px solid var(--bordo); z-index: 1040; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .75rem; }
.miia-header .logo img { height: 26px; }
.miia-header-sx { display: flex; align-items: center; gap: .25rem; }
.btn-icona { width: 44px; height: 44px; border: 0; border-radius: var(--raggio); background: transparent; color: var(--blu-miia); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-icona:hover { background: var(--riga-hover); }
.btn-avatar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blu-miia); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* Menu: su schermi piccoli è un pannello che si apre con il pulsante */
.miia-sidebar { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: min(320px, 88vw); background: #fff; border-right: 1px solid var(--bordo); z-index: 1042; display: flex; flex-direction: column; justify-content: space-between; padding: .5rem 0 .75rem; overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform .2s ease, width .2s ease; visibility: hidden; }
body.menu-aperto .miia-sidebar { transform: none; visibility: visible; box-shadow: 0 10px 30px rgba(20, 24, 50, .25); }
.menu-velo { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(20, 24, 50, .45); z-index: 1041; display: none; }
body.menu-aperto .menu-velo { display: block; }
.miia-sidebar .nav { flex-wrap: nowrap; }
.menu-gruppo { padding: 0 .6rem; }
.menu-titolo { margin: .8rem .6rem .25rem; color: var(--sezione); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.miia-sidebar .nav-link { color: var(--testo); display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .3rem .6rem; border-radius: 8px; font-size: 14px; line-height: 1.2; }
.miia-sidebar .nav-link:hover { background: var(--sezione-chiaro); color: var(--testo); }
.miia-sidebar .nav-link.active { background: var(--sezione-chiaro); color: var(--sezione-scuro); font-weight: 700; }
.chip { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--sezione); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.chip .material-symbols-outlined { font-size: 18px; }
.miia-sidebar .chevron { margin-left: auto; font-size: 20px; color: var(--testo-3); transition: transform .2s; }
.miia-sidebar .nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.miia-sidebar .submenu .nav-link { padding-left: 1.4rem; font-size: 13.5px; }
.miia-sidebar .submenu .chip { width: 24px; height: 24px; }
.miia-sidebar .submenu .chip .material-symbols-outlined { font-size: 16px; }
.miia-sidebar .sidebar-toggle { display: none; }

/* Barra in basso del cellulare */
.nav-basso { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-basso-h); background: #fff; border-top: 1px solid var(--bordo); z-index: 1035; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-basso a, .nav-basso button { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--testo-3); font-size: 12px; font-weight: 500; text-decoration: none; }
.nav-basso .material-symbols-outlined { font-size: 24px; }
.nav-basso .active { color: var(--sezione-scuro); font-weight: 700; }

/* Contenuto */
.miia-content { padding-top: var(--header-h); padding-bottom: calc(var(--nav-basso-h) + 1rem); min-height: 100vh; }
.miia-title { background: var(--sezione); color: #fff; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem .75rem; }
.miia-title h1 { font-size: 20px; margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 700; min-width: 0; }
.miia-title h1 .material-symbols-outlined { font-size: 24px; color: #fff; }
.miia-title .btn-miia, .miia-title .btn { background: #fff; color: var(--sezione-scuro); border-color: #fff; }
.miia-title .btn-miia:hover, .miia-title .btn:hover { background: var(--sezione-chiaro); color: var(--sezione-scuro); }
.miia-title .btn-miia-outline, .miia-title .btn-esporta { background: transparent; color: #fff; border-color: #fff; }
.miia-title .btn-miia-outline:hover, .miia-title .btn-esporta:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; }
.miia-body { padding: 1rem; }
.miia-intro { font-size: 14px; color: var(--testo-2); margin-bottom: 1rem; }
.card-miia { background: #fff; border-radius: 14px; border: 1px solid var(--bordo); padding: 1rem; margin-bottom: 1rem; }
.card-miia > h3 { font-size: 18px; margin-bottom: .8rem; }

/* Pulsanti: stessa altezza, niente maiuscolo */
.btn-miia, .btn-miia-outline, .btn-esporta, .btn-salva, .btn-annulla { min-height: 40px; border-radius: var(--raggio); padding: .45rem 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; }
.btn-miia { background: var(--sezione); color: #fff; border: 1px solid var(--sezione); }
.btn-miia:hover, .btn-miia:focus { background: var(--sezione-scuro); border-color: var(--sezione-scuro); color: #fff; }
.btn-miia-outline { background: #fff; color: var(--sezione-scuro); border: 1px solid var(--sezione); }
.btn-miia-outline:hover { background: var(--sezione-chiaro); color: var(--sezione-scuro); }
.btn-esporta { border: 1px solid var(--bordo-campo); color: var(--testo-2); background: #fff; }
.btn-esporta:hover { color: var(--sezione-scuro); border-color: var(--sezione); background: var(--sezione-chiaro); }
.btn-salva { background: var(--sezione); color: #fff; border: 1px solid var(--sezione); }
.btn-salva:hover { background: var(--sezione-scuro); border-color: var(--sezione-scuro); color: #fff; }
.btn-annulla { background: none; border: 0; color: var(--testo-2); }
.btn-annulla:hover { background: var(--riga-hover); }
.btn-help { min-height: 36px; background: #fff; border: 1px solid #fff; color: var(--sezione-scuro); border-radius: 999px; padding: .3rem .8rem; display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.btn-help:hover { background: var(--sezione-chiaro); }
.btn-help .material-symbols-outlined { font-size: 20px; }

/* Tabelle */
.miia-search { border: 1px solid var(--bordo-campo); border-radius: var(--raggio); padding: .55rem .8rem; width: 310px; max-width: 100%; background: #fff; }
.miia-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.miia-table thead th { background: #F0F1F5; color: var(--testo-2); font-weight: 600; font-size: 12px; padding: .65rem .8rem; white-space: nowrap; }
.miia-table thead th:first-child { border-top-left-radius: 8px; }
.miia-table thead th:last-child { border-top-right-radius: 8px; }
.miia-table thead th a { color: inherit; text-decoration: none; }
.miia-table tbody td { padding: .65rem .8rem; border-bottom: 1px solid #EEF0F4; vertical-align: middle; }
.miia-table tbody tr:hover { background: var(--riga-hover); }
.miia-table .azioni { text-align: center; width: 70px; }
.btn-azioni { width: 32px; height: 32px; border-radius: 8px; background: var(--sezione-chiaro); color: var(--sezione-scuro); border: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-azioni:hover { background: var(--sezione); color: #fff; }
.btn-azioni .material-symbols-outlined { font-size: 20px; }
.miia-footer-table { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; color: var(--testo-2); flex-wrap: wrap; gap: .75rem; }
.miia-footer-table select { border: 1px solid var(--bordo-campo); border-radius: 8px; padding: .4rem .6rem; background: #fff; }
.miia-pagination { display: flex; flex-wrap: wrap; gap: .15rem; }
.miia-pagination a, .miia-pagination span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--testo); text-decoration: none; border-radius: 8px; }
.miia-pagination a:hover { background: var(--riga-hover); }
.miia-pagination .attiva { background: var(--sezione); color: #fff; }
.miia-pagination .disabilitata { color: #8A90A3; }
.logo-mini { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; vertical-align: middle; margin-right: .5rem; background: #fff; }
.logo-iniziale { width: 36px; height: 36px; border-radius: 50%; background: var(--sezione); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-right: .5rem; font-weight: 600; }

/* Moduli */
.breadcrumb-miia { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; color: var(--testo-2); margin-bottom: .8rem; }
.breadcrumb-miia a { color: var(--testo-2); text-decoration: none; }
.breadcrumb-miia .material-symbols-outlined { font-variation-settings: "FILL" 1; color: var(--testo-3); }
.nav-tabs-miia { border-bottom: 1px solid var(--bordo); margin-bottom: 1rem; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-miia .nav-link { border: 0; color: var(--testo-2); font-size: 15px; padding: .6rem .9rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-tabs-miia .nav-link.active { color: var(--sezione-scuro); border-bottom-color: var(--sezione); font-weight: 600; background: none; }
.form-control:focus, .form-select:focus { border-color: var(--sezione); box-shadow: 0 0 0 3px var(--sezione-chiaro); }
.campo { position: relative; margin-bottom: 1.1rem; }
.campo label { position: absolute; top: -.6rem; left: .6rem; background: #fff; padding: 0 .3rem; font-size: 12.5px; color: var(--testo-2); z-index: 2; max-width: calc(100% - 1.2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo .form-control, .campo .form-select { border: 1px solid var(--bordo-campo); border-radius: 8px; padding: .7rem .8rem .55rem; }
.campo .form-control:focus, .campo .form-select:focus { border-color: var(--sezione); }
.campo .form-check { padding-top: .8rem; }
.campo .errore { color: #B91C1C; font-size: 12px; margin-top: .2rem; }
.campo .aiuto { color: var(--testo-3); font-size: 12px; margin-top: .2rem; }
.campo-obbligatorio label::after { content: " *"; color: #B91C1C; }

/* Stati */
.badge-stato { white-space: nowrap; border-radius: 999px; padding: .2rem .65rem; font-size: 12px; font-weight: 600; }
.badge-ok { background: #DCFCE7; color: #166534; }
.badge-avvisi { background: #FEF3C7; color: #854D0E; }
.badge-errore { background: #FEE2E2; color: #991B1B; }
.badge-info { background: #E7EEFE; color: #1E40AF; }
.badge-grigio { background: #EDF0F4; color: #334155; }

/* Trascina e rilascia */
.dropzone-miia { border: 2px dashed var(--sezione); border-radius: 14px; background: var(--sezione-chiaro); padding: 2rem 1rem; text-align: center; color: var(--sezione-scuro); cursor: pointer; transition: background .2s; }
.dropzone-miia.over { background: #fff; }
.dropzone-miia .material-symbols-outlined { font-size: 44px; }

/* Messaggi */
.messages { position: fixed; top: calc(var(--header-h) + 10px); left: 12px; right: 12px; z-index: 1060; }
.messages .alert { box-shadow: 0 4px 14px rgba(20, 24, 50, .18); border-left-width: 5px; }

/* Guida */
.offcanvas-help { width: min(460px, 100%) !important; }
.offcanvas-help .offcanvas-header { background: var(--sezione); color: #fff; }
.offcanvas-help h2 { font-size: 18px; margin-top: 1.2rem; color: var(--sezione-scuro); }
.offcanvas-help h3 { font-size: 16px; margin-top: 1rem; }
.offcanvas-help table { width: 100%; font-size: 13px; }
.offcanvas-help td, .offcanvas-help th { border: 1px solid var(--bordo); padding: .3rem .5rem; }

/* Home */
.kpi { display: flex; align-items: center; gap: .8rem; }
.kpi .icona { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--sezione); color: #fff; display: flex; align-items: center; justify-content: center; }
.kpi .valore { font-size: 26px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi a { color: inherit; text-decoration: none; }

/* Accesso */
.login-page { min-height: 100vh; display: flex; background: var(--sfondo); }
.login-side { flex: 1; background: var(--blu-miia); display: none; align-items: center; justify-content: center; }
.login-side img { width: 55%; max-width: 320px; filter: brightness(0) invert(1); }
.login-box { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 420px; }
.login-card h1 { font-size: 26px; margin-bottom: .5rem; }

.in-sviluppo { text-align: center; padding: 3rem 1rem; color: var(--testo-3); }
.in-sviluppo .material-symbols-outlined { font-size: 64px; color: var(--sezione); }

/* Cellulare: tocchi comodi e tabelle che scorrono dentro la pagina */
@media (max-width: 767.98px) {
    .form-control, .form-select, .btn, .btn-miia, .btn-miia-outline, .btn-esporta, .btn-salva, .btn-annulla { min-height: 44px; }
    .form-control, .form-select { font-size: 16px; }
    .miia-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .miia-search { width: 100%; }
    .btn-azioni { width: 40px; height: 40px; }
}

/* Da tablet in su */
@media (min-width: 768px) {
    .nav-basso { display: none; }
    .miia-content { padding-bottom: 2rem; }
    .miia-body { padding: 1.25rem 1.5rem 2rem; }
    .miia-title { padding: .85rem 1.5rem; }
    .miia-title h1 { font-size: 22px; }
    .messages { left: auto; right: 16px; width: 440px; }
    .login-side { display: flex; }
}

/* Computer: menu sempre visibile e riducibile */
@media (min-width: 992px) {
    #menu-apri, .menu-velo, body.menu-aperto .menu-velo { display: none; }
    .miia-sidebar { width: var(--sidebar-w); transform: none; visibility: visible; }
    body.menu-aperto .miia-sidebar { box-shadow: none; }
    .miia-sidebar .sidebar-toggle { display: inline-flex; align-self: flex-end; margin: .5rem .8rem 0 0; color: var(--testo-3); background: none; border: 0; }
    .miia-sidebar .nav-link { min-height: 31px; padding: .1rem .6rem; font-size: 13.5px; }
    .miia-sidebar .submenu .nav-link { font-size: 13px; }
    .chip { width: 24px; height: 24px; border-radius: 7px; }
    .chip .material-symbols-outlined { font-size: 16px; }
    .miia-sidebar .submenu .chip { width: 22px; height: 22px; }
    .miia-sidebar .submenu .chip .material-symbols-outlined { font-size: 15px; }
    .menu-titolo { margin: .45rem .6rem .1rem; }
    .miia-content { margin-left: var(--sidebar-w); transition: margin-left .2s; }
    body.sidebar-collapsed .miia-sidebar { width: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .miia-content { margin-left: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .miia-sidebar .nav-label, body.sidebar-collapsed .miia-sidebar .chevron, body.sidebar-collapsed .miia-sidebar .submenu, body.sidebar-collapsed .menu-titolo { display: none !important; }
    body.sidebar-collapsed .miia-sidebar .nav-link { justify-content: center; }
    body.sidebar-collapsed .miia-sidebar .sidebar-toggle { align-self: center; margin: .5rem 0 0; }
}