/* ──────────────────────────────────────────────────────────────────────────────
 *  app.css — Foglio di stile principale di Pro-Collab
 *
 *  Scopo:   Design system custom mobile-first, dark-by-default, ZERO dipendenze
 *           CDN. Implementa il sottoinsieme di classi (ex-Bootstrap) usate dai
 *           controller, così il markup esistente resta invariato.
 *  Palette: bg #0f172a (slate-900), accento #3b82f6 (blue-500).
 *  Tema:    scuro di default; chiaro automatico via prefers-color-scheme.
 *  Autore:  t4k-tools
 *  Data:    2026-05-25
 *  Versione:2.0.0
 * ────────────────────────────────────────────────────────────────────────────── */

/* ── Variabili di tema (scuro di default) ─────────────────────────────────────── */
:root {
  --bg:            #0f172a;   /* slate-900  — sfondo pagina            */
  --surface:       #1e293b;   /* slate-800  — card, navbar, tabelle    */
  --surface-2:     #334155;   /* slate-700  — header card, hover       */
  --border:        #334155;   /* slate-700  — bordi                    */
  --text:          #e2e8f0;   /* slate-200  — testo principale         */
  --text-muted:    #94a3b8;   /* slate-400  — testo secondario         */
  --primary:       #3b82f6;   /* blue-500   — accento                  */
  --primary-hover: #2563eb;   /* blue-600                              */
  --primary-text:  #ffffff;
  --secondary:     #64748b;   /* slate-500                             */
  --success:       #22c55e;
  --info:          #38bdf8;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --on-color:      #ffffff;   /* testo su badge/bottoni colorati       */
  --radius:        .5rem;
  --radius-sm:     .35rem;
  --shadow:        0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  --focus-ring:    0 0 0 .2rem rgba(59,130,246,.35);
}

/* ── Tema chiaro (se l'utente preferisce light) ──────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:         #f1f5f9;
    --surface:    #ffffff;
    --surface-2:  #f1f5f9;
    --border:     #e2e8f0;
    --text:       #0f172a;
    --text-muted: #64748b;
    --shadow:     0 1px 3px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  }
}

/* ── Reset di base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: underline; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ── Tipografia ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; color: var(--text); }
h1,.h1{ font-size: 2rem; }   h2,.h2{ font-size: 1.6rem; }  h3,.h3{ font-size: 1.35rem; }
h4,.h4{ font-size: 1.15rem; } h5,.h5{ font-size: 1rem; }   h6,.h6{ font-size: .9rem; }
.display-1{ font-size: 4.5rem; font-weight: 700; line-height: 1.1; }
.display-5{ font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.lead{ font-size: 1.2rem; font-weight: 300; }
.small,small{ font-size: .8125rem; }
.fs-4{ font-size: 1.35rem !important; } .fs-5{ font-size: 1.15rem !important; } .fs-6{ font-size: 1rem !important; }
.fw-bold{ font-weight: 700 !important; } .fw-semibold{ font-weight: 600 !important; } .fw-normal{ font-weight: 400 !important; }
.text-center{ text-align: center !important; } .text-end{ text-align: right !important; } .text-start{ text-align: left !important; }
.text-nowrap{ white-space: nowrap !important; }
.text-decoration-none{ text-decoration: none !important; }
.text-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-monospace{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Colori testo */
.text-muted{ color: var(--text-muted) !important; }
.text-primary{ color: var(--primary) !important; }
.text-secondary{ color: var(--secondary) !important; }
.text-success{ color: var(--success) !important; }
.text-info{ color: var(--info) !important; }
.text-warning{ color: var(--warning) !important; }
.text-danger{ color: var(--danger) !important; }
.text-dark{ color: var(--text) !important; }
.text-white{ color: #fff !important; }
.text-white-50{ color: rgba(255,255,255,.6) !important; }
.opacity-75{ opacity: .75 !important; } .opacity-50{ opacity: .5 !important; }

/* ── Layout: container ────────────────────────────────────────────────────────── */
.container, .container-fluid { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px){ .container{ max-width: 540px; } }
@media (min-width: 768px){ .container{ max-width: 720px; } }
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }

