/* Vis Hot Lunch. Mobile first — this gets used on a phone in a car line. */
:root {
  --green:#0a9a5c; --green-dk:#067a48; --lime:#7dc242; --lime-bg:#eef8e6;
  --ink:#1b1f1d; --mute:#66706b; --line:#e2e8e4; --bg:#f6f9f7;
  --red:#b3261e; --red-bg:#fdecea; --amber:#8a6100; --amber-bg:#fff6dc;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif }
a { color:var(--green-dk) }
.wrap { max-width:720px; margin:0 auto; padding:0 16px 72px }
.wrap.wide { max-width:1100px }
header { background:#fff; border-bottom:1px solid var(--line); margin-bottom:20px }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:10px; padding-bottom:10px }
header .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
header .brand img, header .brand svg { height:40px; width:auto; display:block }
header nav { display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:flex-end }
header nav a { color:var(--mute); text-decoration:none; font-size:13px; font-weight:600 }
header nav a:hover, header nav a.on { color:var(--green-dk) }
h1 { font-size:22px; margin:0 0 4px; letter-spacing:-.01em }
h2 { font-size:17px; margin:26px 0 10px }
h3 { font-size:15px; margin:0 0 4px }
.sub { color:var(--mute); font-size:14px; margin:0 0 18px }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.muted { color:var(--mute); font-size:13px }
.small { font-size:13px }
.big { font-size:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.btn { display:inline-block; background:var(--green); color:#fff; border:0; padding:11px 18px;
  border-radius:9px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  text-align:center; line-height:1.2 }
.btn:hover { background:var(--green-dk) }
.btn:disabled { opacity:.4; cursor:not-allowed }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line) }
.btn.ghost:hover { background:var(--bg) }
.btn.danger { background:#fff; color:var(--red); border:1px solid var(--line) }
.btn.sm { padding:6px 11px; font-size:13px; border-radius:7px }
.btn.full { display:block; width:100% }
.flash { padding:11px 14px; border-radius:9px; margin-bottom:12px; font-size:14px }
.flash.ok { background:var(--lime-bg); color:var(--green-dk) }
.flash.error { background:var(--red-bg); color:var(--red) }
.note { background:var(--amber-bg); color:var(--amber); padding:11px 14px; border-radius:9px;
  font-size:14px; margin-bottom:14px }
table { width:100%; border-collapse:collapse; font-size:14px }
th { text-align:left; color:var(--mute); font-weight:600; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; padding:6px 8px 6px 0; border-bottom:1px solid var(--line) }
td { padding:8px 8px 8px 0; border-top:1px solid var(--line); vertical-align:top }
tr:first-child td { border-top:0 }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time],
input[type=search], select, textarea {
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:16px; background:#fff; color:var(--ink); font-family:inherit }
input:focus, select:focus, textarea:focus { outline:2px solid var(--lime); outline-offset:1px; border-color:var(--green) }
textarea { min-height:90px; resize:vertical }
label { display:block; font-size:13px; color:var(--mute); margin:12px 0 4px; font-weight:600 }
label.inline { display:inline-flex; align-items:center; gap:8px; margin:8px 12px 0 0; font-weight:500; color:var(--ink) }
label.inline input { width:auto }
.code-input { font-size:30px; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; padding:14px }
.pill { display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; background:#eef1ef;
  color:var(--mute); text-transform:uppercase; letter-spacing:.05em; font-weight:700; white-space:nowrap }
.pill.hot { background:var(--lime-bg); color:var(--green-dk) }
.pill.locked { background:#eceff1; color:#455a64 }
.pill.open { background:#e3f2fd; color:#0d47a1 }
.pill.warn { background:var(--red-bg); color:var(--red) }
.pill.draft { background:var(--amber-bg); color:var(--amber) }
.pill.special { background:#fff3e0; color:#b45309 }
.day.special, .cal .cell.special { background:#fffaf2; border-color:#f5d9a8 }
.special-box { margin:6px 0 2px }
.special-box p { margin:0 0 8px; font-size:13px; color:#7a4a05 }
.cal .special-box p { font-size:12px }
.special-fields { border:1px solid var(--line); border-radius:10px; padding:10px 14px 12px; margin:14px 0 4px }
.special-fields.on { background:#fffaf2; border-color:#f5d9a8 }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:14px }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px }
.stat .k { font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; font-weight:700 }
.stat .v { font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat.hero { background:var(--green); border-color:var(--green); color:#fff }
.stat.hero .k { color:#d6f5e6 }
.kid { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid var(--line) }
.kid:first-of-type { border-top:0 }
.kid .name { font-weight:600 }
.logo-hero { text-align:center; margin:12px 0 22px }
.logo-hero img, .logo-hero svg { max-width:320px; width:100%; height:auto }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.sticky-total { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:12px 16px; margin:0 -16px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  box-shadow:0 -6px 18px rgba(0,0,0,.05) }
.sticky-total .amt { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums }

/* ---- calendar ---- */
.cal-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px }
.cal-nav h1 { margin:0 }
.cal-nav select { width:auto; padding:8px 10px; font-size:14px }
.cal { display:none }
.cal-list .day { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px }
.day.locked { background:#f3f5f4 }
.day .head { display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.day .date { font-weight:700 }
.day .price { color:var(--green-dk); font-weight:700; font-variant-numeric:tabular-nums }
.day .menu { font-size:14px; color:var(--ink); margin:4px 0 8px }
.day .lock { font-size:12px; color:var(--mute) }
.day .kidrow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0;
  border-top:1px dashed var(--line) }
.day .kidrow:first-of-type { border-top:0 }
.day .kidrow .who { font-size:14px; font-weight:600; flex:1 }
.day .kidrow select { width:auto; min-width:140px; padding:8px 10px; font-size:14px }
.day .kidrow select.hot { background:var(--lime-bg); border-color:var(--lime); color:var(--green-dk); font-weight:600 }
.day .kidrow select.none { background:var(--red-bg); border-color:#e0908a; color:var(--red); font-weight:600 }
.day .kidrow .ro { font-size:14px; color:var(--mute) }
.day .kidrow .ro.hot { color:var(--green-dk); font-weight:600 }
@media (min-width: 900px) {
  .wrap.cal-wrap { max-width:1180px }
  .cal-list { display:none }
  .cal { display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
  .cal .dow { font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em;
    font-weight:700; padding:0 4px 4px }
  .cal .cell { min-height:110px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px }
  .cal .cell.out { background:transparent; border-color:transparent }
  .cal .cell.empty .dnum { color:var(--mute) }
  .cal .cell.locked { background:#f3f5f4 }
  .cal .cell.today { outline:2px solid var(--lime) }
  .cal .dnum { font-weight:700; font-size:14px }
  .cal .price { float:right; font-size:13px; color:var(--green-dk); font-weight:700 }
  .cal .menu { font-size:12.5px; line-height:1.35; color:var(--ink); margin:4px 0 8px }
  .cal .lock { font-size:11px; color:var(--mute); margin-top:6px }
  .cal .kidrow { display:flex; align-items:center; gap:6px; padding:3px 0 }
  .cal .kidrow .who { font-size:12px; font-weight:600; width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .cal .kidrow select { flex:1; padding:5px 6px; font-size:12.5px; border-radius:6px }
  .cal .kidrow select.hot { background:var(--lime-bg); border-color:var(--lime); color:var(--green-dk); font-weight:600 }
  .cal .kidrow select.none { background:var(--red-bg); border-color:#e0908a; color:var(--red); font-weight:600 }
  .cal .kidrow .ro { font-size:12px; color:var(--mute) }
  .cal .kidrow .ro.hot { color:var(--green-dk); font-weight:600 }
}

/* ---- admin ---- */
.subnav { display:flex; gap:4px; flex-wrap:wrap; margin:-6px 0 18px }
.subnav a { font-size:13px; padding:6px 11px; border-radius:20px; text-decoration:none; color:var(--mute); font-weight:600 }
.subnav a.on { background:var(--green); color:#fff }
.subnav a:hover:not(.on) { background:#fff }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:12px }
.toolbar input, .toolbar select { width:auto; min-width:160px; padding:9px 11px; font-size:14px }
.toolbar label { margin:0 0 4px }
.inline-form { display:inline }
.report-room { break-inside:avoid; margin-bottom:18px }
.report-room h3 { display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:4px }
.report-room ol { margin:6px 0 0; padding-left:22px; columns:2; column-gap:24px }
.report-room li { padding:2px 0; break-inside:avoid }
@media print {
  header, .subnav, .toolbar, .noprint, .flash { display:none !important }
  body { background:#fff; font-size:12.5px }
  .wrap { max-width:none; padding:0 }
  .card { border:0; padding:0; box-shadow:none }
  .report-room ol { columns:3 }
  a { color:inherit; text-decoration:none }
}

select.pick.missing { outline:2px solid var(--red); outline-offset:1px }

.cal-intro p { margin:0 0 8px }
.note.incomplete a { margin:4px 6px 0 0 }
.review td.hot { color:var(--green-dk); font-weight:600 }
.review td.none { color:var(--red) }
.brand-line { margin:0 0 4px; font-size:13px; letter-spacing:.12em; color:var(--green); font-weight:700 }

/* Past lunch days: crossed off. */
.day.past, .cal .cell.past { color:var(--mute); background:
  linear-gradient(to top right, transparent calc(50% - 1px), #c9ccca calc(50% - 1px), #c9ccca calc(50% + 1px), transparent calc(50% + 1px)), #f3f5f4 }
.day.past .date, .day.past .menu, .day.past .price, .cal .cell.past .dnum, .cal .cell.past .menu, .cal .cell.past .price { text-decoration:line-through; color:var(--mute) }
.day.past .kidrow .ro, .cal .cell.past .kidrow .ro, .day.past .kidrow .ro.hot, .cal .cell.past .kidrow .ro.hot { color:var(--mute); font-weight:400 }

.payment-notice { margin-top:16px; border:1px solid var(--lime); background:var(--lime-bg); color:var(--ink); border-radius:10px; padding:12px 14px }
.payment-notice p { margin:0 0 6px; font-size:14px; line-height:1.5 } .payment-notice p:last-child { margin-bottom:0 }

/* Confirmed Lunch Order (screen) */
.order-print td.sel-hot { color:var(--green-dk); font-weight:600 } .order-print td.sel-none { color:var(--red) }
.order-print td.sel-hot::before { content:"\2713\00a0" } .order-print td.sel-none::before { content:"\2013\00a0" }
.order-print table { width:100% }
@media print {
  @page { size: Letter portrait; margin: 0.6in }
  body { background:#fff !important; color:#000; font-size:11.5px }
  .order-print .card { border:0; box-shadow:none; padding:0; margin:0 0 14px }
  .order-print .card.month { page-break-inside:auto }
  .order-print .avoid-break { page-break-inside:avoid }
  .order-print h3 { page-break-after:avoid; margin-top:10px }
  .order-print tr, .order-print td, .order-print th { page-break-inside:avoid }
  .order-print thead { display:table-header-group }
  .order-print td, .order-print th { padding:4px 6px; vertical-align:top; overflow-wrap:anywhere }
  .order-print td.sel-hot, .order-print td.sel-none { color:#000 }
  .order-print td.sel-hot { font-weight:700 }
  .order-print a { color:#000; text-decoration:none }
  .brand-line { color:#000 }
}

/* Confirmed Lunch Order on narrow screens: tables scroll sideways instead of clipping */
@media (max-width: 640px) {
  .order-print .card { overflow-x:auto; -webkit-overflow-scrolling:touch }
  .order-print .card.month table { min-width:520px }   /* month grids scroll; the balances table always fits */
  .order-print td, .order-print th { padding:6px 6px; font-size:13px }
  .order-print h1 { font-size:22px }
}