/* ==========================================================================
   theme.css — Tema custom @Work (Bootstrap 5 + variabili proprie)
   Include questo file DOPO bootstrap.min.css in ogni pagina.
   ========================================================================== */

:root{
  --ink:        #1E2430;
  --ink-soft:   #5B6472;
  --ink-faint:  #9AA3B0;
  --bg:         #F4F5F7;
  --surface:    #FFFFFF;
  --line:       #E4E7EC;

  --brand:      #2B3A55;   /* blu-slate — colore identitario principale */
  --brand-soft: #EEF1F6;

  --accent-base:  #2B3A55; /* Info base     */
  --accent-cont:  #2E7D6B; /* Contatti      */
  --accent-lav:   #B4762A; /* Contratto     */
  --accent-inq:   #5B4B8A; /* Inquadramento */
  --accent-acc:   #7A828E; /* Accesso       */

  --ok:      #2E7D6B;
  --ok-bg:   #E7F3EF;
  --warn:    #B4762A;
  --warn-bg: #FBF0E2;
  --off:     #9AA3B0;
  --off-bg:  #EEEFF1;

  --radius: 10px;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

/* ===== Base: body come colonna flex a piena viewport (sticky footer) =====
   Serve a tenere il footer sempre ancorato in fondo nelle pagine 'app' con
   poco contenuto, e a far sì che .login-screen/.dialog-screen (flex:1 1 auto)
   occupino esattamente lo spazio residuo senza sforare la viewport. */
html, body{
  height: 100%;
  margin: 0;
}
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}
.mono{ font-family: var(--font-mono); }

/* ===== Navbar principale ===== */
.app-navbar{
  background: var(--brand) !important;
}
.app-navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .02em;
}
.app-navbar .nav-link.active{
  color: #fff !important;
  font-weight: 700;
  border-bottom: 2px solid var(--accent-cont);
}

.page{ max-width: 980px; margin: 2rem auto 4rem; padding: 0 1rem; }

/* ===== Header profilo ===== */
.profile-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,24,32,.04);
}

.meta-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding: .8rem 1.5rem; background: var(--brand-soft);
  border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-soft);
}
.meta-row .meta-item{ display:flex; flex-direction:column; line-height:1.35; }
.meta-row .meta-item span:first-child{
  text-transform: uppercase; letter-spacing:.06em; font-size:.68rem; color: var(--ink-faint);
}
.meta-row .meta-item span:last-child{ color: var(--ink); font-weight:500; }

.identity-row{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding: 1.5rem;
}

.avatar-wrap{
  position:relative; width:88px; height:88px; flex:0 0 auto;
  border-radius:50%; overflow:hidden; cursor:pointer;
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.avatar{
  width:100%; height:100%; border-radius:50%;
  background: linear-gradient(160deg, var(--brand), #445a80);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.6rem;
}
.avatar-overlay{
  position:absolute; inset:0; border-radius:50%;
  background: rgba(30,36,48,.72);
  color:#fff; display:flex; align-items:center; justify-content:center;
  gap:.3rem; font-size:.72rem; font-weight:600;
  opacity:0; transition: opacity .15s ease;
  text-decoration:none;
}
.avatar-wrap:hover .avatar-overlay,
.avatar-wrap:focus-within .avatar-overlay{ opacity:1; }

.identity-main{ flex: 1 1 260px; min-width:220px; }
.identity-main h1{
  font-size:1.55rem; font-weight:800; margin:0 0 .1rem; color: var(--ink);
  letter-spacing:-.01em;
}
.identity-main .role{ color: var(--ink-soft); font-size:.95rem; font-weight:500; }

.status-block{ text-align:right; flex: 0 0 auto; }
.status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600;
  background: var(--ok-bg); color: var(--ok);
}
.status-pill.off{ background: var(--off-bg); color: var(--off); }
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }
.status-block .assunto{ margin-top:.45rem; font-size:.8rem; color: var(--ink-soft); }
.status-block .assunto b{ color: var(--ink); font-weight:600; }
.status-block .scadenza{
  margin-top:.25rem; font-size:.76rem; font-weight:600; color: var(--warn);
  display:inline-flex; align-items:center; gap:.3rem;
}

