/* Staff Clock module styles. Loaded alongside style.css, so it reuses the TFS
   brand custom properties (--navy #142030, --orange #E7690B, Arial, etc.). */

/* ---- Public clock pages (poster-scan / kiosk / confirmation) ------------- */
.clock-body { background: linear-gradient(180deg, #16243a 0, #22364f 150px, var(--bg) 360px) no-repeat; min-height: 100vh; }
.clock-shell { max-width: 460px; margin: 0 auto; padding: 20px 16px 40px; }
.clock-brand { text-align: center; margin: 10px 0 16px; }
.clock-brand img { height: 44px; width: auto; }
.clock-card { background: var(--card); border-radius: 14px; box-shadow: 0 12px 34px rgba(20,32,48,.22); padding: 22px 20px; }
.clock-card h1 { font-size: 22px; text-align: center; margin: 0 0 2px; }
.clock-card .where { text-align: center; color: var(--muted); font-weight: bold; margin: 0 0 18px; }
.clock-card label { font-size: 15px; }
.clock-card select, .clock-card input { min-height: 56px; font-size: 20px; }
.pin-big { text-align: center; letter-spacing: 10px; font-size: 26px; }
.clockbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.clockbtn { min-height: 72px; font-size: 22px; border: none; border-radius: 12px; color: #fff; font-weight: bold; cursor: pointer; }
.clockbtn.in { background: var(--st-complete, #1f8a4c); }
.clockbtn.in:hover { background: #17703d; }
.clockbtn.out { background: var(--navy); }
.clockbtn.out:hover { background: var(--navy-2); }
.clock-err { background: #fdeaea; border: 1px solid #f2b8b8; color: #8a1c1c; padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: bold; text-align: center; }

/* Full-screen confirmation / warning / message */
.confirm { text-align: center; padding: 26px 18px; }
.confirm .big-name { font-size: 30px; font-weight: bold; margin: 6px 0; }
.confirm .verdict { display: inline-block; font-size: 26px; font-weight: 900; color: #fff; padding: 8px 20px; border-radius: 999px; margin: 8px 0; }
.confirm .verdict.in { background: var(--st-complete, #1f8a4c); }
.confirm .verdict.out { background: var(--navy); }
.confirm .at { font-size: 34px; font-weight: bold; }
.confirm .last { color: var(--muted); margin-top: 12px; }
.confirm .tick { font-size: 46px; }

/* ---- Kiosk display (wall tablet) ---------------------------------------- */
.kiosk { min-height: 100vh; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.kiosk .k-time { font-size: 12vw; font-weight: 900; line-height: 1; letter-spacing: 2px; }
.kiosk .k-date { font-size: 3.4vw; color: #9fb0c4; margin-bottom: 18px; }
.kiosk .k-qr { background: #fff; padding: 16px; border-radius: 16px; }
.kiosk .k-qr img { display: block; width: min(46vw, 420px); height: auto; }
.kiosk .k-scan { font-size: 3vw; font-weight: bold; margin: 14px 0 4px; }
.kiosk .k-count { font-size: 3.4vw; margin-top: 12px; }
.kiosk .k-count b { color: var(--orange); font-size: 5vw; }
.kiosk-flex { display: flex; gap: 5vw; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ---- Manager clock chips + timesheet ------------------------------------ */
.clock-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: bold; }
.clock-chip.ok      { background: #e4f5ea; color: var(--ok); border: 1px solid #bfe6cd; }
.clock-chip.anomaly { background: #fdf0e3; color: #9a5a06; border: 1px solid #f4d6b3; }
.clock-chip.absent  { background: #eef1f5; color: #8593a6; border: 1px solid var(--line); }
.clock-chip.manual  { background: #eaeff6; color: var(--st-booked, #3d5a80); border: 1px solid #cdd9ea; }
.ts-anom td { background: #fdf6ec !important; }
.ts-grid td, .ts-grid th { font-size: 13px; }
.ts-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-total td { font-weight: bold; background: #f3f6fa; }
.onsite-count { background: var(--ok); color: #fff; border-radius: 999px; padding: 3px 12px; font-weight: bold; }
.anom-banner { background: #fdf0e3; border: 1px solid #f4d6b3; color: #9a5a06; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: bold; display: flex; align-items: center; gap: 12px; }
.adjust-form { margin-top: 8px; padding: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; }
details.adjust > summary { cursor: pointer; color: var(--orange-dark); font-size: 12px; font-weight: bold; }

/* ---- Poster & fire register (print) ------------------------------------- */
.poster { max-width: 720px; margin: 0 auto; text-align: center; padding: 24px; }
.poster h1 { font-size: 40px; margin: 10px 0; }
.poster .qr img { width: 360px; height: auto; }
.poster ol { text-align: left; max-width: 460px; margin: 18px auto; font-size: 20px; line-height: 1.8; }
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  .poster .qr img { width: 320px; }
}

/* Anti-buddy-punching device flag icons */
.dev-flag { display: inline-block; cursor: help; font-size: 15px; line-height: 1; vertical-align: middle; }
.dev-flag.shared, .dev-flag.rapid { filter: none; }
.dev-flag.new { opacity: .75; }

/* Unpaid-break auto-deduction marker in timesheets */
.auto-marker { display: inline-block; font-size: 10px; font-weight: bold; text-transform: uppercase;
  color: #8a5a06; background: #fdf0e3; border: 1px solid #f4d6b3; border-radius: 8px; padding: 0 5px; margin-left: 3px; }

/* ---- THE TECHNICIAN'S TIMESHEET ------------------------------------------
   Built for a phone held in one hand in a workshop: the three things he types
   forty times a week — start, reg, work — are stacked, full width, and big
   enough to hit without looking. It reuses the clock page's card, buttons and
   name grid, because that is the app he already knows how to use. */

.tech-sheet { text-align: left; max-width: 560px; }
.tech-sheet h2 { font-size: 19px; margin: 22px 0 8px; }

.sheet-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 14px; }
.sheet-head .lab { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.sheet-head strong { font-size: 17px; }

.work-row {
  display: grid; grid-template-columns: 112px 1fr; gap: 2px 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.work-row .t { font-variant-numeric: tabular-nums; opacity: .85; }
.work-row .v { font-weight: 700; letter-spacing: .02em; }
.work-row .w { grid-column: 2; opacity: .9; }
.work-row .linkish { grid-column: 2; justify-self: start; background: none; border: 0;
  color: inherit; opacity: .6; text-decoration: underline; padding: 2px 0; font-size: 14px; cursor: pointer; }

.add-row { margin: 14px 0 0; display: grid; gap: 4px; }
.add-row .lab { font-size: 13px; opacity: .7; margin-top: 8px; }
.add-row input { width: 100%; font-size: 18px; padding: 13px 14px; min-height: 52px; }
.add-row .btn { margin-top: 14px; }

.lunch { display: grid; gap: 10px; margin: 8px 0 0; }
.lunch .tickrow { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.lunch .tickrow input { width: 24px; height: 24px; }
.breaks { margin: 10px 0 0; }
.break-row { font-variant-numeric: tabular-nums; opacity: .85; padding: 4px 0; }

.tech-sheet .totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 14px 8px; margin: 8px 0 0;
  text-align: center;
}
.tech-sheet .totals .tnum { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tech-sheet .totals .tlab { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }

.tech-sheet .sigpad {
  width: 100%; height: 170px; display: block; background: #fff; border-radius: 14px;
  touch-action: none; margin: 8px 0;
}
.tech-sheet .pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
.btn.big { min-height: 60px; font-size: 19px; }
.btn.small { min-height: 38px; font-size: 15px; padding: 8px 16px; }

@media (max-width: 380px) {
  .sheet-head { grid-template-columns: 1fr; }
  .tech-sheet .totals { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .work-row { grid-template-columns: 1fr; }
  .work-row .w, .work-row .linkish { grid-column: 1; }
}

/* ---- THE MANAGER START PAGE ---------------------------------------------
   Two buttons big enough to hit on a phone at seven in the morning, with the
   numbers that decide whether either of them needs pressing. */
.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.manage-card { display: grid; gap: 10px; align-content: start; }
.manage-card .btn.big { min-height: 72px; font-size: 21px; }
.manage-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.manage-figures li { font-size: 16px; }
.manage-figures strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.manage-unreachable { opacity: .75; font-size: 15px; margin: 0; }
@media (max-width: 640px) { .manage-grid { grid-template-columns: 1fr; } }
/* A nav link that leaves this app for the drivers app. */
.topbar nav a.away { opacity: .72; }
.topbar nav a.away:hover { opacity: 1; }