:root{
  --chrome-bg:#F3F2F1;
  --chrome-surface:#FFFFFF;
  --chrome-border:#E1DFDD;
  --chrome-text:#1B1A19;
  --chrome-text-dim:#605E5C;
  --accent:#217346;
  --accent-ink:#0F3D26;
  --chip-ring:#0B5FFF;
  --sheet-bg:#FFFFFF;
  --sheet-line:#B7B7B7;
  --sheet-line-strong:#404040;
  --sheet-text:#1A1A1A;
  --gutter-text:#8A8886;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --chrome-bg:#1F1F1F;
    --chrome-surface:#2B2B2B;
    --chrome-border:#3B3B3B;
    --chrome-text:#F3F2F1;
    --chrome-text-dim:#B3B0AD;
    --accent:#3FA66E;
    --accent-ink:#BFF0D6;
  }
}
:root[data-theme="dark"]{
  --chrome-bg:#1F1F1F;
  --chrome-surface:#2B2B2B;
  --chrome-border:#3B3B3B;
  --chrome-text:#F3F2F1;
  --chrome-text-dim:#B3B0AD;
  --accent:#3FA66E;
  --accent-ink:#BFF0D6;
}
body{
  background:var(--chrome-bg);
  color:var(--chrome-text);
  font-family:Calibri,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{display:flex;flex-direction:column;min-height:100dvh;}

/* ---------- title bar ---------- */
.titlebar{
  display:flex;align-items:baseline;gap:.6rem;
  padding:14px 20px 4px;
  flex-wrap:wrap;
}
.titlebar h1{
  font-size:1.35rem;margin:0;font-weight:700;letter-spacing:.2px;
}
.titlebar .badge{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:2px 8px;border-radius:999px;
}
.titlebar .sub{
  font-size:.82rem;color:var(--chrome-text-dim);
}
.titlebar .spacer-flex{flex:1 1 auto;}
.titlebar form{margin:0;}
.occupato-opaco{font-style:italic;color:var(--chrome-text-dim);font-size:.62rem;}

/* ---------- legend / palette strip ---------- */
.legend-strip{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:10px 20px;background:var(--chrome-surface);
  border-bottom:1px solid var(--chrome-border);
}
.legend-strip .lbl{font-size:.72rem;color:var(--chrome-text-dim);margin-right:2px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;padding:4px 9px 4px 6px;border-radius:5px;
  border:1.5px solid rgba(0,0,0,.18);cursor:pointer;user-select:none;
  transition:transform .08s ease, box-shadow .08s ease;
}
.chip .sw{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:none;}
.chip:hover{transform:translateY(-1px);}
.chip.armed{box-shadow:0 0 0 2px var(--chip-ring);}
.chip.eraser{background:var(--chrome-surface);color:var(--chrome-text);border-style:dashed;}
.chip.disabled{opacity:.45;cursor:default;}
.chip.disabled:hover{transform:none;}

/* ---------- sheet ---------- */
.sheet-wrap{flex:1;overflow:auto;padding:18px 20px 30px;background:var(--chrome-bg);}
.sheet{
  background:var(--sheet-bg);
  display:inline-block;
  padding:14px;border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.band + .band{margin-top:16px;}
.band-row{display:flex;}
.week{display:flex;flex-direction:column;margin-left:10px;}
.week:first-of-type{margin-left:0;}
.week-row{display:flex;}
.daycol{width:80px;}
.daycol + .daycol{border-left:1px solid var(--sheet-line);}
.week .daycol:first-child{border-left:2px solid var(--sheet-line-strong);}
.week .daycol:last-child{border-right:2px solid var(--sheet-line-strong);}

.gutter{width:34px;flex:none;}
.gutter .hdr-cell,.gutter .date-cell{background:transparent;border-top:none;border-bottom:none;}
.gutter .hourlabel{
  height:22px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;font-size:.6rem;color:var(--gutter-text);
  font-variant-numeric:tabular-nums;
}
.gutter .lunch{height:8px;}

.hdr-cell,.date-cell{
  color:var(--sheet-text);
  text-align:center;font-weight:700;font-size:.78rem;
  border-top:2px solid var(--sheet-line-strong);
  border-bottom:1px solid var(--sheet-line);
  padding:3px 2px;line-height:1.2;background:var(--sheet-bg);
  font-variant-numeric:tabular-nums;
}
.date-cell{border-top:none;font-weight:700;}
.slots{display:flex;flex-direction:column;border-bottom:2px solid var(--sheet-line-strong);}
.slot{
  height:22px;position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;line-height:1.1;padding:1px 3px;
  cursor:pointer;background:var(--sheet-bg);color:var(--sheet-text);
  border-bottom:1px solid var(--sheet-line);
  outline-offset:-2px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.slot.lunch-gap{
  height:8px;flex:none;cursor:default;border-bottom:none;background:var(--sheet-bg);
}
.slot:last-child{border-bottom:none;}
.slot:not(.lunch-gap):hover{filter:brightness(0.97);}
.slot[data-empty="1"]:not(.lunch-gap):hover{background:#F3F7FF;}
.slot.selected{outline:2px solid var(--chip-ring);z-index:1;}
.slot.editing{cursor:text;outline:2px solid var(--accent);z-index:2;}
.slot.editing input{width:100%;height:100%;border:none;background:transparent;font:inherit;color:inherit;text-align:center;padding:0;}
.slot.editing input:focus{outline:none;}
.slot.drag-over{outline:2px dashed var(--chip-ring);z-index:1;}

/* ---------- popover ---------- */
.pop{
  position:fixed;z-index:50;background:var(--chrome-surface);
  border:1px solid var(--chrome-border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);padding:8px;
  display:flex;flex-wrap:wrap;gap:5px;max-width:230px;
}
.pop .chip{font-size:.7rem;}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:8px 20px;font-size:.72rem;color:var(--chrome-text-dim);
  border-top:1px solid var(--chrome-border);background:var(--chrome-surface);
}
.statusbar b{color:var(--chrome-text);}
.statusbar .k{
  background:var(--chrome-bg);border:1px solid var(--chrome-border);
  border-radius:4px;padding:0 5px;font-family:ui-monospace,Menlo,monospace;font-size:.68rem;
}

/* ---------- login ---------- */
.login-page{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:var(--chrome-bg);padding:24px;
}
.login-card{
  background:var(--chrome-surface);border:1px solid var(--chrome-border);
  border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.12);
  padding:32px 36px;width:100%;max-width:380px;
}
.login-logo{display:block;max-width:220px;width:100%;height:auto;margin:0 auto 22px;}
.login-card h1{font-size:1.1rem;text-align:center;margin:0 0 20px;color:var(--chrome-text);font-weight:700;}
.login-footer{text-align:center;margin-top:14px;font-size:.85rem;}