/* ── Layout: grid 12 colonne ─────────────────────────────────────────────────── */
.row {
  display: flex; flex-wrap: wrap;
  margin-right: calc(-.5 * var(--gutter, 1.5rem));
  margin-left:  calc(-.5 * var(--gutter, 1.5rem));
  row-gap: var(--gutter-y, 0);
}
.row > * {
  flex-shrink: 0; width: 100%; max-width: 100%;
  padding-right: calc(.5 * var(--gutter, 1.5rem));
  padding-left:  calc(.5 * var(--gutter, 1.5rem));
}
.g-0{ --gutter: 0; --gutter-y: 0; }
.g-1{ --gutter: .25rem; --gutter-y: .25rem; }
.g-2{ --gutter: .5rem;  --gutter-y: .5rem; }
.g-3{ --gutter: 1rem;   --gutter-y: 1rem; }
.g-4{ --gutter: 1.5rem; --gutter-y: 1.5rem; }
.g-5{ --gutter: 3rem;   --gutter-y: 3rem; }

.col{ flex: 1 0 0%; width: auto; }
.col-auto{ flex: 0 0 auto; width: auto; }
.col-1{width:8.333%}.col-2{width:16.667%}.col-3{width:25%}.col-4{width:33.333%}
.col-5{width:41.667%}.col-6{width:50%}.col-7{width:58.333%}.col-8{width:66.667%}
.col-9{width:75%}.col-10{width:83.333%}.col-11{width:91.667%}.col-12{width:100%}

@media (min-width: 768px){
  .col-md{ flex: 1 0 0%; width: auto; }
  .col-md-auto{ flex: 0 0 auto; width: auto; }
  .col-md-1{width:8.333%}.col-md-2{width:16.667%}.col-md-3{width:25%}.col-md-4{width:33.333%}
  .col-md-5{width:41.667%}.col-md-6{width:50%}.col-md-7{width:58.333%}.col-md-8{width:66.667%}
  .col-md-9{width:75%}.col-md-10{width:83.333%}.col-md-11{width:91.667%}.col-md-12{width:100%}
}
@media (min-width: 992px){
  .col-lg-1{width:8.333%}.col-lg-2{width:16.667%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}
  .col-lg-5{width:41.667%}.col-lg-6{width:50%}.col-lg-7{width:58.333%}.col-lg-8{width:66.667%}
  .col-lg-9{width:75%}.col-lg-10{width:83.333%}.col-lg-11{width:91.667%}.col-lg-12{width:100%}
}

/* ── Utility: display ─────────────────────────────────────────────────────────── */
.d-none{ display: none !important; } .d-block{ display: block !important; }
.d-inline{ display: inline !important; } .d-inline-block{ display: inline-block !important; }
.d-flex{ display: flex !important; } .d-inline-flex{ display: inline-flex !important; }
.d-grid{ display: grid !important; }
@media (min-width: 768px){
  .d-md-none{ display: none !important; } .d-md-block{ display: block !important; }
  .d-md-flex{ display: flex !important; } .d-md-inline{ display: inline !important; }
  .d-md-table-cell{ display: table-cell !important; }
}
@media (min-width: 992px){
  .d-lg-none{ display: none !important; } .d-lg-block{ display: block !important; }
  .d-lg-flex{ display: flex !important; } .d-lg-table-cell{ display: table-cell !important; }
}

/* ── Utility: flexbox ─────────────────────────────────────────────────────────── */
.flex-row{ flex-direction: row !important; } .flex-column{ flex-direction: column !important; }
.flex-wrap{ flex-wrap: wrap !important; } .flex-nowrap{ flex-wrap: nowrap !important; }
.flex-grow-1{ flex-grow: 1 !important; } .flex-shrink-0{ flex-shrink: 0 !important; }
.justify-content-start{ justify-content: flex-start !important; }
.justify-content-end{ justify-content: flex-end !important; }
.justify-content-center{ justify-content: center !important; }
.justify-content-between{ justify-content: space-between !important; }
.justify-content-around{ justify-content: space-around !important; }
.align-items-start{ align-items: flex-start !important; }
.align-items-center{ align-items: center !important; }
.align-items-end{ align-items: flex-end !important; }
.align-self-center{ align-self: center !important; }
.gap-1{ gap: .25rem !important; } .gap-2{ gap: .5rem !important; } .gap-3{ gap: 1rem !important; } .gap-4{ gap: 1.5rem !important; }
@media (min-width: 576px){ .flex-sm-row{ flex-direction: row !important; } }
@media (min-width: 768px){ .flex-md-row{ flex-direction: row !important; } }

