/* Saturday Shift Scheduler. Sits on oncall.css, so the sections, panes and flash are the On-Call
   Giveaway's, and only the Saturday rows, boxes and month tiles are defined here. */

/* One Saturday per row: date, who, then two fixed columns that hold a status box or a button, all one
   size, so they line up down every list (Alex, 2026-10-27). */
.sat{ --sat-cell:8.25rem; }
.sat-list{ display:flex; flex-direction:column; }
.sat-row{ display:grid; grid-template-columns:9.5rem minmax(0,1fr) var(--sat-cell) var(--sat-cell); gap:.35rem .7rem; align-items:center;
  padding:.5rem 0; border-top:1px solid var(--rule); }
.sat-list > .sat-row:first-child{ border-top:0; }
.sat-row.admin{ grid-template-columns:9.5rem minmax(0,1fr) var(--sat-cell) 13rem; }
.sat-date{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sat-who{ min-width:0; overflow-wrap:anywhere; }
.sat-a, .sat-b{ display:flex; }

.sat-btn, .sat-tag{ width:100%; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px;
  font:inherit; font-size:.86rem; font-weight:600; white-space:nowrap; }
.sat-btn{ cursor:pointer; background:var(--paper); color:var(--blue); border:1.5px solid var(--blue); }
.sat-btn:hover{ background:var(--hover, #EAF1F5); }
.sat-btn.fill{ background:var(--blue); color:var(--on-blue, #fff); }
.sat-btn:disabled{ opacity:.6; cursor:default; }
.sat-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sat-tag{ border:1.5px solid transparent; }
.tag-mine{ background:var(--hover, #EAF1F5); color:var(--blue); border-color:#8FB6CE; }
.tag-grabs{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber); }
.tag-open{ background:var(--red-bg); color:var(--red-ink); border-color:#D98A82; }
.tag-today{ background:var(--green-bg); color:var(--green-ink); border-color:var(--moss); }
:root[data-theme="dark"] .sat-btn, :root[data-theme="dark"] .tag-mine{ color:var(--bluesub); border-color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sat-btn, :root:not([data-theme="light"]) .tag-mine{ color:var(--bluesub); border-color:var(--bluesub); } }
:root[data-theme="dark"] .sat-btn.fill{ background:var(--bluesub); color:#211E19; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sat-btn.fill{ background:var(--bluesub); color:#211E19; } }
.sat-assign{ width:100%; height:34px; font:inherit; font-size:.86rem; border:1.5px solid var(--rule); border-radius:4px; background:var(--paper); color:var(--ink); }

/* The swap picker opens under the Saturday it is for. */
.sat-swap{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.2rem 0 .8rem; }
.sat-swap .ocg-sel{ max-width:22rem; border-radius:4px; height:34px; }
.sat-swap .sat-btn{ width:auto; padding:0 .9rem; }

.sat-more{ margin-top:.5rem; }
.sat-hint{ margin:.6rem 0 0; }
.sat-note{ background:var(--amber-bg); color:var(--amber-ink); border-left:4px solid var(--amber); border-radius:4px; padding:.55rem .8rem; margin-bottom:.8rem; font-size:.92rem; }
.sat-yearnote{ margin-bottom:.8rem; }

/* The schedule: a box per year, a tile per month, a square per Saturday. */
/* The year box takes a darker line than the month tiles inside it, so the two read apart (Alex, 2026-10-27). */
:root{ --sat-year-line:#B3A994; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --sat-year-line:#6B6253; } }
:root[data-theme="dark"]{ --sat-year-line:#6B6253; }
.sat-year{ border:2px solid var(--sat-year-line); border-radius:4px; padding:.6rem .8rem .8rem; margin-bottom:.8rem; background:var(--paper); }
.sat-year > summary{ cursor:pointer; display:flex; align-items:baseline; gap:.8rem; list-style:none; font-size:1.05rem; }
.sat-year > summary::-webkit-details-marker{ display:none; }
.sat-year > summary::after{ content:'▸'; margin-left:auto; color:var(--muted); font-size:.85rem; }
.sat-year[open] > summary::after{ content:'▾'; }
.sat-year > summary .ocg-muted{ font-size:.85rem; }
.sat-months{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.5rem; margin-top:.7rem; }
.sat-m{ font:inherit; text-align:left; border:2px solid var(--rule); border-radius:4px; padding:.45rem .55rem; min-height:4.6rem; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; gap:.2rem; }
button.sat-m{ cursor:pointer; }
button.sat-m:hover{ border-color:var(--blue); }
.sat-m.sel{ border-color:var(--blue); box-shadow:0 0 0 2px var(--hover, #EAF1F5); }
.sat-m.past{ opacity:.45; }
.sat-m b{ font-size:.92rem; }
.sat-m small{ color:var(--muted); font-size:.74rem; }
.sat-m small.red{ color:var(--red-ink); font-weight:700; }
.sat-dots{ display:flex; gap:3px; }
.sat-dots i, .sat-legend i{ width:13px; height:13px; border-radius:2px; display:inline-block; background:#CFE3D6; }
.sat-dots i.y, .sat-legend i.y{ background:#8FB6CE; }
.sat-dots i.g, .sat-legend i.g{ background:#F2CF83; }
.sat-dots i.o, .sat-legend i.o{ background:#E8A9A2; }
.sat-legend{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--muted); }
.sat-legend i{ vertical-align:-2px; margin-right:.3rem; }
.sat-panel{ border-left:4px solid var(--blue); padding:.2rem 0 0 .8rem; margin-top:.8rem; }
.sat-panel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.2rem; }

.sat-form{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.4rem 0 .6rem; }
.sat-form .ocg-sel{ max-width:18rem; border-radius:4px; height:34px; }
.sat-form .sat-wide{ max-width:32rem; width:100%; }
.sat-form .sat-btn{ width:var(--sat-cell); }
.sat-label{ display:block; font-size:.9em; font-weight:600; margin-top:.8rem; }
.sat-hist td{ vertical-align:top; }

@media (max-width:760px){ .sat-months{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:640px){
  .sat{ --sat-cell:minmax(0,1fr); }
  .sat-months{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .sat-row, .sat-row.admin{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sat-date{ grid-column:1; }
  .sat-who{ grid-column:2; }
  .sat-who:empty{ display:none; }
  .sat-a:empty, .sat-b:empty{ display:none; }
  .sat-form .sat-btn{ width:auto; padding:0 .9rem; }
}