/* Group Food Calendar — visual refresh v2 (June 2026).
   Scoped under .reqwrap so it never affects the rest of the app.
   All class names match the original stylesheet — templates unchanged. */

.reqwrap{
  --rq-teal:#0d9488;--rq-teal-dk:#0f766e;--rq-teal-deep:#134e4a;
  --rq-orange:#ea580c;--rq-ink:#0f172a;--rq-muted:#64748b;
  --rq-line:#e2e8f0;--rq-bg:#f1f5f9;--rq-card:#ffffff;
  --rq-ring:rgba(13,148,136,.25);
  --rq-radius:16px;
  --rq-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --rq-shadow:0 1px 3px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.05);
  color:var(--rq-ink);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}

/* ---------- page header band ---------- */
.reqwrap .rq-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--rq-teal-dk) 0%,var(--rq-teal-deep) 100%);
  color:#fff;border-radius:var(--rq-radius);padding:18px 22px;margin-bottom:20px;
  box-shadow:0 8px 24px rgba(15,118,110,.22);
}
.reqwrap .rq-head h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#fff}
.reqwrap .rq-head .sub{color:#99f6e4;font-size:13px;margin-top:2px}
.reqwrap .rq-head .spacer{margin-left:auto}
.reqwrap .rq-head a.hbtn,.reqwrap .rq-head button.hbtn{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s,transform .1s;
}
.reqwrap .rq-head a.hbtn:hover,.reqwrap .rq-head button.hbtn:hover{
  background:rgba(255,255,255,.24);
}
.reqwrap .rq-head a.hbtn:active,.reqwrap .rq-head button.hbtn:active{transform:scale(.97)}

/* ---------- session segmented switcher ---------- */
.reqwrap .seg{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.reqwrap .seg a{
  display:inline-block;padding:8px 18px;border:1px solid var(--rq-line);border-radius:999px;
  text-decoration:none;color:var(--rq-ink);font-size:13.5px;font-weight:600;background:#fff;
  box-shadow:var(--rq-shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.reqwrap .seg a:hover{border-color:var(--rq-teal);box-shadow:0 2px 8px rgba(13,148,136,.12)}
.reqwrap .seg a.on{
  background:var(--rq-teal);color:#fff;border-color:var(--rq-teal);
  box-shadow:0 2px 10px rgba(13,148,136,.35);
}
.reqwrap .seg .range{color:var(--rq-muted);font-size:12.5px;font-weight:400;margin-left:4px}

/* ---------- cards ---------- */
.reqwrap .rcard{
  background:var(--rq-card);border:1px solid var(--rq-line);border-radius:var(--rq-radius);
  padding:20px 22px;margin-bottom:20px;box-shadow:var(--rq-shadow);
}
.reqwrap .rcard h2{margin:0 0 4px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.reqwrap .rcard .sub{color:var(--rq-muted);font-size:13px;margin:0 0 14px;line-height:1.45}
.reqwrap details.rcard summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;
  user-select:none;color:var(--rq-teal-dk)}
.reqwrap details.rcard summary::-webkit-details-marker{display:none}
.reqwrap details.rcard summary:before{content:"+ ";color:var(--rq-teal);font-weight:800}
.reqwrap details[open].rcard summary:before{content:"– "}
.reqwrap details.rcard summary:hover{color:var(--rq-teal)}

/* ---------- form fields ---------- */
.reqwrap label{display:block;font-size:12.5px;font-weight:600;margin:12px 0 5px;
  color:#334155;letter-spacing:.01em}
.reqwrap input,.reqwrap select,.reqwrap textarea{
  width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--rq-ink);
  transition:border-color .15s,box-shadow .15s;
}
.reqwrap input::placeholder,.reqwrap textarea::placeholder{color:#94a3b8}
.reqwrap input:focus,.reqwrap select:focus,.reqwrap textarea:focus{
  outline:none;border-color:var(--rq-teal);box-shadow:0 0 0 3px var(--rq-ring);
}
.reqwrap .fieldrow{display:flex;gap:14px;flex-wrap:wrap}
.reqwrap .fieldrow>div{flex:1;min-width:130px}

/* ---------- buttons ---------- */
.reqwrap .rbtn{
  display:inline-block;background:var(--rq-teal);color:#fff;border:0;border-radius:10px;
  padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.1),0 2px 8px rgba(13,148,136,.25);
  transition:background .15s,transform .1s,box-shadow .15s;
}
.reqwrap .rbtn:hover{background:var(--rq-teal-dk);box-shadow:0 2px 12px rgba(13,148,136,.35)}
.reqwrap .rbtn:active{transform:scale(.97)}
.reqwrap .rbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--rq-ring)}
.reqwrap .rbtn.orange{background:var(--rq-orange);box-shadow:0 1px 2px rgba(15,23,42,.1),0 2px 8px rgba(234,88,12,.25)}
.reqwrap .rbtn.orange:hover{background:#c2410c}
.reqwrap .rbtn.ghost{background:#fff;color:var(--rq-teal-dk);border:1px solid #99f6e4;box-shadow:var(--rq-shadow-sm)}
.reqwrap .rbtn.ghost:hover{background:#f0fdfa;border-color:var(--rq-teal)}
.reqwrap .rbtn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.reqwrap .rbtn.gray{background:#f1f5f9;color:#334155;box-shadow:var(--rq-shadow-sm)}
.reqwrap .rbtn.gray:hover{background:#e2e8f0}

/* ---------- table ---------- */
.reqwrap table.rtbl{width:100%;border-collapse:collapse;font-size:13.5px}
.reqwrap table.rtbl th,.reqwrap table.rtbl td{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--rq-line);vertical-align:top;
}
.reqwrap table.rtbl th{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--rq-muted);
  font-weight:700;border-bottom:2px solid var(--rq-line);
}
.reqwrap table.rtbl tbody tr{transition:background .1s}
.reqwrap table.rtbl tbody tr:hover{background:#f8fafc}
.reqwrap table.rtbl tbody tr:last-child td{border-bottom:0}

.reqwrap .gdot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;
  vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.reqwrap .numpill{display:inline-block;background:#f8fafc;border:1px solid var(--rq-line);
  border-radius:8px;padding:2px 10px;font-weight:700;font-size:12.5px}
.reqwrap .muted{color:var(--rq-muted)}
.reqwrap .req-note{color:var(--rq-muted);font-size:12.5px;margin-top:2px}

/* status badges */
.reqwrap .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;
  border-radius:999px;font-size:12px;font-weight:700;line-height:1.5}
.reqwrap .badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.reqwrap .b-pending{background:#fef3c7;color:#92400e}
.reqwrap .b-submitted{background:#dcfce7;color:#166534}

/* ---------- kitchen calendar ---------- */
.reqwrap .legend{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.reqwrap .legend span{font-size:12.5px;display:flex;align-items:center}
.reqwrap .calwrap{overflow-x:auto;border-radius:12px;border:1px solid var(--rq-line);
  box-shadow:var(--rq-shadow-sm);-webkit-overflow-scrolling:touch}
.reqwrap table.kcal{border-collapse:collapse;width:100%;min-width:980px}
.reqwrap table.kcal th,.reqwrap table.kcal td{border:1px solid var(--rq-line);
  padding:7px 8px;font-size:12px;vertical-align:top;background:#fff}
.reqwrap table.kcal thead th{
  background:var(--rq-teal-dk);color:#fff;text-align:center;border-color:rgba(255,255,255,.14);
  position:sticky;top:0;z-index:1;
}
.reqwrap table.kcal thead th.out{background:var(--rq-teal-deep);opacity:.75}
.reqwrap table.kcal thead th .heb{font-weight:400;font-size:11px;opacity:.85}
.reqwrap table.kcal td.meal{background:#f8fafc;font-weight:700;width:74px;text-align:center;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#475569}
.reqwrap .tag{display:block;padding:5px 8px;border-radius:8px;margin:3px 0;color:#fff;
  font-size:11px;line-height:1.3;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.12);
  transition:filter .12s,transform .12s}
.reqwrap .tag:hover{filter:brightness(1.1);transform:translateY(-1px)}
.reqwrap .tag .enr{background:rgba(255,255,255,.3);border-radius:5px;padding:0 5px;
  margin-left:3px;font-weight:700}
/* pending = not yet submitted to the kitchen (office view only) */
.reqwrap .tag.pending{opacity:.92;border:2px dashed rgba(255,255,255,.85);
  box-shadow:none;background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.16) 0 6px, transparent 6px 12px)}
.reqwrap .tag.pending .pendmark{margin-right:3px}
/* "show pending" toggle in the segmented control */
.reqwrap .seg a.pendtoggle{border:1px dashed var(--rq-line);border-radius:8px}
.reqwrap .seg a.pendtoggle.on{background:var(--rq-teal-deep);color:#fff;border-style:solid}

/* ---------- chat ---------- */
.reqwrap .thread{background:#f8fafc;border:1px solid var(--rq-line);border-radius:14px;
  padding:16px;min-height:130px;margin:10px 0}
.reqwrap .msg{margin-bottom:12px;max-width:80%}
.reqwrap .msg .who{font-size:11px;font-weight:700;margin-bottom:3px;color:var(--rq-muted)}
.reqwrap .msg .who .when{font-weight:400;color:#94a3b8;margin-left:6px}
.reqwrap .msg.office .who{color:var(--rq-teal)}
.reqwrap .msg.kitchen .who{color:var(--rq-orange)}
.reqwrap .msg .bub{padding:9px 13px;border-radius:14px;font-size:14px;display:inline-block;
  background:#fff;border:1px solid var(--rq-line);box-shadow:var(--rq-shadow-sm);line-height:1.45}
.reqwrap .msg.office{margin-left:auto;text-align:right}
.reqwrap .msg.office .bub{background:var(--rq-teal);color:#fff;border:0;border-bottom-right-radius:4px}
.reqwrap .msg.kitchen .bub{background:var(--rq-orange);color:#fff;border:0;border-bottom-left-radius:4px}
.reqwrap .msg.director .bub{background:#fff;border-bottom-left-radius:4px}

/* ---------- enrollment grid ---------- */
.reqwrap table.enr{border-collapse:collapse;width:100%;max-width:620px;
  border-radius:10px;overflow:hidden;box-shadow:var(--rq-shadow-sm)}
.reqwrap table.enr th,.reqwrap table.enr td{border:1px solid var(--rq-line);
  padding:9px 11px;text-align:center;font-size:13.5px}
.reqwrap table.enr th{background:#f8fafc;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:#475569}
.reqwrap table.enr td.gname{text-align:left;font-weight:600;white-space:nowrap}
.reqwrap table.enr input{width:90px;text-align:center;font-weight:700}

/* ---------- director top bar ---------- */
.reqwrap .dirbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}

/* ---------- login card ---------- */
.reqwrap .loginwrap{max-width:400px;margin:7vh auto}
.reqwrap .loginwrap .rq-head{padding:24px 22px}
.reqwrap .loginwrap .rq-head h1{font-size:23px}
.reqwrap .loginwrap .rcard{padding:24px 24px 22px}

/* ---------- mobile (nice-to-have, no breakage) ---------- */
@media (max-width:640px){
  .reqwrap .rq-head{padding:14px 16px;gap:8px;border-radius:14px}
  .reqwrap .rq-head h1{font-size:18px}
  .reqwrap .rq-head a.hbtn,.reqwrap .rq-head button.hbtn{padding:7px 11px;font-size:12.5px}
  .reqwrap .rcard{padding:16px;border-radius:14px}
  .reqwrap .fieldrow{gap:10px}
  .reqwrap .fieldrow>div{min-width:110px}
  /* tables scroll instead of squeeze */
  .reqwrap table.rtbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .reqwrap table.rtbl td,.reqwrap table.rtbl th{padding:10px 9px}
  .reqwrap .msg{max-width:92%}
  .reqwrap .loginwrap{margin:3vh auto}
}

/* ============ PRINT: Kitchen Calendar (11×17 / Tabloid, landscape) ============
   ALL print sizing lives in @media print, so it ALWAYS applies when printing —
   even if the fit script doesn't run. A normal week is compact enough to fit one
   sheet on its own. The script (in requests_calendar.html) only sets two CSS
   variables, read by @media print:
     --fillH : a pixel height for the grid so a light week's rows stretch to fill
     --pzoom : <1 to shrink a packed week so it still fits ONE sheet (zoom reflows
               the layout, so the browser paginates the shrunk size)
   Defaults (auto / 1) already give a good one-page layout with no script. */
@media print {
  /* margin:0 gives the grid the whole sheet — set "Margins: None/Default" and
     "Paper: Tabloid (11x17)" in the print dialog for this to fill properly */
  @page { size: 11in 17in landscape; margin: 0; }
  /* the default 8px body margin would push the filled grid onto a 2nd page */
  html, body { margin: 0 !important; padding: 0 !important; background: #fff; }
  main.container { margin: 0 !important; padding: 6mm !important; }

  /* keep colors; hide on-screen-only controls */
  .reqwrap, .reqwrap * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .reqwrap .rq-head, .reqwrap .seg, .no-print { display: none !important; }

  /* --pzoom shrinks a packed week onto one sheet */
  .reqwrap { overflow: visible; zoom: var(--pzoom, 1); }

  /* fixed table layout keeps columns even + height predictable; --fillH stretches
     rows to fill a light week; grid always spans the full width */
  .reqwrap .calwrap { overflow: visible !important; border: 0; box-shadow: none; border-radius: 0; }
  .reqwrap table.kcal { min-width: 0 !important; width: 100%; table-layout: fixed; height: var(--fillH, auto); }
  .reqwrap table.kcal td.meal { width: 62px; }
  .reqwrap table.kcal thead th { position: static !important; }
  .reqwrap table.kcal tr { page-break-inside: avoid; }

  /* compact sizing so a normal week fits one sheet with room to spare */
  .reqwrap .legend { gap: 16px; margin: 2px 0 6px; }
  .reqwrap .legend span { font-size: 14px !important; font-weight: 600; }
  .reqwrap .legend .gdot { width: 12px; height: 12px; margin-right: 6px; }
  .reqwrap .legend .muted { font-size: 13px; color: #334155 !important; }
  .reqwrap table.kcal thead th { background: var(--rq-teal-dk) !important; color: #fff !important;
    font-size: 13px; padding: 5px 6px; }
  .reqwrap table.kcal thead th.out { background: var(--rq-teal-deep) !important; }
  .reqwrap table.kcal thead th .heb { font-size: 11px; }
  .reqwrap table.kcal td.meal { font-size: 11px; }
  .reqwrap table.kcal td { font-size: 11.5px; padding: 4px 7px; }
  .reqwrap .tag { box-shadow: none !important;
    filter: brightness(1.08) saturate(.95); -webkit-filter: brightness(1.08) saturate(.95);
    font-size: 12px; line-height: 1.25; padding: 4px 7px; margin: 2px 0; }
  .reqwrap .tag .enr { background: rgba(255,255,255,.32) !important; font-size: 11px; padding: 0 4px; }
  .reqwrap .gdot { box-shadow: none !important; }
}

/* ---- the fit script briefly adds .measuring on SCREEN to measure the true
        printed height; these mirror the @media print sizing at print width ---- */
.measuring .reqwrap .rq-head, .measuring .reqwrap .seg, .measuring .no-print { display: none !important; }
.measuring .reqwrap { width: var(--measure-w, 1500px) !important; overflow: visible; }
.measuring .reqwrap .calwrap { overflow: visible !important; }
.measuring .reqwrap table.kcal { min-width: 0 !important; width: 100%; table-layout: fixed; height: auto !important; }
.measuring .reqwrap table.kcal td.meal { width: 62px; }
.measuring .reqwrap .legend { gap: 16px; margin: 2px 0 6px; }
.measuring .reqwrap .legend span { font-size: 14px !important; }
.measuring .reqwrap table.kcal thead th { font-size: 13px; padding: 5px 6px; }
.measuring .reqwrap table.kcal td.meal { font-size: 11px; }
.measuring .reqwrap table.kcal td { font-size: 11.5px; padding: 4px 7px; }
.measuring .reqwrap .tag { font-size: 12px; line-height: 1.25; padding: 4px 7px; margin: 2px 0; }
.measuring .reqwrap .tag .enr { font-size: 11px; padding: 0 4px; }