/* Hype Site Clock — shared styles.
   The :root token block below is copied VERBATIM from the Hype Labour Planner
   (_P0_BACKUP_2026-07-17/planner-live-code/tree/app/static/planner.css) per the
   branding lock in design/03_UX_SCREENS.md: blue #2563EB accent ONLY, red is
   warnings-only, light cards on #F3F6FB, no dark sidebar. Do not edit these
   values here — if the brand changes, change planner.css first and re-copy. */
:root{
  --navy:#1a1a2e;          /* header gradient start, headings */
  --navy-mid:#16213e;      /* header gradient end */
  --red:#c0392b;           /* brand accent — borders, active, danger */
  --red-dk:#a93226;
  --blue:#2f6df6;          /* logo blue — links/hover */
  --body:#f4f6f9;          /* page background */
  --card:#ffffff;          /* card background */
  --tint:#f4f5f6;          /* section tint */
  --head:#f8f9fa;          /* table head band */
  --line:#e9ecef;          /* dividers */
  --line2:#e0e4e8;
  --ink:#2c3e50;           /* body text */
  --ink-strong:#1a1a2e;    /* strong headings */
  --muted:#8a94a3;         /* labels / muted */

  /* status dots */
  --booked:#2f6df6; --off:#9aa3ad; --sick:#c0392b; --holiday:#7e57c2; --provisional:#e0a800; --unavailable:#64748b;

  /* back-compat aliases for any inline styles in templates */
  --accent:#2f6df6; --cell:#f4f5f6;

  /* ===== Full-width dashboard — tweakables ===== */
  --page-max:100%;
  --logo-h:66px;
  --person-col:218px;
  --act-col:178px;
  --row-h:100px;
  --head-h:68px;
  --hero-navy:#0f1b33;      /* headings / strong text */
  --hero-blue:#2563eb;      /* primary buttons / accent — the ONE accent colour */
  --hero-accent:#3b82f6;    /* lighter accent */
  --page-bg:#f3f6fb;        /* page background */
  --head-grey:#e5eaf2;      /* calendar header band */
  --row-divider:#cbd5e1;    /* divider between people */
  --light-border:#e2e8f0;   /* card borders */
  --muted2:#64748b;         /* muted text */
}

/* ---------- Site-Clock component layer (built for this service; uses the
   tokens above via the 03_UX_SCREENS.md naming: navy=hero-navy, blue=hero-blue,
   accent=hero-accent, muted=muted2, page-bg=page-bg). Red is warnings-only. ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--hero-navy); background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
}
/* Hard rule: never copy Telegram themeParams onto the page background — the
   page keeps Hype styling regardless of the lad's Telegram theme (light/dark). */

.container{max-width:640px; margin:0 auto; padding:0 0 40px}
.container.wide{max-width:100%; padding-left:24px; padding-right:24px}

.headercard{
  background:#fff; border-radius:16px; box-shadow:0 8px 26px rgba(15,27,51,.08);
  margin:14px; padding:18px 20px; position:relative; overflow:hidden;
  border-left:4px solid var(--hero-blue);
}
.headercard .eyebrow{font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--hero-blue); margin-bottom:4px}
.headercard h1{font-size:20px; margin:2px 0 0; font-weight:700; color:var(--hero-navy)}
.headercard .sub{font-size:13px; color:var(--muted2); margin-top:4px}
.headercard img.logo{height:34px; display:block; margin-bottom:8px}

