/* ─── Reset & Base ─────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:        #f0f4f8;
    --surface:   #ffffff;
    --panel:     #f8fafc;
    --border:    #e2e8f0;
    --border2:   #cbd5e1;
    --text:      #1e293b;
    --text-2:    #475569;
    --text-3:    #94a3b8;
    --primary:   #2563eb;
    --primary-l: #dbeafe;
    --danger:    #ef4444;
    --success:   #10b981;
    --accent:    #7c3aed;
    --header-h:     62px;
    --header-total: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    --side-w:    270px;
    --nav-w:     220px;
    --radius:    10px;
    --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
    --trans:     .18s ease;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-y: none; /* impedisce a iOS PWA di intercettare il gesto verso il basso */
  }

  /* ─── Header ───────────────────────────────────────────────────── */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-total);
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
    display: flex; align-items: center; gap: 16px;
    padding: env(safe-area-inset-top, 0px) 20px 0;
    box-shadow: 0 2px 12px rgba(37,99,235,.35);
  }
  .logo {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none; flex-shrink: 0;
  }
  .logo-icon {
    width: 36px; height: 36px; background: rgba(255,255,255,.2);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .logo-text { line-height: 1.1; }
  .logo-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
  .logo-sub { font-size: 11px; opacity: .75; font-weight: 400; }

  .header-center {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .week-nav {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); border-radius: 8px; padding: 4px;
  }
  .week-nav button {
    width: 30px; height: 30px; border: none; cursor: pointer;
    background: transparent; border-radius: 6px; color: #fff;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  .week-nav button:hover { background: rgba(255,255,255,.2); }
  #week-label {
    color: #fff; font-weight: 600; font-size: 14px;
    min-width: 200px; text-align: center;
  }
  .btn-today {
    padding: 6px 14px; border: none; cursor: pointer;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 6px; font-size: 13px; font-weight: 500;
    transition: background var(--trans);
  }
  .btn-today:hover { background: rgba(255,255,255,.3); }

  .header-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .btn-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: none; cursor: pointer;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 8px; font-size: 13px; font-weight: 500;
    transition: background var(--trans); white-space: nowrap;
  }
  .btn-hdr:hover { background: rgba(255,255,255,.3); }

  /* ─── Layout ───────────────────────────────────────────────────── */
  .app-body {
    display: flex;
    margin-top: var(--header-total);
    min-height: calc(100vh - var(--header-total));
  }

  /* ─── Sidebar ──────────────────────────────────────────────────── */
  aside {
    width: var(--side-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: fixed; top: var(--header-total); left: 0;
    bottom: 0; overflow-y: auto;
  }

  .side-section { padding: 16px; border-bottom: 1px solid var(--border); }
  .side-section:last-child { border-bottom: none; }

  .side-title {
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--text-3);
    margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
  }
  .btn-add-sm {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--primary); color: #fff; border: none;
    cursor: pointer; font-size: 16px; display: flex;
    align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  .btn-add-sm:hover { background: #1d4ed8; }

  /* Residents */
  .resident-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 8px;
    cursor: default; margin-bottom: 2px;
    transition: background var(--trans);
    position: relative;
  }
  .resident-item:hover { background: var(--panel); }
  .resident-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0;
  }
  .resident-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
  .resident-year { font-size: 11px; color: var(--text-3); }
  .resident-del {
    width: 20px; height: 20px; border-radius: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--text-3); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--trans), color var(--trans);
  }
  .resident-item:hover .resident-del { opacity: 1; }
  .resident-del:hover { color: var(--danger); }

  /* Locations */
  .loc-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 8px;
    cursor: pointer; margin-bottom: 2px;
    transition: background var(--trans);
  }
  .loc-item:hover { background: var(--panel); }
  .loc-dot {
    width: 12px; height: 12px; border-radius: 50%;
    flex-shrink: 0;
  }
  .loc-name { font-size: 13px; font-weight: 500; flex: 1; }
  .loc-type { font-size: 11px; color: var(--text-3); }
  .loc-min-badge {
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 10px; background: var(--border); color: var(--text-3);
    white-space: nowrap; flex-shrink: 0;
  }
  .loc-min-badge.has-min { background: #fef3c7; color: #d97706; }
  .loc-del {
    width: 20px; height: 20px; border-radius: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--text-3); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--trans), color var(--trans);
  }
  .loc-item:hover .loc-del { opacity: 1; }
  .loc-del:hover { color: var(--danger); }

  /* Coverage panel */
  .coverage-wrap {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; margin-top: 16px;
    min-width: 780px;
  }
  .coverage-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: var(--panel); cursor: pointer;
    user-select: none;
  }
  .coverage-title { font-size: 14px; font-weight: 700; flex: 1; }
  .coverage-toggle { font-size: 12px; color: var(--text-3); }
  .coverage-body { overflow-x: auto; }
  .cov-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
  }
  .cov-table th, .cov-table td {
    border: 1px solid var(--border); padding: 7px 10px; text-align: center;
  }
  .cov-table th { background: #f1f5f9; font-weight: 600; font-size: 11px; color: var(--text-2); }
  .cov-table th.loc-th { text-align: left; min-width: 140px; }
  .cov-cell { font-weight: 600; border-radius: 6px; padding: 4px 8px; display: inline-block; }
  .cov-ok   { background: #d1fae5; color: #065f46; }
  .cov-warn { background: #fee2e2; color: #991b1b; }
  .cov-none { background: var(--bg); color: var(--text-3); font-weight: 400; }
  .cov-nomin { color: var(--text-3); }

  /* Day header warning badge */
  .day-warn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700; margin-left: 4px;
    vertical-align: middle; flex-shrink: 0;
  }
  .gh-day-row1 { display: flex; align-items: center; justify-content: center; gap: 2px; }

  /* Stats */
  .stat-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .stat-badge {
    padding: 4px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 500;
    background: var(--primary-l); color: var(--primary);
  }

  /* ─── Main Grid ─────────────────────────────────────────────────── */
  main {
    margin-left: var(--side-w);
    flex: 1; padding: 20px;
    overflow-x: auto;
  }

  /* Wrapper scroll per la griglia turni */
  .grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .grid-wrap {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;      /* mantiene border-radius senza bloccare lo scroll del parent */
    min-width: 780px;
  }

  /* Day header row */
  .grid-head {
    display: grid;
    background: #f1f5f9;
    border-bottom: 2px solid var(--border);
    position: sticky; top: 0; z-index: 10;
  }
  .gh-corner {
    padding: 12px 14px;
    border-right: 1px solid var(--border);
    display: flex; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .4px;
  }
  .gh-day {
    padding: 8px 6px;
    border-right: 1px solid var(--border);
    text-align: center;
  }
  .gh-day:last-child { border-right: none; }
  .gh-day-name {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-3);
  }
  .gh-day-date {
    font-size: 20px; font-weight: 700; color: var(--text);
    line-height: 1.2; margin: 2px 0;
  }
  .gh-day-date.today {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 2px auto;
  }

  /* Resident rows */
  .grid-row {
    display: grid;
    border-bottom: 1px solid var(--border);
    transition: background var(--trans);
  }
  .grid-row:last-child { border-bottom: none; }
  .grid-row:hover { background: #fafcff; }

  .gr-label {
    padding: 6px 10px;
    border-right: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    min-height: 64px; position: sticky; left: 0;
    background: inherit; z-index: 1;
  }
  .gr-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    flex-shrink: 0;
  }
  .gr-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
  .gr-year { font-size: 10px; color: var(--text-3); }

  /* Day cell */
  .gr-day {
    border-right: 1px solid var(--border);
    padding: 4px;
    min-height: 64px;
    min-width: 0;
    overflow: hidden;
  }
  .gr-day:last-child { border-right: none; }

  /* Single slot */
  .slot {
    border-radius: 7px;
    min-height: 56px;
    padding: 4px 5px;
    position: relative;
    transition: transform .12s, box-shadow .12s, opacity .15s;
    cursor: default;
    user-select: none;
    display: flex; flex-direction: column; justify-content: center;
    border: 1.5px solid transparent;
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
  }
  .slot.empty {
    background: var(--bg);
    border: 1.5px dashed var(--border2);
    cursor: pointer;
  }
  .slot.empty:hover {
    border-color: var(--primary);
    background: var(--primary-l);
  }
  .slot.filled {
    cursor: grab;
  }
  .slot.filled:active { cursor: grabbing; }
  .slot.drag-over {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
    transform: scale(1.03);
  }
  .slot.dragging {
    opacity: .45;
    transform: scale(.97);
  }
  .slot-loc { font-weight: 600; font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .slot-type { font-size: 9px; opacity: .7; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .slot-clear {
    position: absolute; top: 3px; right: 3px;
    width: 16px; height: 16px; border-radius: 3px;
    background: rgba(0,0,0,.15); border: none; cursor: pointer;
    color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--trans);
  }
  .slot:hover .slot-clear { opacity: 1; }

  /* Weekend */
  .gr-day.weekend { background: #fef9f0; }
  .gh-day.weekend .gh-day-name { color: #d97706; }

  /* ─── Modals ────────────────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .modal {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 28px;
    width: 420px; max-width: calc(100vw - 40px);
    transform: translateY(12px) scale(.97);
    transition: transform .2s;
  }
  .modal-overlay.open .modal { transform: none; }

  .modal-title {
    font-size: 18px; font-weight: 700; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
  }
  .modal-title span { font-size: 22px; }
  .modal-close {
    margin-left: auto; width: 28px; height: 28px;
    border: none; background: var(--border); border-radius: 6px;
    cursor: pointer; font-size: 16px; color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  .modal-close:hover { background: var(--border2); }

  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 13px; font-weight: 600; margin-bottom: 5px; display: block; }
  .form-input, .form-select {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 14px;
    background: var(--panel); color: var(--text);
    outline: none; transition: border-color var(--trans);
    font-family: inherit;
  }
  .form-input:focus, .form-select:focus { border-color: var(--primary); }

  .color-picker-row {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .color-swatch {
    width: 28px; height: 28px; border-radius: 6px;
    cursor: pointer; border: 2px solid transparent;
    transition: border-color var(--trans), transform var(--trans);
  }
  .color-swatch.selected { border-color: var(--text); transform: scale(1.12); }

  .form-row { display: flex; gap: 10px; }
  .form-row .form-group { flex: 1; }

  .btn-primary {
    width: 100%; padding: 10px;
    background: var(--primary); color: #fff; border: none;
    border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background var(--trans);
    font-family: inherit;
  }
  .btn-primary:hover { background: #1d4ed8; }

  /* Assign modal slot picker */
  .loc-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 16px; max-height: 320px; overflow-y: auto;
  }
  .loc-option {
    padding: 10px 12px; border-radius: 8px;
    cursor: pointer; border: 2px solid transparent;
    transition: all var(--trans); display: flex; align-items: center; gap: 8px;
  }
  .loc-option:hover { opacity: .85; }
  .loc-option.selected { border-color: var(--text) !important; }
  .loc-option-name { font-size: 13px; font-weight: 600; }
  .loc-option-type { font-size: 11px; opacity: .7; }

  /* ─── Toolbar ───────────────────────────────────────────────────── */
  .toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; flex-wrap: wrap;
  }
  .toolbar-title {
    font-size: 20px; font-weight: 700; flex: 1;
  }
  .btn-outline {
    padding: 7px 14px; border: 1.5px solid var(--border2);
    background: var(--surface); color: var(--text);
    border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all var(--trans);
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-family: inherit;
  }
  .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

  .view-tabs {
    display: flex; gap: 2px; background: var(--border); padding: 3px; border-radius: 8px;
  }
  .view-tab {
    padding: 5px 14px; border: none; background: none;
    border-radius: 6px; font-size: 13px; font-weight: 500;
    cursor: pointer; color: var(--text-2);
    transition: all var(--trans); font-family: inherit;
  }
  .view-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

  /* ─── Empty state ──────────────────────────────────────────────── */
  .empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--text-3);
  }
  .empty-icon { font-size: 48px; margin-bottom: 12px; }
  .empty-title { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
  .empty-desc { font-size: 14px; }

  /* ─── Legend bar ────────────────────────────────────────────────── */
  .legend-bar {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--panel); border-radius: 0 0 var(--radius) var(--radius);
  }
  .legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-2);
  }
  .legend-dot { width: 10px; height: 10px; border-radius: 50%; }

  /* ─── Toast ─────────────────────────────────────────────────────── */
  #toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e293b; color: #fff;
    padding: 10px 20px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: all .3s; z-index: 9999; white-space: nowrap;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ─── Scrollbar ─────────────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

  /* Highlight row of resident being dragged */
  .slot[data-resident-id].dragging-source-row .gr-day { background: #f0f7ff; }

  /* ─── Export dropdown ──────────────────────────────────────────── */
  .dropdown { position: relative; }
  .dropdown-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-lg);
    min-width: 210px; z-index: 300; overflow: hidden;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s;
  }
  .dropdown.open .dropdown-menu { opacity: 1; pointer-events: all; transform: none; }
  .dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; color: var(--text);
    transition: background var(--trans);
  }
  .dd-item:hover { background: var(--panel); }
  .dd-item .dd-icon { font-size: 16px; width: 20px; text-align: center; }
  .dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
  .dd-label {
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-3);
    padding: 8px 16px 4px;
  }

  /* Day pills */
  .day-pills { display: flex; gap: 5px; flex-wrap: wrap; }
  .day-pill {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--border2);
    background: var(--panel); color: var(--text-2);
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--trans); user-select: none;
  }
  .day-pill.active {
    background: var(--primary); border-color: var(--primary);
    color: #fff;
  }
  .day-pill.weekend-pill.active { background: #d97706; border-color: #d97706; }

  /* Inactive slot */
  .slot.inactive {
    background: repeating-linear-gradient(
      45deg, transparent, transparent 4px,
      rgba(0,0,0,.03) 4px, rgba(0,0,0,.03) 8px
    );
    border: 1.5px dashed var(--border);
    cursor: not-allowed; opacity: .5;
  }
  .slot.inactive:hover { border-color: var(--border); background: inherit; }

  /* Auto-generate button */
  .btn-autogen {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff; border-radius: 8px; font-size: 13px;
    font-weight: 600; transition: opacity var(--trans);
    font-family: inherit; white-space: nowrap;
  }
  .btn-autogen:hover { opacity: .88; }

  /* Toggle switch */
  .toggle-track {
    width: 40px; height: 22px; border-radius: 11px;
    background: var(--border2); position: relative;
    transition: background var(--trans); flex-shrink: 0;
  }
  .toggle-track.on { background: var(--primary); }
  .toggle-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; position: absolute; top: 2px; left: 2px;
    transition: left var(--trans); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  }
  .toggle-track.on .toggle-thumb { left: 20px; }

  /* Manual-only badge in sidebar */
  .manual-badge {
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 8px; background: #ede9fe; color: #6d28d9;
    white-space: nowrap; flex-shrink: 0; letter-spacing: .2px;
  }

  /* Help modal */
  .help-modal { width: 620px; max-height: 80vh; overflow-y: auto; }
  .help-section { margin-bottom: 20px; }
  .help-section h3 {
    font-size: 13px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  }
  .help-section p, .help-section li {
    font-size: 13px; color: var(--text-2); line-height: 1.6;
  }
  .help-section ul { padding-left: 18px; }
  .help-section li { margin-bottom: 4px; }
  .help-kbd {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    background: var(--border); border: 1px solid var(--border2);
    font-size: 11px; font-family: monospace; color: var(--text);
  }
  .help-sep { height: 1px; background: var(--border); margin: 16px 0; }

  /* ICS modal resident picker */
  .ics-resident-list { max-height: 260px; overflow-y: auto; margin-bottom: 14px; }
  .ics-res-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--border); margin-bottom: 6px;
    transition: all var(--trans);
  }
  .ics-res-item.selected { border-color: var(--primary); background: var(--primary-l); }
  .ics-res-item:hover { border-color: var(--border2); }
  .ics-res-item.selected:hover { border-color: var(--primary); }

  /* ─── Auth: login screen ───────────────────────────────────────── */
  #login-screen {
    position: fixed; inset: 0; z-index: 1000;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
    display: flex; align-items: center; justify-content: center;
  }
  #login-screen.hidden { display: none; }
  .login-box {
    background: #fff; border-radius: 18px; padding: 36px 32px;
    width: 360px; max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
  .login-logo { text-align: center; font-size: 40px; margin-bottom: 8px; }
  .login-title { text-align: center; font-size: 20px; font-weight: 800; color: #1e40af; margin-bottom: 4px; }
  .login-sub { text-align: center; font-size: 12px; color: var(--text-3); margin-bottom: 24px; }
  .login-error { color: var(--danger); font-size: 12px; text-align: center; margin-bottom: 10px; min-height: 18px; }

  /* ─── Auth: user badge in header ───────────────────────────────── */
  .user-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); border-radius: 8px;
    padding: 5px 10px; cursor: pointer; flex-shrink: 0;
    transition: background var(--trans);
  }
  .user-badge:hover { background: rgba(255,255,255,.25); }
  .user-avatar-hdr {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .user-name-hdr { font-size: 12px; font-weight: 600; color: #fff; }
  .user-role-hdr { font-size: 10px; color: rgba(255,255,255,.7); }

  /* ─── Audit log ─────────────────────────────────────────────────── */
  .audit-entry {
    display: flex; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--border); font-size: 12px;
  }
  .audit-entry:last-child { border-bottom: none; }
  .audit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 4px; }
  .audit-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
  .audit-body { flex: 1; min-width: 0; }
  .audit-list { max-height: 420px; overflow-y: auto; }

  /* ─── User management ───────────────────────────────────────────── */
  .user-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
    background: var(--panel); cursor: pointer; transition: background var(--trans);
  }
  .user-row:hover { background: var(--border); }
  .user-row-name { font-size: 13px; font-weight: 600; flex: 1; }
  .user-row-meta { font-size: 11px; color: var(--text-3); }
  .role-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  }
  .role-badge.admin    { background: #dbeafe; color: #1d4ed8; }
  .role-badge.teacher  { background: #ede9fe; color: #5b21b6; }
  .role-badge.resident { background: #d1fae5; color: #065f46; }

  /* ─── View switching ──────────────────────────────────────────── */
  #dashboard-screen,
  #module-turni,
  #module-consegne,
  #module-mount > [id^="module-"] { display: none; }

  #module-mount { margin-top: var(--header-total); }
  #module-mount > [id^="module-"] { padding-bottom: 48px; }

  body[data-view="dashboard"] #dashboard-screen { display: block; }
  body[data-view="turni"]     #module-turni     { display: block; }
  body[data-view="consegne"]  #module-consegne  { display: block; }

  /* header-center and turni-specific header buttons: only in turni */
  .turni-header-only { display: none !important; }
  body[data-view="turni"] .turni-header-only { display: flex !important; }

  /* Back-to-dashboard button: hidden on dashboard */
  #btn-back-dash { display: none; }
  body[data-view="turni"]    #btn-back-dash,
  body[data-view="consegne"] #btn-back-dash { display: flex; }

  /* Module title in header */
  #header-module-title { display: none; font-size:16px; font-weight:700; color: #fff; letter-spacing:-.2px; }
  body[data-view="turni"]    #header-module-title,
  body[data-view="consegne"] #header-module-title { display: block; }

  /* Logo text: hide subtitle inside module views on mobile */
  body[data-view="turni"] .logo-text,
  body[data-view="consegne"] .logo-text { display: none; }

  body[data-view="turni"] .logo-sub,
  body[data-view="consegne"] .logo-sub { display: none; }

  /* ─── Dashboard ────────────────────────────────────────────────── */
  #dashboard-screen {
    margin-top: var(--header-total);
    min-height: calc(100vh - var(--header-total));
    padding: 36px 24px;
    background: var(--bg);
  }

  /* Dashboard summary widget */
  .dash-summary {
    max-width: 960px; margin: 0 auto 28px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 20px 24px;
  }
  .dash-summary-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-3); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .dash-summary-title a {
    font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 600; text-transform: none; letter-spacing: 0;
  }
  .dash-cons-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .12s; border-radius: 6px; padding-left: 6px;
  }
  .dash-cons-row:last-child { border-bottom: none; }
  .dash-cons-row:hover { background: var(--panel); }
  .dash-cons-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .dash-cons-text { flex: 1; min-width: 0; }
  .dash-cons-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-cons-sub  { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-cons-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
  .dash-empty-cons { font-size: 13px; color: var(--text-3); text-align: center; padding: 12px 0; }

  .dash-welcome {
    text-align: center;
    margin-bottom: 36px;
  }
  .dash-welcome h2 {
    font-size: 22px; font-weight: 700; color: var(--text);
    margin-bottom: 6px;
  }
  .dash-welcome p { font-size: 14px; color: var(--text-3); }

  .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
  }

  .module-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px 20px;
    display: flex; flex-direction: column; gap: 12px;
    cursor: grab;
    transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
    user-select: none;
  }
  .module-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border2); transform: translateY(-2px); }
  .module-card.dragging { opacity: .45; cursor: grabbing; transform: scale(.97); }
  .module-card.drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }

  .card-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
  }
  .card-name { font-size: 17px; font-weight: 700; color: var(--text); }
  .card-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; flex: 1; }
  .card-open {
    margin-top: 4px;
    padding: 9px 0; border: none; border-radius: 9px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: opacity var(--trans);
    color: #fff;
  }
  .card-open:hover { opacity: .88; }

  /* ─── Consegne module ──────────────────────────────────────────── */
  #module-consegne {
    margin-top: var(--header-total);
    min-height: calc(100vh - var(--header-total));
    background: var(--bg);
    flex-direction: column;
  }
  body[data-view="consegne"] #module-consegne { display: flex; }

  .consegne-body {
    flex: 1;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex; flex-direction: column; gap: 16px;
  }

  .consegne-new {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .consegne-new textarea {
    width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
    padding: 10px 12px; font-size: 14px; resize: vertical; min-height: 80px;
    font-family: inherit; color: var(--text); background: var(--panel);
    transition: border-color var(--trans);
  }
  .consegne-new textarea:focus { outline: none; border-color: var(--primary); }
  .consegne-new-row { display: flex; gap: 10px; align-items: flex-end; }
  .cat-item { display:flex; align-items:center; gap:6px; background:var(--panel2,#f1f5f9); border:1.5px solid var(--border); border-radius:20px; padding:4px 10px 4px 12px; font-size:13px; font-weight:600; color:var(--text); }
  .cat-del { background:none; border:none; cursor:pointer; color:var(--text-3); font-size:13px; line-height:1; padding:0 2px; }
  .cat-del:hover { color:#ef4444; }
  .cons-done-section { margin-top:24px; border:1.5px solid #86efac; border-radius:14px; overflow:hidden; }
  .cons-done-summary { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; background:#f0fdf4; font-size:14px; font-weight:700; color:#16a34a; list-style:none; user-select:none; }
  .cons-done-summary::-webkit-details-marker { display:none; }
  .cons-done-summary::after { content:'›'; font-size:18px; transition:transform .2s; display:inline-block; }
  details[open] .cons-done-summary::after { transform:rotate(90deg); }
  .cons-done-count { background:#16a34a; color:#fff; font-size:11px; font-weight:700; border-radius:20px; padding:2px 9px; }
  .cons-done-list { padding:8px 0; }

  .consegna-entry {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
  }
  .consegna-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
  }
  .consegna-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .consegna-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .consegna-author { font-size: 13px; font-weight: 600; color: var(--text); }
  .consegna-ts { font-size: 12px; color: var(--text-3); }
  .consegna-body-text { font-size: 14px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }
  .consegna-tag {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600; background: var(--primary-l); color: var(--primary);
  }
  .consegna-del {
    background: none; border: none; cursor: pointer;
    color: var(--text-3); font-size: 16px; padding: 2px 6px; border-radius: 6px;
    flex-shrink: 0; transition: color var(--trans), background var(--trans);
  }
  .consegna-del:hover { color: var(--danger); background: #fee2e2; }

  .consegne-empty {
    text-align: center; padding: 48px 0;
    color: var(--text-3); font-size: 15px;
  }
  /* Priority toggle */
  .priority-toggle { display:flex; border-radius:8px; overflow:hidden; border:1.5px solid var(--border); flex-shrink:0; }
  .pri-btn { padding:8px 14px; border:none; cursor:pointer; font-size:12px; font-weight:600;
             background:var(--panel); color:var(--text-3); transition:background .15s,color .15s; }
  .pri-btn.active.pri-urgent { background:#fef2f2; color:#ef4444; }
  .pri-btn.active.pri-normal { background:#fefce8; color:#ca8a04; }
  .pri-btn:not(.active):hover { background:var(--border); }

  /* Priority left border on cards */
  .consegna-entry { border-left: 4px solid #f59e0b; }
  .consegna-entry.priority-urgent { border-left-color: #ef4444; }
  .consegna-entry.priority-normal { border-left-color: #f59e0b; }
  .consegna-entry.completed { border-left-color: #16a34a !important; }

  .consegna-entry.completed {
    opacity: .75; border-color: #86efac; background: #f0fdf4;
  }
  .consegna-entry.completed .consegna-body-text {
    text-decoration: line-through; color: var(--text-3);
  }

  /* Commenti consegne */
  .cons-comment-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-3); background: none; border: none;
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
    transition: color var(--trans), background var(--trans);
  }
  .cons-comment-btn:hover { color: var(--primary); background: var(--primary-l); }
  .cons-comment-btn.has-comments { color: var(--primary); font-weight: 600; }
  .modal-comments-thread {
    max-height: 320px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 14px; padding-right: 4px;
  }
  .comment-item {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 12px; position: relative;
  }
  .comment-author { font-size: 12px; font-weight: 700; color: var(--text); }
  .comment-ts     { font-size: 11px; color: var(--text-3); margin-left: 6px; }
  .comment-body   { font-size: 13px; color: var(--text-2); margin-top: 4px; white-space: pre-wrap; }
  .comment-del    {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; cursor: pointer; color: var(--text-3);
    font-size: 14px; padding: 2px 5px; border-radius: 5px;
  }
  .comment-del:hover { color: var(--danger); background: #fee2e2; }
  .comment-empty  { text-align: center; color: var(--text-3); font-size: 13px; padding: 20px 0; }
  .comment-form   { display: flex; flex-direction: column; gap: 8px; }
  .comment-form textarea {
    width: 100%; box-sizing: border-box; resize: none;
    border: 1.5px solid var(--border); border-radius: 8px;
    padding: 8px 10px; font-size: 13px; font-family: inherit; min-height: 60px;
    background: var(--panel); color: var(--text);
  }
  .comment-form textarea:focus { outline: none; border-color: var(--primary); }
  .comment-form .btn-primary { align-self: flex-end; padding: 8px 20px; width: auto; }

  /* Push notification banner */
  #push-banner {
    display: none; align-items: center; gap: 10px; justify-content: space-between;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 10px 14px; margin: 12px 0 0; font-size: 13px; color: #1e40af;
  }
  #push-banner.visible { display: flex; }
  #push-banner button { font-size: 12px; padding: 5px 12px; }
  /* Branding modal */
  .branding-section { margin-bottom: 20px; }
  .branding-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-3); margin-bottom: 10px; }
  .branding-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .branding-row label { font-size: 13px; color: var(--text-2); min-width: 130px; flex-shrink: 0; }
  .branding-row input[type=text], .branding-row input[type=url] {
    flex: 1; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 13px; background: var(--panel); color: var(--text); font-family: inherit; }
  .branding-row input[type=color] { width: 44px; height: 36px; border: 1.5px solid var(--border);
    border-radius: 8px; cursor: pointer; padding: 2px; background: var(--panel); }
  .branding-preview { display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); margin-top: 8px; }
  .branding-preview-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background:#fff; padding:2px; }
  .addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .addon-card { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
    display: flex; align-items: center; gap: 10px; cursor: default; transition: border-color .15s, background .15s; }
  .addon-card.active { border-color: var(--primary); background: var(--primary-l); }
  .addon-card.clickable { cursor: pointer; }
  .addon-card.clickable:hover { border-color: var(--primary); }
  .addon-card-icon { font-size: 22px; }
  .addon-card-info { flex: 1; min-width: 0; }
  .addon-card-name { font-size: 13px; font-weight: 700; color: var(--text); }
  .addon-card-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }
  @media(max-width:500px) { .addon-grid { grid-template-columns: 1fr; } .branding-row { flex-direction: column; align-items: flex-start; } .branding-row label { min-width: 0; } }
  .consegna-completed-info {
    margin-top: 10px; font-size: 12px; color: #16a34a;
    display: flex; align-items: center; gap: 6px;
  }
  .btn-complete {
    background: none; border: 2px solid var(--border2);
    border-radius: 50%; width: 28px; height: 28px;
    cursor: pointer; font-size: 14px; color: var(--text-3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: border-color .15s, background .15s, color .15s;
  }
  .btn-complete:hover:not(.done) { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
  .btn-complete.done { border-color: #16a34a; background: #16a34a; color: #fff; cursor: default; }

  /* Admin-only elements hidden for non-admins */
  .admin-only { display: none !important; }
  body.is-admin .admin-only { display: initial !important; }
  body.is-admin .admin-only.flex-item { display: flex !important; }
  /* hide turni-only elements outside turni view, even for admin */
  body.is-admin:not([data-view="turni"]) .turni-header-only { display: none !important; }
  /* Utenti in attesa approvazione: nasconde sidebar e moduli */
  body.is-pending .sidebar,
  body.is-pending .main-content { display: none !important; }
  body.is-pending #pending-approval-screen { display: flex !important; }

  /* ─── Hamburger (mobile only) ───────────────────────────────────── */
  .btn-hamburger {
    display: none;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,.2); border: none; cursor: pointer;
    color: #fff; font-size: 20px; flex-shrink: 0;
    align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  .btn-hamburger:hover { background: rgba(255,255,255,.3); }

  /* Sidebar backdrop overlay */
  #sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 90;
    background: rgba(15,23,42,.4); backdrop-filter: blur(2px);
  }
  #sidebar-backdrop.open { display: block; }

  /* Sidebar close button (mobile) */
  .sidebar-close {
    display: none; position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--border); border: none; cursor: pointer;
    font-size: 16px; color: var(--text-2);
    align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  .sidebar-close:hover { background: var(--border2); }

  /* ─── Responsive: tablet ────────────────────────────────────────── */
  @media (max-width: 900px) {
    :root { --side-w: 230px; }
    .logo-sub { display: none; }
    .btn-hdr span, .header-label { display: none; }
  }

  /* ─── Responsive: mobile ────────────────────────────────────────── */
  @media (max-width: 640px) {
    .d-none-mobile { display: none !important; }

    :root {
      --header-h: 54px;
      --header-total: calc(54px + env(safe-area-inset-top, 0px));
    }

    header { padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; }
    .btn-hamburger { display: flex; }
    .logo-text { display: none; }
    .logo-icon { width: 32px; height: 32px; font-size: 18px; }

    /* Week nav compact */
    #week-label { min-width: 130px; font-size: 13px; }
    .btn-today { display: none; }

    /* ── Turni: 2-row header su mobile ─────────────────────────────
       Riga 1: nav buttons + logo + user badge
       Riga 2: week nav a piena larghezza                            */
    body[data-view="turni"] {
      --header-h: 94px;
      --header-total: calc(94px + env(safe-area-inset-top, 0px));
    }
    body[data-view="turni"] header {
      height: auto;
      min-height: var(--header-total);
      flex-wrap: wrap;
      align-content: flex-start;
      padding-bottom: 8px;
      gap: 6px;
    }
    /* Riga 2: week nav scende su una riga dedicata */
    body[data-view="turni"] .header-center {
      order: 10;
      flex: 0 0 100%;
      justify-content: center;
      gap: 10px;
    }
    /* Su turni mobile nascondi logo icon e module title per risparmiare spazio nella riga 1 */
    body[data-view="turni"] .logo           { display: none !important; }
    body[data-view="turni"] #header-module-title { display: none !important; }
    /* Mostra "Oggi" nella seconda riga */
    body[data-view="turni"] .btn-today      { display: flex !important; }
    /* week-label più generoso nella riga dedicata */
    body[data-view="turni"] #week-label     { min-width: 160px; font-size: 14px; font-weight: 700; }

    /* Header actions: keep only ? and export */
    .btn-hdr.hdr-add { display: none; }

    /* Sidebar: off-screen drawer */
    aside {
      transform: translateX(-100%);
      transition: transform .25s ease;
      z-index: 95; width: 280px;
      box-shadow: none;
    }
    aside.open {
      transform: translateX(0) !important;
      box-shadow: var(--shadow-lg);
    }
    .sidebar-close { display: flex; }

    /* Main takes full width */
    main { margin-left: 0; padding: 12px; }

    /* Grid scrolls horizontally in its own wrapper */
    .grid-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -12px;           /* estende fino ai bordi del padding di main */
      padding: 0 12px 4px;
    }
    .grid-wrap     { min-width: 540px; }
    .coverage-wrap { min-width: 540px; }

    /* Colonna nome più compatta */
    .gh-corner { font-size: 10px; padding: 8px 6px; }
    .gr-label  { padding: 4px 6px; gap: 5px; }
    .gr-avatar { width: 24px; height: 24px; font-size: 10px; }
    .gr-name   { font-size: 11px; }
    .gr-year   { font-size: 9px; }

    /* Celle giorno più compatte */
    .gh-day        { padding: 6px 3px; }
    .gh-day-name   { font-size: 10px; letter-spacing: 0; }
    .gh-day-date   { font-size: 16px; }
    .gh-day-date.today { width: 28px; height: 28px; }
    .gr-day        { padding: 3px; min-height: 54px; }

    /* Toolbar compact */
    .toolbar-title { display: none; }
    .btn-autogen span { display: none; }
    .toolbar { margin-bottom: 10px; }
    .toolbar .btn-outline { padding: 7px 10px; font-size: 12px; }

    /* Modal full-width */
    .modal { padding: 20px; border-radius: 12px; }
    .help-modal { width: calc(100vw - 32px); max-height: 85vh; }
  }

  /* ─── App Nav Sidebar ──────────────────────────────────────────── */
  #app-nav {
    position: fixed; left: 0; top: var(--header-total);
    width: var(--nav-w); bottom: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 95; overflow-y: auto;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
  }
  .nav-section-title {
    padding: 14px 16px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--text-3);
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin: 1px 8px;
    border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--text);
    transition: background var(--trans), color var(--trans);
    text-decoration: none; border: none; background: none; width: calc(100% - 16px);
    font-family: inherit; text-align: left;
  }
  .nav-item:hover { background: var(--panel); }
  .nav-item.active { background: var(--primary-l); color: var(--primary); font-weight: 700; }
  .nav-item-icon { font-size: 17px; flex-shrink: 0; width: 24px; text-align: center; }
  .nav-sep { height: 1px; background: var(--border); margin: 6px 16px; }

  /* Badge numerico su voci di navigazione moduli */
  .nav-mod-badge {
    margin-left: auto; flex-shrink: 0;
    min-width: 20px; height: 20px;
    background: var(--primary); color: #fff;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px; line-height: 1;
  }
  .nav-item.active .nav-mod-badge { background: var(--primary); }

  #nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 94;
    background: rgba(15,23,42,.4); backdrop-filter: blur(2px);
  }
  #nav-backdrop.open { display: block; }

  /* Nav toggle button in header — mobile only */
  #btn-nav-toggle {
    display: none;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,.2); border: none; cursor: pointer;
    color: #fff; font-size: 18px; flex-shrink: 0;
    align-items: center; justify-content: center;
    transition: background var(--trans);
  }
  #btn-nav-toggle:hover { background: rgba(255,255,255,.3); }
  @media (max-width: 768px) { #btn-nav-toggle { display: flex; } }

  /* On desktop: shift content right for nav */
  @media (min-width: 769px) {
    #dashboard-screen  { margin-left: var(--nav-w); }
    #module-consegne   { margin-left: var(--nav-w); }
    #module-mount      { margin-left: var(--nav-w); }
    #module-turni aside { left: var(--nav-w); }
    #module-turni main  { margin-left: calc(var(--nav-w) + var(--side-w)); }
    #app-footer { left: var(--nav-w); }
  }

  /* On mobile: nav is a slide-in drawer */
  @media (max-width: 768px) {
    #app-nav { transform: translateX(-100%); box-shadow: none; width: 260px; z-index: 96; }
    #app-nav.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  }

  /* ─── Widget grid ───────────────────────────────────────────────── */
  .widget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  @media (max-width: 860px) { .widget-grid { grid-template-columns: 1fr; } }

  .widget-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px; overflow: hidden;
    cursor: grab;
    transition: box-shadow var(--trans), transform var(--trans);
    user-select: none;
    display: flex; flex-direction: column;
  }
  .widget-card:active { cursor: grabbing; }
  .widget-card.dragging { opacity: .45; transform: scale(.97); }
  .widget-card.drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
  .widget-card.full { grid-column: span 2; }
  @media (max-width: 860px) { .widget-card.full { grid-column: span 1; } }

  .widget-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-3);
    cursor: grab; gap: 8px;
  }
  .widget-hdr-title { flex: 1; }
  .widget-hdr a {
    font-size: 12px; color: var(--primary); text-decoration: none;
    font-weight: 600; text-transform: none; letter-spacing: 0;
    cursor: pointer; white-space: nowrap;
  }
  .widget-resize-btn {
    width: 24px; height: 24px; border-radius: 5px;
    background: var(--border); border: none; cursor: pointer;
    color: var(--text-3); font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--trans), color var(--trans);
    flex-shrink: 0;
  }
  .widget-resize-btn:hover { background: var(--border2); color: var(--text); }
  .widget-body { padding: 14px 18px; flex: 1; }

  /* ─── Mini turni calendar ───────────────────────────────────────── */
  .mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .mini-day { border-radius: 7px; border: 1px solid var(--border); overflow: hidden; min-height: 80px; }
  .mini-day-head {
    padding: 3px 4px; text-align: center;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-3); background: var(--panel);
    line-height: 1.5;
  }
  .mini-day-head.today { background: var(--primary); color: #fff; }
  .mini-day-body { padding: 3px; display: flex; flex-direction: column; gap: 2px; }
  .mini-day-slot {
    border-radius: 3px; padding: 1px 3px;
    font-size: 9px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mini-day-empty { text-align: center; padding: 8px 2px; font-size: 10px; color: var(--text-3); }
  .mini-cal-footer {
    font-size: 11px; color: var(--primary); text-align: right;
    margin-top: 10px; cursor: pointer; font-weight: 500;
  }
  .mini-cal-footer:hover { text-decoration: underline; }

/* ─── Brand logo: auto-resize, mai più largo del contenitore ─────── */
.brand-logo {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN BACKEND (full-screen overlay)
═══════════════════════════════════════════════════════════════ */
#admin-backend {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  background: var(--bg);
  overflow: hidden;
}
.ab-sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--panel);
  border-right: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ab-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1.5px solid var(--border);
}
.ab-sidebar-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
}
.ab-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-3);
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.ab-close-btn:hover { background: var(--border); color: var(--text-1); }
.ab-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ab-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 500;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-nav-item:hover { background: var(--border); color: var(--text-1); }
.ab-nav-item.active { background: var(--primary-l, #eff6ff); color: var(--primary); font-weight: 700; }
.ab-nav-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.ab-nav-sub-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-3);
  padding: 8px 12px 4px;
}
.ab-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
}
.ab-section { display: none; }
.ab-section.active { display: block; }
.ab-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--border);
}
.ab-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.ab-stat-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: box-shadow .15s;
}
.ab-stat-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.ab-stat-icon { font-size: 24px; }
.ab-stat-value { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1; }
.ab-stat-label { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.ab-section-body { max-width: 700px; }

@media (max-width: 700px) {
  .ab-sidebar { display: none; }
  .ab-content { padding: 18px 14px; }
  .ab-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
#admin-gear-btn { line-height: 1; }