/* =====================================================================
   Scadenziario visite mediche — tema condiviso
   Caricato DOPO gli stili inline delle pagine, così vince senza doverli
   rimuovere: nessuna riga di PHP o di logica è stata toccata.
   Costruito sopra Bootstrap 5.3, non contro.
   ===================================================================== */

:root{
  --sc-brand:#2563eb;
  --sc-brand-600:#1d4ed8;
  --sc-brand-050:#eff6ff;
  --sc-ink:#0f172a;
  --sc-ink-soft:#64748b;
  --sc-line:#e2e8f0;
  --sc-surface:#ffffff;
  --sc-bg:#f1f5f9;

  --sc-ok:#059669;      --sc-ok-bg:#ecfdf5;
  --sc-warn:#d97706;    --sc-warn-bg:#fffbeb;
  --sc-danger:#dc2626;  --sc-danger-bg:#fef2f2;

  --sc-r:14px;
  --sc-r-lg:20px;
  --sc-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.12);
  --sc-shadow-lg:0 12px 40px -12px rgba(15,23,42,.22);
  --sc-nav-h:64px;
}

body{
  background:var(--sc-bg) !important;
  color:var(--sc-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* lo spazio in cima serve solo dove c'è la barra fissa: login e riepiloghi
   non ce l'hanno e non devono ritrovarsi 64px di vuoto */
body:has(.sc-nav){padding-top:var(--sc-nav-h) !important}

/* ===================== BARRA DI NAVIGAZIONE ===================== */
.sc-nav{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  height:var(--sc-nav-h);
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--sc-line);
}
.sc-nav__inner{
  height:100%; display:flex; align-items:center; gap:1rem;
  max-width:1320px; margin:0 auto; padding:0 1rem;
}
.sc-brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; min-width:0}
.sc-brand img{width:38px; height:38px; object-fit:contain; flex-shrink:0}
.sc-brand__txt{min-width:0}
.sc-brand__name{
  font-weight:700; font-size:1rem; color:var(--sc-ink); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw;
}
.sc-brand__sub{font-size:.74rem; color:var(--sc-ink-soft); line-height:1.2}

/* link orizzontali: visibili su desktop, non nascosti dietro un hamburger */
.sc-links{display:none; align-items:center; gap:.15rem; margin-left:auto}
@media (min-width:992px){ .sc-links{display:flex} }
.sc-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:10px;
  color:var(--sc-ink-soft); text-decoration:none;
  font-size:.93rem; font-weight:500; white-space:nowrap;
  border:none; background:none;
  transition:background .15s, color .15s;
}
.sc-link:hover{background:var(--sc-brand-050); color:var(--sc-brand-600)}
.sc-link.is-active{background:var(--sc-brand-050); color:var(--sc-brand-600); font-weight:600}
.sc-link i{font-size:.95rem; opacity:.85}

.sc-nav .dropdown-menu{
  border:1px solid var(--sc-line); border-radius:var(--sc-r);
  box-shadow:var(--sc-shadow-lg); padding:.4rem; margin-top:.5rem; min-width:230px;
}
.sc-nav .dropdown-item{
  border-radius:9px; padding:.55rem .7rem; font-size:.93rem;
  display:flex; align-items:center; gap:.6rem;
}
.sc-nav .dropdown-item:hover{background:var(--sc-brand-050); color:var(--sc-brand-600)}
.sc-nav .dropdown-item.text-danger:hover{background:var(--sc-danger-bg); color:var(--sc-danger)}
.sc-nav .dropdown-header{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sc-ink-soft); font-weight:600; padding:.5rem .7rem .3rem;
}

.sc-burger{
  margin-left:auto; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--sc-line); background:#fff; color:var(--sc-ink);
  display:inline-flex; align-items:center; justify-content:center;
}
@media (min-width:992px){ .sc-burger{display:none} }