.card{
  background:#fff; border:1px solid var(--light-border); border-radius:14px;
  box-shadow:0 8px 26px rgba(15,27,51,.06); margin:14px; padding:18px 20px;
}
.card h2{font-size:15px; margin:0 0 10px; color:var(--hero-navy)}
.muted{color:var(--muted2); font-size:13px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--light-border); background:#fff; color:var(--hero-navy);
  border-radius:10px; padding:12px 18px; font-size:15px; font-weight:600; cursor:pointer;
}
.btn.primary{background:var(--hero-blue); border-color:var(--hero-blue); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn.secondary{background:#fff; color:var(--hero-navy); border-color:var(--light-border)}
.btn.danger-outline{background:#fff; color:var(--red); border-color:var(--red)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.block{display:flex; width:100%}
/* Coloured header/nav buttons (branded, not plain white). */
.btn.tint{background:#eef4ff; border-color:#c9ddff; color:var(--hero-blue)}
.btn.tint:hover{background:#e0ebff}

.clockbtn{
  display:flex; align-items:center; justify-content:center; width:100%;
  height:64px; border-radius:14px; border:none; font-size:19px; font-weight:800;
  letter-spacing:.4px; color:#fff; background:var(--hero-blue); cursor:pointer;
  box-shadow:0 10px 24px rgba(37,99,235,.32);
}
.clockbtn[disabled]{opacity:.6}
.clockbtn.out{background:var(--hero-navy)}

/* ---- "You're at / Booked at / On the clock at {site}" label (fix pack
   2026-08-17 §3.1). The site is chosen for the lad and shown big and plain;
   the dropdown stays hidden unless nothing could be worked out. ---- */
.site-now{padding:2px 0}
.site-now-kicker{font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted2); margin-bottom:4px}
.site-now-name{font-size:22px; font-weight:800; line-height:1.2; color:var(--hero-navy)}
.site-now .muted{margin-top:4px}
.linkbtn{display:inline-block; margin-top:10px; padding:6px 0; background:none; border:none; font:inherit; font-size:14px; color:var(--hero-blue); cursor:pointer; text-decoration:underline; min-height:44px}
.footnote{margin:6px 22px 0; font-size:12px; color:var(--muted2)}
.footnote a{color:var(--muted2)}

/* ---- Live camera preview on the home screen (upgrade #3 "arrival =
   pre-loaded clock-in", 2026-08-17). Portrait frame, mirrored like a phone's
   selfie preview (the captured JPEG is NOT mirrored — drawImage takes the raw
   stream), sized so CLOCK IN still sits above the fold on a small phone.
   The overlay carries "Starting camera…" / the camera-needed message +
   Try again; red text there is a warning, per the style guide. ---- */
.cam{position:relative; height:min(34vh,320px); aspect-ratio:3/4; max-width:100%; margin:0 auto 12px; border-radius:14px; overflow:hidden; background:var(--hero-navy)}
.cam video{display:block; width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.cam-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center; background:rgba(15,27,51,.78); color:#fff}
.cam-overlay-text{font-size:14px; line-height:1.4; font-weight:600}
.cam-overlay.failed .cam-overlay-text{color:#fecaca}
.cam-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .35s ease-out}
.cam-flash.on{opacity:.85; transition:none}

.statusstrip{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--muted2)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block}
.dot.green{background:#16a34a}
.dot.amber{background:#d97706}
.dot.grey{background:var(--muted2)}
.dot.red{background:var(--red)}

.pill{
  display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--light-border);
  border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--hero-navy);
}
.pill.manual{background:#f1f5f9; color:var(--muted2); border-color:var(--row-divider)}
.pill.supplier{background:#fffbeb; color:#92400e; border-color:#fde68a}
.pill.warn{color:var(--red); border-color:var(--red)}

.alertcard{border-radius:12px; padding:14px 16px; margin:14px; font-size:14px}
.alertcard.block{background:#fef2f2; border:1px solid #fecaca; color:#991b1b}
.alertcard.poor{background:#fffbeb; border:1px solid #fde68a; color:#92400e}
.alertcard.ok{background:#f0fdf4; border:1px solid #bbf7d0; color:#166534}

.field{margin-bottom:12px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--hero-navy); margin-bottom:6px}
.field input[type=text], .field input[type=number], .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--light-border); border-radius:8px; font-size:15px;
  background:#fff; color:var(--hero-navy);
}

.toggle-row{display:flex; gap:10px; margin-bottom:12px}
.toggle-row .btn{flex:1}
.toggle-row .btn.active{background:var(--hero-blue); border-color:var(--hero-blue); color:#fff}

.hist-card{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.hist-card .meta{font-size:13px; color:var(--muted2); margin-top:2px}
.hist-card img.thumb{width:48px; height:48px; border-radius:8px; object-fit:cover; cursor:pointer}
table.today img.thumb{width:48px; height:48px; border-radius:8px; object-fit:cover; cursor:pointer}

table.today{width:100%; border-collapse:collapse; font-size:14px}
table.today th{text-align:left; background:var(--head-grey); padding:10px 12px; font-weight:700; color:var(--hero-navy)}
table.today td{padding:10px 12px; border-bottom:1px solid var(--row-divider)}
table.today tr:hover td{background:#f8fafc}

/* Phase 3 — planned-vs-actual row states (09 Phase 3: "exceptions red/amber,
   clean rows muted"). Red is warnings-only, per the style guide. */
table.today tr.row-clean td{color:var(--muted2)}
table.today tr.row-exception td{background:#fffbeb}
table.today tr.row-exception:hover td{background:#fef3c7}
table.today tr.row-red td{background:#fef2f2}
table.today tr.row-red:hover td{background:#fee2e2}

.counts-strip{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted2); margin:0 14px 6px}
.counts-strip b{color:var(--hero-navy)}

.topbar{display:flex; align-items:center; gap:10px; padding:14px 22px; background:#fff; border-bottom:1px solid var(--light-border)}
.topbar .spacer{flex:1}
.topbar img.logo{height:44px}

#map-editor{height:min(80vh,920px); min-height:480px; border-radius:12px; overflow:hidden; border:1px solid var(--light-border)}
.editor-actions{display:flex; gap:10px; margin-top:12px}
.editor-actions .btn{flex:1}

/* Always-on site name label on the live map — must stay readable over satellite. */
.leaflet-tooltip.site-label{background:rgba(255,255,255,.92); color:var(--hero-navy); font-size:11.5px; font-weight:600; padding:2px 7px; border:1px solid var(--light-border); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.18); white-space:nowrap}
.leaflet-tooltip.site-label::before{display:none}
/* Supplier yards read amber on the live map so they're distinct from job sites at a glance. */
.leaflet-tooltip.site-label-supplier{border-color:#d97706; color:#92400e}

/* ---- Site Manager: sites list in the Gantt "section" style (tinted header
   band, hairline rows, blue hover, selected row marked). ---- */
.sitesec{border:1px solid var(--light-border); border-radius:12px; overflow:hidden; background:#fff}
.sitesec-head{display:flex; align-items:center; justify-content:space-between; gap:8px; background:#f8fafc; padding:12px 16px; font-weight:700; font-size:14px; color:var(--hero-navy); border-bottom:1px solid var(--light-border)}
.sitesec-head .count{background:#fff; border:1px solid var(--light-border); border-radius:20px; padding:2px 10px; font-size:12px; font-weight:600; color:var(--muted2)}
.site-row{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .1s ease}
.site-row:last-child{border-bottom:none}
.site-row:hover{background:#eef4ff}
.site-row.selected{background:#eef4ff; box-shadow:inset 3px 0 0 var(--hero-blue)}
.site-row .name{flex:1; font-weight:600; font-size:14px; color:var(--hero-navy)}
.site-empty{padding:14px 16px}
.pill.ok{color:#166534; border-color:#bbf7d0; background:#f0fdf4}

/* ---- Unconfirmed auto-pin banner (new Zoho site geocoded by the sync,
   awaiting John's confirm) — amber-tinted card, rows reuse .site-row. ---- */
.confirm-banner{background:#fffbeb; border:1px solid #fde68a}
.confirm-banner h2{color:#92400e}
.confirm-banner .site-row{background:#fff; border:1px solid #fde68a; border-radius:10px; margin-top:8px}
.confirm-banner .site-row:hover{background:#fef3c7}

/* ---- Clock-in location badge (Step 0 — one source of truth). Base = GREEN
   "inside geofence + good signal"; `.warn` modifier = AMBER (outside geofence
   OR poor GPS). Rendered beneath a clock-in selfie on the dashboard today-table,
   the bill-variance drilldown, the site diary, and the report suite. Values
   match the original inline styles verbatim; red stays warnings-only. ---- */
.geo-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;margin-top:4px;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.geo-badge.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}

.modal-bg{position:fixed; inset:0; background:rgba(15,27,51,.45); display:none; align-items:center; justify-content:center; z-index:50}
.modal-bg.open{display:flex}
.modal{background:#fff; border-radius:14px; padding:20px; width:92%; max-width:420px; max-height:90vh; overflow:auto}
.modal h3{margin:0 0 12px; color:var(--hero-navy)}

.lightbox-bg{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:60}
.lightbox-bg.open{display:flex}
.lightbox-bg img{max-width:92%; max-height:92%; border-radius:8px}

/* ---- Day trail (Phase 7) — banner sits above the live map's flex row on both
   the dashboard and the standalone map page (same ids, map.js serves both). ---- */
.trail-banner{display:none; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:var(--tint); border-bottom:1px solid var(--light-border); font-size:13px; color:var(--hero-navy)}
.trail-banner #trail-title{font-weight:700}
.trail-banner input[type=date]{padding:6px 8px; border:1px solid var(--light-border); border-radius:8px; font-size:13px; background:#fff; color:var(--hero-navy)}
.trail-banner .btn{padding:6px 12px; font-size:12px}

/* Dwell badge — pill marker dropped on a stationary cluster of points; red-tinted
   border/text when the dwell happened off-site (inside === false). */
.dwell-badge{position:relative; display:inline-block; transform:translate(-50%,-120%); background:#fff; color:var(--hero-navy); font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--light-border); box-shadow:0 2px 6px rgba(15,27,51,.18); white-space:nowrap; cursor:pointer}
.dwell-badge.offsite{border-color:#fca5a5; color:#991b1b}

/* Trail timestamp label — clock-in/out, segment-flip and gap markers. */
.trail-time{position:relative; display:inline-block; transform:translate(-50%,-140%); background:rgba(255,255,255,.85); color:var(--hero-navy); font-size:10px; font-weight:600; padding:1px 6px; border-radius:6px; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.15)}

/* Clickable lad name on the today table — opens their day trail on the map above. */
.trail-link{color:var(--hero-blue); text-decoration:none; cursor:pointer}
.trail-link:hover{text-decoration:underline}