/* Fishmet phone screens (hours logging). Big targets, readable in a workshop. No build step. */
:root {
  --bg: #f4f6f8; --card: #fff; --text: #111827; --muted: #5b6472; --line: #d5dae1;
  --brand: #0369a1; --brand-text: #fff; --on: #0369a1; --on-bg: #e0f2fe;
  --ok: #15803d; --ok-bg: #dcfce7; --warn: #92400e; --warn-bg: #fef3c7;
  --err: #b91c1c; --err-bg: #fee2e2; --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1419; --card: #1a2129; --text: #f3f4f6; --muted: #9aa4b2; --line: #313b47;
    --brand: #0284c7; --on: #7dd3fc; --on-bg: #0c3b55;
    --ok: #86efac; --ok-bg: #123d24; --warn: #fcd34d; --warn-bg: #3d2f0b;
    --err: #fca5a5; --err-bg: #4a1414;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Safe space (12/11/2026): the last button always clears Safari's floating toolbar / the home bar; sides clear the
   notch in landscape. env() is 0 on phones without these. */
main { max-width: 640px; margin: 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
[x-cloak] { display: none !important; }
h1 { font-size: 1.5rem; margin: 8px 0 12px; }
h2 { font-size: 1.1rem; margin: 18px 0 8px; }
a { color: var(--on); }
.muted { color: var(--muted); font-weight: normal; }
.small { font-size: .9rem; }
.required { color: var(--err); font-weight: normal; }

/* Top bar: ONE line, never wraps (360px): Fishmet · Log hours · Timesheet · initial button (12/11/2026) */
.topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-height: 52px; white-space: nowrap;
  padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--brand); color: var(--brand-text); position: relative; z-index: 10; }
.topbar a { color: var(--brand-text); }
.brand { flex: none; font-weight: 700; font-size: 1.1rem; text-decoration: none; margin-right: 2px; }
.topbar nav { display: flex; gap: 2px; min-width: 0; }
.topbar nav a { text-decoration: none; padding: 7px 10px; border-radius: 999px; font-size: .95rem; }
.topbar nav a.on { background: rgba(255, 255, 255, .22); font-weight: 600; }
.me { position: relative; margin-left: auto; flex: none; }
.me-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .15);
  color: var(--brand-text); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent; }
