:root {
  --navy: #10243e;
  --navy-light: #1c3a5e;
  --accent: #c8a24a;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1a1f27;
  --muted: #5b6472;
  --border: #e1e4e9;
  --ok: #1e7d4b;
  --warn: #b8860b;
  --bad: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }

/* Added 20 Aug 2026 — keyboard/accessibility: a visible focus ring for
   anyone tabbing through the app instead of using a mouse/touchscreen.
   Browsers already do this by default, but this makes it consistent and
   clearly visible against the navy/gold palette. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* flex-wrap + row-gap added 17 Aug 2026 — adding the Notices and Complaints
   nav links pushed this past one row on a normal window width. Without
   wrap, the browser was breaking individual link text mid-phrase ("New" /
   "project" on separate lines) instead of wrapping whole links onto a
   second row. */
.topbar { background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; flex-wrap: wrap; row-gap: 10px; }
.brand { color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 10px; }
.brand-logo-chip { background: #fff; border-radius: 8px; padding: 4px 8px; display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand span { display: block; font-size: 0.7rem; font-weight: 400; color: #c9d4e0; }
.topbar nav { display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; }
.topbar nav a { color: #dfe6ee; text-decoration: none; margin-left: 20px; font-size: 0.92rem; white-space: nowrap; padding: 4px 2px; }
.topbar nav a:hover { color: var(--accent); }
.topbar nav a.active { color: var(--accent); font-weight: 600; border-bottom: 2px solid var(--accent); }
/* Added 20 Aug 2026 — Luke: "reduce clutter" / "easy menus". The 11 links
   used to be one flat list with no grouping, so nothing signalled which
   were related or which page you were currently on. A thin vertical rule
   between clusters (new project/projects, day-to-day logs, admin/back
   office, account) gives it visual structure without needing a dropdown
   menu, which server-rendered pages don't do well anyway. */
.nav-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.25); margin-left: 20px; }
.container { max-width: 960px; margin: 0 auto; padding: 28px; }
/* Added 23 Aug 2026 -- Luke: "Are you saying there is no way of using
   more of the screen width here?" Right -- .container caps every page at
   960px regardless of actual browser width, which is why the projects
   table still needed to scroll even on a wide desktop window with empty
   space either side. Widening .container itself globally would stretch
   every single-column form/card page in the app too, which reads worse.
   Scoped via layout()'s opts.wide instead -- only pages that ask for it
   (so far, just the dashboard) get the wider column. */
.container-wide { max-width: 1400px; }
.footer { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 24px; }

/* Added 20 Aug 2026 — "action feedback" (confirm a save actually happened,
   Luke's #8 pick). A plain success banner shown once, right under the
   header, after a redirect from a save/update action. */