/* ── Utility: sizing ──────────────────────────────────────────────────────────── */
.w-100{ width: 100% !important; } .w-auto{ width: auto !important; }
.h-100{ height: 100% !important; }
.mw-100{ max-width: 100% !important; }
.min-vh-100{ min-height: 100vh !important; }
.vh-100{ height: 100vh !important; }

/* ── Utility: spacing (scala 0=0 .25 .5 1 1.5 3rem) ───────────────────────────── */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}
.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}
.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}
.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}
.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
/* spacing responsive effettivamente usato */
@media (min-width: 768px){
  .px-md-4{padding-left:1.5rem!important;padding-right:1.5rem!important}
  .py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
}
@media (min-width: 992px){ .mb-lg-0{ margin-bottom: 0 !important; } }

/* ── Utility: background / border / radius ───────────────────────────────────── */
.bg-white{ background-color: var(--surface) !important; }   /* mappa su surface nel tema scuro */
.bg-light{ background-color: var(--surface-2) !important; }
.bg-body{ background-color: var(--bg) !important; }
.bg-primary{ background-color: var(--primary) !important; color: var(--on-color); }
.bg-secondary{ background-color: var(--secondary) !important; color: var(--on-color); }
.bg-success{ background-color: var(--success) !important; color: var(--on-color); }
.bg-info{ background-color: var(--info) !important; color: #0b2233; }
.bg-warning{ background-color: var(--warning) !important; color: #3a2a00; }
.bg-danger{ background-color: var(--danger) !important; color: var(--on-color); }
.border{ border: 1px solid var(--border) !important; }
.border-0{ border: 0 !important; }
.border-top{ border-top: 1px solid var(--border) !important; }
.border-bottom{ border-bottom: 1px solid var(--border) !important; }
.rounded{ border-radius: var(--radius) !important; }
.rounded-circle{ border-radius: 50% !important; }
.rounded-pill{ border-radius: 50rem !important; }
.shadow-sm{ box-shadow: var(--shadow) !important; }
.shadow{ box-shadow: var(--shadow) !important; }
.overflow-hidden{ overflow: hidden !important; }
.position-relative{ position: relative !important; }
.position-absolute{ position: absolute !important; }

/* ── Card ─────────────────────────────────────────────────────────────────────── */
.card{
  position: relative; display: flex; flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  padding: .75rem 1rem;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
  font-weight: 600;
}
.card-body{ flex: 1 1 auto; padding: 1rem; }
.card-title{ margin-bottom: .5rem; }
.card-footer{ padding: .75rem 1rem; border-top: 1px solid var(--border); }

/* ── Bottoni ──────────────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem .9rem; font-size: 1rem; font-weight: 500; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, opacity .15s;
  background: transparent; color: var(--text);
}
.btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn.disabled{ opacity: .55; pointer-events: none; }
.btn-sm{ padding: .3rem .6rem; font-size: .8125rem; }
.btn-lg{ padding: .7rem 1.4rem; font-size: 1.15rem; }
.btn-primary{ background-color: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover{ background-color: var(--primary-hover); border-color: var(--primary-hover); color:#fff; }
.btn-secondary{ background-color: var(--secondary); border-color: var(--secondary); color: var(--on-color); }
.btn-secondary:hover{ filter: brightness(1.1); color:#fff; }
.btn-danger{ background-color: var(--danger); border-color: var(--danger); color: var(--on-color); }
.btn-danger:hover{ filter: brightness(1.1); color:#fff; }
.btn-success{ background-color: var(--success); border-color: var(--success); color: var(--on-color); }
.btn-light{ background-color: var(--surface); border-color: var(--border); color: var(--text); }
.btn-light:hover{ background-color: var(--surface-2); color: var(--text); }
.btn-outline-primary{ border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover{ background-color: var(--primary); color:#fff; }
.btn-outline-secondary{ border-color: var(--border); color: var(--text-muted); }
.btn-outline-secondary:hover{ background-color: var(--surface-2); color: var(--text); }
.btn-outline-danger{ border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover{ background-color: var(--danger); color:#fff; }

/* ── Badge ────────────────────────────────────────────────────────────────────── */
.badge{
  display: inline-block; padding: .3em .55em; font-size: .75em; font-weight: 600;
  line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline;
  border-radius: .35rem; color: var(--on-color); background: var(--secondary);
}
.badge.bg-light{ color: var(--text) !important; }
.badge-scadenza{ font-size: .75rem; }

/* ── Alert ────────────────────────────────────────────────────────────────────── */
.alert{
  position: relative; padding: .75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm);
  background-color: var(--surface);
}
.alert-danger{ border-left-color: var(--danger);  color: var(--danger); }
.alert-success{ border-left-color: var(--success); color: var(--success); }
.alert-warning{ border-left-color: var(--warning); color: var(--warning); }
.alert-info{ border-left-color: var(--info);    color: var(--info); }

/* ── Tabelle ──────────────────────────────────────────────────────────────────── */
.table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table{ width: 100%; margin-bottom: 1rem; border-collapse: collapse; color: var(--text); }
.table > thead{ background-color: var(--surface-2); }
.table th, .table td{ padding: .6rem .65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th{ font-weight: 600; }
.table-hover > tbody > tr:hover{ background-color: var(--surface-2); }
.table-sm th, .table-sm td{ padding: .35rem .45rem; }

/* ── List group ───────────────────────────────────────────────────────────────── */
.list-group{ display: flex; flex-direction: column; border-radius: var(--radius); }
.list-group-item{
  padding: .65rem 1rem; background-color: var(--surface);
  border: 1px solid var(--border); margin-top: -1px;
}
.list-group-item:first-child{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-group-item:last-child{ border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.list-group-flush{ border-radius: 0; }
.list-group-flush > .list-group-item{ border-left: 0; border-right: 0; }

/* ── Form ─────────────────────────────────────────────────────────────────────── */
.form-label{ display: inline-block; margin-bottom: .35rem; font-weight: 500; }
.form-control, .form-select{
  display: block; width: 100%; padding: .5rem .7rem; font-size: 1rem; line-height: 1.5;
  color: var(--text); background-color: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder{ color: var(--text-muted); }
.form-control:focus, .form-select:focus{ outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.form-control-sm{ padding: .3rem .5rem; font-size: .8125rem; }
.form-select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 12px;
  padding-right: 2rem;
}
textarea.form-control{ min-height: 5rem; }
.form-check{ display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.form-check-input{ width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--primary); }
.form-check-label{ user-select: none; }
.form-text{ font-size: .8125rem; color: var(--text-muted); }

/* Input group (addon + control) */
.input-group{ display: flex; width: 100%; }
.input-group > .form-control{ flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-text{
  display: flex; align-items: center; padding: .5rem .7rem; color: var(--text-muted);
  background-color: var(--surface-2); border: 1px solid var(--border);
}
.input-group > :first-child{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :last-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:first-child){ margin-left: -1px; }

/* ── Navbar ───────────────────────────────────────────────────────────────────── */
.navbar{
  display: flex; flex-wrap: wrap; align-items: center;
  padding: .6rem 1rem; background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}
.navbar.bg-primary{ background-color: var(--surface) !important; color: var(--text); } /* navbar scura coerente */
.navbar .container-fluid{ display: flex; flex-wrap: wrap; align-items: center; width: 100%; }
.navbar-brand{ display: inline-flex; align-items: center; padding: .25rem 0; margin-right: 1rem; font-size: 1.2rem; font-weight: 700; color: var(--text); text-decoration: none; }
.navbar-brand:hover{ color: var(--primary); }
.navbar-nav{ display: flex; flex-direction: column; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.navbar-nav .nav-item{ position: relative; }
.nav-link{ display: inline-flex; align-items: center; padding: .45rem .6rem; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.nav-link:hover, .nav-link:focus{ color: var(--text); background-color: var(--surface-2); }
.navbar-toggler{
  margin-left: auto; padding: .35rem .6rem; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
}
.navbar-toggler-icon{
  display: inline-block; width: 1.3em; height: 1.3em; vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 100%;
}
.navbar-collapse{ flex-basis: 100%; flex-grow: 1; }

/* Mobile-first: collapse nascosto finché .show; espanso da lg in su */
.collapse:not(.show){ display: none; }
.collapsing{ height: 0; overflow: hidden; transition: height .25s ease; }
@media (min-width: 992px){
  .navbar-expand-lg .navbar-toggler{ display: none; }
  .navbar-expand-lg .navbar-collapse{ display: flex !important; flex-basis: auto; align-items: center; }
  .navbar-expand-lg .navbar-nav{ flex-direction: row; align-items: center; }
  .navbar-expand-lg .navbar-nav.ms-auto{ margin-left: auto; }
}

/* ── Dropdown ─────────────────────────────────────────────────────────────────── */
.dropdown{ position: relative; }
.dropdown-toggle::after{ content: "▾"; margin-left: .35rem; font-size: .8em; }
.dropdown-menu{
  display: none; position: absolute; z-index: 1000; min-width: 11rem; margin-top: .25rem; padding: .35rem 0;
  background-color: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); list-style: none;
}
.dropdown-menu.show{ display: block; }
.dropdown-menu-end{ right: 0; }
.dropdown-item{ display: block; width: 100%; padding: .45rem 1rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.dropdown-item:hover{ background-color: var(--surface-2); }
.dropdown-item.text-danger:hover{ background-color: rgba(239,68,68,.15); }
/* Sotto lg il menu resta nel flusso per non uscire dallo schermo */
@media (max-width: 991.98px){
  .navbar .dropdown-menu{ position: static; box-shadow: none; border: 0; padding-left: 1rem; }
}

/* ── Paginazione ──────────────────────────────────────────────────────────────── */
.pagination{ display: flex; gap: .25rem; list-style: none; padding: 0; margin: 1rem 0 0; flex-wrap: wrap; }
.page-link{
  display: block; padding: .4rem .7rem; color: var(--primary); text-decoration: none;
  background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.page-link:hover{ background-color: var(--surface-2); }
.page-item.active .page-link{ background-color: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link{ opacity: .5; pointer-events: none; }

/* ── Commenti ramificati (thread) ─────────────────────────────────────────────── */
.thread-level-1{ border-left: 3px solid var(--primary);   margin-left: 1.5rem; padding-left: .75rem; }
.thread-level-2{ border-left: 3px solid var(--secondary); margin-left: 3rem;   padding-left: .75rem; }
.thread-level-3{ border-left: 3px solid var(--border);    margin-left: 4.5rem; padding-left: .75rem; }
@media (max-width: 575.98px){
  /* Su mobile riduciamo l'indentazione per non comprimere il testo */
  .thread-level-1{ margin-left: .6rem; } .thread-level-2{ margin-left: 1.2rem; } .thread-level-3{ margin-left: 1.8rem; }
}

/* ── Lightbox screenshot (dialog nativo) ──────────────────────────────────────── */
dialog.lightbox{
  max-width: 92vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
dialog.lightbox::backdrop{ background: rgba(0,0,0,.8); }
dialog.lightbox img{ display: block; max-width: 92vw; max-height: 80vh; }
dialog.lightbox .lightbox-bar{ display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; }

/* ── Indicatore di caricamento (spinner) ─────────────────────────────────────── */
.spinner{
  display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em;
  border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.is-loading{ position: relative; pointer-events: none; opacity: .7; }

/* ── Splash / login ───────────────────────────────────────────────────────────── */
.login-card{ max-width: 420px; }