/* Hype Labour Planner — shared styles. Mirrors the locked Hype email brand
   (navy gradient header, red accent, grey body, clean type). */
: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 (planner page only) ===== */
  --page-max:100%;          /* fluid — pages stretch with the window (Build 3.4) */
  --logo-h:66px;            /* header logo size (original was 38px) */
  --person-col:218px;       /* person column width */
  --act-col:178px;          /* actions/notify column width */
  --row-h:100px;            /* person row height */
  --head-h:68px;            /* calendar header row height */
  --hero-navy:#0f1b33;      /* headings / strong text */
  --hero-blue:#2563eb;      /* primary buttons / accent */
  --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 */
}
*{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(--ink); background:var(--body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Brand header (navy gradient + red base, like the emails) ---------- */
.brandbar{
  display:flex; align-items:center; gap:14px;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:15px 22px;
}
.brandbar .brand{display:flex; align-items:center; gap:13px; min-width:0}
.brandbar img.logo{height:38px; width:auto; display:block; flex:none}
.brandbar .titles{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brandbar .pretitle{font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:2px}
.brandbar h1{font-size:20px; margin:0; font-weight:700; color:var(--ink-strong); letter-spacing:-.01em}
.brandbar .spacer{flex:1}
/* header-right controls (mini apps put week nav here) */
.brandbar .hnav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.wrap{padding:0 0 48px}
.pad{padding:16px 22px}

/* ---------- Toolbar (white strip under the header: week nav + actions) ---------- */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 22px; background:var(--card); border-bottom:1px solid var(--line);
}
.toolbar .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.weekrange{font-weight:700; font-size:16px; min-width:150px; text-align:center; color:var(--ink-strong)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line2); background:#fff; color:var(--ink-strong);
  border-radius:8px; padding:9px 14px; font-size:14px; font-weight:600; cursor:pointer;
  line-height:1; transition:all .12s; white-space:nowrap; text-decoration:none;
}
.btn:hover{border-color:var(--blue); color:var(--blue)}
.btn.arrow{font-size:15px; padding:9px 14px; font-weight:700}
.btn.primary,.btn.action{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.primary:hover,.btn.action:hover{background:#1f5be0; border-color:#1f5be0; color:#fff}
.btn.danger{color:var(--red); border-color:#e3b6b1; background:#fff}
.btn.danger:hover{background:var(--red); color:#fff; border-color:var(--red)}
.btn:disabled{opacity:.5; cursor:default}

/* ---------- Legends ---------- */
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); padding:12px 22px 4px}
.legend .x{margin-left:auto}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle}
.dot.Booked{background:var(--booked)} .dot.Off{background:var(--off)}
.dot.Sick{background:var(--sick)} .dot.Holiday{background:var(--holiday)}
.dot.Provisional{background:var(--provisional)} .dot.Unavailable{background:var(--unavailable)}
.sitelegend{display:flex; gap:8px 16px; flex-wrap:wrap; font-size:12px; color:var(--ink); padding:4px 22px 14px}
.sitelegend .item{display:inline-flex; align-items:center; gap:7px}
.sitelegend .sw{width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.06)}

/* ---------- Grid ---------- */
.gridwrap{margin:0 22px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 2px 12px rgba(20,30,55,.06)}
table.grid{border-collapse:separate; border-spacing:0; width:100%; min-width:960px}
table.grid th,table.grid td{border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top}
table.grid thead th{background:var(--head); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:11px 8px; text-align:center; color:var(--ink-strong)}
table.grid tr:last-child td{border-bottom:none}
table.grid th:last-child,table.grid td:last-child{border-right:none}
.dayhead small{display:block; color:var(--muted); font-weight:600; font-size:11px; letter-spacing:0; text-transform:none; margin-top:2px}
table.grid th.person,table.grid td.person{
  text-align:left; position:sticky; left:0; z-index:2; min-width:150px; background:#fff; padding:12px 12px;
}
table.grid thead th.person{background:var(--head)}
td.person .nm{font-weight:700; color:var(--ink-strong); font-size:14px}
td.person .nm a{color:var(--ink-strong); text-decoration:none; border-bottom:1px dotted var(--blue)}
td.person .tr{color:var(--muted); font-size:12px; margin-top:1px}

.halfwrap{display:flex; min-height:60px}
.half{
  flex:1; min-width:64px; padding:6px; cursor:pointer; font-size:11px; position:relative;
  border-right:1px dashed var(--line); transition:background .12s;
}
.half:last-child{border-right:none}
.half .ampm{position:absolute; top:4px; right:5px; font-size:9px; font-weight:700; color:#aeb6c2; letter-spacing:.05em}
.half:not(.filled):hover{background:#f3f6ff}
.half:not(.filled)::after{content:"+"; position:absolute; left:8px; top:50%; transform:translateY(-50%); color:#cfd6e0; font-size:15px; opacity:0; transition:opacity .12s}
.half:not(.filled):hover::after{opacity:1}

/* filled cell = a solid site-coloured chip */
.chip{border-radius:7px; padding:6px 8px; min-height:46px; display:flex; flex-direction:column; gap:1px}
.chip .site{font-weight:700; line-height:1.2; padding-right:14px}
.chip .scope{font-size:10.5px; opacity:.92; line-height:1.25}
.chip .stat{margin-top:2px; font-size:10px; display:flex; align-items:center; opacity:.95}

/* 8 site colours — solid pastel fill, darker readable text. Applies to the AM/PM
   chips, the legend swatches, AND the custom-hours slot bubbles (same project colour). */
.chip.site-c0,.fullday .slot.site-c0{background:#d9e6ff; color:#1e3a8a} .sw.site-c0{background:#d9e6ff}
.chip.site-c1,.fullday .slot.site-c1{background:#d6f0e0; color:#155e3b} .sw.site-c1{background:#d6f0e0}
.chip.site-c2,.fullday .slot.site-c2{background:#fce6c8; color:#8a4b00} .sw.site-c2{background:#fce6c8}
.chip.site-c3,.fullday .slot.site-c3{background:#e7dcfb; color:#5b2a9e} .sw.site-c3{background:#e7dcfb}
.chip.site-c4,.fullday .slot.site-c4{background:#cdeeec; color:#0d5e5a} .sw.site-c4{background:#cdeeec}
.chip.site-c5,.fullday .slot.site-c5{background:#fcdce8; color:#9e2059} .sw.site-c5{background:#fcdce8}
.chip.site-c6,.fullday .slot.site-c6{background:#dfe2fb; color:#33409e} .sw.site-c6{background:#dfe2fb}
.chip.site-c7,.fullday .slot.site-c7{background:#e3e7ec; color:#374151} .sw.site-c7{background:#e3e7ec}
.chip .stat .dot{width:8px;height:8px}
.half.clash .chip{box-shadow:0 0 0 2px var(--red); }

/* ---- custom-hours merged day cell ---- */
.customtd{padding:0}
.fullday{position:relative; min-height:60px; padding:16px 5px 5px; display:flex; flex-direction:column; gap:4px;
  background:#f7f9ff; border:1px solid #e2e8f5; border-radius:8px}
.fullday .ampm.fd{position:absolute; top:4px; right:6px; font-size:9px; font-weight:700;
  color:#7c89a8; letter-spacing:.05em; text-transform:uppercase}
.fullday .slot{border-radius:7px; padding:5px 8px; background:#fff; border:1px solid #dfe6f3;
  display:flex; flex-direction:column; gap:1px; cursor:pointer; box-shadow:0 1px 2px rgba(20,30,60,.05)}
.fullday .slot .stime{font-size:11px; font-weight:800; color:var(--ink-strong); letter-spacing:.01em}
.fullday .slot .site{font-size:11.5px; font-weight:700; line-height:1.2}
.fullday .slot .stat{margin-top:1px; font-size:10px; display:flex; align-items:center; gap:4px; opacity:.95}
.fullday .slot .stat .dot{width:8px; height:8px}
.fullday .slot.clash{box-shadow:0 0 0 2px var(--red)}
.fullday .slot.addslot{align-items:center; justify-content:center; color:var(--blue); font-size:11px;
  font-weight:700; background:#eef3ff; border:1px dashed #b9caf0; box-shadow:none}
.fullday .slot.addslot:hover{background:#e3ecff}

/* ---- modal custom-time controls ---- */
.field label.check{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;
  font-size:13px; font-weight:600; color:var(--ink); margin:0; cursor:pointer}
.field label.check input{width:auto; margin:0}
.timerow .timecols{display:flex; gap:10px}
.timerow .timecols label{flex:1}
.timerow .hint{margin-top:7px; font-size:11.5px; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500}

/* Block-booking date range (editor modal) */
.rangebox{border:1px solid var(--line2); border-radius:10px; padding:12px; margin:-4px 0 12px; background:#f7f9fc}
.rangebox .rangecols{display:flex; gap:10px}
.rangebox .rangecols label{flex:1}
.rangebox .rangehalf{margin-top:10px}
.rangebox .rangelabel{display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.rangebox label.check{margin-top:10px}
.rangebox .hint{margin-top:7px; font-size:11.5px; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500}

.no-tg{display:inline-block; color:#9a5b00; background:#fff4e0; border:1px solid #f3d39a; border-radius:4px; padding:1px 6px; font-size:10.5px; font-weight:600; white-space:nowrap; margin-top:3px}

/* ---------- Modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(16,22,40,.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:min(440px,93vw); box-shadow:0 18px 50px rgba(0,0,0,.28)}
.modal h3{margin:0 0 3px; font-size:17px; color:var(--ink-strong)}
.modal .ctx{color:var(--muted); font-size:13px; margin-bottom:14px}
.field{margin-bottom:12px}
.field label{display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.field select,.field input{width:100%; padding:10px 11px; border:1px solid var(--line2); border-radius:9px; font-size:14px; color:var(--ink); background:#fff}
.field select:focus,.field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,109,246,.12)}
.modal-actions{display:flex; gap:8px; margin-top:16px}
.modal-actions .btn{flex:1; padding:11px}

/* AM/PM segmented control (schedule-a-job modal) */
.halfseg{display:flex; gap:8px}
.halfseg .segbtn{flex:1; padding:11px; border:1px solid var(--line2); border-radius:9px; background:#fff; color:var(--ink); font-size:14px; font-weight:700; cursor:pointer}
.halfseg .segbtn.on{background:var(--blue); border-color:var(--blue); color:#fff}

/* Schedule button on each Open-jobs row */
.jobsched{flex:0 0 auto; padding:5px 11px; font-size:12px; font-weight:700; border:1px solid var(--blue); border-radius:999px; background:#fff; color:var(--blue); cursor:pointer; white-space:nowrap}
.jobsched:hover{background:var(--blue); color:#fff}
.jobsched:disabled{opacity:.5; cursor:not-allowed}

/* Open-jobs rows are tappable (open the job-detail modal) */
.jobrow{cursor:pointer}
.jobrow:hover{background:rgba(47,109,246,.05)}

/* Awaiting-approval + Questions cards (coloured left edge so they stand out) */
.approvecard{border-left:5px solid #f59e0b}
.questioncard{border-left:5px solid var(--blue)}
/* small action buttons used inside the approval/question rows */
.jact{flex:0 0 auto; padding:5px 11px; font-size:12px; font-weight:700; border-radius:999px; cursor:pointer; white-space:nowrap; border:1px solid transparent}
.jact.approve{background:#1a9e57; color:#fff}
.jact.approve:hover{background:#157347}
.jact.sendback{background:#fff; color:#b45309; border-color:#f59e0b}
.jact.sendback:hover{background:#f59e0b; color:#fff}
.jact.reply{background:var(--blue); color:#fff}
.jact:disabled{opacity:.5; cursor:not-allowed}
/* a question row */
.qrow{padding:9px 0; border-top:1px solid var(--light-border)}
.qrow .qmeta{font-size:12px; color:var(--muted2); margin-bottom:2px}
.qrow .qtext{font-size:14px; color:var(--hero-navy); font-weight:600}
.qrow .qfoot{display:flex; align-items:center; gap:8px; margin-top:6px}

/* Job-detail modal */
.modal.jobdetail{width:min(480px,94vw)}
.jobphoto{margin:0 0 14px; border-radius:10px; overflow:hidden; background:#0d1426; max-height:300px; display:flex; align-items:center; justify-content:center}
.jobphoto img{width:100%; height:auto; max-height:300px; object-fit:contain; display:block}
.jobrowdetail{display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--line2); font-size:14px}
.jobrowdetail .k{flex:0 0 90px; color:var(--muted); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding-top:2px}
.jobrowdetail .v{flex:1 1 auto; color:var(--ink); font-weight:600}
.jobrowdetail.sentback .v{color:#92400e}

/* ---------- Invite-new-starter modal (Build 3.3) ---------- */
/* WhatsApp green */
.btn.wa{background:#25D366; border-color:#25D366; color:#fff; box-shadow:0 2px 8px rgba(37,211,102,.3)}
.btn.wa:hover{background:#1ebe5b; border-color:#1ebe5b; color:#fff}
/* defined secondary (slate) — e.g. a Close button that isn't just a plain outline */
.btn.slate{background:#475569; border-color:#475569; color:#fff}
.btn.slate:hover{background:#3a475a; border-color:#3a475a; color:#fff}
/* solid grey nav buttons (Key safes / Manage team / Planner) — clear, not blue */
.btn.grey{background:#64748b; border-color:#64748b; color:#fff}
.btn.grey:hover{background:#516074; border-color:#516074; color:#fff}
/* bordered result sub-panel + navy section labels */
.invite-result{margin-top:6px; padding:16px; border:1px solid var(--light-border);
  border-radius:12px; background:#f7f9fc}
.invite-result .lbl{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hero-navy); margin-bottom:6px}
.invite-link-row{display:flex; gap:8px; align-items:center}
.invite-link-row input{flex:1; min-width:0; padding:10px 11px; border:1px solid var(--line2);
  border-radius:9px; font-size:14px; color:var(--ink); background:#fff}
.invite-link-row .btn{flex:none}
.invite-instruction{margin-top:10px; font-size:13px; color:var(--ink); line-height:1.5}
.invite-actions{margin-top:12px}
.invite-actions .btn.wa{width:100%; padding:12px; font-size:15px}
.invite-note{margin-top:12px; font-size:12.5px; color:var(--muted2); line-height:1.5}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:11px 18px; border-radius:9px; font-size:14px; z-index:80; display:none; max-width:90vw; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.show{display:block}
.toast.err{background:var(--red)}
.toast.warn{background:#b45309}

/* ---------- Tables for manage-team ---------- */
.panel{margin:18px 22px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 12px rgba(20,30,55,.06); overflow:hidden}
.panel h2{margin:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-strong); padding:14px 18px; border-bottom:1px solid var(--line); background:var(--head)}
.panel .inner{padding:16px 18px}
table.list{border-collapse:collapse; width:100%}
table.list th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:2px solid var(--line)}
table.list td{padding:10px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); vertical-align:middle}
table.list td a{color:var(--ink-strong); border-bottom:1px dotted var(--blue); text-decoration:none}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px}
.badge.telegram{background:#e1ecff; color:#1e40af} .badge.manual{background:#eceff3; color:#52606d}
.tgmark.yes{color:#1c9e5a; font-weight:700} .tgmark{color:#c2c9d2}
.addrow{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.addrow .field{margin:0; flex:1; min-width:130px}

/* ---------- Lad / mgmt mobile views ---------- */
.day{margin:0 16px 14px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(20,30,55,.05)}
.day h2{margin:0; padding:13px 16px; background:var(--head); font-size:18px; color:var(--ink-strong); border-bottom:1px solid var(--line)}
.day .line{padding:13px 16px; font-size:17px; border-bottom:1px solid var(--line)}
.day .line:last-child{border-bottom:none}
.day .line .site{font-weight:700; color:var(--ink-strong)}
.day .line .scope{color:var(--muted); display:block; margin-top:2px; font-size:15px}
.day .line.am{border-left:4px solid var(--blue)} .day .line.pm{border-left:4px solid var(--holiday)}
.loading{padding:34px; text-align:center; color:var(--muted)}

/* ============================================================= *
 *  FULL-WIDTH DASHBOARD LAYOUT  (planner page only)             *
 *  Scoped to .planner-shell / .page so the Telegram Mini Apps   *
 *  (/myweek, /mgmt) + /manage-team are untouched.               *
 *  Tweak sizes/colours via the :root vars above.                *
 * ============================================================= */
body.planner-shell{background:var(--page-bg)}
.page{max-width:var(--page-max); margin:0 auto; padding:26px 32px 40px;
  display:flex; flex-direction:column; gap:18px}

/* ---------- Top header card ---------- */
.topbar{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:22px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border:1px solid var(--light-border); border-radius:16px;
  box-shadow:0 8px 26px rgba(15,27,51,.08);
  padding:20px 28px 20px 30px;
}
/* blue accent strip down the left edge */
.topbar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--hero-blue),var(--hero-accent))}
.topbar .brand{display:flex; align-items:center; gap:18px; min-width:0; flex:0 0 auto}
.topbar img.logo{height:var(--logo-h); width:auto; display:block; flex:none}
.topbar .titles{display:flex; flex-direction:column; line-height:1.1; min-width:0}
.topbar .titles .pretitle{font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--hero-blue); margin-bottom:3px}
.topbar h1{margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--hero-navy)}
.topbar .subtitle{font-size:13px; color:var(--muted2); margin-top:3px}

/* centre week nav */
.topbar .weeknav{flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap}
.topbar .right{flex:0 1 auto; min-width:0; margin-left:auto; display:flex; flex-wrap:wrap;
  justify-content:flex-end; gap:8px}
/* Front door (10 Sep 2026): the right-hand button cluster used to be a rigid
   no-wrap block inside an overflow:hidden card, so at 1440px and below the last
   buttons (Manage team, and now Users / Sign out) were silently clipped off the
   edge. Letting it wrap keeps every button reachable at any width; on a wide
   screen nothing changes. */

/* larger header buttons + date card */
.topbar .btn{padding:12px 18px; font-size:15px; border-radius:12px}
.topbar .btn.arrow{font-size:17px; font-weight:700; padding:12px 17px}
.topbar .weekrange{
  font-size:18px; font-weight:700; color:var(--hero-navy);
  background:#fff; border:1px solid var(--light-border); border-radius:12px;
  padding:12px 20px; min-width:196px; text-align:center;
  box-shadow:0 1px 2px rgba(15,27,51,.05);
}
.topbar .btn.action{background:var(--hero-blue); border-color:var(--hero-blue); color:#fff;
  box-shadow:0 2px 10px rgba(37,99,235,.32)}
.topbar .btn.action:hover{background:#1d4fd0; border-color:#1d4fd0; color:#fff}

/* ---------- Legend card ---------- */
.legendcard{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  background:#fff; border:1px solid var(--light-border); border-radius:14px;
  box-shadow:0 4px 16px rgba(15,27,51,.06); padding:14px 22px;
}
/* two rows: Projects on top (full width — they grow), Status below */
.legendcard .legendrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px}
.legendcard .legendrow.statusrow{border-top:1px solid var(--light-border); padding-top:10px}
.legendcard .group{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.legendcard .grouplabel{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2)}
.legendcard .legend{display:flex; gap:8px; flex-wrap:wrap; padding:0}
.legendcard .sitelegend{display:flex; gap:8px; flex-wrap:wrap; padding:0}
.legendcard .legend > span,
.legendcard .sitelegend .item{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--light-border); border-radius:999px;
  padding:7px 13px; font-size:12.5px; color:var(--ink);
  box-shadow:0 1px 2px rgba(15,27,51,.05);
}
.legendcard .helper{margin-left:auto; color:var(--muted2); font-size:13px}
/* 🔑 keysafe code shown on each Projects-legend pill (Keysafe feature) */
.legendcard .sitelegend .item .keycode{
  display:inline-flex; align-items:center; gap:3px; margin-left:7px; padding:1px 7px;
  background:#eef2f8; border:1px solid var(--light-border); border-radius:999px;
  font-weight:700; font-size:12px; color:var(--hero-navy); letter-spacing:.02em;
}

/* ---------- Planner board (the hero) ---------- */
.boardcard{
  background:#fff; border:1px solid var(--light-border); border-radius:16px;
  box-shadow:0 12px 36px rgba(15,27,51,.10); padding:10px; overflow:hidden;
}
.boardcard .gridwrap{border:0; border-radius:12px; box-shadow:none; margin:0; overflow-x:auto}

/* full-width, equal-flex day columns */
.planner-shell table.grid{width:100%; min-width:1120px; table-layout:fixed}
.planner-shell table.grid th.person,
.planner-shell table.grid td.person{width:var(--person-col); min-width:var(--person-col)}

/* calendar header row — stands out */
.planner-shell table.grid thead th{
  height:var(--head-h); background:var(--head-grey); color:var(--hero-navy);
  font-size:13px; font-weight:800; letter-spacing:.03em;
  border-bottom:2px solid var(--row-divider); border-right-color:var(--row-divider);
}
.planner-shell table.grid thead th.person{background:var(--head-grey); color:var(--hero-navy)}
.planner-shell .dayhead small{font-size:12px; color:var(--muted2); font-weight:600; margin-top:3px}

/* person rows — clear separation + subtle alternating shade */
.planner-shell table.grid tbody td{
  border-bottom:1px solid var(--row-divider); border-right-color:#d3dbe6;
}
.planner-shell table.grid tbody tr:nth-child(even) td{background:#f7f9fc}
.planner-shell td.person{background:#eef2f8; vertical-align:middle; padding:16px 18px}
.planner-shell td.person .nm{font-size:16px}
.planner-shell td.person .tr{font-size:13px; margin-top:2px}

/* taller rows + AM(white)/PM(pale) shading */
.planner-shell .halfwrap{min-height:var(--row-h)}
.planner-shell .half{padding:8px; border-right:1px dotted #dde4ee}
.planner-shell .half:last-child{border-right:none; background:#f4f8fd}
.planner-shell tbody tr:nth-child(even) .half:last-child{background:#eef3fb}
.planner-shell .half:not(.filled):hover{background:#eef3ff}
.planner-shell .half:last-child:not(.filled):hover{background:#e7eefc}
.planner-shell .half .ampm{font-size:10px; font-weight:800; color:#94a3b8}

/* booking cards — bigger + more polished */
.planner-shell .chip{
  border-radius:11px; padding:9px 11px; min-height:62px; gap:2px;
  border:1px solid rgba(15,27,51,.16);
  box-shadow:0 2px 7px rgba(15,27,51,.16);
}
.planner-shell .chip .site{font-size:13px}
.planner-shell .chip .scope{font-size:11px}
.planner-shell .chip .stat{font-size:10.5px; margin-top:3px}

/* status-only chips (Off / Sick / Holiday — no site) */
.planner-shell .chip.statusonly{box-shadow:none}
.planner-shell .chip.statusonly .site{display:flex; align-items:center; gap:6px; font-weight:700}
.planner-shell .chip.stat-Off{background:#eef1f5; color:#475569; border-color:#dbe2ea}
.planner-shell .chip.stat-Sick{background:#fdecea; color:#a93226; border-color:#f3c9c3}
.planner-shell .chip.stat-Holiday{background:#efe7fb; color:#5b2a9e; border-color:#ddccf5}
.planner-shell .chip.stat-Unavailable{background:#e8edf3; color:#475569; border-color:#cdd7e3}

/* ---------- View toggle (Week | Month) ---------- */
.viewtoggle{display:inline-flex; border:1px solid var(--light-border); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,27,51,.05)}
.viewtoggle .btn.seg{border:0; border-radius:0; background:#fff; color:var(--muted2); box-shadow:none; padding:12px 18px; font-weight:700}
.viewtoggle .btn.seg:hover{color:var(--hero-navy); background:#f4f7fd}
.viewtoggle .btn.seg.on{background:var(--hero-blue); color:#fff}
.viewtoggle .btn.seg.on:hover{background:var(--hero-blue); color:#fff}

/* ---------- Person name tablets (left column) ---------- */
.planner-shell td.person .nm{display:inline-block; padding:4px 10px; border-radius:8px; font-weight:700; font-size:15px; line-height:1.25; background:#eef2f8; color:var(--hero-navy)}
.planner-shell td.person .nm a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor}
.nm.person-c0{background:#dbeafe; color:#1e40af} .nm.person-c1{background:#dcfce7; color:#166534}
.nm.person-c2{background:#fef3c7; color:#92400e} .nm.person-c3{background:#ede9fe; color:#5b21b6}
.nm.person-c4{background:#cffafe; color:#155e63} .nm.person-c5{background:#fce7f3; color:#9d174d}
.nm.person-c6{background:#e0e7ff; color:#3730a3} .nm.person-c7{background:#ffe4e6; color:#9f1239}
.nm.person-c8{background:#d1fae5; color:#065f46} .nm.person-c9{background:#fae8ff; color:#86198f}

/* ---------- Actions / Notify column ---------- */
.planner-shell table.grid th.acthead,
.planner-shell table.grid td.actcell,
.planner-shell table.grid td.actfoot{width:var(--act-col); min-width:var(--act-col)}
.planner-shell table.grid thead th.acthead{text-align:left}
.planner-shell td.actcell{vertical-align:middle; padding:12px 14px; white-space:normal; text-align:left}
.btn.mini{padding:7px 14px; font-size:13px; border-radius:8px; background:var(--hero-blue); border-color:var(--hero-blue); color:#fff; box-shadow:0 1px 3px rgba(37,99,235,.3)}
.btn.mini:hover{background:#1d4fd0; border-color:#1d4fd0; color:#fff}
.btn.mini:disabled{background:#e2e8f0; border-color:#e2e8f0; color:#94a3b8; box-shadow:none}
.btn.mini.warn{background:#f59e0b; border-color:#f59e0b}
.btn.mini.warn:hover{background:#d97706; border-color:#d97706}

/* status chip */
.nchip{display:inline-block; margin-top:7px; font-size:11px; font-weight:600; line-height:1.3; border-radius:7px; padding:3px 8px; max-width:100%}
.nchip.none{background:#eef1f5; color:#64748b}
.nchip.sent{background:#e1ecff; color:#1e40af}
.nchip.opened{background:#dff3e6; color:#15803d}
.nchip.changed{background:#fdecdc; color:#b45309}
.nchip.off{background:#fff4e0; color:#9a5b00}
/* plain-English explainer line under the "Opened" chip (Build 3.2) */
.nchip .nchip-sub{display:block; font-weight:500; opacity:.85; margin-top:1px}
/* "Last sent: …" line under the notify chip (Build 4 tweak 2) */
.nchip-lastsent{display:block; margin-top:3px; font-size:10.5px; font-weight:500; color:var(--muted2); line-height:1.3}

/* footer row: manual note + send-all */
.planner-shell tfoot td{background:#f8fafc; border-top:2px solid var(--row-divider); padding:14px 16px}
.planner-shell tfoot .footnote{font-size:13px; color:var(--muted2); line-height:1.4}
.planner-shell tfoot .actfoot{vertical-align:middle}
.planner-shell tfoot .actfoot .btn.action{width:100%; background:var(--hero-blue); border-color:var(--hero-blue); color:#fff}
.planner-shell tfoot .actfoot .btn.action:hover{background:#1d4fd0; border-color:#1d4fd0}

/* ---------- Month overview ---------- */
#monthView{padding:6px 4px}
.monthgrid{display:flex; flex-direction:column; gap:7px}
.monthgrid .mhead{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; background:none; border:0; box-shadow:none; padding:0; margin:0}
.monthgrid .mhead>div{text-align:center; font-size:12px; font-weight:800; color:var(--hero-navy); text-transform:uppercase; letter-spacing:.03em; padding:4px 0}
.mrow{display:grid; grid-template-columns:repeat(7,1fr); gap:7px}
.mcell{min-height:116px; border:1px solid var(--light-border); border-radius:10px; background:#fff; padding:7px; cursor:pointer; overflow:hidden; transition:box-shadow .12s, border-color .12s}
.mcell:hover{box-shadow:0 5px 16px rgba(15,27,51,.12); border-color:var(--hero-accent)}
.mcell.out{background:#f6f8fc}
.mnum{font-size:12px; font-weight:800; color:var(--hero-navy); margin-bottom:5px}
.mcell.out .mnum{color:#aeb6c2}
.mitem{font-size:10.5px; line-height:1.3; border-radius:5px; padding:2px 6px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#374151; background:#eef2f7}
.mitem .hd{opacity:.65; font-size:9px; font-weight:700}
.mitem.site-c0{background:#d9e6ff} .mitem.site-c1{background:#d6f0e0} .mitem.site-c2{background:#fce6c8}
.mitem.site-c3{background:#e7dcfb} .mitem.site-c4{background:#cdeeec} .mitem.site-c5{background:#fcdce8}
.mitem.site-c6{background:#dfe2fb} .mitem.site-c7{background:#e3e7ec}
.mmore{font-size:10px; color:var(--muted2); font-weight:600}

/* ============================================================= *
 *  TELEGRAM MINI APP  (My Week / mgmt) — dashboard-styled,        *
 *  accessibility-first (big text + touch targets, high contrast). *
 *  Scoped to body.miniapp so it never affects the planner pages.  *
 * ============================================================= */
body.miniapp{background:var(--page-bg)}
.miniapp .mwrap{max-width:600px; margin:0 auto; padding:12px 12px 30px}
.miniapp .mhead{position:relative; overflow:hidden; background:#fff; border:1px solid var(--light-border);
  border-radius:16px; box-shadow:0 6px 20px rgba(15,27,51,.08); padding:15px 16px 15px 18px; margin-bottom:12px}
.miniapp .mhead::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--hero-blue),var(--hero-accent))}
.miniapp .mhead .top{display:flex; align-items:center; gap:13px}
.miniapp .mhead img{height:42px; width:auto; display:block}
.miniapp .mhead .top{flex-wrap:nowrap}
.miniapp .mhead img{flex:none}
.miniapp .mhead .titles{min-width:0}
.miniapp .mhead .pretitle{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hero-blue)}
.miniapp .mhead h1{margin:1px 0 0; font-size:23px; font-weight:800; color:var(--hero-navy); text-transform:none; white-space:nowrap}
.miniapp .wknav{display:flex; align-items:center; gap:8px; margin-top:13px}
.miniapp .wknav .weekrange{flex:1 1 auto; min-width:0; text-align:center; font-size:17px; font-weight:700; color:var(--hero-navy);
  background:var(--page-bg); border:1px solid var(--light-border); border-radius:12px; padding:13px 6px; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.miniapp .wknav .btn.arrow{flex:none; font-size:18px; font-weight:700; padding:12px 16px; background:var(--hero-blue);
  border-color:var(--hero-blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.32)}

.miniapp .day{background:#fff; border:1px solid var(--light-border); border-radius:14px;
  box-shadow:0 3px 12px rgba(15,27,51,.06); overflow:hidden; margin-bottom:12px}
.miniapp .day h2{margin:0; padding:13px 16px; background:var(--head-grey); color:var(--hero-navy);
  font-size:17px; font-weight:800; border-bottom:1px solid var(--light-border)}
.miniapp .day .line{padding:14px 16px; border-bottom:1px solid var(--light-border); font-size:16px; color:var(--ink)}
.miniapp .day .line:last-child{border-bottom:none}
.miniapp .day .line .ampm{display:inline-block; min-width:44px; text-align:center; font-size:12px; font-weight:800;
  padding:4px 8px; border-radius:7px; margin-right:9px; vertical-align:middle; white-space:nowrap}
.miniapp .day .line.am .ampm{background:#e1ecff; color:#1e40af}
.miniapp .day .line.pm .ampm{background:#efe7fb; color:#5b21b6}
.miniapp .day .line .site{font-weight:700; color:var(--hero-navy)}
/* 🔑 keysafe code next to a booked site on My Week (big + tappable-readable) */
.miniapp .day .line .keycode{display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px;
  background:#eef2f8; border:1px solid var(--light-border); font-weight:800; font-size:15px;
  color:var(--hero-navy); white-space:nowrap; letter-spacing:.02em}
.miniapp .day .line .scope{display:block; color:var(--muted2); margin-top:5px; font-size:15px; padding-left:53px; line-height:1.4}
.miniapp .day .line .spill{display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; margin-left:8px}
.miniapp .day .line .spill.Off{background:#eef1f5; color:#475569}
.miniapp .day .line .spill.Sick{background:#fdecea; color:#a93226}
.miniapp .day .line .spill.Holiday{background:#efe7fb; color:#5b2a9e}
.miniapp .day .line .spill.Provisional{background:#fef3c7; color:#92400e}
.miniapp .day .line .spill.Unavailable{background:#e8edf3; color:#475569}
/* completed ad-hoc job line (its own invoice line) — green accent */
.miniapp .day .line.completed{border-left:4px solid #1a9e57}
.miniapp .day .line.completed .ampm{background:#dff3e7; color:#1a7a45; min-width:54px}
.miniapp .day .line .spill.completedtag{background:#dff3e7; color:#1a7a45}
.miniapp .day .empty{padding:14px 16px; color:#aeb6c2; font-size:15px}
.miniapp .loading{padding:34px; text-align:center; color:var(--muted2)}
/* invoice helper: per-day copy buttons (one line per day on the lad's invoice) */
.miniapp .day h2{display:flex; align-items:center; justify-content:space-between; gap:10px}
.miniapp .day-copy{flex:0 0 auto; border:1px solid var(--hero-blue); background:#fff; color:var(--hero-blue);
  font-size:13px; font-weight:800; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
  line-height:1.2; -webkit-tap-highlight-color:transparent}
.miniapp .day-copy:active{background:#e1ecff}
.miniapp .day-copy.done{background:#dff3e6; border-color:#15803d; color:#15803d}
/* "Copy all week" in the footer — full-width, filled, more prominent than per-day. */
.miniapp .day-copy.week{display:block; width:100%; margin:2px 2px 4px; padding:11px; background:var(--hero-blue);
  color:#fff; border-color:var(--hero-blue)}
.miniapp .day-copy.week:active{background:#1e40af}
.miniapp .day-copy.week.done{background:#dff3e6; border-color:#15803d; color:#15803d}
.miniapp .invoice-foot{margin:16px 2px 10px}
.miniapp .inv-note{margin:0 2px 8px; font-size:13.5px; color:var(--ink); line-height:1.5; background:#f7f9fc;
  border:1px solid var(--light-border); border-radius:11px; padding:11px 13px}
.miniapp .inv-note strong{color:var(--hero-navy)}
.miniapp .inv-hint{margin:9px 4px 0; font-size:13px; color:var(--muted2); line-height:1.45}
.miniapp .inv-text{width:100%; min-height:96px; margin-top:11px; padding:12px; border:1px solid var(--line2);
  border-radius:11px; font-size:13.5px; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ink);
  background:#fff; white-space:pre; line-height:1.5; -webkit-user-select:text; user-select:text}
.miniapp .crumb{font-size:16px; color:var(--hero-blue); cursor:pointer; margin:2px 4px 10px; display:none; font-weight:600}
.miniapp .crumb.show{display:inline-block}

/* mgmt overview: "who's where" grouped by site */
.miniapp .site-group{background:#fff; border:1px solid var(--light-border); border-radius:14px;
  box-shadow:0 3px 12px rgba(15,27,51,.06); overflow:hidden; margin-bottom:12px}
.miniapp .site-group h2{margin:0; padding:13px 16px; background:var(--head-grey); color:var(--hero-navy);
  font-size:17px; font-weight:800; border-bottom:1px solid var(--light-border)}
.miniapp .person-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--light-border); font-size:16px; cursor:pointer}
.miniapp .person-row:last-child{border-bottom:none}
.miniapp .person-row:hover{background:#f4f7fd}
.miniapp .person-row>span:first-child{font-weight:700; color:var(--hero-navy)}
.miniapp .person-row .ampm{background:#eef2f7; color:#475569; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap}

/* mgmt: manage site managers panel */
.miniapp .mgrhint{padding:0 16px 12px; color:var(--muted2); font-size:14px; line-height:1.45}
.miniapp .mgr-lock{color:var(--muted2); font-size:13px; font-weight:700; white-space:nowrap}
.miniapp .mgr-rm{flex:none; font-size:14px; font-weight:700; padding:8px 14px; border-radius:9px;
  background:#fff; border:1px solid #e3b6b1; color:var(--sick)}
.miniapp .mgr-add{display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--light-border)}
.miniapp .mgr-add select{flex:1 1 auto; min-width:0; padding:13px 11px; border:1px solid var(--light-border);
  border-radius:12px; font-size:16px; color:var(--ink); background:var(--page-bg)}
.miniapp .mgr-add .btn{flex:none; font-size:16px; font-weight:700; padding:13px 18px; background:var(--hero-blue);
  border-color:var(--hero-blue); color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .page{padding:16px 14px 30px; gap:14px}
  .topbar{flex-wrap:wrap; padding:16px 18px}
  .topbar h1{font-size:25px}
  .topbar .weeknav{order:3; flex-basis:100%; justify-content:flex-start}
  .topbar .right{order:2}
  .legendcard .helper{margin-left:0; flex-basis:100%}
  .mcell{min-height:84px}
}