.flash-banner { background: #e4f3ea; border: 1px solid #bfe3cd; color: var(--ok); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; font-size: 0.9rem; }
h1 { font-size: 1.5rem; margin-bottom: 4px; }
h2 { font-size: 1.15rem; margin-top: 32px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.project-list { display: flex; flex-direction: column; gap: 10px; }
.project-row { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; text-decoration: none; color: var(--text); }
.project-row:hover { border-color: var(--accent); }
.project-row .addr { font-weight: 600; }
.project-row .meta { color: var(--muted); font-size: 0.85rem; }
.badge { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; text-transform: capitalize; background: #eef1f5; color: var(--navy); }
/* Added 24 Aug 2026 -- Luke: "The statuses, 'Application Submitted', and
   'Further information submitted', should both be red on this Projects
   status bar." Same red as badge-rfi -- these are the two "something
   needs your attention" statuses in the workflow. */
.badge-application_submitted { background: #fbe9e7; color: var(--bad); }
.badge-further_information_submitted { background: #fbe9e7; color: var(--bad); }
.badge-permit_issued { background: #e4f3ea; color: var(--ok); }
/* Added 23 Aug 2026 -- Luke: "Any status from 'Permit issued' onwards to
   be in green." Workflow order (see PROJECT_STATUS_OPTIONS in views.js):
   ... Permit Issued -> Permit Lodged -> Under Construction -> Project
   Completed. Immediately followed up: "Any of these four make BLUE" for
   Project Completed, Lapsed, Cancelled, Closed -- the four end-states,
   overriding green for Project Completed specifically. So green covers
   the in-progress tail (Permit Issued/Lodged, Under Construction) and
   blue covers however the job actually ends, successfully or not. */
.badge-permit_lodged { background: #e4f3ea; color: var(--ok); }
.badge-under_construction { background: #e4f3ea; color: var(--ok); }
.badge-project_completed { background: #eef3fb; color: #2454a8; }
.badge-lapsed { background: #eef3fb; color: #2454a8; }
.badge-cancelled { background: #eef3fb; color: #2454a8; }
.badge-closed { background: #eef3fb; color: #2454a8; }
.badge-lodged { background: #eef1f5; color: var(--navy); }
.badge-appointed { background: #eef3fb; color: #2454a8; }
.badge-under_assessment { background: #fdf3e0; color: var(--warn); }
.badge-rfi { background: #fbe9e7; color: var(--bad); }
.badge-open { background: #fdf3e0; color: var(--warn); }
.badge-resolved { background: #e4f3ea; color: var(--ok); }
.badge-overdue { background: var(--bad); color: #fff; }
.badge-requested { background: #fdf3e0; color: var(--warn); }
tr.row-overdue td { background: #fdecea; }
form label { display: block; font-weight: 600; font-size: 0.85rem; margin: 12px 0 4px; }
form input, form select, form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem; background: #fff; }
form textarea { min-height: 70px; }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 16px 0; padding: 14px 16px; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
.btn { display: inline-block; background: var(--navy); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 0.92rem; cursor: pointer; text-decoration: none; margin-top: 14px; }
.btn:hover { background: var(--navy-light); }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid-2 .grid-span-2 { grid-column: 1 / -1; }

/* Added 23 Aug 2026 -- Luke's iPhone screenshot: on the public quote
   form, Council/municipality sat squeezed beside Postcode (cutting off
   "Select council" mid-word) instead of stacking below it. .grid-2 is
   used everywhere in this app (69 places) as a fixed 2-column grid with
   no responsive collapse, so every paired field -- not just this one --
   was doing the same narrow-squeeze thing on a phone screen. Collapsing
   to one column under this breakpoint stacks fields in their natural
   DOM order, which is also exactly what Luke asked for here: Council
   already comes right after Postcode in the markup, so it lands
   directly below it once there's only one column. */
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}
table.data { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }

/* Added 23 Aug 2026 -- Luke: "Make Project # column wider so it fits on
   one row. Do not narrow any of the other columns," then "these columns
   could also be wider" for Address/Class/Owner/Applicant/Description/
   Status. The dashboard's then-9-column projects table (PROJECT_TABLE_
   HEADER) was auto-sizing every column to fit whatever width the page
   had, so short values like "BP-2026-011" were wrapping across 3 lines.
   Scoped to just this table (.projects-table), not every table.data in
   the app, so other registers (complaints, inspections, invoices, etc.)
   are unaffected. min-width on each column, not a fixed table-layout --
   this makes the table grow instead of squeezing any column to make room
   for another, wrapped in a horizontally-scrolling container so a
   browser window narrower than the total doesn't force wrapping again.
   Permit # and Next inspection weren't mentioned, so left at their
   existing (auto) width.

   Widening still didn't make it fit on screen without scrolling --
   9 columns of real prose (Address, Description) genuinely don't fit
   most screens at a readable width. Asked Luke what to trade off;
   answer was "remove owner" -- Owner column dropped from this table
   entirely (still shown on the individual project page) rather than
   truncating text or shrinking the type. Column indices below shifted
   left by one accordingly (Owner was nth-child(5), now Applicant is). */
.projects-table-wrap { overflow-x: auto; }
.projects-table { width: max-content; min-width: 100%; }
.projects-table th:nth-child(1), .projects-table td:nth-child(1) { white-space: nowrap; min-width: 110px; } /* Project # */
.projects-table th:nth-child(3), .projects-table td:nth-child(3) { min-width: 200px; } /* Address */
.projects-table th:nth-child(4), .projects-table td:nth-child(4) { white-space: nowrap; min-width: 60px; } /* Class */
.projects-table th:nth-child(5), .projects-table td:nth-child(5) { min-width: 150px; } /* Applicant */
.projects-table th:nth-child(6), .projects-table td:nth-child(6) { min-width: 240px; } /* Description of building work */
.projects-table th:nth-child(7), .projects-table td:nth-child(7) { white-space: nowrap; min-width: 160px; } /* Status */
.levy-result { background: #f5f8f4; border: 1px solid #cfe3cf; border-radius: 8px; padding: 16px; margin-top: 14px; }
.levy-result .total { font-size: 1.4rem; font-weight: 700; color: var(--ok); }
.levy-result ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.section-note { background: #fdf6e6; border: 1px solid #eddca4; border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; color: #6b5514; margin-bottom: 14px; }

/* v0.12 additions: contacts autocomplete, checklist, leads/fee proposals */
.autocomplete { position: relative; margin-bottom: 4px; }
.ac-dropdown { display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); max-height: 220px; overflow-y: auto; }
.ac-item { padding: 8px 12px; font-size: 0.88rem; cursor: pointer; }
.ac-item:hover { background: #f2f4f7; }
.ac-empty { padding: 8px 12px; font-size: 0.82rem; color: var(--muted); }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 14px; }
.checkbox-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 0.88rem; }
.checkbox-label input { width: auto; }
.checklist-category { margin-top: 14px; }
.checklist-category h3 { font-size: 0.95rem; margin: 0 0 6px; color: var(--navy); }
/* Fixed, shared column widths so "Item / Status / Notes" line up the same
   across every category's table instead of each one auto-sizing to its own
   longest item text (the misaligned-columns look Luke flagged 17 Aug 2026). */
table.checklist { table-layout: fixed; }
table.checklist col.col-item { width: 42%; }
table.checklist col.col-status { width: 16%; }
table.checklist col.col-notes { width: 42%; }
table.checklist td { vertical-align: top; }
table.checklist textarea { min-height: 44px; font-size: 0.85rem; }
.inline-form { display: inline-block; margin: 0; }
.inline-form select { width: auto; padding: 4px 8px; }
.fp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 6px; }
.badge-outstanding { background: #fbe9e7; color: var(--bad); }
.badge-received { background: #e4f3ea; color: var(--ok); }

/* Added 17 Aug 2026 — invoice line items as a compact table instead of a
   stacked fieldset per line, so many lines can be scanned at a glance. */
table.line-items { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; }
table.line-items th { text-align: left; padding: 6px 6px; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
table.line-items td { padding: 6px 6px; vertical-align: top; border-bottom: 1px solid var(--border); }
table.line-items input, table.line-items select { width: 100%; padding: 6px 7px; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
table.line-items td.col-disbursement { text-align: center; }
table.line-items td.col-disbursement input { width: auto; }
table.line-items col.col-fee-item { width: 15%; }
table.line-items col.col-desc { width: 22%; }
table.line-items col.col-amount { width: 12%; }
table.line-items col.col-disb { width: 9%; }
table.line-items col.col-account { width: 21%; }
table.line-items col.col-tax { width: 11%; }
table.line-items col.col-remove { width: 6%; }
table.line-items td.col-remove { text-align: center; }
table.line-items td.col-remove button { background: none; border: none; color: var(--bad); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; line-height: 1; }

/* Added 17 Aug 2026 — quick-links button row, used on the project page to
   push big sections (Related permits, BCA classification, Practitioners,
   and more to follow) out to their own sub-pages instead of stacking
   everything on one long page ("too much information currently on a
   single page" / "the layout is horrific").
   Grouped 18 Aug 2026 — 24 buttons in one flat row was "too many buttons",
   so they're now split into labelled groups that follow the actual order
   of work on a job (application/compliance -> permits & lodgement ->
   inspections -> notices/enforcement -> ongoing admin), each its own
   .quick-links row under a small .quick-links-heading label. */
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.quick-links .btn { margin-top: 0; }
.quick-links-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 10px;
}
/* Added 20 Aug 2026 — "clear layout": each numbered group of quick-links
   now sits inside its own bordered card (grid of cards, one per group)
   instead of just a heading floating above a row of buttons. Same links,
   clearer boundaries between groups at a glance. */
.quick-links-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; }
.quick-links-group { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }

/* Added 20 Aug 2026 — drag-and-drop file upload ("dropzone readiness").
   Wraps the existing <input type=file> so it still works via click, but
   also accepts a dragged-in file with a visual highlight while dragging. */
.dropzone { border: 2px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center; transition: border-color 0.15s, background 0.15s; }
.dropzone.dragover { border-color: var(--accent); background: #fbf6ea; }
.dropzone input[type="file"] { border: none; padding: 6px 0; }

/* Added 20 Aug 2026 — drag a "New documents" row onto a folder button on the
   Documents page to file it, instead of only via the per-row dropdown. */
.btn.folder-dragover { outline: 3px solid var(--accent); background: #fbf6ea; }

/* Added 20 Aug 2026 — "loading states": while a form is submitting, the
   button shows it's working instead of just sitting there (or worse,
   letting a double-click submit twice). */
.btn[disabled] { opacity: 0.65; cursor: default; }

/* Added 17 Aug 2026 — inspection photo capture */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 12px 0; }
.photo-tile { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; }
.photo-tile img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.photo-caption { font-size: 0.8rem; color: var(--muted); margin: 6px 0; word-break: break-word; }
.photo-tile form { margin-top: 4px; }

/* Added 20 Aug 2026 — Luke confirmed this app is used on-site on an iPad
   Air during inspections, not just at a desk. Below tablet width: bigger
   touch targets on every button/link/input (Apple's own guidance is a
   44px minimum tap target), full-width primary inputs, and the nav wraps
   onto its own lines cleanly instead of relying on hover states that
   don't exist on a touchscreen. */
@media (max-width: 900px) {
  .container { padding: 16px; }
  .btn { padding: 12px 18px; font-size: 1rem; min-height: 44px; }
  .quick-links .btn { flex: 1 1 auto; text-align: center; }
  form input, form select, form textarea { padding: 12px; font-size: 1rem; min-height: 44px; }
  form textarea { min-height: 90px; }
  .topbar nav a { padding: 8px 4px; }
  table.data { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Added 20 Aug 2026 — "support dark mode". Follows the system setting
   (macOS/iPadOS "Auto" appearance) rather than adding an in-app toggle —
   one less thing to manage, and it matches how every native app on the
   iPad already behaves. Same layout, just re-themed colours/contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #0c1a2e; --navy-light: #1c3a5e; --accent: #d9b869;
    --bg: #14181f; --card: #1c212b; --text: #e8eaed; --muted: #97a1b0; --border: #313947;
    --ok: #4caf7d; --warn: #d9a441; --bad: #e0655c;
  }
  body { background: var(--bg); color: var(--text); }
  .brand-logo-chip { background: #ffffff; }
  form input, form select, form textarea { background: #222833; color: var(--text); border-color: var(--border); }
  .flash-banner { background: #16281f; border-color: #244a34; }
  .dropzone.dragover { background: #2a2517; }
}

/* Added 22 Aug 2026 — "let's do the ipad stuff" (tier 1: tablet-friendly).
   The inspection checklist (renderInspectionDetail) is the one page Luke
   actually uses standing up on a building site, but its controls were
   still sized for a mouse: .inline-form select (line ~109 above) sets
   padding: 4px 8px, and being a class selector it beats the generic
   "form select" 44px-tap-target rule in the mobile media query below no
   matter how narrow the viewport is — CSS specificity doesn't care about
   media queries. So the one page most likely to be used on an iPad in
   the field was quietly exempt from the touch-target work already done
   for the rest of the app. Scoped to .checklist-table specifically
   (not all .inline-form uses) and applied unconditionally, not just
   under the mobile media query — bigger, easier-to-hit controls are a
   plain improvement on desktop too, not just a tablet compromise. */
.checklist-table select,
.checklist-table input[type="text"],
.checklist-table input:not([type]) {
  padding: 12px 10px;
  font-size: 1rem;
  min-height: 44px;
  width: 100%;
}
.checklist-table td { padding: 10px 8px; vertical-align: middle; }
.checklist-save-status { display: inline-block; margin-left: 8px; font-size: 0.85rem; color: var(--muted); min-width: 70px; }
.checklist-save-status.saving { color: var(--warn); }
.checklist-save-status.saved { color: var(--ok); }
.checklist-save-status.failed { color: var(--bad); }

/* NCC classification reference table (public quote-request form) --
   Added 23 Aug 2026. Luke's iPhone screenshot showed the 3-column table
   (Class/Type/Description) forcing the whole page to scroll left/right,
   since a plain <table> has no max-width. Luke then pointed at a better
   pattern than just making it scrollable: collapse the Description
   column on narrow screens and replace it with a small "?" button next
   to each Type that pops up the description on tap. Desktop is
   untouched -- .ncc-help-btn stays hidden there since the full
   three-column table already fits fine. */
.table-scroll { overflow-x: auto; }
.ncc-help-btn { display: none; }
.ncc-popover {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 16px 40px 16px 16px;
  z-index: 50;
}
.ncc-popover p { margin: 0; line-height: 1.4; }
.ncc-popover button#ncc-popover-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #666);
  padding: 4px;
}
@media (max-width: 640px) {
  .ncc-desc-col { display: none; }
  .ncc-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    color: var(--navy);
    cursor: pointer;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
  }
}

/* Public-facing pages (Request a Quote, Book an Inspection, applicant
   intake) -- Luke asked for these to feel visually consistent with
   baysidepermits.com.au rather than looking like a different site.
   Scoped to body.public-shell only, so the internal (logged-in) app --
   which uses the same --btn/--accent styling elsewhere -- is untouched.
   Colours/shape approximated from Luke's screenshots of the real site
   (warm background, fully-rounded orange primary button); ask Jarrod
   for exact hex values and font names if this needs to match pixel for
   pixel rather than closely. */
body.public-shell { background: #f7f5f2; }
body.public-shell .btn {
  background: #ef9438;
  color: #1a1f27;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
}
body.public-shell .btn:hover { background: #e08526; }
body.public-shell .btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
}