/* ---------- blindatura colori ----------
   Le pagine, per la vecchia barra blu, impongono cose come
   .offcanvas{color:#fff} e .dropdown-menu .dropdown-item{color:#fff!important}.
   Su fondo chiaro il testo o le icone sparivano, in combinazioni diverse a
   seconda della pagina. Qui il colore è dichiarato esplicitamente su
   TESTO e ICONE, così non resta niente da ereditare. */
.sc-nav, .sc-nav *,
.sc-off, .sc-off *{color:var(--sc-ink)}

/* Lo SFONDO, non solo i colori. Le pagine impongono ancora il gradiente
   blu della vecchia barra con .dropdown-menu{background:…!important}, e i
   colori scuri dichiarati qui sotto ci finivano sopra: le icone, che sono
   le più tenui, sparivano finché non le si passava sopra. Stesso peso,
   ma selettore più specifico, quindi vince questo. */
.sc-nav .dropdown-menu{
  background:var(--sc-surface) !important;
  border-color:var(--sc-line) !important;
}
.sc-nav .dropdown-menu .dropdown-divider{border-color:var(--sc-line) !important}

.sc-nav .dropdown-menu .dropdown-item,
.sc-nav .dropdown-menu .dropdown-header{color:var(--sc-ink) !important}
.sc-nav .dropdown-menu .dropdown-header{color:var(--sc-ink-soft) !important}
.sc-nav .dropdown-menu .dropdown-item i,
.sc-nav .sc-link i,
.sc-off .sc-link i{color:var(--sc-ink-soft) !important}

.sc-nav .sc-link{color:var(--sc-ink-soft) !important}
.sc-nav .sc-link:hover, .sc-nav .sc-link.is-active{color:var(--sc-brand-600) !important}
.sc-nav .sc-link:hover i, .sc-nav .sc-link.is-active i{color:var(--sc-brand-600) !important}

.sc-nav .dropdown-menu .dropdown-item:hover,
.sc-nav .dropdown-menu .dropdown-item:hover i{color:var(--sc-brand-600) !important}

/* le voci pericolose restano rosse, icona compresa */
.sc-nav .dropdown-item.text-danger,
.sc-nav .dropdown-item.text-danger i,
.sc-off .sc-link.text-danger,
.sc-off .sc-link.text-danger i{color:var(--sc-danger) !important}

/* ---------- pannello mobile ----------
   Le pagine impongono regole proprie con !important (es. intestazione blu
   ereditata dalla vecchia barra). Qui si neutralizzano con selettori più
   specifici, invece di andare a modificare il CSS inline di ogni pagina. */
