:root { --cinnamon:#7b2d1e; --ro-bg:#f3d5c8; --x-bg:#e3e3e3; --line:#bbb; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; margin: 16px; color:#1c1c1c; }
.muted { color:#666; font-size:.9em; }
.error { color:#b00020; min-height:1.2em; }
button { padding:6px 10px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
button.primary { background:var(--cinnamon); color:#fff; border-color:var(--cinnamon); }
input, select { padding:5px; border:1px solid var(--line); border-radius:5px; }
label { display:block; margin:8px 0; }

/* Logo (exact badge cropped from the owner's original sheet; white
   background, so it always sits on a white rounded backdrop) */
.logo-img { height:50px; width:auto; aspect-ratio:304/110; background:#fff; border-radius:8px; padding:4px 6px; display:block; }
.logo-img.logo-print { height:44px; }
.brand-head { display:flex; gap:12px; align-items:flex-start; }

/* PIN screen */
.pin-screen { min-height:90vh; display:flex; align-items:center; justify-content:center; }
.pin-card { max-width:360px; width:100%; border:1px solid var(--line); border-radius:12px; padding:24px; text-align:left; }
.pin-logo { font-weight:800; letter-spacing:2px; color:var(--cinnamon); font-size:1.3em; }
.pin-card h1 { font-size:1.25em; margin:.4em 0; }
.pin-card button.primary { width:100%; margin-top:8px; }

/* Toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.toolbar-btns { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* Board grid */
#board-wrap { overflow-x:auto; border:1px solid var(--line); }
table.board { border-collapse:collapse; min-width:860px; width:100%; }
table.board th, table.board td { border:1px solid var(--line); padding:5px 6px; text-align:center; font-size:.92em; }
table.board th.name, table.board td.name { text-align:left; position:sticky; left:0; background:#fff; min-width:150px; }
tr.section-row td { background:#f0e6e2; font-weight:700; text-align:left; }
tr.spacer-row td { height:14px; padding:0; background:#fff; }
td.cell { cursor:pointer; min-width:74px; }
td.cell:hover { outline:2px solid var(--cinnamon); outline-offset:-2px; }
td.cell.ro { background:var(--ro-bg); font-weight:700; }
td.cell.x { background:var(--x-bg); color:#555; }
td.cell.off { color:#888; }
tr.footer-row td { background:#fafafa; font-weight:600; }
tr.footer-row td.clickable { cursor:pointer; }
.day-note { display:block; font-size:.8em; color:var(--cinnamon); }
.row-total { font-weight:700; }

/* Roster */
#roster { margin-top:18px; }
.roster-section { margin-bottom:8px; }
.roster-section .sec-head { font-weight:700; margin-right:8px; }
.chip { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 6px 3px 10px; margin:2px; }
.chip button { border:none; padding:0 3px; background:none; }

dialog { border:1px solid var(--line); border-radius:10px; padding:18px; min-width:300px; }
.type-row { display:flex; gap:12px; margin:10px 0; }
.type-row label { display:inline; margin:0; }
.dialog-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

/* Print view */
#print-view .print-head { display:flex; align-items:flex-start; gap:16px; text-align:left; margin-bottom:8px; }
#print-view .print-head-info { padding-top:4px; }
#print-view table.board td.cell { cursor:default; }
#print-view table.board th.name, #print-view table.board td.name { position:static; }

@page { size: landscape; margin: 9mm; }
@media print {
  body { margin:0; }
  body.printing #app, body.printing .screen-only { display:none !important; }
  body:not(.printing) #print-view { display:none !important; }
  #print-view { display:block !important; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #print-view .screen-only { display:none !important; }
  table.board { min-width:0; }
}