/* Vacation bid page. Base look (header, cards, buttons, toast) is the Admin page's mealcost.css;
 * this file adds the Monday-first week grid and the week sheet. Shift colours = app.css values. */
:root{--font-mono:var(--mono);--shift-a:#ec5b52;--shift-b:#3b82f6;--shift-c:#22c55e;--red:#ec5b52}
html[data-theme="day"]{--red:#c62828}
.body{padding-bottom:110px}
.vb-admin{display:flex;align-items:center;gap:12px}
.vb-sw{position:relative;width:51px;height:31px;flex-shrink:0}
.vb-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.vb-sw span{position:absolute;inset:0;border-radius:99px;background:var(--pill);transition:background .15s}
.vb-sw span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .15s}
.vb-sw input:checked+span{background:var(--assist)}
.vb-sw input:checked+span::after{transform:translateX(20px)}
.vb-sw.sm{transform:scale(.85)}
.vb-off{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:8px;background:var(--bg2);border-radius:10px;margin:8px 0}
.vb-me{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.vb-me span{font:12px var(--mono);background:var(--card);border-radius:99px;padding:6px 10px;color:var(--muted2)}
.vb-me b{color:var(--text)}
.vb-shift{box-shadow:inset 3px 0 0 var(--s)}
.vb-pools{display:flex;background:var(--pill);border-radius:12px;padding:3px;margin:10px 0 4px}
.vb-pools button{flex:1;border:0;background:none;color:var(--muted2);font:600 13px var(--font);padding:9px 2px;border-radius:9px;cursor:pointer}
.vb-pools button.on{background:var(--card);color:var(--text)}
.cal-head{padding:12px 0 8px}
.cal-week,.vb-grid{padding:0}
/* The station calendar's month grid (calendar.css), with rows that grow to fit the week bands. */
.vb-grid{grid-auto-rows:minmax(64px,auto);overflow:hidden}
.vb-c{min-height:64px;overflow:visible;padding:3px 0 4px}
.vb-c .cal-cell-head{padding:0 3px}
.vb-c.nobid{opacity:.35;cursor:default}
/* My work day: tinted in my shift's colour (a soft fill + a solid top edge, like the station calendar). */
.vb-c.work{background:color-mix(in srgb,var(--s) 26%,var(--card));box-shadow:inset 0 3px 0 var(--s)}
.vb-c.work .cal-cell-day{color:var(--text)}
.vb-c.hol{outline:1.5px solid var(--acc);outline-offset:-1.5px}
.vb-hol{font:600 8.5px var(--font);color:var(--acc);padding:1px 3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A claimed week: one bar per claimant on each of its days (bottom-aligned so a row's bars line up),
   the label on the Monday running across Tue–Sat over the neighbours' bars. */
.vb-bar{position:relative;display:block;height:16px;margin-top:2px;background:#4b5563;margin-left:-1px;margin-right:-1px}
.vb-bars{display:block;margin-top:auto}
.vb-bar.start{margin-left:3px;border-radius:5px 0 0 5px}
.vb-bar.end{margin-right:3px;border-radius:0 5px 5px 0}
.vb-bar.me{background:#9a6a1c}
.vb-bar.over{background:var(--red)}
.vb-lbl{position:absolute;z-index:2;left:4px;top:0;width:calc(600% - 10px);font:600 11px/16px var(--font);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-lbl .vb-sen{color:rgba(255,255,255,.75)}
.vb-lbl .vb-star{color:#ffd56b}
.vb-n{display:block;padding:0 3px;font:700 9px var(--mono);color:var(--muted2);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.vb-red{color:var(--red);font:700 11px var(--mono);letter-spacing:.06em}
.vb-sen{font:600 11px var(--mono);color:var(--muted)}
.vb-star{color:var(--acc)}
.vb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.vb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:201;background:var(--card);border-radius:20px 20px 0 0;padding:8px 18px calc(env(safe-area-inset-bottom,0px) + 18px);max-height:86vh;overflow-y:auto;max-width:760px;margin:0 auto}
.vb-grab{width:36px;height:5px;border-radius:3px;background:var(--pill);margin:0 auto 12px}
.vb-ovh{margin:12px 0 6px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--red) 18%,var(--card));color:var(--red);font:700 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.vb-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr)}
.vb-row.over{border-left:3px solid var(--red);padding-left:10px}
.vb-nm{font-weight:700;font-size:15px}
.vb-note{font-size:14px;margin-top:3px;color:var(--muted2)}
.vb-empty{color:var(--muted);font-size:14px;padding:14px 0}
.vb-in{width:100%;font:16px var(--font);padding:12px;border-radius:12px;border:1px solid var(--bdr);background:var(--bg2);color:var(--text)}
.vb-stb{display:block;width:100%;margin:10px 0;padding:12px;border-radius:12px;border:1px solid var(--bdr);background:none;color:var(--muted2);font:600 15px var(--font);text-align:left;cursor:pointer}
.vb-stb[aria-pressed="true"]{background:rgba(245,166,35,.16);border-color:var(--acc);color:var(--text)}
.vb-stb small{color:var(--muted);font-weight:500}
.vb-del{color:var(--red)}
.vb-err{margin-top:10px;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--red) 18%,var(--card));color:var(--text);font-size:14px;font-weight:600}
.vb-bd{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bdr)}
.vb-bd:last-child{border:0}
.vb-bd.off{opacity:.5}
.vb-bal{width:56px;font:600 16px var(--mono);text-align:center;padding:8px 4px;border-radius:10px;border:1px solid var(--bdr);background:var(--bg2);color:var(--text)}
.vb-preview{margin:10px 0 4px;padding:9px 12px;border-radius:10px;background:rgba(245,166,35,.16);color:var(--acc);font:700 12px var(--mono);letter-spacing:.08em;text-align:center}
.btn.vb-danger{background:var(--red);color:#fff;margin-top:16px}