:root{
    --bg:#f1f3f8;
    --surface:#ffffff;
    --locked:#e6e9f1;
    --border:#d7dce6;
    --border-strong:#b7c0d1;
    --ink:#171a22;
    --ink-soft:#565f70;
    --ink-faint:#6b7383;
    --accent:#1c3f8f;
    --accent-deep:#122a63;
    --accent-tint:#e3eafa;
    --tracks-navy:#2b3050;
    --link:#2a4f9c;
    --checked:#dfe7f8;
    --danger:#b3432f;
    --good:#1c7a4c;
    --focus:#1c3f8f;
    --shadow: 0 1px 2px rgba(15,20,35,0.06), 0 6px 20px rgba(15,20,35,0.06);
    --nav-bg:#12141d;
    --nav-bg-deep:#0a0b12;
    --nav-ink:#eef0f6;
    --nav-ink-soft:#8991a6;
    --nav-active:#2f5bd0;
    --nav-active-ink:#ffffff;
    --topbar-bg:#eef1f8;
    --pill-ink:#1c3f8f;
    --pill-border:#b9c8ec;
    --bottom-tabbar-height:68px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0d0f15; --surface:#161923; --locked:#1e2230; --border:#2a2f40; --border-strong:#3a4157;
      --ink:#e9ebf1; --ink-soft:#a6aec2; --ink-faint:#8890ab; --accent:#5f86e6; --accent-deep:#c9d6f7;
      --accent-tint:#1b2740; --tracks-navy:#3a4066; --link:#8fb0f0; --checked:#20304f;
      --danger:#e08469; --good:#4fbe86; --focus:#5f86e6; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
      --nav-bg:#090a10; --nav-bg-deep:#050609; --nav-ink:#e6e9f0; --nav-ink-soft:#7c84a0;
      --nav-active:#3d5fc2; --nav-active-ink:#ffffff; --topbar-bg:#12141d; --pill-ink:#8fb0f0; --pill-border:#33456e;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0d0f15; --surface:#161923; --locked:#1e2230; --border:#2a2f40; --border-strong:#3a4157;
    --ink:#e9ebf1; --ink-soft:#a6aec2; --ink-faint:#8890ab; --accent:#5f86e6; --accent-deep:#c9d6f7;
    --accent-tint:#1b2740; --tracks-navy:#3a4066; --link:#8fb0f0; --checked:#20304f;
    --danger:#e08469; --good:#4fbe86; --focus:#5f86e6; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --nav-bg:#090a10; --nav-bg-deep:#050609; --nav-ink:#e6e9f0; --nav-ink-soft:#7c84a0;
    --nav-active:#3d5fc2; --nav-active-ink:#ffffff; --topbar-bg:#12141d; --pill-ink:#8fb0f0; --pill-border:#33456e;
  }
  :root[data-theme="light"]{
    --bg:#f1f3f8; --surface:#ffffff; --locked:#e6e9f1; --border:#d7dce6; --border-strong:#b7c0d1;
    --ink:#171a22; --ink-soft:#565f70; --ink-faint:#6b7383; --accent:#1c3f8f; --accent-deep:#122a63;
    --accent-tint:#e3eafa; --tracks-navy:#2b3050; --link:#2a4f9c; --checked:#dfe7f8;
    --danger:#b3432f; --good:#1c7a4c; --focus:#1c3f8f; --shadow: 0 1px 2px rgba(15,20,35,0.06), 0 6px 20px rgba(15,20,35,0.06);
    --nav-bg:#12141d; --nav-bg-deep:#0a0b12; --nav-ink:#eef0f6; --nav-ink-soft:#8991a6;
    --nav-active:#2f5bd0; --nav-active-ink:#ffffff; --topbar-bg:#eef1f8; --pill-ink:#1c3f8f; --pill-border:#b9c8ec;
  }

  *{box-sizing:border-box;}
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  button, select, input, textarea{ font-family:inherit; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-item:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:2px;
  }

  /* ---- app shell ---- */
  .app{
    display:flex;
    height:100vh;
    height:100dvh; /* iOS Safari sizes 100vh against the toolbar-hidden max, not what's actually visible — dvh tracks the real visible viewport instead. Declared second so it overrides in browsers that support it; older ones just keep the 100vh above. */
    overflow:hidden;
  }
  .sidenav{
    width:230px;
    min-width:230px;
    background:var(--nav-bg);
    color:var(--nav-ink);
    display:flex;
    flex-direction:column;
    padding:14px 0;
    transition:width .15s ease, min-width .15s ease;
  }
  .sidenav.collapsed{ width:64px; min-width:64px; }
  .sidenav .brand{
    display:flex;
    align-items:center;
    padding:14px 16px 18px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:8px;
  }
  .brand-logos{ display:flex; align-items:center; gap:10px; }
  .logo-chip{
    height:56px;
    min-width:56px;
    border-radius:10px;
    background:#ffffff;
    display:grid;
    place-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    padding:6px 9px;
    overflow:hidden;
  }
  .logo-chip svg{ width:27px; height:27px; display:block; }
  .logo-chip img{ height:46px; width:auto; max-width:150px; display:block; object-fit:contain; }
  .brand-divider{ width:1px; height:36px; background:rgba(255,255,255,0.2); flex:none; }
  .sidenav.collapsed .brand{ display:none; }
  .nav-list{ list-style:none; margin:0; padding:0; flex:1; }

  #loginScreen{
    height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center;
    background:var(--bg); padding:20px;
  }
  .login-card{
    width:100%; max-width:360px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    padding:28px 26px;
  }
  .login-logos{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
  .login-card h1{ font-size:16px; text-align:center; margin:0 0 20px; color:var(--ink); }
  .nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    margin:2px 10px;
    border-radius:7px;
    font-size:13.5px;
    font-weight:600;
    color:var(--nav-ink-soft);
    cursor:pointer;
    border:none;
    background:none;
    width:calc(100% - 20px);
    text-align:left;
  }
  .nav-item svg{ flex:none; width:18px; height:18px; }
  .nav-item span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidenav.collapsed .nav-item span{ display:none; }
  .sidenav.collapsed .nav-item{ justify-content:center; padding:10px; }
  .nav-item:hover{ background:rgba(255,255,255,0.06); color:var(--nav-ink); }
  .nav-item.active{ background:var(--nav-active); color:var(--nav-active-ink); }
  .nav-item.active svg{ color:var(--nav-active-ink); }
  .notif-badge{ font-size:10px; font-weight:700; background:var(--danger); color:#fff; padding:1px 6px; border-radius:999px; flex:none; margin-left:6px; }
  .sidenav.collapsed .notif-badge{ display:none; }
  .nav-foot{
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:8px;
  }

  /* ---- bottom tab bar: Foreman/General User only ----
     These roles only ever have three destinations (Forms/Inbox/Setup) -
     a left sidebar squeezed onto a tablet still reads as "a website,"
     while a bottom tab bar is the standard native-app pattern and is
     thumb-reachable on a handheld iPad. Admin/Manager-Supervisor keep
     the existing sidebar unchanged (more destinations, more of a
     back-office tool). applyRoleBasedNav() toggles .restricted-nav on
     .app to switch between the two modes; every rule below is scoped
     under that class so it never affects the unrestricted experience. */
  .bottom-tabbar{
    display:none;
    position:fixed; left:0; right:0; bottom:0;
    height:var(--bottom-tabbar-height);
    background:var(--nav-bg);
    border-top:1px solid rgba(255,255,255,0.08);
    z-index:35;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .bottom-tab{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px;
    background:none; border:none;
    color:var(--nav-ink-soft);
    font-family:inherit; font-size:11px; font-weight:700;
    cursor:pointer;
    position:relative;
  }
  .bottom-tab svg{ width:23px; height:23px; }
  .bottom-tab.active{ color:var(--nav-ink); }
  .bottom-tab.active svg{ color:var(--nav-active); }
  .bottom-tab-icon{ position:relative; display:inline-flex; }
  .bottom-tab-badge{ position:absolute; top:-4px; right:-10px; margin-left:0; }

  /* Scoped off body.restricted-nav, not .app.restricted-nav: the FAB
     buttons (.fab-group) and filter drawers are siblings of .app at the
     body level, not descendants of it, so an .app-scoped selector would
     silently never match them. Toggling the class on <body> instead
     covers both the .app-internal elements (sidenav/topbar/page/etc,
     still reached fine via descendant selector) and the body-level ones
     with one consistent rule. */
  body.restricted-nav .sidenav{ display:none; }
  body.restricted-nav .topbar{ display:none; }
  body.restricted-nav .bottom-tabbar{ display:flex; }
  body.restricted-nav .page{ padding-bottom:calc(var(--bottom-tabbar-height) + 100px); }
  body.restricted-nav .fab-group{ bottom:calc(var(--bottom-tabbar-height) + 26px); }

  /* Bigger touch targets for the primary JHA-form actions, scoped to
     restricted-nav only - admin's desktop-oriented view keeps its more
     compact sizing. */
  body.restricted-nav #saveDraftBtn,
  body.restricted-nav #submitAssessmentBtn{
    padding:15px 14px;
    font-size:15px;
  }
  body.restricted-nav canvas.pad{ height:190px; }
  body.restricted-nav .forms-tab{ padding:10px 6px 12px; }
  /* Admin-facing review aid only - a foreman viewing their own past
     submission has no use for translating their own writing. */
  body.restricted-nav #translateBtn{ display:none !important; }

  .main{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
  .topbar{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 22px;
    background:var(--topbar-bg);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:10;
  }
  .topbar .org{ font-size:14px; color:var(--ink-soft); font-weight:500; }
  .topbar .spacer{ flex:1; }
  /* Not topbar-scoped - the topbar itself no longer has a .search element,
     this is what the Entries/Forms toolbar's search box actually renders
     with (see .search--wide below, which overrides the fixed width to
     grow instead). Was previously .topbar .search, which meant it never
     matched anything and the Forms toolbar's search box rendered with no
     box styling at all - unstyled height, so it never lined up with the
     38px .icon-btn buttons next to it. */
  .search{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:7px;
    padding:0 12px;
    /* Matches .icon-btn's fixed 38px exactly (padding alone gave it ~33px)
       so it sits level with the Filter/Refresh buttons next to it in the
       Entries toolbar, not just centered-but-visibly-shorter. */
    height:38px;
    width:280px;
    color:var(--ink-faint);
    font-size:13px;
  }
  /* input[type="text"] (further down this file) sets its own border/
     padding/height for real form fields - same specificity as a plain
     ".search input", and later in the file, so it was winning and giving
     the search box's input a second, taller border-box stacked inside
     the first. The [type="text"] here isn't about matching that input
     type specifically, it's what bumps this rule's specificity just
     enough to actually win. */
  .search input[type="text"]{
    border:none; outline:none; background:none;
    flex:1; width:auto; height:auto; padding:0;
    color:var(--ink); font-size:13px;
  }
  .topbar .icon-btn{
    width:34px; height:34px;
    border-radius:50%;
    display:grid; place-content:center;
    background:none; border:none; color:var(--ink-soft); cursor:pointer;
  }
  .topbar .icon-btn:hover{ background:var(--locked); }

  .viewport{ flex:1; min-height:0; overflow-y:auto; }
  .view{ display:none; }
  .view.active{ display:block; }

  .page{
    max-width:900px;
    margin:0 auto;
    padding:20px 20px 100px;
  }
  a.back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    padding:6px 2px;
  }
  a.back:hover{ text-decoration:underline; }

  .titlebar{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0 4px;
    border-bottom:1px solid var(--border);
    padding-bottom:14px;
  }
  h1{
    font-size:22px;
    font-weight:700;
    margin:0;
    letter-spacing:-0.01em;
    text-wrap:balance;
    display:flex;
    align-items:center;
    gap:10px;
  }
  h1 svg{ color:var(--accent); flex:none; }
  .submitted{ font-size:13px; color:var(--ink-soft); }
  .submitted b{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 18px;
  }
  .view-pdf{
    color:var(--accent);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .view-pdf:hover{ text-decoration:underline; }
  /* .view-pdf was written for an <a> - .btn-reset lets #translateBtn (a
     real <button>, since it triggers an action rather than navigating)
     reuse the exact same look without native button chrome. */
  .btn-reset{ border:none; background:none; cursor:pointer; font:inherit; }
  .btn-reset:disabled{ opacity:0.5; cursor:not-allowed; }
  .translated-block{
    margin-top:8px; padding:10px 12px;
    background:var(--accent-tint); border:1px solid var(--pill-border);
    border-radius:7px; font-size:13.5px; line-height:1.5; color:var(--ink);
    white-space:pre-wrap;
  }
  .translated-block-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); margin-bottom:4px; }

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    margin-bottom:22px;
    overflow:hidden;
  }
  /* Viewing an already-submitted JHA (#view-form-detail.locked-view) -
     every actual field/signature-pad/chip control lives inside a .card,
     so this one rule locks the whole form; "Back to List" and "View PDF"
     are siblings of .card, not inside one, so they stay interactive. */
  #view-form-detail.locked-view .card{ pointer-events:none; opacity:0.72; }
  .card > .bar{
    background:var(--accent-tint);
    color:var(--accent-deep);
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:11px 18px;
    border-bottom:1px solid var(--border);
  }
  .card > .body{ padding:18px; }

  .panel{
    border:1px solid var(--border);
    border-radius:8px;
    margin-bottom:16px;
    overflow:hidden;
    background:var(--surface);
  }
  .panel:last-child{ margin-bottom:0; }
  .panel > .head{
    background:var(--locked);
    color:var(--ink);
    font-weight:600;
    font-size:13.5px;
    padding:9px 16px;
    border-bottom:1px solid var(--border);
  }
  .panel > .content{ padding:16px; }

  .field{ margin-bottom:16px; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block;
    font-weight:600;
    font-size:13px;
    margin-bottom:6px;
    color:var(--ink);
  }
  .req{ color:var(--danger); margin-left:2px; }
  .field .hint{ font-size:12px; color:var(--ink-faint); margin-top:4px; }
  /* Visually hidden but still readable by screen readers - for form
     controls that need a real accessible name but don't need visible
     duplicate text (e.g. two inputs sharing one visible group label). */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"], select, textarea{
    width:100%;
    padding:10px 12px;
    font-size:14px;
    font-family:inherit;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:6px;
  }
  /* Same padding still renders at different heights across these input
     TYPES (a <select> with appearance:auto keeps native OS chrome that a
     date/text input doesn't get) - an explicit height, not just padding,
     is what actually makes them line up pixel-for-pixel. textarea is
     deliberately excluded here, it needs to stay driven by its rows
     attribute. */
  input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"], select{
    height:42px;
  }

  /* Wraps a password field so a show/hide toggle button can sit inside
     it, right-aligned. Targets the wrapper's child input rather than
     input[type="password"] directly, since the toggle flips the
     input's type to "text" - the padding needs to still apply then. */
  .pw-field{ position:relative; }
  .pw-field input{ padding-right:40px; }
  .pw-toggle{
    position:absolute; top:0; right:0; height:42px; width:40px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; margin:0;
    color:var(--ink-faint); cursor:pointer;
  }
  .pw-toggle:hover{ color:var(--ink-soft); }
  .pw-toggle svg{ width:18px; height:18px; }

  @media (pointer:coarse){
    /* iOS Safari auto-zooms the whole page on focus for any input under
       16px — a foreman tapping into any field on an iPad would trigger
       this on every single field otherwise. Touch/coarse-pointer only,
       so desktop's tighter 14px is untouched. */
    input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"], select, textarea{
      font-size:16px;
    }
  }
  .searchable-select{ position:relative; }
  .searchable-select-native{ display:none !important; }
  .searchable-select-list{
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    box-shadow:var(--shadow); max-height:220px; overflow-y:auto; display:none;
  }
  .searchable-select-item{ padding:9px 12px; font-size:13.5px; cursor:pointer; }
  .searchable-select-item:hover{ background:var(--checked); }
  .searchable-select-empty{ padding:9px 12px; font-size:13px; color:var(--ink-faint); }

  .locked{
    background:var(--locked) !important;
    color:var(--ink-soft);
  }
  select{ appearance:auto; }

  .chip-field{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border:1px solid var(--border-strong);
    border-radius:6px;
    background:var(--locked);
    padding:9px;
    min-height:42px;
  }
  .chip{
    position:relative;
    display:inline-flex;
    align-items:center;
    background:var(--accent);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:5px 24px 5px 12px;
    border-radius:5px;
    white-space:nowrap;
  }
  .chip .remove{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    transition:opacity .12s ease;
    cursor:pointer;
    width:14px; height:14px;
    display:grid; place-content:center;
    border-radius:50%;
    /* Now a real <button>, not a <span> - reset native button chrome so
       it still looks/sizes exactly like before. */
    border:none; background:none; padding:0; color:inherit; font:inherit;
  }
  @media (hover:hover) and (pointer:fine){
    /* Only hide-until-hover on real mice/trackpads — touch devices like an
       iPad have no hover state, so this would otherwise make the button
       permanently invisible and untappable there (same reasoning as
       .proj-remove above). */
    .chip .remove{ opacity:0; }
    .chip:hover .remove, .chip .remove:focus-visible{ opacity:1; }
  }
  .chip .remove:hover{ background:rgba(255,255,255,0.25); }

  /* One bordered box holding both the chip row and the type-ahead "add"
     input, instead of two separately-bordered fields stacked with a gap.
     No overflow:hidden here — the type-ahead suggestion list is an
     absolutely-positioned child that opens below this box, and hiding
     overflow would clip it. Rounded corners are set on the top/bottom
     pieces directly instead. */
  .tag-combo{ border:1px solid var(--border-strong); border-radius:6px; }
  .tag-combo .chip-field{
    border:none;
    border-radius:6px 6px 0 0;
    background:var(--locked);
  }
  .tag-combo .searchable-select{ border-top:1px solid var(--border); }
  .tag-combo .searchable-select-input{
    border:none;
    border-radius:0 0 6px 6px;
    background:var(--surface);
  }
  .chip-empty{ color:var(--ink-faint); font-size:13px; padding:5px 2px; }

  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:620px){ .grid2{ grid-template-columns:1fr; } }


  .subhead{ font-weight:700; font-size:13px; margin:18px 0 8px; color:var(--ink); }
  .subhead:first-child{ margin-top:0; }

  .fab-group{ position:fixed; right:26px; bottom:26px; display:flex; gap:10px; z-index:20; }
  .fab{
    width:48px; height:48px;
    border-radius:50%;
    border:none;
    display:grid;
    place-content:center;
    color:#fff;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,0.22);
  }
  .fab.delete{ background:var(--tracks-navy); }
  .fab.edit{ background:var(--accent); }
  .fab.danger{ background:var(--danger); }
  .fab:hover{ filter:brightness(1.08); }
  .fab svg{ width:20px; height:20px; }

  /* signature */
  .pad-wrap{
    border:1.5px dashed var(--border-strong);
    border-radius:8px;
    background:var(--locked);
    padding:10px;
  }
  canvas.pad{
    width:100%;
    height:150px;
    display:block;
    background:#fdfdfb;
    border:1px solid var(--border);
    border-radius:6px;
    touch-action:none;
    cursor:crosshair;
  }
  .pad-baseline{ font-size:11px; color:var(--ink-faint); text-align:center; margin-top:6px; }
  .sig-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; flex-wrap:wrap; }
  .btn{
    font-family:inherit; font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:6px;
    border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .btn:hover{ background:var(--locked); }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn.primary:hover{ filter:brightness(1.06); }
  .btn.primary:disabled{ background:var(--border-strong); border-color:var(--border-strong); color:var(--ink-faint); cursor:not-allowed; filter:none; }
  .btn.subtle{ background:none; border-color:transparent; color:var(--accent); padding:8px 4px; }
  .btn.subtle:hover{ background:none; text-decoration:underline; }
  .btn.block{ width:100%; }
  .btn.ghost-accent{ background:var(--accent-tint); border-color:var(--accent-tint); color:var(--accent-deep); }
  .btn.ghost-accent:hover{ filter:brightness(0.97); }
  .yn-toggle{ display:flex; gap:8px; max-width:280px; }
  .yn-btn{
    flex:1; font-family:inherit; font-size:13px; font-weight:700;
    padding:9px 14px; border-radius:6px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .yn-btn:hover{ background:var(--locked); }
  .yn-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

  .sig-status{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--ink-faint); }
  .sig-status.captured{ color:var(--accent); }
  .sig-status .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

  .attest{
    font-size:12.5px; color:var(--ink-soft);
    background:var(--accent-tint); border:1px solid var(--border);
    border-radius:6px; padding:10px 12px; margin-bottom:16px;
  }
  .emp-list{ display:flex; flex-direction:column; gap:14px; }
  .emp-block{
    position:relative;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--locked);
    padding:14px 44px 14px 14px;
  }
  .emp-block .remove-block{
    position:absolute; top:10px; right:10px;
    width:28px; height:28px;
    border-radius:6px; border:none;
    background:none; color:var(--ink-faint);
    display:grid; place-content:center; cursor:pointer;
  }
  .emp-block .remove-block:hover{ background:var(--border); color:var(--danger); }
  .emp-block .pad-wrap{ background:var(--surface); }

  /* projects view */
  .proj-header{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0 18px; }
  .proj-header h1{ margin-right:auto; }
  .proj-tools{ display:flex; gap:10px; align-items:center; }
  .proj-tools input[type="text"]{ width:260px; }
  .proj-list{ display:flex; flex-direction:column; gap:12px; }
  .proj-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    padding:14px 16px;
    box-shadow:var(--shadow);
  }
  .proj-title{ font-weight:700; font-size:14.5px; }
  .proj-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
  .proj-loc{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
  .proj-card-footer{
    display:flex; justify-content:flex-end; align-items:center; gap:10px;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
  }
  .proj-remove{
    transition:opacity .12s ease;
    border:none; background:none; color:var(--ink-faint);
    width:26px; height:26px; border-radius:6px; display:grid; place-content:center; cursor:pointer;
    margin-right:auto;
  }
  .proj-remove:hover{ background:var(--checked); color:var(--danger); }
  @media (hover:hover) and (pointer:fine){
    /* Only hide-until-hover on real mice/trackpads — touch devices like an
       iPad have no hover state, so this would otherwise make the button
       permanently invisible and untappable there. */
    .proj-remove{ opacity:0; }
    .proj-card:hover .proj-remove{ opacity:1; }
    .worker-card:hover .proj-remove{ opacity:1; }
  }
  .pill{
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; font-weight:700;
    color:var(--pill-ink);
    border:1px solid var(--pill-border);
    border-radius:20px;
    padding:4px 10px;
  }
  .proj-empty{ text-align:center; color:var(--ink-faint); padding:30px 0; font-size:13px; }

  /* forms list view */
  .forms-head{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    margin:16px 0 4px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
  }
  .forms-head-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .forms-head-left h1{ margin:0; }
  .forms-head-left svg{ color:var(--accent); flex:none; }
  .forms-head-divider{ width:1px; height:20px; background:var(--border-strong); }
  .forms-type-title{ font-weight:600; font-size:14.5px; color:var(--ink-soft); }
  .forms-tabs{ display:flex; gap:22px; }
  .forms-tab{
    background:none; border:none; cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:700;
    color:var(--ink-faint);
    padding:6px 0 12px;
    border-bottom:2px solid transparent;
    margin-bottom:-15px;
  }
  .forms-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .forms-toolbar{ display:flex; align-items:center; gap:10px; margin:16px 0 18px; }
  .search--wide{ flex:1; width:auto; }
  /* Base size for icon-only buttons outside the topbar (Filter/Refresh in
     Forms/Projects/Workers/Reports) — without this they only get the
     browser's default <button> padding around a 16px icon, well under a
     comfortable touch target. .topbar .icon-btn already sets its own
     34px/circular size and wins on specificity, so this doesn't affect it. */
  .icon-btn{
    width:38px; height:38px;
    display:grid; place-content:center;
    border-radius:8px;
    cursor:pointer;
    flex:none;
  }
  .icon-btn-outline{
    border:1px solid var(--border-strong);
    background:var(--surface);
  }
  .entry-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    overflow:hidden;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .entry-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 16px 10px; }
  .entry-title{ font-weight:700; font-size:14.5px; }
  .entry-datetime{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; font-variant-numeric:tabular-nums; }
  .entry-check{ width:16px; height:16px; margin-top:2px; flex:none; }
  .entry-card--pending{ border-left:3px solid var(--danger); }
  .pending-sync-badge{
    display:inline-block; margin-left:8px; vertical-align:middle;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    background:var(--danger); color:#fff; padding:2px 7px; border-radius:999px;
  }
  /* .entry-card sets overflow:hidden so .entry-band's flat background
     respects the card's rounded corners - but that same overflow:hidden
     clips the notification menu's popover, which needs to render past
     the card's bottom edge. Notification cards never use .entry-band,
     so it's safe to opt them back out of the clipping entirely. */
  .entry-card--notif{ overflow:visible; }
  .entry-card--unread{ border-left:3px solid var(--accent); }
  .notif-unread-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; }
  .notif-card-menu-wrap{ flex:none; }
  .notif-card-menu-btn{
    width:28px; height:28px;
    display:grid; place-content:center;
    border-radius:50%;
    border:none; background:none;
    color:var(--ink-faint);
    cursor:pointer;
  }
  .notif-card-menu-btn:hover{ background:var(--locked); color:var(--ink); }
  .notif-card-menu-btn svg{ width:17px; height:17px; }
  .notif-card-popover{ min-width:180px; padding:6px; }
  .entry-band{
    background:var(--locked);
    border-top:1px solid var(--border);
    padding:10px 16px;
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px;
  }
  .entry-meta{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--ink); }
  .entry-meta-right{ align-items:flex-end; text-align:right; }
  .entry-meta > span:first-child{ font-weight:700; color:var(--ink); }
  .pill-name{
    display:inline-block;
    background:var(--accent); color:#fff;
    font-weight:700; font-size:12px;
    padding:4px 10px; border-radius:5px;
  }
  .entry-meta-value{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  .icon-btn-outline.active-filter{ background:var(--accent); border-color:var(--accent); color:#fff; }

  /* reports pane */
  .reports-controls{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:16px 0 6px; }
  .reports-controls .field{ margin-bottom:0; min-width:220px; }
  .reports-controls .field select{ min-width:220px; }
  .custom-range-inputs{ display:flex; align-items:center; gap:8px; }
  .custom-range-inputs input[type="date"]{ flex:1; width:auto; min-width:0; }
  .custom-range-sep{ color:var(--ink-faint); flex:none; }
  .reports-range-text{ font-size:12.5px; color:var(--ink-soft); margin:0 0 20px; }
  .reports-grid{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
  .reports-grid > .panel{ margin-bottom:16px; }
  .reports-grid > .panel.compliance-panel{ flex:2; min-width:420px; }
  .reports-grid > .panel.donut-panel{ flex:1; min-width:240px; }
  .panel-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .panel-head-row h2{ margin:0; font-size:13.5px; font-weight:600; }
  .panel-actions{ display:flex; gap:8px; }
  .btn-outline-sm{
    font-family:inherit; font-size:12.5px; font-weight:600;
    padding:7px 11px; border-radius:6px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .btn-outline-sm:hover{ background:var(--locked); }
  .popover-wrap{ position:relative; }
  .popover{
    position:absolute; top:calc(100% + 6px); right:0; z-index:15;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--shadow); padding:10px; min-width:190px;
  }
  .popover label{ display:block; font-size:11.5px; font-weight:700; margin-bottom:5px; color:var(--ink-soft); }
  .popover-check-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 2px; }
  .popover-item{
    display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none;
    font-family:inherit; font-size:13px; padding:8px 6px; border-radius:5px; cursor:pointer; color:var(--ink);
  }
  .popover-item svg{ flex:none; width:16px; height:16px; }
  .popover-item:hover{ background:var(--locked); }
  .popover-item.disabled{ color:var(--ink-faint); cursor:not-allowed; }
  .popover-item.disabled:hover{ background:none; }
  .popover-item--danger{ color:var(--danger); }

  #complianceTable th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--ink-faint); padding:9px 12px; border-bottom:1px solid var(--border-strong); cursor:pointer; user-select:none;
  }
  #complianceTable th:first-child{ cursor:default; }
  #complianceTable td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
  #complianceTable tr:last-child td{ border-bottom:none; }
  #complianceTable{ width:100%; border-collapse:collapse; }
  .table-wrap{ overflow-x:auto; }
  /* Manually Enter Data grid (Import/Export) - same header treatment as
     #complianceTable; cells get tight padding so the inputs/selects
     inside (already 42px tall via the shared input/select rule) read as
     grid rows, not a stack of separate form fields. */
  #importExportManualTable{ width:100%; border-collapse:collapse; }
  #importExportManualTable th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--ink-faint); padding:8px 6px; border-bottom:1px solid var(--border-strong); white-space:nowrap;
  }
  #importExportManualTable td{ padding:4px; border-bottom:1px solid var(--border); }
  #importExportManualTable td input, #importExportManualTable td select{ min-width:130px; }
  #importExportManualTable tr:last-child td{ border-bottom:none; }
  .status-pill{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; color:#fff;
    padding:4px 10px; border-radius:20px;
  }
  .status-pill.compliant{ background:var(--good); }
  .status-pill.non-compliant{ background:var(--danger); }

  .pagination{ display:flex; gap:6px; justify-content:center; padding:14px; }
  .page-btn{
    min-width:30px; height:30px; padding:0 8px;
    border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
    border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .page-btn:hover{ background:var(--locked); }
  .page-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .page-btn:disabled{ color:var(--ink-faint); cursor:not-allowed; }

  .donut-wrap{ position:relative; display:flex; align-items:center; justify-content:center; padding:20px 0 10px; }
  .donut-label{ position:absolute; font-size:22px; font-weight:800; color:var(--ink); }

  .graph-svg-wrap{ position:relative; }
  .graph-svg-wrap svg{ width:100%; height:210px; display:block; }
  .graph-hit{ cursor:pointer; }
  .graph-tooltip{
    position:absolute; left:0; top:0;
    pointer-events:none; z-index:20;
    background:var(--surface); border:1px solid var(--border); border-radius:7px;
    box-shadow:var(--shadow); padding:6px 10px;
    font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap;
    opacity:0; transition:opacity .1s ease;
    transform:translate(-50%, calc(-100% - 10px));
  }
  .graph-tooltip.show{ opacity:1; }

  /* filter drawer */
  .filter-overlay{
    position:fixed; inset:0;
    background:rgba(8,10,18,0.4);
    z-index:40;
    opacity:0; pointer-events:none;
    transition:opacity .18s ease;
  }
  .filter-overlay.open{ opacity:1; pointer-events:auto; }
  .filter-drawer{
    position:fixed; top:0; right:-320px; bottom:0;
    width:300px;
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:-10px 0 26px rgba(0,0,0,0.18);
    z-index:41;
    display:flex; flex-direction:column;
    transition:right .2s ease;
  }
  .filter-drawer.open{ right:0; }
  .filter-drawer-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px;
    background:var(--locked);
    border-bottom:1px solid var(--border);
    font-weight:700; font-size:15px;
  }
  .filter-drawer-body{ padding:16px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px; }
  .filter-drawer-foot{ padding:14px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }

  /* export preview modal */
  .export-modal-overlay{
    position:fixed; inset:0; background:rgba(8,10,18,0.45); z-index:50;
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  .export-modal-overlay.open{ display:flex; }
  .export-modal{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); width:100%; max-width:680px; max-height:82vh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .export-modal-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; background:var(--locked); border-bottom:1px solid var(--border);
    font-weight:700; font-size:14px;
  }
  .export-modal-body{ padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
  .export-preview-table-wrap{ max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:8px; }
  .export-preview-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .export-preview-table th, .export-preview-table td{ padding:6px 9px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
  .export-preview-table th{ background:var(--locked); font-weight:700; position:sticky; top:0; }
  .export-preview-table tr:last-child td{ border-bottom:none; }
  #exportModalTextarea{
    width:100%; font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
    border:1px solid var(--border-strong); border-radius:6px; padding:8px; resize:vertical;
    background:var(--locked); color:var(--ink);
  }
  .export-modal-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

  .pdf-filename-row{ display:flex; align-items:center; gap:8px; }
  .pdf-filename-row input{ flex:1; }
  .pdf-filename-row span{ color:var(--ink-faint); font-size:13px; font-weight:600; flex:none; }
  #pdfDownloadCompanyChoice{ display:flex; flex-direction:column; gap:2px; }
  .pdf-company-option{
    display:flex; align-items:center; gap:10px;
    padding:9px 6px; border-radius:6px; cursor:pointer; font-size:13.5px;
  }
  .pdf-company-option:hover{ background:var(--locked); }
  .pdf-company-option input{ width:16px; height:16px; flex:none; margin:0; accent-color:var(--accent); }

  /* workers view */
  .worker-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    overflow:hidden;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .worker-name{ padding:14px 16px 10px; font-weight:700; font-size:14.5px; }
  .worker-band{
    background:var(--locked);
    padding:10px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .worker-lines{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
  .worker-lines b{ color:var(--ink); }
  .worker-band .proj-remove{ margin-right:auto; }
  .pill.inactive{ color:var(--ink-faint); border-color:var(--border-strong); }

  .toggle-row{ display:flex; align-items:center; gap:10px; }
  .toggle-switch{
    width:40px; height:22px;
    border-radius:11px;
    border:1px solid var(--border-strong);
    background:var(--locked);
    position:relative;
    cursor:pointer;
    padding:0;
    flex:none;
  }
  .toggle-switch .knob{
    position:absolute; top:2px; left:2px;
    width:16px; height:16px;
    border-radius:50%;
    background:var(--surface);
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
    transition:left .15s ease;
  }
  .toggle-switch[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); }
  .toggle-switch[aria-pressed="true"] .knob{ left:20px; }

  .segmented{ display:flex; }
  .seg-btn{
    flex:1;
    font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0.02em;
    padding:11px 10px;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
  }
  .seg-btn:first-child{ border-radius:6px 0 0 6px; border-right:none; }
  .seg-btn:last-child{ border-radius:0 6px 6px 0; }
  .seg-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

  .view-head-row{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 6px; }
  .view-head-row h1{ font-size:20px; }
  .icon-close{
    border:none; background:none; color:var(--ink-faint); cursor:pointer;
    width:32px; height:32px; border-radius:6px; display:grid; place-content:center;
  }
  .icon-close:hover{ background:var(--locked); color:var(--ink); }