:root{--orange:#f05a0a;--soft:#fff2ea;--bg:#f8f6f3;--line:#e7e1da;--text:#202020;--muted:#777;--danger:#c63d23;--ok:#2f8a3a;--warn:#9b6500;--shadow:0 16px 40px rgba(30,30,30,.08)}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh;background:var(--bg);font-family:Inter,system-ui,sans-serif;color:var(--text)}.sidebar{width:250px;background:#fff;border-right:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}.brand{background:#222;border-radius:20px;padding:16px;margin-bottom:20px}.brand img{width:100%;display:block}.nav{border:0;background:transparent;text-align:left;padding:14px 16px;border-radius:14px;font-weight:800;cursor:pointer}.nav.active,.nav:hover{background:var(--orange);color:white}main{flex:1;padding:34px;overflow:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:20px}h1,h2,h3,p{margin-top:0}p,small{color:var(--muted)}button,select,input{border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 13px;font-weight:800}button{cursor:pointer}.primary{background:var(--orange);border-color:var(--orange);color:#fff}.view{display:none}.view.active{display:block}.cards{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:18px;margin-bottom:18px}.card,.panel,.notice{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.card{border-top:5px solid var(--orange)}.card strong{display:block;font-size:28px;margin:8px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.toolbar{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;margin-bottom:18px;display:flex;gap:12px;align-items:end;box-shadow:var(--shadow);flex-wrap:wrap}.toolbar label,.form label{display:grid;gap:6px;color:var(--muted);font-weight:800;font-size:13px}.form{display:grid;gap:14px}.time-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checks{display:flex;gap:10px;flex-wrap:wrap}.checks label{display:flex;align-items:center;gap:6px;color:var(--text)}#splitRow{display:none}.band{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end}.notice{display:none;margin-bottom:18px}.notice.show{display:block}.notice.ok{color:var(--ok);background:#edf8ef}.notice.warn{color:var(--warn);background:#fff8e8}.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);margin-bottom:22px}table{width:100%;border-collapse:collapse;min-width:900px}.simple{min-width:0}th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#fff8f4}.shift{display:inline-block;background:var(--soft);color:var(--orange);border-radius:999px;padding:7px 10px;font-weight:900}.muted{color:#aaa;font-weight:800}.note{display:block;color:var(--muted);font-size:12px;margin-top:6px}.hours{display:inline-block;border-radius:999px;padding:7px 10px;background:#eee;font-weight:900}.hours.ok{background:#edf8ef;color:var(--ok)}.hours.over{background:#fff0ec;color:var(--danger)}.days{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:14px;overflow-x:auto}.day{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow);min-height:170px}.person{background:#fff8f4;border-left:4px solid var(--orange);padding:10px;border-radius:12px;margin-bottom:10px}.issue{padding:12px;border-radius:14px;margin-bottom:10px;background:#f5f5f5}.issue.ok{background:#edf8ef;color:var(--ok)}.issue.warn{background:#fff8e8;color:var(--warn)}.issue.danger{background:#fff0ec;color:var(--danger)}.progressrow{margin-bottom:14px}.progressrow header{display:flex;justify-content:space-between;font-weight:800;margin-bottom:6px}.progress{height:10px;background:#eee;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--orange)}.storecards{display:grid;gap:18px}.tag{display:inline-block;background:var(--soft);color:var(--orange);padding:8px 10px;border-radius:999px;font-weight:800;margin:4px}.delete{color:var(--danger);padding:8px 10px}@media(max-width:900px){body{display:block}.sidebar{width:100%}.cards,.grid2{grid-template-columns:1fr}header{display:grid}}

/* V8.4 compatto */
body { font-size: 13px; }
main { padding: 24px; }
.sidebar { width: 220px; padding: 18px; }
.brand { padding: 12px; border-radius: 16px; }
.nav { padding: 11px 13px; font-size: 13px; }
header { margin-bottom: 18px; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
.card, .panel, .notice { padding: 16px; border-radius: 18px; }
.card strong { font-size: 22px; }
.toolbar { padding: 13px; border-radius: 18px; }
button, select, input { padding: 8px 10px; border-radius: 10px; font-size: 12px; }
th, td { padding: 9px; font-size: 12px; }
.shift { padding: 5px 8px; font-size: 12px; }
.note { font-size: 11px; margin-top: 4px; }
.day { padding: 12px; min-height: 135px; border-radius: 16px; }
.person { padding: 8px; margin-bottom: 7px; font-size: 12px; }
.days { grid-template-columns: repeat(7, minmax(145px,1fr)); gap: 10px; }
.cards, .grid2 { gap: 12px; }
.progressrow { margin-bottom: 10px; }


/* V9.0 modifica manuale */
.editable-cell { cursor: pointer; }
.editable-cell:hover { background: #fff8f4; }
.dialog-card {
  min-width: min(430px, 92vw);
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  display: grid;
  gap: 12px;
}
.dialog-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
dialog {
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: rgba(0,0,0,.25);
}


/* V9.1 fix click modifica */
.editable-cell,
.editable-person {
  cursor: pointer;
}
.editable-cell:hover,
.editable-person:hover {
  background: #fff2ea;
}


/* V9.2 avvisi nella sezione Turni */
.turni-issues-panel {
  margin-bottom: 14px;
}
.dashboard-only-hours {
  grid-template-columns: 1fr;
}

.profile-cards{display:grid;gap:8px}.profile-card{border:1px solid var(--line);background:#fff8f4;border-radius:14px;padding:10px;display:grid;gap:4px}.profile-card strong{color:var(--orange)}.profile-card span,.profile-card small{color:var(--muted)}

/* V13 anagrafiche/profili */
.checkbox-list{display:grid;gap:8px;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.check-row{display:flex!important;align-items:center;gap:8px;color:var(--text)!important}
.profile-summary{background:#fff8f4;border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:4px}
.profile-summary strong{color:var(--orange)}
.profile-summary span{color:var(--muted)}
.form-section{display:grid;gap:14px}
.fixed-shift-fields{display:none;gap:12px}
.fixed-day{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}
.fixed-day h3{margin-bottom:10px;color:var(--orange)}


/* V13.1 fix visualizzazione dipendenti */
.profile-cards:empty::after {
  content: "Caricamento profili...";
  color: var(--muted);
}

/* V14 backup dati */
.sidebar-backup {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.sidebar-backup button {
  font-size: 12px;
  padding: 9px 12px;
}

/* V15 calendario settimanale */
.weeknav {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.weeknav .week-label {
  font-weight: 900;
  font-size: 15px;
  min-width: 210px;
  text-align: center;
  color: var(--text);
}
.weeknav #btnExportPng {
  margin-left: auto;
  background: var(--soft);
  color: var(--orange);
  border-color: var(--orange);
}
.weeknav #btnDashClear {
  margin-left: auto;
  color: var(--danger);
  border-color: var(--danger);
}
.shift.locked { box-shadow: inset 0 0 0 2px var(--orange); }
.lock { font-size: 11px; }

/* V16 calendario dashboard + salto settimana */
.week-jump {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.week-jump input { padding: 6px 8px; }

table.dash-week { min-width: 640px; }
table.dash-week th { text-align: center; white-space: nowrap; }
table.dash-week td { text-align: center; }
.dash-week .dc-name { text-align: left; font-weight: 800; white-space: nowrap; }
.dash-week td.dc {
  font-weight: 900;
  cursor: pointer;
  transition: filter .1s;
}
.dash-week td.dc:hover { filter: brightness(.95); }
.dash-week td.dc.ok { background: #edf8ef; color: var(--ok); }
.dash-week td.dc.gap { background: #fff0ec; color: var(--danger); }
.dash-week td.dc.closed { color: #ccc; cursor: default; background: transparent; }
.dash-week .warnmark {
  display: inline-block;
  font-weight: 900;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
  width: 15px; height: 15px;
  line-height: 15px;
  font-size: 11px;
}
.dash-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.dash-legend span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 12px; }
.dash-legend .dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.dash-legend .dot.ok { background: #cdeccf; }
.dash-legend .dot.gap { background: #f6c9bd; }
.dash-legend .dot.closed { background: #e7e1da; }

/* V17 vista dipendente "Il mio turno" */
.emp-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.emp-summary:empty { display: none; }
.emp-summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.emp-summary-head strong { font-size: 18px; }
.emp-summary-stores { display: flex; flex-wrap: wrap; gap: 4px; }
#empViewDays .day .person { border-left-color: var(--orange); }
#empViewDays .day .person strong { display: block; color: var(--orange); }
#empViewDays .day .person .note { margin-top: 2px; }

/* V18 UX mobile */
/* Il pulsante hamburger esiste solo su mobile. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  main { padding: 16px; }

  /* Sidebar: barra in alto con logo + hamburger; le voci compaiono come
     menù a tendina solo quando si apre, senza spingere giù il contenuto. */
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .sidebar .brand { margin: 0; padding: 5px 8px; flex: 0 0 auto; }
  .sidebar .brand img { width: 84px; }

  .nav-toggle {
    display: block;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 15px;
    padding: 10px 16px;
  }

  /* Voci e backup: nascoste finché il menù è chiuso. */
  .sidebar .nav,
  .sidebar-backup { display: none; flex: 1 1 100%; }
  .sidebar .nav { text-align: left; }
  .sidebar-backup {
    margin: 0;
    padding: 8px 0 2px;
    border-top: 1px solid var(--line);
    flex-direction: row;
    gap: 8px;
  }
  .sidebar-backup button { flex: 1; }

  .sidebar.open .nav { display: block; }
  .sidebar.open .sidebar-backup { display: flex; }

  /* Header: titolo e pulsante impilati, pulsante a tutta larghezza. */
  header { gap: 12px; }
  header .primary { width: 100%; }

  /* Barra settimana: etichetta a riga intera, controlli sotto. */
  .weeknav { gap: 8px; }
  .weeknav .week-label { min-width: 0; flex: 1 1 100%; order: -1; }
  .week-jump { width: 100%; justify-content: space-between; }
  .weeknav #btnExportPng { margin-left: 0; }

  .toolbar { gap: 8px; }
  .toolbar > * { flex: 1 1 auto; }

  /* Tap target più comodi. */
  button, select, input { padding: 10px 12px; font-size: 13px; min-height: 40px; }

  /* Card giorno impilate invece dello scroll orizzontale a 7 colonne. */
  .days { grid-template-columns: 1fr 1fr; overflow-x: visible; }
  .day { min-height: 0; }
}

@media (max-width: 560px) {
  main { padding: 12px; }
  .days { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .weeknav button { flex: 1 1 auto; }
  .weeknav .week-label { font-size: 14px; }
  .emp-summary-head { flex-wrap: wrap; gap: 8px; }
}

/* V19 ferie / permessi / malattia */
.leave {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.leave-ferie { background: #e7f0ff; color: #1f5fbf; }
.leave-permesso { background: #fff3d6; color: #9b6500; }
.leave-malattia { background: #ffe3dd; color: var(--danger); }
.leave-tag { color: #fff; }
.leave-tag.leave-ferie { background: #2f6fd0; }
.leave-tag.leave-permesso { background: #b07d00; }
.leave-tag.leave-malattia { background: var(--danger); }

.leave-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.leave-row:last-child { border-bottom: 0; }
.leave-info { flex: 1; display: grid; gap: 2px; }
.leave-info span { color: var(--muted); font-size: 12px; }
#leaveHoursRow { display: none; }

/* V22 login / accessi */
#loginGate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body.locked #loginGate { display: flex; }
body.locked { overflow: hidden; }
.login-card {
  width: min(360px, 92vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.login-brand {
  background: #222;
  border-radius: 18px;
  padding: 14px;
  margin: 0 auto 6px;
  width: 160px;
}
.login-brand img { width: 100%; display: block; }
.login-card h2 { margin: 0; }
.login-card p { margin: 0; }
.login-card input { text-align: center; }
.login-card .primary { margin-top: 4px; }
.login-error { color: var(--danger); font-weight: 800; font-size: 13px; min-height: 16px; }
#btnLogout { color: var(--danger); }
.access-current { margin-bottom: 10px; }
.access-current strong { font-family: ui-monospace, Menlo, monospace; background: var(--soft); color: var(--orange); padding: 3px 8px; border-radius: 8px; }
.access-note p { color: var(--muted); margin: 0; }
.access-note code { background: #f0ede9; padding: 1px 5px; border-radius: 5px; }