:root {
  --pc-blue: #0c447c;       /* blu istituzionale */
  --pc-blue-700: #0a3a68;
  --pc-accent: #d85a30;     /* arancione protezione civile, usato con parsimonia */
}

body { background: #f4f5f7; }

/* Navbar */
.app-navbar { background: var(--pc-blue); flex-wrap: nowrap; }
.app-navbar .navbar-brand { font-weight: 500; }

/* Box utente in navbar: il pulsante Esci non si comprime mai, il badge
   dei ruoli può accorciarsi (con tooltip completo su hover). */
.user-box { min-width: 0; max-width: 60vw; }
.user-box .user-name { max-width: 30vw; }
.user-box .user-roles { max-width: 22vw; }
.user-box #btnLogout { flex-shrink: 0; white-space: nowrap; }

/* Primario in tinta istituzionale */
.btn-primary { --bs-btn-bg: var(--pc-blue); --bs-btn-border-color: var(--pc-blue); --bs-btn-hover-bg: var(--pc-blue-700); --bs-btn-hover-border-color: var(--pc-blue-700); }
a { color: var(--pc-blue); }

/* Layout corpo: sidebar + contenuto */
.app-body { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar { width: 230px; background: #fff; border-right: 1px solid #e6e7ea; padding: .75rem 0; }
.app-sidebar .nav-link { color: #44464a; border-radius: 0; padding: .55rem 1.1rem; display: flex; align-items: center; gap: .6rem; }
.app-sidebar .nav-link:hover { background: #f0f2f5; }
.app-sidebar .nav-link.active { color: var(--pc-blue); background: #eaf1f9; box-shadow: inset 3px 0 0 var(--pc-accent); font-weight: 500; }
.app-main { flex: 1; padding: 1.5rem; max-width: 100%; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 6px 24px rgba(12,68,124,.12); }
.brand-badge { width: 56px; height: 56px; border-radius: 14px; background: var(--pc-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

/* Tabella */
.table > :not(caption) > * > * { padding: .55rem .6rem; }

/* Hamburger: visibile solo su mobile */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .app-body { position: relative; }
  .app-sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 82%; max-width: 300px; z-index: 1050;
    transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0,0,0,.15);
  }
  .app-body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.35); z-index: 1040; display: none;
  }
  .app-body.sidebar-open .sidebar-backdrop { display: block; }
  .app-main { padding: 1rem .8rem; }
  /* Su mobile nascondo il badge dei ruoli e l'etichetta "Esci": resta il nome
     e l'icona di logout, così il pulsante è sempre raggiungibile. */
  .user-box .user-roles { display: none; }
  .user-box .logout-label { display: none; }
  .user-box .user-name { max-width: 42vw; }
  /* Intestazioni di sezione più piccole su mobile, così i pulsanti a fianco
     non finiscono fuori schermo. */
  .app-main h4 { font-size: 1.05rem; }
  .app-main .h4, .app-main h3 { font-size: 1.1rem; }
  /* Le intestazioni di sezione (titolo + pulsanti) vanno a capo se non
     c'è spazio, così i pulsanti restano dentro lo schermo. */
  .app-main .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
  /* tabelle più compatte su mobile */
  .table > :not(caption) > * > * { padding: .45rem .4rem; }
  .modal-xl, .modal-lg { --bs-modal-width: 96vw; }
}

/* Dashboard */
.dash-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 68, 124, 0.1); color: #0c447c; font-size: 1.6rem; flex: 0 0 auto;
}
.card a:hover .dash-icon { background: rgba(12, 68, 124, 0.18); }

/* Sidebar: intestazione gruppo */
.nav-section {
  display: block; padding: .5rem .75rem .15rem; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .03em; color: rgba(255,255,255,.55);
}
.app-sidebar .nav .nav .nav-link { font-size: .95rem; padding-top: .3rem; padding-bottom: .3rem; }

/* Menu a gruppi (accordion) */
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; color: #44464a; font: inherit; font-weight: 500;
  padding: .6rem 1.1rem; cursor: pointer; border-radius: 0;
}
.nav-group-toggle:hover { background: #f0f2f5; }
.nav-group-toggle .chev { font-size: .8rem; transition: transform .2s ease; color: #9aa0a6; }
.nav-group.open .nav-group-toggle .chev { transform: rotate(180deg); }
.nav-group.open .nav-group-toggle { color: var(--pc-blue); }
.nav-group-items {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
  background: #fafbfc;
}
.nav-group.open .nav-group-items { max-height: 420px; }
.app-sidebar .nav-link.sub {
  padding: .45rem 1.1rem .45rem 1.4rem; font-size: .93rem; color: #55585d;
}
.app-sidebar .nav-link.sub .bi-dot { color: var(--pc-accent); font-size: 1.1rem; margin-left: -.2rem; }
.app-sidebar .nav-link.sub.active { background: #eaf1f9; color: var(--pc-blue); box-shadow: inset 3px 0 0 var(--pc-accent); }

/* Logo / brand */
.login-logo { width: 116px; height: 116px; display: block; margin-left: auto; margin-right: auto; }
.brand-logo { width: 30px; height: 30px; }
.brand-name { font-weight: 800; letter-spacing: .5px; color: #0d3f74; }
.app-navbar .brand-name, .app-navbar .navbar-brand { color: #fff; }

/* --- EW4: gestione operativa (kanban) ------------------------------------ */
.kanban-board { scroll-snap-type: x proximity; }
.kanban-col { flex: 0 0 260px; scroll-snap-align: start; }
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-drop { min-height: 120px; }
@media (max-width: 576px) { .kanban-col { flex: 0 0 82vw; } }

/* ==========================================================================
   EW4 — adattamento a telefono e tablet
   ========================================================================== */

:root {
  /* Safe area: sui telefoni con notch e barra gesti il contenuto non deve
     finire sotto i bordi di sistema. */
  --ew4-safe-top: env(safe-area-inset-top, 0px);
  --ew4-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ew4-bottom-nav: 58px;
}

.app-navbar { padding-top: calc(.5rem + var(--ew4-safe-top)); }

/* Aree di tocco: sul campo si lavora con i guanti e in piedi. */
@media (max-width: 767.98px) {
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; } /* 16px evita lo zoom automatico su iOS */
  .btn-group-sm > .btn { min-width: 40px; }
  .table td, .table th { padding-top: .6rem; padding-bottom: .6rem; }
  .modal-dialog { margin: .5rem; }
  .app-main { padding-bottom: calc(var(--ew4-bottom-nav) + var(--ew4-safe-bottom) + 1rem); }
}

.sel-evento { max-width: 46vw; }
@media (min-width: 768px) { .sel-evento { max-width: 320px; } }
.sel-evento-testo { overflow: hidden; text-overflow: ellipsis; }

/* --- Barra di navigazione inferiore -------------------------------------- */
.app-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; justify-content: space-around; align-items: stretch;
  background: #fff; border-top: 1px solid #dee2e6;
  padding-bottom: var(--ew4-safe-bottom);
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.app-bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: .4rem .2rem; min-height: var(--ew4-bottom-nav);
  color: #6c757d; text-decoration: none; font-size: .68rem; line-height: 1;
}
.app-bottom-nav a i { font-size: 1.25rem; }
.app-bottom-nav a.active { color: var(--bs-primary, #0d6efd); font-weight: 600; }
.app-bottom-nav a:active { background: rgba(0,0,0,.04); }

/* --- Kanban --------------------------------------------------------------- */
.kanban-board { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.kanban-col { flex: 0 0 260px; scroll-snap-align: start; }
.kanban-card { cursor: grab; touch-action: manipulation; }
.kanban-card:active { cursor: grabbing; }
.kanban-drop { min-height: 120px; }
@media (max-width: 576px) {
  .kanban-col { flex: 0 0 82vw; }
  .kanban-card { padding: .5rem !important; }
}

/* --- Scanner a tutto schermo --------------------------------------------- */
.scanner-overlay {
  position: fixed; inset: 0; z-index: 2000; background: #000;
  display: flex; flex-direction: column;
  padding-top: var(--ew4-safe-top); padding-bottom: var(--ew4-safe-bottom);
}
.scanner-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1rem; color: #fff;
}
.scanner-video-wrap { position: relative; flex: 1; overflow: hidden; }
.scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.scanner-mirino {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(78vw, 420px); height: 32vh; max-height: 220px;
  border: 3px solid rgba(255,255,255,.9); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
.scanner-footer { padding: 1rem; text-align: center; }
.scanner-ultimo { margin-top: .5rem; min-height: 1.6rem; }

/* --- Badge stampabili ----------------------------------------------------- */
.badge-fogli { display: flex; flex-wrap: wrap; gap: 6mm; }
.badge-carta {
  width: 86mm; min-height: 54mm;
  border: 1px solid #adb5bd; border-radius: 3mm; overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  break-inside: avoid; page-break-inside: avoid;
}
.badge-testata {
  background: var(--badge-colore, #0d6efd); color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2mm 3mm; font-size: 9pt; font-weight: 600;
}
.badge-corpo { padding: 2mm 3mm; flex: 1; }
.badge-nome { font-size: 13pt; font-weight: 700; line-height: 1.15; }
.badge-sotto { font-size: 9pt; color: #495057; }
.badge-dett { font-size: 8pt; color: #6c757d; }
.badge-codice { padding: 0 3mm 1mm; text-align: center; }
.badge-barcode { width: 100%; height: 12mm; display: block; }
.badge-codice-testo { font-family: ui-monospace, monospace; font-size: 8pt; letter-spacing: .06em; }
.badge-piede {
  border-top: 1px solid #dee2e6; padding: 1mm 3mm;
  font-size: 7pt; color: #6c757d; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media print {
  @page { size: A4; margin: 8mm; }
  .app-navbar, .app-sidebar, .app-bottom-nav, .toast-container,
  .sidebar-backdrop, .btn, .form-control, .form-select, .alert, .form-text { display: none !important; }
  .app-body, .app-main { display: block !important; padding: 0 !important; margin: 0 !important; }
  .badge-fogli { gap: 4mm; }
  .badge-carta { border-color: #6c757d; }
}