/* Tech Room Board — committed light. A wall display shouldn't change appearance because someone
   flipped their phone to dark mode, so every colour is painted explicitly and no theme block follows.
   Tile fills are darkened enough to carry white text at the sizes used here. */
:root {
  --bg: #EFF2F6;
  --bg-2: #FFFFFF;
  --fg: #161A20;
  --fg-muted: #5C6573;
  --line: #D9DEE5;

  --here: #17835A;
  --away: #B5760C;
  --meeting: #6149AE;
  --branch: #1D6AAE;
  --off: #7E8794;

  --on-state: #FFFFFF;
  --strip-bg: rgba(255, 255, 255, .30);
  --strip-busy: rgba(0, 0, 0, .40);
  --strip-bg-bar: rgba(22, 26, 32, .10);       /* strip on the white group bar */
  --chip-shadow: 0 10px 28px rgba(22, 26, 32, .22);
  --preview-bg: rgba(0, 0, 0, .34);

  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* The overlays below set `display`, which would otherwise beat the browser's own [hidden] rule and
   leave every panel stacked over the board. Keep this above them. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  padding-inline: 16px;
  padding-block: 0 env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* ---- header ---- */
.hdr {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hdr h1 {
  margin: 0;
  font: 700 22px/1 var(--font-display);
  letter-spacing: -.01em;
}
.clock {
  font: 500 20px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  white-space: nowrap;
}
.legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font: 500 13px/1 var(--font-ui);
  color: var(--fg-muted);
}
/* mode chip: "Tech room wall iPad" on a paired display, "View only" for a signed-out viewer */
.mode {
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font: 600 12px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
}
.mode.display  { background: var(--here); color: #fff; }
.mode.person   { background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); }
.mode.viewonly { background: var(--bg-2); color: var(--fg-muted); border: 1px solid var(--line); }
.approvals {
  padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: var(--away); color: #241a02; border: 0;
  font: 600 13px/1 var(--font-ui);
}

.setupbtn {
  padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line);
  font: 600 13px/1 var(--font-ui);
}
.setupbtn:hover { border-color: var(--fg-muted); }

/* setup / approval overlays — opened on demand, never on load */
#setup, #approvedlg {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(0, 0, 0, .6); padding: 16px;
}
.panel {
  width: min(560px, 100%); max-height: 90dvh; overflow-y: auto;
  padding: 28px; border-radius: 18px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--fg);
}
.panel h2 { margin: 0 0 10px; font: 700 26px/1.1 var(--font-display); text-wrap: balance; }
.panel p  { margin: 0 0 20px; font: 500 15px/1.5 var(--font-ui); color: var(--fg-muted); }
.whorow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.whobtn {
  min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  background: var(--bg); color: var(--fg); font: 600 17px/1.2 var(--font-ui);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.whobtn:hover:not(:disabled) { border-color: var(--here); }
.whobtn:disabled { opacity: .45; cursor: default; }
.whobtn small { font: 500 12px/1 var(--font-ui); color: var(--fg-muted); }
.whobtn.display { grid-column: 1 / -1; background: var(--bg); }

.req {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.req strong { display: block; font: 600 16px/1.3 var(--font-ui); }
.req small  { font: 500 13px/1.3 var(--font-ui); color: var(--fg-muted); }
.reqbtns { display: flex; gap: 8px; }
.reqbtns button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  font: 600 14px/1 var(--font-ui);
}
.reqbtns button:disabled { opacity: .45; cursor: default; }
.reqbtns .ok   { background: var(--here); color: #fff; }
.reqbtns .deny { background: var(--bg); color: var(--fg-muted); border: 1px solid var(--line); }
.panelclose {
  width: 100%; height: 48px; margin-top: 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); font: 600 15px/1 var(--font-ui);
}

.legend span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; background: var(--dot);
}

/* ---- PLS Technology group calendar bar ---- */
.groupbar {
  height: 48px; margin-bottom: 8px; padding: 0 18px;
  border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; color: var(--fg);
  transition: border-color .25s ease;
}
.groupbar.busy { border-color: var(--meeting); }
.groupbar .gname {
  font: 600 13px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); white-space: nowrap;
}
.groupbar .gtext {
  font: 500 15px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0;
}
.groupbar .strip { position: relative; inset: auto; flex: 1 1 auto; height: 8px; margin-left: 8px; background: var(--strip-bg-bar); }
.groupbar .strip.unknown { background: repeating-linear-gradient(90deg, var(--strip-bg-bar) 0 6px, transparent 6px 12px); }
.groupbar .strip i { background: var(--meeting); }
.groupbar .strip .now { background: var(--fg); }
.groupbar .strip .lbl { display: none; }

