:root {
  --navy: #14284B; --blue: #1F5FAD; --tint: #E8F0FB; --ink: #17202B; --muted: #5B6672; --line: #DCE2EA; --hair: #EDF0F4; --bg: #F3F5F8; --white: #fff;
  --ok: #1E7B34; --okb: #2E9A47; --ok-soft: #E3F4E6; --warn: #8A5A00; --warn-soft: #FFF3D9; --bad: #C0392B; --bad-soft: #FDECEA;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); -webkit-tap-highlight-color: transparent; }
/* Phones: nothing may make the page wider than the screen. A wider page makes the phone zoom out, which pushes the
   fixed tab bar off the bottom of the screen (seen on Sati's iPhone, 14 Nov). iOS must not enlarge text by itself. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
button, input, select { font: inherit; }
.hidden { display: none !important; }
.hd { background: var(--navy); color: var(--white); padding: calc(14px + env(safe-area-inset-top)) 20px 18px; display: grid; gap: 4px; }
.brand { display: flex; gap: 7px; align-items: center; font-weight: 800; letter-spacing: .16em; font-size: 12px; opacity: .92; }
.hd h1 { margin: 6px 0 0; font-size: 26px; line-height: 1.2; }
.hd .k { color: #CFDDEE; font-size: 14px; }
.body { padding: 16px 16px calc(100px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.pc { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.lbl { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.big { font-size: 24px; font-weight: 800; }
.muted { color: var(--muted); } .small { font-size: 13.5px; }
.status { display: flex; gap: 12px; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #C3CDD8; flex: none; }
.dot.in { background: var(--okb); } .dot.break { background: #C77700; }
.msg { border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.msg.info { background: var(--tint); color: #123E7A; } .msg.ok { background: var(--ok-soft); color: var(--ok); } .msg.warn { background: var(--warn-soft); color: var(--warn); } .msg.bad { background: var(--bad-soft); color: #8E1C1C; }
.row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.row:last-child { border-bottom: 0; }
.row small { display: block; color: var(--muted); font-size: 13px; }
.row .r { text-align: right; font-weight: 700; white-space: nowrap; }
.bigbtn { width: 100%; border: 0; border-radius: 16px; padding: 16px; font-size: 18px; font-weight: 800; color: var(--white); background: var(--blue); }
.bigbtn:disabled { opacity: .5; }
.btn2 { width: 100%; border: 1.5px solid var(--line); background: var(--white); border-radius: 14px; padding: 12px; font-weight: 700; color: var(--ink); }
/* Input boxes only: "in" is also the clocked-in status class (.dot.in, .st.in), which this must never stretch. */
input.in, select.in { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; font-size: 18px; background: var(--white); color: var(--ink); }
.linkbtn { border: 0; background: none; padding: 4px 0 0; color: var(--blue); font-weight: 700; font-size: 13.5px; text-decoration: underline; }
label.f { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.err { color: var(--bad); font-weight: 700; min-height: 1em; }
.pnav { display: flex; justify-content: space-between; align-items: center; }
.pnav button { border: 1.5px solid var(--line); background: var(--white); border-radius: 10px; padding: 6px 12px; font-weight: 800; }
/* The tab bar always fits the screen: columns may shrink below their label width (minmax(0, 1fr)), labels never wrap. */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 10; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
/* Who's working (managers, view only) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; background: var(--tint); border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 800; color: var(--muted); }
.seg button.on { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(20,40,75,.15); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.st { font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: #EEF1F5; color: #4A5A6A; }
.st.in { background: #E3F4E6; color: #1E6B2E; } .st.break { background: #FFF1DC; color: #8A5200; }
.st.late { background: #FDE7E6; color: #9B1C14; } .st.done { background: #EEF1F5; color: #6B7785; }
.day { font-weight: 800; font-size: 13.5px; margin-top: 6px; color: var(--navy); }
.tabs button { border: 0; background: none; padding: 8px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); border-radius: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { flex: none; }
.tabs button.on { color: var(--navy); background: var(--tint); }
.week { font-weight: 800; margin-top: 4px; }
.center { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 20px 0; }
.logo { width: 72px; height: 72px; border-radius: 20px; background: var(--navy); color: var(--white); display: grid; place-items: center; }