.me-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .35); }
.me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; max-width: 70vw; white-space: normal;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); overflow: hidden; }
.me-name { margin: 0; padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.me-menu form { margin: 0; }
.me-logout { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; background: none; text-align: left;
  font: inherit; color: var(--err); font-weight: 600; cursor: pointer; }
.me-logout:active { background: var(--err-bg); }

/* Buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: 52px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--text); font: inherit; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn.on { border-color: var(--on); background: var(--on-bg); color: var(--on); }
.btn:disabled { opacity: .45; }
.btn-big { min-height: 64px; font-size: 1.15rem; margin-bottom: 10px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.btn-danger { color: var(--err); border-color: var(--err); }
.btn-row { justify-content: flex-start; text-align: left; font-weight: normal; }
.btn-row strong { margin-right: 4px; }
.link, .link-back { background: none; border: 0; padding: 4px 0; color: var(--on); font: inherit; cursor: pointer; text-decoration: underline; }
.link-back { margin-bottom: 4px; }
.tag { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--on-bg); color: var(--on); margin-left: 6px; }

/* Layout helpers */
.row { display: flex; gap: 8px; align-items: center; }
.row > .btn { width: auto; flex: 1; }
.grid-2, .grid-3, .grid-5 { display: grid; gap: 8px; margin-bottom: 8px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-2 > .btn, .grid-3 > .btn { flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }   /* 360px: "Annual Leave leave" wraps, never runs off */
.list { display: grid; gap: 8px; margin: 8px 0; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.step h2:first-child { margin-top: 0; }
.chosen-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.chosen-foot .tag { margin-left: 0; }

/* Job card (components/job-card.blade.php): line 1 number + customer, line 2 description */
.job-card { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px;
  min-height: 64px; min-width: 0; max-width: 100%; text-align: left; font-weight: normal; }
.list { grid-template-columns: minmax(0, 1fr); }   /* long customer names must not widen the list */
div.job-card { padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); }
.job-card.on { border-color: var(--on); background: var(--on-bg); }
.job-card.on .job-card-name { color: var(--text); }
.job-card-top { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.job-card-number { flex: none; white-space: nowrap; font-weight: 700; }
.job-card-customer { flex: 1 1 auto; min-width: 0; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-card-name { display: block; overflow-wrap: anywhere; color: var(--text); }

/* Inputs */
.input { width: 100%; min-height: 52px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; }
.input:focus { outline: 3px solid var(--on); outline-offset: 1px; }
.input.date { flex: 1.4; min-width: 0; }
.input.hours { text-align: center; font-size: 1.5rem; font-weight: 700; }
.stepper .key-small { width: 64px; flex: none; font-size: 1.6rem; }
textarea.input { min-height: 72px; resize: vertical; }

/* Messages */
.notice, .error, .warning, .success { border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.notice { background: var(--on-bg); color: var(--on); }
.error { background: var(--err-bg); color: var(--err); font-weight: 600; }
.warning { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.card.success { background: var(--ok-bg); color: var(--ok); padding: 16px; margin-bottom: 12px; }
.card.success h1 { margin-top: 0; }
.big { font-size: 1.3rem; font-weight: 700; margin: 4px 0; }

/* Login */
.pin-dots { display: flex; gap: 16px; justify-content: center; margin: 16px 0; }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); }
.dot.on { background: var(--text); border-color: var(--text); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.key { min-height: 72px; font-size: 1.8rem; font-weight: 700; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--text); cursor: pointer; }
.key:active { background: var(--on-bg); }
.key-small { font-size: 1.4rem; }

/* My week */
.totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.totals > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; text-align: center; }
.totals span, .totals strong { display: block; }
.totals strong { font-size: 1.2rem; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.day.empty { opacity: .7; }
.day-head { display: flex; justify-content: space-between; padding: 10px 12px; font-weight: 600; }
.entry { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border-top: 1px solid var(--line);
  color: var(--text); text-decoration: none; min-height: 52px; align-items: center; }
a.entry:active { background: var(--on-bg); }
.entry.locked { color: var(--muted); }

@media (max-width: 380px) {
  body { font-size: 17px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Log hours step 2 (Drawing Ref No.?) */
.other-label { display: block; margin: 14px 0 6px; font-weight: 600; }
.input.on { border-color: var(--on); background: var(--on-bg); }
.step-continue { margin-top: 12px; margin-bottom: 0; }
.chosen-choice { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--bg); overflow-wrap: anywhere; }
.chosen-choice .link { flex: none; }

/* Your recent jobs: Show more / Show fewer */
.recent-toggle { display: block; min-height: 44px; margin: 0 0 4px; font-weight: 600; }

/* Log hours step 2 folded up after a tap: chosen item + "Show all ..." + Continue */
.tick { flex: none; font-weight: 700; color: var(--on); margin-left: auto; }
.job-card .tick { margin-left: 8px; }
.chosen-card .job-card-top { justify-content: space-between; }
.chosen-type { justify-content: flex-start; gap: 8px; cursor: default; }
.show-all { display: block; min-height: 44px; margin: 6px 0 0; font-weight: 600; }
.drawing-search { margin-bottom: 8px; }
.chosen-type .tick { margin-left: 0; }
.nonjob-search { margin-bottom: 8px; }

/* 12/11/2026 phone polish ---------------------------------------------------------------------------------- */
/* Date row: Today | Yesterday | date box share the width and never clip at 360px */
.date-row { display: flex; gap: 6px; }   /* Yesterday may be hidden (logging window): the others share the row */
.date-row > .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 10px 4px; font-size: 1rem; }
.date-row > .btn:not(:first-child) { flex-grow: 1.2; }
.pick-day { position: relative; overflow: hidden; white-space: nowrap; }
.pick-day:focus-within { outline: 3px solid var(--on); outline-offset: 1px; }
.pick-day-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; margin: 0; padding: 0;
  cursor: pointer; font-size: 16px; /* 16px: iPhone doesn't zoom in */ }
.pick-day-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
/* "Thu 12/11 · 8 h logged" → opens the Timesheet on that day */
.day-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 8px 0 0;
  padding: 6px 2px; color: var(--muted); text-decoration: none; }
.day-line strong { color: var(--text); }
.day-line .go { color: var(--on); font-weight: 600; flex: none; }
.day-line:active { background: var(--on-bg); border-radius: 8px; }

/* Login: Add to Home Screen tip (dismissible, hidden once opened from the home screen) */
.a2hs { position: relative; margin: 16px 0 0; padding: 10px 40px 10px 12px; border-radius: var(--radius);
  background: var(--card); border: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }
.a2hs p { margin: 0; }
.a2hs p + p { margin-top: 4px; }
.a2hs-close { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border: 0; background: none;
  color: var(--muted); font-size: 1.3rem; cursor: pointer; }
/* Site label (14/11/2026, SITE_LABEL, dev copy only): small orange pill after "Fishmet". The header must stay ONE line
   at 360px, so with a label the brand, tabs and pill tighten up on narrow phones. */
.site-label { flex: none; background: #ea580c; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.5;
  padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 420px) {
  .topbar.has-site-label { gap: 4px; }
  .topbar.has-site-label .brand { font-size: 1rem; margin-right: 0; }
  .topbar.has-site-label .site-label { font-size: .62rem; padding: 1px 5px; }
}

/* Choose your own PIN / Change my PIN (14/11/2026) */
.pin-input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-weight: 700; }
.choose-pin { margin-bottom: 12px; }
.me-link { display: block; min-height: 48px; padding: 13px 14px; color: var(--text) !important; text-decoration: none;
  font-weight: 600; border-bottom: 1px solid var(--line); }
.me-link:active { background: var(--on-bg); }
.a2hs[data-a2hs="once"] { margin: 0 0 12px; }   /* once-only tip on Log hours: gap above the date box */

/* Phone header, two rows (14/11/2026): row 1 Fishmet (+ label) · first name ▾ ; row 2 Log hours | Timesheet (equal tabs) */
.topbar { display: block; white-space: normal; min-height: 0;
  padding: calc(4px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
.topbar-row { display: flex; align-items: center; gap: 6px; min-height: 52px; white-space: nowrap; }
.topbar .me { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 45%; }
.topbar .me-btn { width: auto; max-width: 100%; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 14px;
  border-radius: 999px; font-size: 1rem; font-weight: 600; }
.me-btn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* long names: "…" */
.me-caret { flex: none; font-size: .8em; opacity: .9; }
.topbar .topbar-tabs { display: grid; grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 0 10px; }
.topbar .topbar-tabs a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 6px 8px;
  border-radius: 999px; text-decoration: none; font-size: 1rem; color: var(--brand-text); }
.topbar .topbar-tabs a.on { background: rgba(255, 255, 255, .25); font-weight: 600; }
.topbar .topbar-tabs a:active { background: rgba(255, 255, 255, .15); }

/* Timesheet = home page (14/11/2026). Fits ONE phone screen (iPhone ~390 x 664 visible in Safari; close at 360px):
   Last week | This week | Pick week, dates, status bar, 7 day rows (>= 40px tall to tap) + Week row. */
.tsw-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tsw-buttons > .btn { min-height: 40px; padding: 6px 4px; font-size: .9rem; border-width: 1.5px; border-radius: 10px; white-space: nowrap; }
.tsw-pick > span { display: inline-flex; align-items: center; gap: 4px; }
.tsw-cal { flex: none; }
.tsw-dates { margin: 6px 0 8px; text-align: center; font-size: .85rem; color: var(--muted); }
.tsw-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 0 8px;
  padding: 6px 6px 6px 12px; border-radius: 12px; border: 1.5px solid; font-size: .95rem; }
.tsw-status-text { min-width: 0; display: flex; flex-direction: column; }
.tsw-status-note { font-size: .8rem; font-weight: normal; }
.tsw-status-btn { flex: none; min-height: 38px; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.tsw-status.is-not-submitted { background: #fef3e2; border-color: #e6a23c; color: #7c4a03; }
.tsw-status.is-not-submitted .tsw-status-btn { background: #c2770e; border: 1px solid #c2770e; color: #fff; }
.tsw-status.is-overdue { background: #fdecec; border-color: #e07070; color: #9b1c1c; }
.tsw-status.is-overdue .tsw-status-btn { background: #a51d24; border: 1px solid #a51d24; color: #fff; }
.tsw-status.is-submitted { background: #e8f5e3; border-color: #6aa84f; color: #2f6b1a; }
.tsw-status.is-submitted .tsw-status-btn { background: #fff; border: 1.5px solid #6aa84f; color: #2f6b1a; }
@media (prefers-color-scheme: dark) {
  .tsw-status.is-not-submitted { background: var(--warn-bg); color: var(--warn); }
  .tsw-status.is-overdue { background: var(--err-bg); color: var(--err); }
  .tsw-status.is-submitted { background: var(--ok-bg); color: var(--ok); }
  .tsw-status.is-submitted .tsw-status-btn { background: transparent; color: var(--ok); }
}
.tsw { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .9rem; }
.tsw-row { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(0, .95fr)) minmax(0, 1.15fr) minmax(0, 1fr) 16px;
  align-items: center; min-height: 40px; padding: 0 6px 0 10px; border-top: 1px solid var(--line); color: var(--text);
  text-decoration: none; font-variant-numeric: tabular-nums; }
.tsw-row > span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsw-row > span:first-child { text-align: left; font-weight: 600; }
.tsw-row .total { font-weight: 700; }
.tsw-row .go { color: var(--muted); font-size: 1.15rem; line-height: 1; text-align: right; }
.tsw-head { min-height: 30px; border-top: 0; font-size: .78rem; color: var(--muted); }
.tsw-head > span, .tsw-head > span:first-child { font-weight: 600; }
.tsw-foot { min-height: 40px; border-top: 2px solid var(--line); font-weight: 700; }
a.tsw-day { -webkit-tap-highlight-color: transparent; }
a.tsw-day:active { background: var(--on-bg); }
.tsw-day.today { background: var(--on-bg); }
.tsw-day.today > span:first-child { color: var(--on); }
.tsw-day.is-closed { color: var(--muted); }
.tsw-day.is-closed > span:first-child { font-weight: 500; }
.tsw-note { margin: 6px 0 0; font-size: .8rem; }
.tsw-confirm { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tsw-confirm h1 { font-size: 1.2rem; margin: 0 0 4px; }
.tsw-confirm > p.muted { margin: 0 0 10px; font-size: .95rem; }
.tsw-warn { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: .95rem; }
.tsw-confirm-buttons { margin: 12px 0 0; }
.tsw-submit-final { background: #3b6e12; border-color: #3b6e12; color: #fff; }
@media (max-width: 370px) {
  .tsw-buttons > .btn { font-size: .85rem; padding: 6px 2px; }
  .tsw-cal { display: none; }
  .tsw-row { padding-left: 8px; padding-right: 4px; font-size: .85rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1fr) 14px; }
  .tsw-head { font-size: .74rem; }
}