/* ---- grid ---- */
#grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  height: calc(100dvh - 72px - 56px - 10px - env(safe-area-inset-bottom, 0px));
  min-height: 420px;
}
@media (max-width: 640px) {
  .legend { display: none; }
  .approvals, .setupbtn { padding: 6px 9px; font-size: 12px; }
  #grid { grid-template-columns: 1fr; grid-auto-rows: minmax(190px, 1fr); height: auto; }
}

/* ---- tile ---- */
.tile {
  position: relative;
  border-radius: 22px;
  background: var(--off);
  color: var(--on-state);
  padding: 22px 24px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y;
  transition: background-color .25s ease, transform .12s ease;
  outline: none;
}
.tile:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.tile.pressed { transform: scale(.985); }
/* only the viewer's own tile is interactive; the others just display */
.tile.readonly { cursor: default; }
.tile.readonly .chooser, .tile.readonly .eta-preview { display: none; }
.name .you {
  display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 6px; vertical-align: 1px;
  background: rgba(255, 255, 255, .22); font-size: 11px; letter-spacing: .08em;
}
.tile[data-state="here"]    { background: var(--here); }
.tile[data-state="away"]    { background: var(--away); }
.tile[data-state="meeting"] { background: var(--meeting); }
.tile[data-state="branch"]  { background: var(--branch); }
.tile[data-state="off"]     { background: var(--off); }

/* calendar says busy while the person is marked Here: a quiet hatch, never an auto-flip */
.tile.cal-busy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 10px, transparent 10px 22px);
}

.tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.name {
  font: 600 15px/1.2 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase; opacity: .92;
}
.cal {
  font: 500 14px/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-align: right; opacity: .9; max-width: 55%;
}
.tile .bottom { display: grid; gap: 6px; }
.status {
  font: 700 clamp(38px, 6.5vw, 84px)/.95 var(--font-display);
  letter-spacing: -.02em; text-wrap: balance;
}
.sub {
  font: 500 clamp(16px, 2vw, 20px)/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums; min-height: 1.3em; opacity: .96;
}
.sub.overdue { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* ---- day strip (free/busy, 8a–5p Central) ---- */
.strip {
  position: absolute; left: 24px; right: 24px; bottom: 16px; height: 8px;
  border-radius: 4px; background: var(--strip-bg);
}
.strip.unknown { background: repeating-linear-gradient(90deg, var(--strip-bg) 0 6px, transparent 6px 12px); }
.strip i { position: absolute; top: 0; bottom: 0; background: var(--strip-busy); border-radius: 4px; }
.strip .now { position: absolute; top: -5px; width: 2px; height: 18px; margin-left: -1px; background: var(--on-state); border-radius: 1px; }
.strip .lbl {
  position: absolute; top: -18px; font: 500 11px/1 var(--font-ui); opacity: .7; letter-spacing: .04em;
}
.strip .lbl.l { left: 0; } .strip .lbl.r { right: 0; }

/* ---- ETA drag preview ---- */
.eta-preview {
  position: absolute; right: 24px; bottom: 64px;
  display: none; padding: 10px 14px; border-radius: 12px;
  background: var(--preview-bg);
  font: 700 clamp(18px, 2.4vw, 26px)/1.1 var(--font-display);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tile.dragging .eta-preview { display: block; }
.tile.dragging .sub { visibility: hidden; }

/* ---- long-press chooser ---- */
.chooser {
  position: absolute; left: 16px; right: 16px; bottom: 36px;
  display: flex; gap: 10px;
  transform: translateY(130%); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.chooser.open { transform: none; opacity: 1; pointer-events: auto; }
.chip {
  flex: 1 1 0; height: 58px; border: 0; border-radius: 14px; color: #fff;
  font: 600 15px/1 var(--font-ui); box-shadow: var(--chip-shadow); cursor: pointer;
  touch-action: manipulation;
}
.chip[data-state="here"]    { background: var(--here); }
.chip[data-state="away"]    { background: var(--away); }
.chip[data-state="meeting"] { background: var(--meeting); }
.chip[data-state="branch"]  { background: var(--branch); }
.chip[data-state="off"]     { background: #3B4350; }
.chip[aria-pressed="true"]  { outline: 3px solid #fff; outline-offset: 2px; }
.chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- footer notice (connector state, save errors) ---- */
#notice {
  position: fixed; left: 16px; right: 16px; bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  text-align: center; font: 500 13px/1.3 var(--font-ui); color: var(--fg-muted);
  pointer-events: none;
}
#notice:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tile, .chooser { transition: none; }
  .sub.overdue { animation: none; text-decoration: underline dotted; }
}