.sc-off{
  width:min(86vw,340px) !important;
  border:none !important;
  border-radius:22px 0 0 22px;
  box-shadow:-24px 0 60px -20px rgba(15,23,42,.35);
  background:var(--sc-surface) !important;
}
.sc-off .offcanvas-header{
  background:var(--sc-surface) !important;
  color:var(--sc-ink) !important;
  border-bottom:1px solid var(--sc-line) !important;
  padding:1.05rem 1.15rem !important;
}
.sc-off .offcanvas-title{
  color:var(--sc-ink) !important; font-weight:700; font-size:1.02rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-off .btn-close{filter:none !important; opacity:.5}
.sc-off .btn-close:hover{opacity:1}
.sc-off .offcanvas-body{padding:.8rem !important; background:var(--sc-surface) !important}

.sc-off .sc-link{
  display:flex !important; width:100%; padding:.9rem .85rem; border-radius:13px;
  font-size:1rem; color:var(--sc-ink) !important; background:none !important;
  text-align:left; justify-content:flex-start; margin-bottom:.1rem;
}
.sc-off .sc-link i{width:24px; text-align:center; color:var(--sc-ink-soft); font-size:1rem}
.sc-off .sc-link:active{transform:scale(.98)}
.sc-off .sc-link.is-active{background:var(--sc-brand-050) !important; color:var(--sc-brand-600) !important}
.sc-off .sc-link.is-active i{color:var(--sc-brand-600)}
.sc-off .sc-link.text-danger{color:var(--sc-danger) !important}
.sc-off .sc-link.text-danger i{color:var(--sc-danger)}
.sc-off hr{margin:.65rem .3rem; border-color:var(--sc-line); opacity:1}

/* NIENTE animazione a cascata sulle voci.
   Bootstrap mette la classe .show a scivolata FINITA: il contenuto era
   già visibile, e le voci rientravano da capo una per una. A schermo
   sembrava che il menu venisse disegnato due volte. Il pannello entra
   come un pezzo solo, che è anche più rapido da leggere. */

/* maniglia: suggerisce che si può trascinare */
.sc-off::before{
  content:""; position:absolute; left:7px; top:50%; transform:translateY(-50%);
  width:4px; height:46px; border-radius:99px; background:var(--sc-line);
}

.offcanvas-backdrop.show{backdrop-filter:blur(2px); opacity:.35}

/* mentre si trascina col dito niente transizione, se no "insegue" */
.sc-off.sc-drag{transition:none !important}


/* variante snella: pagine-modulo che hanno solo titolo e ritorno,
   non il menu completo (creazione giocatore, creazione amministratore) */
.sc-nav--slim .sc-nav__inner{justify-content:space-between}
.sc-nav--slim .sc-back{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:10px;
  border:1px solid var(--sc-line); background:#fff;
  color:var(--sc-ink); text-decoration:none; font-weight:600; font-size:.92rem;
}
.sc-nav--slim .sc-back:hover{background:var(--sc-brand-050); color:var(--sc-brand-600); border-color:var(--sc-brand)}
.sc-nav--slim .sc-titolo{font-weight:700; color:var(--sc-ink); font-size:1.02rem}

/* ===================== CONTENUTO ===================== */
.main-content, .sc-wrap{max-width:1320px; margin:0 auto; padding:0 1rem}

.sc-page-head{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin:1.6rem 0 1.1rem;
}
.sc-page-head h1{
  font-size:clamp(1.35rem,3vw,1.8rem); font-weight:700;
  color:var(--sc-ink); margin:0; letter-spacing:-.02em;
}
.sc-page-head p{margin:.25rem 0 0; color:var(--sc-ink-soft); font-size:.94rem}

/* scheda contenitore: sostituisce i riquadri squadrati */
.sc-card, .table-outer-wrap{
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  border-radius:var(--sc-r-lg) !important;
  box-shadow:var(--sc-shadow);
  overflow:hidden;
}
.sc-card__head{
  padding:1rem 1.15rem; border-bottom:1px solid var(--sc-line);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.sc-card__body{padding:1.15rem}

/* barra di ricerca/filtri */
.table-searchbar{
  background:var(--sc-surface); border:1px solid var(--sc-line);
  border-radius:var(--sc-r-lg); box-shadow:var(--sc-shadow);
  padding:1rem; margin-bottom:1.1rem !important;
}
.form-control, .form-select{
  border-radius:11px; border-color:var(--sc-line);
  padding:.6rem .85rem; font-size:.95rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--sc-brand); box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.input-group-text{border-radius:11px 0 0 11px; background:#f8fafc; border-color:var(--sc-line)}

/* ===================== BOTTONI ===================== */
.btn{border-radius:11px; font-weight:600; font-size:.93rem; padding:.58rem 1rem}
.btn-primary{background:var(--sc-brand); border-color:var(--sc-brand)}
.btn-primary:hover{background:var(--sc-brand-600); border-color:var(--sc-brand-600)}
.btn-sm{padding:.4rem .7rem; font-size:.86rem; border-radius:9px}
.btn i{margin-right:.35rem}
.btn-icon{width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center}
.btn-icon i{margin:0}

/* ===================== TABELLE ===================== */
.table-scroll{overflow-x:auto}
table.table{margin:0; --bs-table-bg:transparent}
table.table thead th{
  background:#f8fafc !important; color:var(--sc-ink-soft) !important;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.055em; font-weight:700;
  border-bottom:1px solid var(--sc-line) !important; padding:.85rem 1rem; white-space:nowrap;
}
table.table tbody td{
  padding:.85rem 1rem; vertical-align:middle;
  border-bottom:1px solid #f1f5f9; font-size:.94rem; color:var(--sc-ink);
}
table.table tbody tr:last-child td{border-bottom:none}
table.table.table-striped tbody tr:nth-of-type(odd) > *{--bs-table-accent-bg:transparent; background:transparent}
table.table.table-hover tbody tr:hover > *{background:var(--sc-brand-050) !important}
table.table.table-bordered, table.table.table-bordered td, table.table.table-bordered th{border-left:0; border-right:0}

/* stato scadenza: pillole leggibili a colpo d'occhio */
.sc-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .65rem; border-radius:999px;
  font-size:.8rem; font-weight:600; white-space:nowrap;
}
.sc-pill--ok{background:var(--sc-ok-bg); color:var(--sc-ok)}
.sc-pill--warn{background:var(--sc-warn-bg); color:var(--sc-warn)}
.sc-pill--danger{background:var(--sc-danger-bg); color:var(--sc-danger)}

/* --- MOBILE: ogni riga diventa una scheda ---------------------------
   Le etichette arrivano da assets/ui.js, che le copia dal <thead>.
   Nessuna modifica al markup prodotto da PHP.                        */
@media (max-width:767.98px){
  table.sc-stack, table.sc-stack thead, table.sc-stack tbody,
  table.sc-stack tr, table.sc-stack td{display:block; width:100% !important}
  table.sc-stack thead{position:absolute; left:-9999px}
  table.sc-stack.table-fixed{table-layout:auto}
  table.sc-stack tr{
    background:var(--sc-surface); border:1px solid var(--sc-line);
    border-radius:var(--sc-r); box-shadow:var(--sc-shadow);
    margin-bottom:.8rem; padding:.35rem .25rem; overflow:hidden;
  }
  table.sc-stack td{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    border:none !important; border-bottom:1px solid #f1f5f9 !important;
    padding:.6rem .85rem; text-align:right;
  }
  table.sc-stack td:last-child{border-bottom:none !important}
  table.sc-stack td::before{
    content:attr(data-label);
    font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
    font-weight:700; color:var(--sc-ink-soft);
    text-align:left; flex-shrink:0;
  }
  table.sc-stack td:empty{display:none}
  /* le pagine limitavano l'altezza per far scorrere solo le righe: con le
     schede impilate quel vincolo taglierebbe il contenuto, va sciolto */
  .table-outer-wrap, .table-scroll{
    background:transparent !important; border:none !important; box-shadow:none !important;
    overflow:visible !important; max-height:none !important; height:auto !important;
  }
}

/* ===================== MODALI ===================== */
.modal-content{border:none; border-radius:var(--sc-r-lg); box-shadow:var(--sc-shadow-lg)}
.modal-header{border-bottom:1px solid var(--sc-line); padding:1.1rem 1.3rem}
.modal-title{font-weight:700; font-size:1.05rem; color:var(--sc-ink)}
.modal-body{padding:1.3rem}
.modal-footer{border-top:1px solid var(--sc-line); padding:.9rem 1.3rem}

/* ===================== VARIE ===================== */
.list-group-item{border-color:var(--sc-line); padding:.8rem 1rem}
.badge{border-radius:999px; font-weight:600; padding:.35em .7em}
::-webkit-scrollbar{height:10px; width:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

@media print{
  .sc-nav, .sc-burger, .table-searchbar, .btn{display:none !important}
  body{padding-top:0 !important; background:#fff !important}
}