/* Time Clock (includes/timeclock.php): My Day clock bar, Dispatch "On the clock" line, Timesheets, Wall Clock.
   Only what the Time Clock adds; app variables only. Loaded by field.php, command-center.php, timesheets.php, wallclock.php. */
.tc-bar { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.tc-bar.in { background: var(--ink); color: #fff; border-color: var(--ink); }
.tc-bar.brk { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.tc-bar > div { min-width: 0; flex: 1; }
.tc-bar b, .tc-bar > div > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-bar > div > span { font-size: .8rem; opacity: .8; }
.tc-bar button { flex: none; }
.tc-bar .field-drive { height: 44px; min-height: 44px; padding: 0 18px; font-size: .9rem; }
.tc-bar .quiet { height: 36px; min-height: 36px; padding: 0 12px; font-size: .75rem; }
.tc-bar.in .quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.tc-bar.in .quiet:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.tc-bar.brk .field-drive { background: #fff; color: var(--ink); }
.tc-bar.brk .field-drive:hover { background: var(--paper); }
.field-person em.tc-off { color: var(--muted); }
.tc-crew label.check { padding: 6px 0; }
.tc-crew input:disabled + * { opacity: .6; }
.tc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 6px; vertical-align: middle; flex: none; }
.tc-dot.in { background: var(--grass); } .tc-dot.brk { background: var(--orange); } .tc-dot.miss { background: var(--red); }
.tc-edited { color: var(--red); font-weight: 650; font-size: .78rem; }
.tc-ot { color: var(--orange); font-weight: 650; }
.tc-miss-n { color: var(--red); font-weight: 650; }
.tc-strip { display: flex; gap: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; padding: 8px 12px; margin: 0 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .85rem; white-space: nowrap; }
.tc-strip b { font-weight: 650; }
.tc-strip::-webkit-scrollbar { display: none; }
.tc-strip > * { flex: none; }
.tc-strip a { color: var(--blue); text-decoration: none; font-weight: 600; }
.tc-strip a:hover { color: var(--ink); }
.tc-strip .tc-warn { color: var(--orange); font-weight: 650; }
table.tc-week td, table.tc-week th { white-space: nowrap; }
table.tc-week td.num, table.tc-week th.num { text-align: right; }
table.tc-week a, .tc-day a { text-decoration: none; }
table.tc-week tr.tc-total td { font-weight: 650; border-top: 2px solid var(--line); }
.tc-flag { display: inline-block; font-size: .72rem; font-weight: 750; padding: 2px 8px; border-radius: 99px; background: var(--orange); color: var(--ink); margin-left: 6px; }
.tc-map { height: 220px; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--paper); }
.tc-pin { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); background: var(--grass); }
.tc-pin.out { background: var(--red); }
.tc-pair-code { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; }
.tc-pair-code strong { font-size: 2rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.tc-pair-row { gap: 8px; margin-top: 10px; }
.tc-pair-row input { flex: 1; min-width: 0; }
.tc-dev-acts { text-align: right; white-space: nowrap; }
.tc-here { margin-top: 6px; }
.tc-pin-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.tc-pin-form input { width: 140px; letter-spacing: .2em; }
.tc-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-me .tc-bar { margin: 0; flex: 1; min-width: 260px; }
@media (max-width: 800px) {
  .tc-strip { gap: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tc-strip::-webkit-scrollbar { display: none; }
  .slim-list > table.tc-week td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tc-week .tc-edited { font-size: .7rem; }
  .tc-me .tc-bar { min-width: 0; }
}

/* ---------- Shop Wall Clock (wallclock.php) ---------- */
body.wc { margin: 0; min-height: 100dvh; background: #0f1113; color: #f4f5f6; -webkit-user-select: none; user-select: none; overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
body.wc.light { background: var(--paper); color: var(--ink); }
.wc-app { display: flex; flex-direction: column; height: 100dvh; box-sizing: border-box; padding: calc(24px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(28px + env(safe-area-inset-left, 0px)); gap: 18px; }
.wc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wc-time { font-size: clamp(3.5rem, 11vw, 7.5rem); font-weight: 750; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wc-time small { font-size: .35em; font-weight: 650; margin-left: .2em; opacity: .7; letter-spacing: 0; }
.wc-date { font-size: clamp(1.1rem, 2.4vw, 1.6rem); opacity: .75; margin-top: 6px; }
.wc-brand { text-align: right; font-size: .95rem; opacity: .7; }
.wc-brand b { display: block; font-size: 1.15rem; opacity: 1; }
.wc-count { display: flex; gap: 18px; font-size: 1rem; opacity: .85; flex-wrap: wrap; }
.wc-count span { display: inline-flex; align-items: center; }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.wc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 132px; padding: 14px 10px; border-radius: 18px; border: 2px solid transparent;
  background: #1c1f23; color: inherit; font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.wc-tile:hover { background: #262a2f !important; border-color: #3a3f45 !important; color: inherit !important; }
.wc-tile:active { transform: scale(.97); }
body.wc.light .wc-tile { background: #fff; border-color: var(--line); }
body.wc.light .wc-tile:hover { border-color: var(--ink) !important; background: #fff !important; color: var(--ink) !important; }
.wc-tile i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #2f343a; font-style: normal; font-weight: 750; font-size: 1.35rem; letter-spacing: .02em; }
body.wc.light .wc-tile i { background: var(--paper); }
.wc-tile b { font-size: 1.05rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-tile span { font-size: .85rem; opacity: .75; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-tile.in i { background: var(--grass); color: var(--ink); }
.wc-tile.brk i { background: var(--orange); color: var(--ink); }
.wc-tile.in { border-color: rgba(92,219,58,.45); }
.wc-tile.brk { border-color: rgba(240,138,36,.55); }
.wc-names .wc-tile i { display: none; }
.wc-names .wc-tile { min-height: 84px; }
.wc-foot { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; opacity: .6; }
.wc-sheet { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); z-index: 10; padding: 16px; }
.wc-sheet.on { display: flex; }
.wc-card { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; background: #1c1f23; color: #f4f5f6; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
body.wc.light .wc-card { background: #fff; color: var(--ink); }
.wc-card h2 { margin: 0; font-size: 1.6rem; }
.wc-card p { margin: 0; opacity: .75; }
.wc-dots { display: flex; justify-content: center; gap: 14px; height: 22px; }
.wc-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; opacity: .6; }
.wc-dots i.on { background: currentColor; opacity: 1; }
.wc-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wc-pad button, .wc-acts button, .wc-btn { min-height: 64px; border-radius: 16px; border: 0; font: inherit; font-size: 1.5rem; font-weight: 650; cursor: pointer; background: #2f343a; color: inherit; transition: background .12s; }
.wc-pad button:hover, .wc-btn.quiet:hover { background: #3a4047 !important; color: inherit !important; }
body.wc.light .wc-pad button, body.wc.light .wc-btn.quiet { background: var(--paper); color: var(--ink); }
body.wc.light .wc-pad button:hover, body.wc.light .wc-btn.quiet:hover { background: var(--line) !important; color: var(--ink) !important; }
.wc-pad button.wc-key-x { font-size: 1.1rem; }
.wc-acts { display: grid; gap: 10px; }
.wc-acts button { font-size: 1.3rem; }
.wc-acts .go { background: var(--grass); color: var(--ink); }
.wc-acts .go:hover { background: #4cc72c !important; color: var(--ink) !important; }
.wc-acts .brk { background: var(--orange); color: var(--ink); }
.wc-acts .brk:hover { background: #dc7a18 !important; color: var(--ink) !important; }
.wc-acts .stop { background: var(--red); color: #fff; }
.wc-acts .stop:hover { background: #c92f24 !important; color: #fff !important; }
/* The site-wide button:hover (blue) would win on the kiosk; these keep each action its own color. */
.wc-btn.quiet { font-size: 1.05rem; min-height: 52px; }
.wc-err { color: #ff8a80; font-weight: 650; min-height: 1.3em; }
body.wc.light .wc-err { color: var(--red); }
.wc-ok { font-size: 4rem; line-height: 1; }
.wc-crew-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.wc-crew-list label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #2f343a; font-size: 1.1rem; cursor: pointer; color: #f4f5f6; font-weight: 600; margin: 0; }
body.wc.light .wc-crew-list label { background: var(--paper); color: var(--ink); }
.wc-crew-list input { width: 24px; height: 24px; }
.wc-crew-list span { opacity: .7; font-size: .9rem; margin-left: auto; }
.wc-pair { margin: auto; width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; gap: 16px; }
.wc-pair input { font-size: 2.2rem; text-align: center; letter-spacing: .3em; padding: 12px; border-radius: 14px; border: 2px solid #3a3f45; background: #1c1f23; color: inherit; font-variant-numeric: tabular-nums; }
body.wc.light .wc-pair input { background: #fff; border-color: var(--line); }
.wc-pair .wc-btn { background: var(--grass); color: var(--ink); }
.wc-pair .wc-btn:hover { background: #4cc72c !important; color: var(--ink) !important; }
.wc-demo { font-size: .85rem; padding: 6px 12px; border-radius: 99px; background: rgba(30,144,255,.18); color: #8fc7ff; align-self: flex-start; }
body.wc.light .wc-demo { color: var(--blue); }
@media (orientation: portrait) {
  .wc-app { padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .wc-top { flex-direction: column; align-items: flex-start; }
  .wc-brand { text-align: left; }
  .wc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 600px) {
  .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-tile { min-height: 110px; }
}
.tc-tiles .stat { flex: 1 1 140px; }
dialog.tc-dlg { border: 0; border-radius: 16px; padding: 20px; width: min(440px, calc(100% - 32px)); }
dialog.tc-dlg .form-grid { margin-bottom: 12px; }
dialog.tc-dlg input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.list-bar .tc-wk select { min-width: 210px; }
@media (max-width: 600px) { .list-bar .tc-wk select { min-width: 0; } }

/* One-line rows (Travis: detail lines never wrap; badges and times sit beside, not under). */
.tc-map { position: relative; z-index: 0; isolation: isolate; }
.tc-day .slim-list > table td:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .tc-day .slim-list > table td:first-child, .tc-devs > table td:first-child, .slim-list > table.tc-week td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slim-list > table.tc-week td:last-child, .tc-day .slim-list > table td:last-child { white-space: nowrap; }
  .card.slim-list > table.tc-week td, .tc-day .slim-list > table td, .tc-devs > table td { border-left: 0; border-right: 0; }
  .tc-week .tc-miss-txt { display: none; }
}
/* Phones (Oct 17, 2026, no sideways scrolling): the On the clock line is information, not buttons, so it flows onto more
   lines instead of hiding names off the edge. The near-overtime list gets its own line. Desktop unchanged. */
@media (max-width: 800px) {
  .tc-strip { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; column-gap: 14px; }
  .tc-strip > .tc-warn { flex: 1 1 100%; min-width: 0; }
}
/* On the clock and Near overtime, one line each at every width (Oct 17, 2026, Travis: "giant run on"; Near overtime the same
   way at 11:36 AM): command-center.php shows the names that fit and a "+N more" chip; the chip opens that line's full list (one
   name per line on phones, rows on a computer) and Show less closes it. */
.tc-strip { overflow: hidden; }
.tc-strip > .tc-line { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.tc-line > * { flex: none; }
.tc-line > .tc-p.tc-shrink { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the one name left on a very narrow line */
.tc-line .tc-hide { display: none; }
.tc-line.tc-brief .tc-t { display: none; } /* when the line is full, the clock-in times go first (they show again when opened) */
.tc-more { height: var(--btn-h-sm, 30px); min-height: 0; padding: var(--btn-pad-sm, 0 12px); border-radius: var(--btn-radius, 999px); border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 650; line-height: 1; cursor: pointer; box-shadow: none; }
.tc-more:hover { border-color: var(--blue); color: var(--blue); }
.tc-otl > b, .tc-otl > .tc-p { color: var(--orange); font-weight: 650; }
.tc-strip.open { flex-wrap: wrap; row-gap: 6px; }
.tc-strip > .tc-line.open { flex: 1 1 100%; max-width: none; flex-wrap: wrap; row-gap: 6px; }
/* Computers: Near overtime takes at most 45% of the row, so On the clock always keeps room for names. */
@media (min-width: 801px) {
  .tc-strip > .tc-line { flex: 1 1 0; }
  .tc-strip > .tc-otl { flex: 0 1 auto; max-width: 45%; }
  .tc-strip > .tc-line.open { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 800px) {
  .tc-strip > .tc-line { gap: 12px; flex: 1 1 100%; }
  .tc-line.open > .tc-p { flex: 1 1 100%; }
  .tc-line.open > b { flex: 1 1 auto; }
  .tc-line.tc-brief > a { display: none; } /* full phone line: the Timesheets link steps aside for names (back when opened) */
}
/* Week table on computers and tablets (Oct 17, 2026, rules check): the Person cell is one line ("…" past 160px); Team steps
   out under a 960px card and the days and OT under 600px, like the phone view (style.css .lc-a/.lc-c). */
@media (min-width: 801px) { table.tc-week td:first-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } }
/* PIN Pad first (Wall Clock Starts With = PIN Pad): the pad is the main screen, numbers only; the clock stays above it. */
.wc-sheet.wc-first { background: transparent; align-items: flex-end; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.wc-sheet.wc-first [data-wc-who]:empty { display: none; }
.wc-app:has(~ .wc-sheet.wc-first.on) .wc-grid, .wc-app:has(~ .wc-sheet.wc-first.on) .wc-count { visibility: hidden; }
/* Time Off on the Wall Clock: one-line labels with their field, same card and buttons as the punches. */
.wc-to label { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-weight: 650; white-space: nowrap; }
.wc-to label[hidden] { display: none; }
.wc-to input, .wc-to select { flex: 0 1 60%; min-width: 0; min-height: 48px; font: inherit; border-radius: 12px; border: 2px solid var(--muted); background: var(--ink); color: inherit; padding: 0 10px; box-sizing: border-box; }
body.wc.light .wc-to input, body.wc.light .wc-to select { background: #fff; border-color: var(--line); }
.wc-to .go { background: var(--grass); color: var(--ink); }
.wc-to .go:hover { background: var(--grass) !important; filter: brightness(.9); color: var(--ink) !important; }
.wc-mine p { margin: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Not Clocked In and Time Off on Base's clock line. */
.tc-strip .tc-nci { color: var(--orange); font-weight: 650; }
/* Field crew chip: room for the Not Clocked In pill (one line, never cut). */
.field-person:has(> .badge) { width: auto; min-width: 72px; }
.field-person > .badge { overflow: visible; }