/* ===== Barra statistiche ===== */
.stat-strip{ display:flex; border-top:1px solid var(--line); }
.stat{ flex:1; padding:.9rem 1.5rem; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .num{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.35rem; color: var(--ink); }
.stat .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint); margin-top:.1rem; }

/* ===== Sub-menu (generate_sub_menu) ===== */
.sub-menu{
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin: 1.25rem 0;
}
.sub-menu-btn{
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .85rem;
  border-radius: 999px;
  padding: .35rem 1rem;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.sub-menu-btn:hover{
  border-color: var(--brand);
  color: var(--brand);
}
.sub-menu-btn.active{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ===== Tab profilo ===== */
.nav-tabs.profile-tabs{ border-bottom:1px solid var(--line); margin-top:1.5rem; gap:.25rem; }
.profile-tabs .nav-link{
  border:none; border-bottom:2px solid transparent; color: var(--ink-soft);
  font-weight:600; font-size:.92rem; padding:.65rem .3rem; margin-right:1.5rem;
  border-radius:0;
}
.profile-tabs .nav-link.active{ color: var(--brand); border-bottom-color: var(--brand); background:transparent; }
.profile-tabs .nav-link:hover{ color: var(--brand); border-color:transparent; }

/* ===== Card informative ===== */
.info-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  border-left: 4px solid var(--card-accent, var(--brand));
  padding:1.1rem 1.3rem; height:100%;
}
.info-card h2{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--card-accent, var(--brand)); font-weight:700; margin:0 0 .9rem;
}
.info-card dl{ margin:0; }
.info-card .row-item{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; border-bottom:1px dashed var(--line); font-size:.9rem;
}
.info-card .row-item:last-of-type{ border-bottom:none; }
.info-card .row-item dt{ color: var(--ink-soft); font-weight:500; }
.info-card .row-item dd{ margin:0; color: var(--ink); font-weight:600; text-align:right; }
.info-card .row-item dd.empty{ color: var(--ink-faint); font-weight:400; font-style:italic; }

.info-card .edit-link{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:1rem;
  font-size:.8rem; font-weight:600; color: var(--card-accent, var(--brand)); text-decoration:none;
}
.info-card .edit-link:hover{ text-decoration:underline; }

.danger-zone{
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;
}
.danger-zone a{ font-size:.85rem; font-weight:600; text-decoration:none; }

footer.app-footer{
  text-align:center; font-size:.78rem; color: var(--ink-faint);
  margin-top: auto;      /* era: margin-top: 3rem;  → spinge il footer in fondo quando il contenuto è corto */
  padding-top: 3rem;     /* mantiene lo stesso respiro visivo dal contenuto quando la pagina è lunga */
}
footer.app-footer a{ color: var(--ink-soft); font-weight:600; text-decoration:none; }

/* ===== Griglia menu principale (grid_menu) ===== */
.menu-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-card:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(43,58,85,.10);
}
.menu-card-title{
  font-size: 1rem; font-weight: 700; color: var(--brand); margin: 0 0 .35rem;
}
.menu-card-desc{
  font-size: .8rem; color: var(--ink-soft); margin: 0;
}

/* ===== Banner azienda (index.php) ===== */
.company-banner{
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.3rem 1.6rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.company-banner-label{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color: rgba(255,255,255,.65); margin-bottom:.2rem;
}
.company-banner-name{
  font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing:-.01em;
}

/* ===== Card "In servizio ora" ===== */
.duty-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin-top: 2rem;
}
.duty-card-title{
  font-size: .85rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); font-weight:700; margin: 0 0 1rem;
  display:flex; align-items:center; gap:.5rem;
}
.duty-card-title i{ color: var(--ok); }

.duty-empty{ color: var(--ink-faint); font-size:.9rem; font-style:italic; margin:0; }

.duty-list{ list-style:none; margin:0; padding:0; }
.duty-item{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.duty-item:last-child{ border-bottom:none; }

.duty-avatar{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background: var(--brand-soft); color: var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:.8rem;
}

.duty-info{ display:flex; flex-direction:column; min-width:160px; flex:1 1 auto; }
.duty-name{ font-weight:600; color: var(--ink); font-size:.92rem; }
.duty-venue{ font-size:.78rem; color: var(--ink-soft); }

.duty-badges{ display:flex; gap:.35rem; flex-wrap:wrap; }
.badge.duty-badge{
  background: var(--ok-bg); color: var(--ok);
  font-weight:600; font-size:.7rem; padding:.35rem .55rem; border-radius:6px;
}

/* ===== Pagina di login ===== */
.login-screen{
  flex: 1 1 auto;   /* era: min-height: 100vh; — ora si adatta allo spazio residuo nella colonna flex del body */
  display: flex;
  flex-wrap: wrap;
}

.login-panel{
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 2rem 1.5rem;
}

.login-box{
  width: 100%;
  max-width: 380px;
  padding-bottom: 2.5rem; /* margine di sicurezza sopra il footer overlay (v. sotto) */
}

.login-brand{
  font-weight: 800; font-size: 1.1rem; color: var(--brand);
  letter-spacing: .02em; margin-bottom: 1.8rem;
}

.login-title{
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
  margin: 0 0 1.6rem; letter-spacing: -.01em;
}

.login-label{
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: .35rem;
}

.login-input{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .65rem .85rem;
  font-size: .95rem;
}
.login-input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.login-btn{
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: .6rem 1.6rem;
  border-radius: 8px;
  border: none;
}
.login-btn:hover{ background: #223047; color: #fff; }

.login-forgot{
  font-size: .82rem; color: var(--ink-soft);
  text-decoration: underline;
}
.login-forgot:hover{ color: var(--brand); }

.login-visual{
  flex: 1 1 420px;
  background: var(--brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  min-height: 320px;
}

.login-illustration{
  width: 100%;
  max-width: 320px;
  height: auto;
}

.login-visual-text{
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  font-weight: 500;
  margin-top: 2rem;
  text-align: center;
  max-width: 320px;
}

@media (max-width: 767px){
  .login-visual{ order: -1; padding: 2rem 1.5rem; min-height: 200px; }
  .login-illustration{ max-width: 200px; }
  .login-visual-text{ margin-top: 1rem; font-size: .9rem; }
}

/* ===== Layout "dialog" (finestre modali a pagina intera: cambio password, conferme, ecc.) ===== */
.dialog-screen{
  flex: 1 1 auto;   /* era: min-height: 100vh; — vedi nota su .login-screen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--bg);
  background-image: url("/images/bg-pattern.png");
  background-repeat: repeat;
}

.dialog-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20,24,32,.08);
  padding: 2rem 2.2rem 3.2rem; /* padding-bottom aumentato per lo stesso motivo di .login-box */
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* ===== Footer overlay per layout 'login'/'dialog' =====
   In questi due layout il footer non sta nel flusso: fluttua fisso in fondo
   alla viewport, sottile e semitrasparente, così .login-screen/.dialog-screen
   possono estendersi fino al bordo inferiore reale dello schermo senza che
   una fascia del colore di sfondo (--bg) interrompa il pannello colorato. */
.login-screen ~ .app-footer,
.dialog-screen ~ .app-footer{
  position: fixed;
  left: 0; right: 0; bottom: 10px;
  margin-top: 0;
  padding: .55rem 0;
  font-size: .72rem;
  background: rgba(20,24,32,.42);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  z-index: 5;
}
.login-screen ~ .app-footer a,
.dialog-screen ~ .app-footer a{
  color: #fff;
}

/* ===== Messaggi flash ===== */
.alert{
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: .9rem;
  padding: .8rem 1.1rem;
}
.alert-success{ background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.alert-warning{ background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.alert-info{ background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.alert-danger{ background: #FBE9E7; border-color: #B3261E; color: #B3261E; }

/* ===== Pagina captcha (re-login.php) ===== */
.dialog-title{
  font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0 0 .5rem;
}
.dialog-text{
  font-size: .88rem; color: var(--ink-soft); margin: 0 0 1.3rem;
}

.captcha-form{
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}

.captcha-canvas{
  border: 1px solid var(--line);
  border-radius: 8px;
}

.captcha-input{
  text-align: center;
  max-width: 160px;
}

.captcha-submit{
  width: 100%;
  max-width: 160px;
}

/* ===== Banner ragione sociale (index) ===== */
.org-banner{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}
.org-banner .label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint);
}
.org-banner .name{
  font-size:1.25rem; font-weight:800; color: var(--ink); margin:.1rem 0 0;
}

/* ===== In servizio ora (index) ===== */
.staff-onshift{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-top: 2rem;
}
.staff-onshift h2{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft);
  font-weight:700; margin: 0 0 1rem; display:flex; align-items:center; gap:.45rem;
}
.staff-onshift h2 .dot{
  width:8px; height:8px; border-radius:50%; background: var(--ok); display:inline-block;
}
.staff-row{
  display:flex; align-items:center; gap:.9rem; padding:.6rem 0; border-bottom:1px dashed var(--line);
}
.staff-row:last-child{ border-bottom:none; }
.staff-avatar{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background: linear-gradient(160deg, var(--brand), #445a80); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:.78rem;
}
.staff-info{ flex:1; min-width:0; }
.staff-name{ font-weight:600; color: var(--ink); font-size:.92rem; }
.staff-venue{ font-size:.78rem; color: var(--ink-soft); }
.staff-badges{ display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end; }
.staff-badge{
  font-size:.68rem; font-weight:600; padding:.18rem .55rem; border-radius:999px;
  background: var(--brand-soft); color: var(--brand); white-space:nowrap;
}
.staff-empty{ color: var(--ink-faint); font-size:.85rem; font-style:italic; }


/* ===== Form Bootstrap ===== */

.form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  border-color: var(--line);
  color: var(--ink);
  border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #B3261E;
}


.form-control::placeholder {
  color: #9aa5b8; /* variante desaturata/schiarita di #2B3A55 */
  opacity: 1;
}

.invalid-feedback {
  font-size: .8rem;
}


.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(20,24,32,.04);
}

.card-body {
  color: var(--ink);
}

/* ===== Flash messages come overlay "toast", non spostano il contenuto ===== */
.flash-stack{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  max-width: 480px;
  padding: 0 1rem;
  pointer-events: none;   /* lo stack non blocca i click sotto... */
}
.flash-stack .alert{
  pointer-events: auto;   /* ...ma ogni singolo alert sì (serve al bottone di chiusura) */
  box-shadow: 0 6px 20px rgba(20,24,32,.14);
}

.flash-stack--app{ top: 76px; }      /* sotto la navbar, che resta nel flusso normale */
.flash-stack--dialog{ top: 1.25rem; }
.flash-stack--bare{ top: 1.25rem; }



/* ===== Bottone primario (stesso stile di .login-btn, riusabile ovunque) ===== */
.btn-brand{
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border: none;
}
.btn-brand:hover{ background: #223047; color: #fff; }

/* ===== Badge di stato (regime, scadenza, attivo/disabilitato, ecc.) =====
   Stessa logica cromatica di .status-pill / .duty-badge, generalizzata. */
.badge-brand{ background: var(--brand-soft); color: var(--brand); font-weight:600; }
.badge-ok{    background: var(--ok-bg);      color: var(--ok);    font-weight:600; }
.badge-warn{  background: var(--warn-bg);    color: var(--warn);  font-weight:600; }
.badge-off{   background: var(--off-bg);     color: var(--off);   font-weight:600; }
.badge-danger{ background:#FBE9E7; color:#B3261E; font-weight:600; }


/* ==========================================================================
   Griglia orario (public/staff/orario.php)
   ========================================================================== */

/* ===== Navigazione settimane ===== */
.week-nav{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.week-nav a{
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
}
.week-nav a:hover{
  border-color: var(--brand);
  color: var(--brand);
}
.week-nav a.active{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.week-nav a.disabled{
  color: var(--ink-faint);
  pointer-events: none;
  border-color: var(--line);
  opacity: .5;
}

/* ===== Contenitore scrollabile della griglia ===== */
.schedule-wrapper{
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ===== Tabella griglia ===== */
.schedule-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.schedule-table th,
.schedule-table td{
  border: 1px solid var(--line);
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  font-size: .85rem;
}

/* Header di riga — sticky in alto */
.schedule-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}

/* Colonna nome — sticky a sinistra */
.schedule-table th.col-name,
.schedule-table td.col-name{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  min-width: 160px;
  width: 160px;
  font-weight: 600;
  color: var(--ink);
}

/* Colonna indicatori — sticky subito dopo i nomi */
.schedule-table th.col-indicators,
.schedule-table td.col-indicators{
  position: sticky;
  left: 160px;
  z-index: 2;
  background: var(--brand-soft);
  min-width: 90px;
  width: 90px;
}

/* Incrocio riga+colonna sticky: deve stare sopra tutto */
.schedule-table thead th.col-name,
.schedule-table thead th.col-indicators{
  z-index: 4;
  background: var(--brand-soft);
}

/* Giorni fuori dal mese selezionato */
.schedule-table td.out-of-month{
  background: var(--off-bg);
}
.schedule-table th.col-day.out-of-month{
  color: var(--ink-faint);
}
.cell-muted-day{
  color: var(--ink-faint);
  font-style: italic;
  font-size: .8rem;
}

/* Rientro sulla riga dopo redirect (ancora #emp-N) */
.schedule-table tbody tr{
  scroll-margin-top: 44px; /* ~ altezza del thead sticky */
}
.schedule-table tbody tr:hover td:not(.col-name):not(.col-indicators){
  background: var(--brand-soft);
}
.schedule-table tbody tr:target td{
  background: #fff3b0 !important;
  transition: background 2s ease;
}

/* Indicatori C / A / Δ nella colonna dedicata */
.indicator{ font-size: .75rem; line-height: 1.7; text-align: left; }
.indicator .lbl{ color: var(--ink-faint); }
.ind-ok{    color: var(--ok);   font-weight: 700; }
.ind-under{ color: var(--warn); font-weight: 700; }
.ind-over{  color: #B3261E;     font-weight: 700; }


.turno-badge, .assenza-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  min-width: 30px;
  padding: .35rem .55rem;
  border-radius: 8px;
  margin: 2px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease, box-shadow .1s ease;
}
.turno-badge:hover{
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(20,24,32,.25);
}
.turno-badge:active{
  transform: scale(.95);
}
.assenza-badge{
  background: var(--warn);
  cursor: default; /* le assenze non sono cliccabili da qui */
}


.assenza-badge{ background: var(--warn); }


/* ===== Pulsante "+" aggiungi turno ===== */
.btn-add-turno{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  vertical-align: middle;
}
.btn-add-turno:hover{ background: var(--brand); color: #fff; }

/* ===== Dialog nativo — box condiviso da turno-dialog (scelta turno) e
   giorno-dialog (editor ore giornaliere in giornata.php) ===== */
.turno-dialog,
.giorno-dialog{
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20,24,32,.16);
  padding: 1.3rem 1.5rem;
  min-width: 280px;
  max-width: 360px;
}
.turno-dialog::backdrop,
.giorno-dialog::backdrop{
  background: rgba(20,24,32,.45);
}
.turno-dialog h6,
.giorno-dialog h6{
  margin: 0 0 1rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.turno-option{
  display: block;
  font-size: .88rem;
  color: var(--ink);
  padding: .45rem 0;
  border-bottom: 1px dashed var(--line);
}
.turno-option:last-of-type{ border-bottom: none; }
.turno-option input[type="radio"]{ margin-right: .5rem; }
.turno-option .text-muted{
  color: var(--ink-faint);
  font-size: .78rem;
  margin-left: .3rem;
}
.turno-dialog-actions{
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.2rem;
}
.turno-dialog-actions button[type="button"]{
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .85rem;
}
.turno-dialog-actions button[type="button"]:hover{
  border-color: var(--ink-soft);
}

.day-hours{
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: .15rem;
}
.schedule-table th.col-day.out-of-month .day-hours{
  color: var(--ink-faint);
}


.orario-toolbar{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.btn-toolbar{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.btn-toolbar:hover{
  border-color: var(--brand);
  color: var(--brand);
}
.toolbar-status{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border-radius: 8px;
  font-size: .85rem;
}


/* ===== Backdrop dialog (editor turni/orario/giornata) ===== */
dialog{
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;

  /* Centratura esplicita via transform, non affidata al trick nativo
     (inset:0 + margin:auto): dentro contenitori con overflow/scroll e
     figli position:sticky (vedi .schedule-wrapper in orario.php) alcuni
     browser — Safari su tutti — calcolano in modo inconsistente il
     containing block della centratura automatica, facendo comparire il
     dialog vicino al punto di apertura invece che al centro viewport. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
dialog::backdrop{
  background: rgba(30,36,48,.55);
  backdrop-filter: blur(2px);
}


.stamp-link{
  text-decoration: none;
  cursor: pointer;
}
.stamp-link:hover{
  text-decoration: underline;
}

.day-link{ color: var(--ink); text-decoration: none; }
.day-link:hover{ text-decoration: underline; }