*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --navy:#0d1b2a;
  --navy2:#1a3050;
  --gold:#c9a84c;
  --gold2:#e8c96a;
  --cream:#f7f4ef;
  --white:#ffffff;
  --border:#e2ddd5;
  --red:#c0392b;
  --red-bg:#fdf0ef;
  --red-border:#f5c6c2;
  --green:#1e7e4a;
  --green-bg:#edf7f1;
  --green-border:#a8dfc0;
  --amber:#b45309;
  --amber-bg:#fefce8;
  --amber-border:#fde68a;
  --muted:#6b6b7a;
  --text:#1a1a2e;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --shadow-sm:0 1px 4px rgba(0,0,0,.08);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --transition:all 0.24s cubic-bezier(0.4,0,0.2,1);
  --tabbar-h:58px;
  --tabbar-safe:env(safe-area-inset-bottom);
  --tabbar-total:calc(var(--tabbar-h) + var(--tabbar-safe));
}
html,body{min-height:100vh;min-height:-webkit-fill-available;font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font-family:'DM Sans',sans-serif}

/* ── VIEWS ── */
.view{display:none;min-height:100vh;min-height:-webkit-fill-available;flex-direction:column}
.view.active{display:flex}

/* ══════════════════════════════════════════
   AUTH
══════════════════════════════════════════ */
#v-auth{background:var(--navy);align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
#v-auth::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none}
#v-auth::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);bottom:-80px;left:-80px;pointer-events:none}
.auth-card{background:var(--white);border-radius:16px;padding:36px 28px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);position:relative;z-index:1}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo-mark{width:80px;height:80px;background:transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.auth-logo-mark span{font-family:'Fraunces',serif;font-size:24px;color:var(--gold)}
.auth-logo-name{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);display:block}
.auth-logo-sub{font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);display:block;margin-top:3px}
.auth-title{font-family:'Fraunces',serif;font-size:26px;color:var(--navy);margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.flabel{display:block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.finput{width:100%;padding:14px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--navy);background:#fafaf8;outline:none;margin-bottom:14px;-webkit-appearance:none;transition:border-color .15s}
.finput:focus{border-color:var(--gold);background:var(--white)}
.btn-primary{width:100%;padding:16px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.3px;transition:opacity .15s}
.btn-primary:active{opacity:.85}
.btn-primary:disabled{opacity:.45}
.auth-toggle{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
.btn-link{background:none;border:none;color:var(--gold);font-size:13px;font-weight:700;cursor:pointer}
.msg-err{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:12px;display:none}
.msg-ok{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:12px;display:none}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
#v-app{background:var(--cream)}
.app-header{background:var(--navy);padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.app-header-brand{display:flex;align-items:center;gap:10px}
.app-header-mark{width:32px;height:32px;background:var(--gold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:15px;color:var(--navy);font-weight:700}
.app-header-name{font-family:'Fraunces',serif;font-size:14px;color:var(--white)}
.app-header-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,.8)}
.app-header-right{display:flex;align-items:center;gap:8px}
.app-header-user{font-size:11px;color:rgba(255,255,255,.4);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-signout{padding:6px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:rgba(255,255,255,.6);font-size:11px;cursor:pointer}

/* ── BOTTOM TAB BAR ──
   Moved from a top sticky bar to a fixed bottom bar so the 3-4 most-used
   destinations sit in thumb reach on a phone (mobile-audit finding: a top
   bar requires a hand-shift/reach on any phone over ~5.5in). Fixed (not
   sticky) because it needs to stay put regardless of which ancestor is
   scrolling; .app-content's padding-bottom (below) reserves the space so
   content never renders underneath it. */
.tab-bar{background:rgba(255,255,255,0.92);border-top:1px solid rgba(226,221,213,0.7);display:flex;flex-shrink:0;position:fixed;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -1px 0 rgba(0,0,0,.06),0 -4px 16px rgba(0,0,0,.07);padding-bottom:var(--tabbar-safe)}
@supports(backdrop-filter:blur(20px)){.tab-bar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(247,244,239,0.88)}}
.loc-context-bar{background:var(--cream);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.loc-context-ico{font-size:13px;flex-shrink:0}
.loc-context-bar select{flex:1;border:none;background:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--navy);padding:2px 0;cursor:pointer}
.today-checks-wrap{margin-bottom:16px}
.today-check-row{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.today-check-row.overdue{border-color:var(--red-border);background:var(--red-bg)}
.today-check-row.done{opacity:.6}
.tc-ico{font-size:16px;flex-shrink:0}
.tc-info{flex:1;min-width:0}
.tc-label{font-size:13px;font-weight:600;color:var(--navy)}
.tc-status{font-size:11px;font-weight:600;margin-top:1px}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px 8px;cursor:pointer;border:none;background:none;transition:var(--transition);position:relative;min-height:54px}
.tab-item:active{opacity:.7;transform:scale(.94)}
.tab-item.active .tab-svg{stroke:var(--navy)}
.tab-item.active .tab-svg.fill-icon{fill:var(--navy);stroke:none}
.tab-item.active .tab-lbl{color:var(--navy);font-weight:700}
.tab-item.tab-actions-item.active .tab-svg{stroke:var(--red)}
.tab-item.tab-actions-item.active .tab-lbl{color:var(--red)}
.tab-ico{font-size:22px;line-height:1;color:var(--muted);transition:var(--transition)}
.tab-svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:var(--transition);flex-shrink:0}
.tab-svg.fill-icon{fill:var(--muted);stroke:none}
.tab-lbl{font-size:9px;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:.5px;text-transform:uppercase;transition:var(--transition)}
.tab-badge{position:absolute;top:7px;right:calc(50% - 18px);background:var(--red);color:var(--white);border-radius:10px;min-width:16px;height:16px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;display:none;box-shadow:0 1px 4px rgba(192,57,43,.4)}
.tab-badge.show{display:flex}

/* ── SCREENS ── */
.app-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:var(--tabbar-total)}

/* ── TABLET/DESKTOP CONTAINMENT ──
   Mobile-audit finding: there were zero responsive breakpoints in this
   file, so above ~500px the whole app stretched edge-to-edge (form rows,
   button grids, line length all become uncomfortably wide/sparse). This
   is the one shared rule that caps every top-level view at a comfortable
   phone-plus width and centers it, instead of a full visual-system pass —
   every existing mobile layout below the breakpoint is untouched. */
@media (min-width:560px){
  body{background:#e9e5db}
  .view{max-width:520px;margin:0 auto;box-shadow:0 0 0 1px var(--border),0 0 40px rgba(0,0,0,.06);min-height:100vh}
  /* Only .tab-bar needs an explicit override here — position:fixed breaks
     an element out of its parent's width entirely, unlike the sticky
     .app-header or the normal-flow banners above, which already inherit
     the .view max-width from normal box layout. */
  .tab-bar{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:520px}
}
.screen{display:none;padding-bottom:16px}
.screen.active{display:block}

/* ══════════════════════════════════════════
   DASHBOARD SCREEN
══════════════════════════════════════════ */
.dash-hero{background:var(--navy);padding:20px 16px 24px;margin-bottom:-12px}
.dash-hero h1{font-family:'Fraunces',serif;font-size:26px;color:var(--white);margin-bottom:4px}
.dash-hero h1 span{color:var(--gold)}
.dash-hero p{font-size:12px;color:rgba(255,255,255,.4)}
.dash-content{padding:20px 16px}
.btn-new-audit{width:100%;padding:16px;background:var(--navy);color:var(--white);border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:20px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-new-audit:active{opacity:.85}
.section-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.audit-cards{display:grid;gap:10px}
.audit-card{background:var(--white);border-radius:12px;padding:16px;cursor:pointer;border:1.5px solid var(--border);border-left:4px solid;transition:var(--transition);-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm)}
.audit-card:active{transform:scale(.985);box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.9}
.ac-row{display:flex;justify-content:space-between;align-items:flex-start}
.ac-loc{font-family:'Fraunces',serif;font-size:16px;color:var(--navy)}
.ac-meta{font-size:11px;color:var(--muted);margin-top:2px}
.ac-score{text-align:right}
.ac-score-num{font-family:'Fraunces',serif;font-size:26px;font-weight:700}
.ac-grade{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:1px}
.ac-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.pill{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px}
.pill-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.pill-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.pill-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.empty-state{text-align:center;padding:48px 20px;background:var(--white);border-radius:12px;border:1.5px dashed var(--border)}
.empty-ico{font-size:40px;margin-bottom:12px}
.empty-ttl{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);margin-bottom:6px}
.empty-txt{font-size:13px;color:var(--muted);line-height:1.5}

/* ══════════════════════════════════════════
   NEW AUDIT — SETUP SCREEN
══════════════════════════════════════════ */
.setup-wrap{padding:16px}
.card{background:var(--white);border-radius:14px;overflow:hidden;border:1.5px solid var(--border);margin-bottom:14px;box-shadow:var(--shadow)}
.card-head{background:var(--navy);padding:16px 18px;border-bottom:3px solid var(--gold)}
.card-head h3{font-family:'Fraunces',serif;font-size:18px;color:var(--white)}
.card-head p{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.card-body{padding:18px}
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none;transition:border-color .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);background:var(--white)}
/* Mobile-ux-plan 2.2: inline field-level validation, shared across every
   form's own wrapper class (.fg on Setup/Quick Scan, .hm-field on HACCP,
   .ca-field on the CA modal, etc.) — wireRequiredField() toggles
   .field-invalid on whichever wrapper it's given and writes the message
   into a child .fg-err, so the same two classes work regardless of which
   component's field wrapper they're applied to. Submit-time validation
   (alert-based) stays as the final safety net; this is an earlier,
   friendlier first catch. */
.field-invalid input,.field-invalid select{border-color:var(--red)!important;background:var(--red-bg)!important}
.fg-err{display:none;font-size:11.5px;color:var(--red);font-weight:600;margin-top:5px}
.field-invalid .fg-err{display:block}
.fg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.risk-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.risk-btn{padding:10px 4px;background:#fafaf8;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;transition:all .15s}
.risk-btn.sel{background:var(--navy);color:var(--white);border-color:var(--navy)}
.type-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.type-btn{padding:10px 6px;background:#fafaf8;border:1.5px solid var(--border);border-radius:8px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;transition:all .15s;line-height:1.3}
.type-btn.sel{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-start-audit{width:100%;padding:17px;background:var(--navy);color:var(--white);border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.3px;margin-top:4px}
.btn-start-audit:active{opacity:.85}

/* ══════════════════════════════════════════
   INSPECTION SCREEN
══════════════════════════════════════════ */
.insp-wrap{padding:12px 16px}

/* Section navigator — sticky bottom */
/* ── PAGER NAV ── */
.pager-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 4px;background:var(--cream)}
.pager-section-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.pager-page-lbl{font-size:11px;color:var(--muted);font-weight:600}
.pager-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--white);border-top:1px solid var(--border);position:sticky;bottom:var(--tabbar-total);z-index:40;box-shadow:0 -4px 16px rgba(0,0,0,.07)}
.pager-btn{padding:11px 22px;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition)}
.pager-prev{background:var(--cream);color:var(--navy);border:1.5px solid var(--border)}
.pager-next{background:var(--navy);color:var(--white)}
.pager-prev:disabled{opacity:.35;cursor:default}
.pager-next:disabled{opacity:.35;cursor:default}
.pager-dots{display:flex;gap:5px;align-items:center}
.pager-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:var(--transition);cursor:pointer}
.pager-dot.active{background:var(--navy);transform:scale(1.3)}
.pager-dot.has-out{background:var(--red)}
.validation-error{background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:12px;padding:14px 16px;margin-bottom:14px;display:none}
.validation-error.show{display:block}
.ve-title{font-size:13px;font-weight:700;color:var(--red);margin-bottom:8px}
.ve-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.ve-item{font-size:12px;color:var(--red);display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.ve-item::before{content:"•";flex-shrink:0;margin-top:1px}
.ve-goto{background:none;border:none;color:var(--red);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;font-family:'DM Sans',sans-serif;padding:0}
/* Required temp input highlight */
.temp-input.req-missing{border-color:var(--red)!important;background:var(--red-bg)!important}
#s-inspect .insp-wrap{padding-bottom:calc(72px + var(--tabbar-total))}
.sec-nav-btn{flex-shrink:0;padding:10px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:22px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:var(--transition);min-height:44px;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm)}
.sec-nav-btn:active{transform:scale(.95)}
.sec-nav-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy);transform:scale(1.04);box-shadow:0 3px 10px rgba(13,27,42,.2)}
.sec-nav-btn .sec-count{font-size:10px;margin-left:4px;opacity:.7}

/* Progress bar */
.progress-bar-wrap{background:var(--white);border-radius:10px;padding:12px 14px;margin-bottom:14px;border:1.5px solid var(--border)}
.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-lbl{font-size:11px;font-weight:600;color:var(--navy)}
.progress-pct{font-size:11px;color:var(--muted)}
.progress-track{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .3s ease}
.out-count{font-size:11px;color:var(--red);font-weight:600;margin-top:4px}

/* Inspection section */
.insp-section{display:none}
.insp-section.active{display:block}
.section-title{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* Line item card */
.line-card{background:var(--white);border-radius:12px;margin-bottom:8px;border:1.5px solid var(--border);overflow:hidden;transition:border-color .2s;box-shadow:var(--shadow)}
.line-card.status-out{border-color:var(--red);border-left:4px solid var(--red)}
.line-card.status-in{border-color:var(--green-border);border-left:4px solid var(--green)}
.line-card.status-na,.line-card.status-no{border-color:var(--border);border-left:4px solid var(--muted)}
.line-card.status-repeat{border-color:var(--red);background:rgba(192,57,43,.02)}
.line-top{padding:14px 14px 10px;display:flex;align-items:flex-start;gap:12px}
.line-num{width:32px;height:32px;border-radius:50%;background:var(--cream);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--navy);flex-shrink:0;margin-top:1px;transition:var(--transition)}
.line-num.out{background:var(--red);color:var(--white);border-color:var(--red);box-shadow:0 2px 8px rgba(192,57,43,.35);animation:pulse-out .35s var(--ease)}
.line-num.in{background:var(--green);color:var(--white);border-color:var(--green);box-shadow:0 2px 8px rgba(30,126,74,.3);animation:flash-in .3s var(--ease)}
@keyframes flash-in{0%{transform:scale(.7);opacity:.5}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes pulse-out{0%{transform:scale(.7);opacity:.5}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.line-desc{font-size:13px;color:var(--navy);line-height:1.45;flex:1;font-weight:500}
.repeat-flag{display:none;margin-top:4px}
.repeat-flag.show{display:block}
.repeat-badge{background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;color:#856404;display:inline-flex;align-items:center;gap:4px}

/* Status buttons */
.status-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px 16px}
.sbtn{padding:0;height:48px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;background:#fafaf8;color:var(--muted);transition:var(--transition);text-align:center;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.sbtn:active{transform:scale(.93);opacity:.85}
.sbtn.sel-in{background:var(--green);color:var(--white);border-color:var(--green);box-shadow:0 3px 10px rgba(30,126,74,.3)}
.sbtn.sel-out{background:var(--red);color:var(--white);border-color:var(--red);box-shadow:0 3px 10px rgba(192,57,43,.3)}
.sbtn.sel-na{background:var(--navy);color:var(--white);border-color:var(--navy);box-shadow:0 3px 10px rgba(13,27,42,.25)}
.sbtn.sel-no{background:var(--muted);color:var(--white);border-color:var(--muted)}

/* OUT details inline */
.out-details{background:var(--red-bg);border-top:1px solid var(--red-border);padding:14px;display:none}
.out-details.show{display:block}
.out-details-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.out-notes{width:100%;padding:12px;border:1.5px solid var(--red-border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:var(--white);outline:none;resize:vertical;min-height:80px;margin-bottom:10px;transition:border-color .15s}
.out-notes:focus{border-color:var(--red)}
.photo-btn{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--white);border:1.5px dashed var(--red-border);border-radius:10px;cursor:pointer;position:relative;width:100%;font-size:13px;font-weight:600;color:var(--red)}
.photo-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photo-btn.has-photo{border-style:solid;border-color:var(--green-border);background:var(--green-bg);color:var(--green)}
.photo-thumb{width:100%;max-height:140px;object-fit:cover;border-radius:8px;margin-top:8px;display:none}
.photo-thumb.show{display:block}
.cos-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.cos-check{width:18px;height:18px;border:1.5px solid var(--border);border-radius:4px;accent-color:var(--green);cursor:pointer}
.cos-lbl{font-size:12px;color:var(--navy);font-weight:500}

/* ══════════════════════════════════════════
   TEMPERATURE SCREEN
══════════════════════════════════════════ */
.temp-wrap{padding:12px 16px}
.temp-info{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--amber);margin-bottom:14px;line-height:1.5}

/* Warewashing card */
.ww-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ww-item label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.ww-item input,.ww-item select{width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none}
.ww-item input:focus{border-color:var(--gold)}

/* Temp table */
.temp-table-wrap{overflow-x:auto}
.temp-table{width:100%;border-collapse:collapse;font-size:13px}
.temp-table th{background:var(--navy);color:var(--white);padding:10px 12px;text-align:left;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.temp-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.temp-table tr:last-child td{border-bottom:none}
.temp-input{width:70px;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;color:var(--navy);background:var(--white);outline:none;font-family:'DM Sans',sans-serif}
.temp-input:focus{border-color:var(--gold)}
.state-sel{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;color:var(--navy);background:var(--white);outline:none;-webkit-appearance:none;font-family:'DM Sans',sans-serif}
.st-ok{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);white-space:nowrap}
.st-warn{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);white-space:nowrap}
.btn-add-row{width:100%;padding:12px;background:transparent;border:1.5px dashed var(--border);border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;margin-top:8px;transition:all .15s}
.btn-add-row:hover{border-color:var(--gold);color:var(--gold)}
.btn-rm-row{background:none;border:none;color:var(--red);font-size:16px;cursor:pointer;padding:4px;line-height:1}

/* Thermometer photo */
.thermo-photo-area{border:2px dashed var(--border);border-radius:12px;padding:20px;text-align:center;cursor:pointer;position:relative;background:#fafaf8;transition:all .15s}
.thermo-photo-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.thermo-photo-area.has-photo{border-color:var(--green-border);background:var(--green-bg)}
.thermo-preview{width:100%;max-height:180px;object-fit:cover;border-radius:8px;margin-top:8px;display:none}
.thermo-preview.show{display:block}
.thermo-ico{font-size:32px;margin-bottom:8px}
.thermo-txt{font-size:13px;color:var(--muted);font-weight:500}

/* ══════════════════════════════════════════
   SUMMARY SCREEN
══════════════════════════════════════════ */
.summary-wrap{padding:12px 16px}
.summary-hero{background:var(--navy);border-radius:14px;padding:20px;margin-bottom:14px;text-align:center}
.summary-hero h2{font-family:'Fraunces',serif;font-size:22px;color:var(--white);margin-bottom:4px}
.summary-hero p{font-size:12px;color:rgba(255,255,255,.45)}
.out-summary-list{display:grid;gap:8px;margin-bottom:14px}
.out-summary-card{background:var(--white);border-radius:12px;padding:14px;border:1.5px solid var(--red-border);border-left:4px solid var(--red)}
.out-summary-card.repeat{background:#fff9f0;border-color:#ffc107;border-left-color:#e67e22}
.osc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.osc-num{width:22px;height:22px;background:var(--red);color:var(--white);border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.osc-num.repeat{background:#e67e22}
.osc-desc{font-size:13px;font-weight:600;color:var(--navy);flex:1;line-height:1.3}
.osc-notes{font-size:12px;color:#555;line-height:1.5;margin-left:30px}
.osc-photo-thumb{width:60px;height:46px;object-fit:cover;border-radius:6px;margin-left:30px;margin-top:6px;border:1px solid var(--border)}
.osc-repeat-badge{font-size:10px;font-weight:700;color:#856404;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:2px 7px;margin-left:30px;margin-top:4px;display:inline-block}
.no-outs{background:var(--green-bg);border:1.5px solid var(--green-border);border-radius:12px;padding:20px;text-align:center;font-size:14px;color:var(--green);font-weight:600}
.btn-submit-audit{width:100%;padding:17px;background:var(--navy);color:var(--white);border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-submit-audit:disabled{opacity:.45}
.btn-submit-audit:active{opacity:.85}
.submit-note{font-size:11px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.5}

/* ══════════════════════════════════════════
   ANALYZING
══════════════════════════════════════════ */
.analyzing-screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px 24px;text-align:center}
.analyzing-screen.active{display:flex}
.spin{width:60px;height:60px;border-radius:50%;border:3px solid rgba(201,168,76,.2);border-top-color:var(--gold);animation:spin 1s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
.analyzing-title{font-family:'Fraunces',serif;font-size:22px;color:var(--navy);margin-bottom:6px}
.analyzing-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.steps-list{list-style:none;text-align:left;width:100%;max-width:320px}
.steps-list li{padding:8px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;border-radius:8px}
.steps-list li.s-active{background:rgba(201,168,76,.1);color:var(--navy);font-weight:600}
.steps-list li.s-done{color:var(--green)}
.steps-list li::before{content:'○';font-size:11px;flex-shrink:0}
.steps-list li.s-active::before{content:'◉';color:var(--gold)}
.steps-list li.s-done::before{content:'✓';color:var(--green)}

/* ══════════════════════════════════════════
   REPORT SCREEN
══════════════════════════════════════════ */
.report-wrap{padding:0 0 20px}
.report-header{background:var(--navy);padding:22px 18px;border-bottom:4px solid var(--gold)}
.rh-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:14px}
.rh-left .r-loc{font-family:'Fraunces',serif;font-size:22px;color:var(--white);margin-bottom:4px}
.rh-left .r-meta{font-size:11px;color:rgba(255,255,255,.4);line-height:1.8}
.score-circle{width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid;flex-shrink:0}
.score-num{font-family:'Fraunces',serif;font-size:26px;font-weight:700;line-height:1}
.score-of{font-size:9px;letter-spacing:1px;opacity:.7;font-weight:600}
.grade-lbl{font-size:9px;font-weight:700;letter-spacing:2px;text-align:center;text-transform:uppercase;margin-top:5px}
.rh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.rh-stat{padding:10px 4px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.rh-stat:last-child{border-right:none}
.rh-stat .rv{font-family:'Fraunces',serif;font-size:20px;color:var(--white)}
.rh-stat .rl{font-size:8px;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.report-body{padding:16px}
.r-section{margin-bottom:22px}
.r-sec-lbl{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.r-sec-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
.txt-block{font-size:13px;line-height:1.7;color:#444;background:var(--cream);padding:14px;border-radius:10px;border:1px solid var(--border)}
.vcard{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px}
.vcard.risk{border-left:4px solid var(--red)}
.vcard.retail{border-left:4px solid var(--amber)}
.vcard.repeat-v{background:#fffdf5}
.v-hdr{padding:13px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--white);-webkit-tap-highlight-color:transparent}
.v-hdr:active{opacity:.85}
.v-badge{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0}
.v-badge.risk{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.v-badge.retail{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.v-badge.repeat-b{background:#fff3cd;color:#856404;border:1px solid #ffc107}
.v-title{font-size:13px;font-weight:600;color:var(--navy);flex:1;line-height:1.3}
.v-pts{font-size:11px;font-weight:700;color:var(--red);white-space:nowrap}
.v-body{padding:14px;background:#fafaf8;border-top:1px solid var(--border);display:none}
.v-body.open{display:block}
.v-finding{font-size:13px;color:#444;line-height:1.6;margin-bottom:12px}
.v-tn-code{font-size:10px;color:var(--muted);margin-bottom:10px;font-weight:500}
.corr-box{background:var(--white);border:1.5px solid var(--green-border);border-radius:10px;padding:13px;margin-bottom:10px}
.corr-box h4{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.corr-box p{font-size:13px;color:var(--navy);line-height:1.65}
.recheck-box{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--amber);line-height:1.5}
.retrain-box{background:#fff3cd;border:1px solid #ffc107;border-radius:10px;padding:13px;margin-bottom:10px}
.retrain-box h4{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#856404;margin-bottom:6px}
.retrain-box p{font-size:13px;color:#533f03;line-height:1.65}
.pri-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;margin-bottom:8px;border:1.5px solid var(--border);font-size:13px;color:var(--navy);line-height:1.6;background:var(--white)}
.pri-num{background:var(--navy);color:var(--gold);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px}
.clean-card{background:var(--green-bg);border:1.5px solid var(--green-border);border-radius:12px;padding:18px;text-align:center;font-size:14px;color:var(--green);font-weight:600}
.report-actions{padding:16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border)}
.btn-print{width:100%;padding:14px;background:var(--gold);color:var(--navy);border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.3px}
.btn-new-from-report{width:100%;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.3px}
.btn-dash-from-report{width:100%;padding:14px;background:transparent;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--muted);cursor:pointer}
.email-sent-note{background:var(--green-bg);border:1px solid var(--green-border);border-radius:8px;padding:10px 13px;font-size:12px;color:var(--green);text-align:center;margin-bottom:10px}

/* Helper text */
.helper-box{padding:0 14px 12px;display:flex;flex-direction:column;gap:6px}
.helper-explain{font-size:12px;color:#444;line-height:1.55;display:flex;gap:7px;background:#f0f4ff;border:1px solid #d0d9f0;border-radius:9px;padding:10px 11px}
.helper-look{font-size:12px;color:#1e4a2a;line-height:1.55;display:flex;gap:7px;background:#edf7f1;border:1px solid #a8dfc0;border-radius:9px;padding:10px 11px}
.helper-ico{font-size:14px;flex-shrink:0;margin-top:1px}

/* Inline fields */
.inline-fields{padding:0 14px 12px;display:flex;flex-direction:column;gap:8px}
.inline-field{display:flex;flex-direction:column;gap:4px}
.if-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.if-input{padding:10px 12px;border:1.5px solid var(--border);border-radius:9px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:#fafaf8;outline:none;width:100%}
.if-input:focus{border-color:var(--gold);background:var(--white)}

/* Type + weight badges */
.type-risk{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);letter-spacing:.3px}
.type-retail{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);letter-spacing:.3px}
.type-detail{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f3f0ff;color:#6d28d9;border:1px solid #c4b5fd;letter-spacing:.3px}
.wt-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px}
.wt-5{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bdr)}
.wt-4{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bdr)}
.wt-2{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bdr)}
.wt-1{background:#f8f9fa;color:var(--muted);border:1px solid var(--border)}
.wt-0{background:#f8f9fa;color:var(--muted);border:1px solid var(--border)}

@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .app-header,.tab-bar,.report-actions,.btn-print,.btn-new-from-report,.btn-dash-from-report{display:none!important}
  body,html{background:#fff!important;min-height:unset}
  #v-app{background:#fff!important;display:block!important}
  .view{display:block!important;min-height:unset}
  .screen{display:none!important}
  #s-report{display:block!important}
  .main{padding:0!important;overflow:visible!important}
  .report-wrap{padding:0!important;box-shadow:none!important}
  .card-box{box-shadow:none!important}
}

/* ── PAYWALL ── */
#v-paywall{background:var(--navy);align-items:center;justify-content:flex-start;padding:0;overflow-y:auto}
.pw-header{background:var(--navy);padding:24px 20px 0;width:100%;text-align:center}
.pw-logo-mark{width:48px;height:48px;background:var(--gold);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:22px;color:var(--navy);margin:0 auto 10px}
.pw-title{font-family:'Fraunces',serif;font-size:22px;color:var(--white);margin-bottom:4px}
.pw-sub{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:20px}
.pw-plans{width:100%;padding:16px;display:flex;flex-direction:column;gap:12px}
.pw-plan{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;position:relative;cursor:pointer;transition:border-color .2s}
.pw-plan.popular{border-color:var(--gold)}
.pw-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-size:9px;font-weight:800;letter-spacing:2px;padding:3px 10px;border-radius:20px;text-transform:uppercase}
.pw-plan-name{font-family:'Fraunces',serif;font-size:18px;color:var(--white);margin-bottom:2px}
.pw-plan-price{font-size:28px;font-weight:700;color:var(--gold);display:inline}
.pw-plan-mo{font-size:13px;color:rgba(255,255,255,.45)}
.pw-plan-desc{font-size:12px;color:rgba(255,255,255,.5);margin:6px 0 10px}
.pw-plan-features{display:flex;flex-wrap:wrap;gap:5px}
.pw-feat{font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
.pw-plan-btn{width:100%;padding:13px;background:var(--navy2);color:var(--white);border:1.5px solid rgba(255,255,255,.15);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;margin-top:12px;transition:opacity .15s}
.pw-plan.popular .pw-plan-btn{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pw-plan-btn:active{opacity:.8}
.pw-calc{max-width:380px;margin:0 auto}
.pw-stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 10px}
.pw-step-btn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:var(--white);font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.pw-step-btn:active{opacity:.7}
.pw-step-input{width:70px;text-align:center;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:10px;color:var(--white);font-size:22px;font-weight:700;padding:8px 0;font-family:inherit;-webkit-appearance:none}
.pw-total{margin-top:6px}
.pw-per-loc{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:12px}
.pw-tier-table{display:flex;flex-direction:column;gap:4px;margin:4px 0 14px;font-size:11px;color:rgba(255,255,255,.5)}
.pw-tier-row{display:flex;justify-content:space-between;padding:5px 10px;border-radius:6px}
.pw-tier-row.active{background:rgba(201,168,76,.14);color:var(--gold);font-weight:700}
.pw-plan-btn:disabled{opacity:.45}
.pw-err{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);color:#f87171;padding:10px 14px;border-radius:8px;font-size:12px;margin:0 16px;display:none}
.pw-footer{text-align:center;padding:16px;font-size:11px;color:rgba(255,255,255,.3)}
.pw-signout{background:none;border:none;color:rgba(255,255,255,.35);font-size:11px;cursor:pointer;text-decoration:underline;font-family:'DM Sans',sans-serif}

/* ── TRIAL BANNER ── */
.trial-banner{background:linear-gradient(90deg,#7c3aed,#4f46e5);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.trial-banner.hidden{display:none}
.trial-txt{font-size:11px;color:#fff;font-weight:600}
.trial-link{font-size:11px;color:#e0d9ff;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;white-space:nowrap}

/* ── OFFLINE BANNER ── */
.offline-banner{background:#374151;padding:7px 14px;text-align:center;font-size:11px;color:#d1d5db;display:none;flex-shrink:0}
.offline-banner.show{display:block}

/* ── SYNC TOAST ── */
.sync-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-total) + 14px);transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--white);font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.sync-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── DRAFT RESUME BANNER ── */
.draft-resume-banner{display:flex;align-items:center;gap:12px;background:var(--cream);border:1.5px solid var(--gold);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.drb-text{flex:1;min-width:0}
.drb-title{font-size:13px;font-weight:700;color:var(--navy)}
.drb-sub{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drb-btns{display:flex;gap:8px;flex-shrink:0}
.drb-resume{padding:9px 14px;background:var(--navy);color:var(--white);border:none;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.drb-discard{padding:9px 12px;background:none;color:var(--muted);border:1.5px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}

/* ── ROLE TOGGLE ── */
.role-toggle{display:flex;background:#e8e4dc;border-radius:10px;padding:3px;gap:2px;margin:0 0 12px}
.role-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted);transition:var(--transition);font-family:"DM Sans",sans-serif}
.role-btn.active{background:var(--white);color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ── INTEL PANEL ── */
.intel-panel{background:linear-gradient(135deg,var(--navy),var(--navy2));border:1px solid rgba(201,168,76,.2);border-radius:14px;padding:16px;margin:0 0 16px;display:none}
.intel-panel.visible{display:block}
.intel-hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.intel-ico{font-size:18px}
.intel-title{font-family:'Fraunces',serif;font-size:15px;color:var(--white)}
.intel-sub{font-size:10px;color:rgba(255,255,255,.4)}
.intel-body{font-size:13px;color:rgba(255,255,255,.75);line-height:1.65}
.intel-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(201,168,76,.3);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-right:6px}
.intel-loc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
.intel-loc-table{width:100%;min-width:340px;border-collapse:collapse;font-size:11px}
.intel-loc-table th{color:rgba(255,255,255,.4);font-weight:600;text-align:left;padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.intel-loc-table td{padding:6px 6px;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.05)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── ANALYTICS ── */
.analytics-panel{display:none;margin-bottom:16px}
.analytics-panel.visible{display:block}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.analytics-card{background:var(--white);border-radius:12px;padding:14px;border:1.5px solid var(--border)}
.ac-stat-num{font-family:'Fraunces',serif;font-size:28px;color:var(--navy)}
.ac-stat-lbl{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.ac-flag{font-size:11px;color:var(--red);background:var(--red-bg);border:1px solid var(--red-border);border-radius:6px;padding:4px 8px;margin-top:4px;display:inline-block}

/* ── LANG SWITCHER ── */
.lang-row{display:flex;gap:6px;margin:0 0 16px}
.lang-btn{flex:1;padding:9px 6px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;font-family:"DM Sans",sans-serif;transition:var(--transition);text-align:center}
.lang-btn.active{background:var(--navy);border-color:var(--navy);color:var(--white)}
/* ══ REPORTS ══ */
.reports-wrap{padding:0 0 40px}
.reports-content{padding:16px}
.reports-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.rstat-card{background:var(--white);border-radius:12px;padding:16px;border:1.5px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;transition:var(--transition)}
.rstat-card:active{opacity:.8;transform:scale(.98)}
.rstat-num{font-family:'Fraunces',serif;font-size:32px;font-weight:700;color:var(--navy);line-height:1}
.rstat-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.rstat-sub{font-size:11px;color:var(--muted);margin-top:2px}
.rstat-card.active-detail{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.reports-detail-wrap{background:var(--white);border-radius:12px;border:1.5px solid var(--border);padding:16px;margin:10px 0 18px;display:none}
.reports-detail-wrap.open{display:block}
.rdetail-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rdetail-title{font-family:'Fraunces',serif;font-size:16px;font-weight:700;color:var(--navy)}
.rdetail-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px}
.rdetail-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.rdetail-row:last-child{border-bottom:none}
.lb-card{background:var(--white);border-radius:12px;border:1.5px solid var(--border);overflow:hidden;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.lb-row{display:flex;align-items:center;padding:12px 14px;gap:12px;border-bottom:1px solid var(--border)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-size:12px;font-weight:800;color:var(--muted);width:20px;flex-shrink:0}
.lb-name{flex:1;font-size:13px;font-weight:600;color:var(--navy)}
.lb-meta{font-size:10px;color:var(--muted)}
.lb-score{font-family:'Fraunces',serif;font-size:20px;font-weight:700}
.vcat-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--white);border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px}
.vcat-name{font-size:13px;font-weight:600;color:var(--navy)}
.vcat-count{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}

/* ══ HACCP DIGITAL LOGGING ══ */
.haccp-record-btn{margin-top:6px;padding:9px;background:var(--gold);color:var(--navy);border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.3px;width:100%}
.haccp-record-btn:active{opacity:.8}
.haccp-recent{padding:0 16px 8px}
.haccp-recent-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.haccp-reading-row{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.haccp-reading-row.out-of-range{border-color:var(--red-border);background:var(--red-bg)}
.hrr-ico{font-size:20px;flex-shrink:0}
.hrr-info{flex:1}
.hrr-name{font-size:12px;font-weight:700;color:var(--navy)}
.hrr-meta{font-size:10px;color:var(--muted);margin-top:1px}
.hrr-temp{font-family:'Fraunces',serif;font-size:20px;font-weight:700;text-align:right}
.hrr-status{font-size:9px;font-weight:700;text-align:right;margin-top:2px}
.hrr-ok{color:var(--green)}
.hrr-warn{color:var(--red)}

/* HACCP entry modal */
.haccp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:flex-end;justify-content:center}
.haccp-modal-overlay.open{display:flex}
.haccp-modal{background:var(--white);border-radius:20px 20px 0 0;padding:24px 20px 40px;width:100%;max-width:480px;box-shadow:0 -8px 32px rgba(0,0,0,.2);max-height:85vh;overflow-y:auto}
.hm-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.hm-title{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);margin-bottom:2px}
.hm-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.hm-field{margin-bottom:14px}
.hm-field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.hm-field input,.hm-field select,.hm-field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none}
.hm-field input:focus,.hm-field select:focus{border-color:var(--gold);background:var(--white)}
.hm-temp-row{display:flex;gap:10px;align-items:flex-end}
.hm-temp-big{flex:1}
.hm-temp-big input{font-size:28px;font-weight:700;font-family:'Fraunces',serif;color:var(--navy);text-align:center}
.hm-status-pill{padding:8px 14px;border-radius:20px;font-size:12px;font-weight:700;text-align:center;margin-bottom:14px}
.hm-status-ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.hm-status-warn{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.hm-status-blank{background:#f5f5f5;color:var(--muted);border:1px solid var(--border)}
.hm-btns{display:flex;gap:10px;margin-top:6px}
.hm-save{flex:1;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.hm-save:disabled{opacity:.45}
.hm-cancel{padding:14px 18px;background:none;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif}

/* Reports HACCP section */
.haccp-flag-card{background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:12px;padding:14px;margin-bottom:8px}
.haccp-flag-title{font-size:12px;font-weight:700;color:var(--red);margin-bottom:4px}
.haccp-flag-meta{font-size:11px;color:var(--red)}
.haccp-compliance-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--white);border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px}
.hcr-left{display:flex;align-items:center;gap:10px}
.hcr-ico{font-size:18px}
.hcr-name{font-size:13px;font-weight:600;color:var(--navy)}
.hcr-count{font-size:10px;color:var(--muted)}
.hcr-right{text-align:right}
.hcr-pct{font-family:'Fraunces',serif;font-size:18px;font-weight:700}
.hcr-bar-wrap{width:60px;height:5px;background:#eee;border-radius:3px;margin-top:3px}
.hcr-bar{height:100%;border-radius:3px;background:var(--green)}
.haccp-wrap{padding:0 0 40px}
.haccp-hero{background:var(--navy);padding:20px 16px 24px;margin-bottom:0}
.haccp-title{font-family:'Fraunces',serif;font-size:26px;color:var(--white)}
.haccp-title span{color:var(--gold)}
.haccp-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}
.haccp-controls{background:var(--white);border-bottom:1px solid var(--border);padding:14px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.haccp-field label{display:block;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.haccp-field input,.haccp-field select{width:100%;padding:10px 11px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none}
.haccp-field input:focus,.haccp-field select:focus{border-color:var(--gold)}
.haccp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.haccp-card{background:var(--white);border-radius:14px;border:1.5px solid var(--border);padding:18px;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
.haccp-card:active{transform:scale(.97);opacity:.9}
.haccp-card-ico{font-size:28px;line-height:1}
.haccp-card-name{font-family:'Fraunces',serif;font-size:14px;color:var(--navy)}
.haccp-card-desc{font-size:11px;color:var(--muted);line-height:1.4}
.haccp-card-target{font-size:10px;font-weight:700;color:var(--gold);margin-top:2px}
.haccp-card-btn{margin-top:8px;padding:9px;background:var(--navy);color:var(--white);border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.3px}
.haccp-card-btn:active{opacity:.8}

/* ══════════════════════════════════════════
   WORKSPACE PHOTO DOCUMENTATION
══════════════════════════════════════════ */
.photos-wrap{padding:12px 16px 80px}
.photos-hero{background:var(--navy);border-radius:14px;padding:18px;margin-bottom:14px}
.photos-hero h2{font-family:'Fraunces',serif;font-size:20px;color:var(--white);margin-bottom:4px}
.photos-hero p{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}
.photos-progress{display:flex;align-items:center;gap:10px;margin-top:12px}
.photos-progress-track{flex:1;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.photos-progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .3s ease}
.photos-progress-lbl{font-size:11px;font-weight:600;color:var(--gold);white-space:nowrap}
.photo-zone-card{background:var(--white);border-radius:14px;border:1.5px solid var(--border);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.pzc-head{background:var(--navy);padding:13px 16px;display:flex;align-items:center;gap:10px}
.pzc-ico{font-size:20px;flex-shrink:0}
.pzc-name{font-family:'Fraunces',serif;font-size:15px;color:var(--white);flex:1}
.pzc-count{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.pzc-count.complete{background:rgba(30,126,74,.3);color:#6ee7a7}
.pzc-body{padding:12px}
.pzc-instructions{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.5;background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;padding:8px 10px}
.photo-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.photo-slot{border:2px dashed var(--border);border-radius:10px;position:relative;background:#fafaf8;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.photo-slot:active{transform:scale(.96)}
.photo-slot.captured{border-style:solid;border-color:var(--green-border);background:var(--green-bg)}
.photo-slot input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}
.ps-ico{font-size:24px;margin-bottom:4px}
.ps-lbl{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.3;padding:0 4px}
.photo-slot.captured .ps-lbl{color:var(--green);font-size:8px}
.ps-img{width:100%;height:80px;object-fit:cover;border-radius:6px}
.ps-rm{position:absolute;top:4px;right:4px;background:var(--red);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:9px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;line-height:1}
.photo-slot.captured .ps-rm{display:flex}
.photo-slot:not(.captured) .ps-rm{display:none}

/* HACCP print styles */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Only hide app when HACCP print area is visible */
  body.printing-haccp > #app{display:none!important}
  body > #haccp-print-area{display:block!important}
  body > .slideout-overlay,
  body > .slideout-panel,
  body > .ca-modal-overlay,
  body > .haccp-modal-overlay,
  body > .qs-assign-overlay{display:none!important}
  @page{size:letter portrait;margin:8mm 10mm}
  .hp-wrap{font-family:'DM Sans',sans-serif;font-size:9px;color:#000}
  .hp-hdr{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #0d1b2a;padding-bottom:4px;margin-bottom:5px}
  .hp-hdr-left{line-height:1.5}
  .hp-hdr-title{font-size:13px;font-weight:700;color:#0d1b2a}
  .hp-hdr-meta{font-size:9px;color:#444}
  .hp-hdr-right{font-size:8px;color:#c9a84c;font-weight:700;text-align:right;line-height:1.5}
  .hp-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
  .hp-tbl th{background:#0d1b2a;color:#fff;padding:4px 3px;text-align:center;font-size:8px;font-weight:600;border:1px solid #0d1b2a}
  .hp-tbl td{border:1px solid #bbb;padding:0;text-align:center;font-size:8px;height:18px}
  .hp-tbl tr:nth-child(even) td{background:#f7f7f7}
  .hp-tbl .dc{background:#e8edf5;font-weight:700;color:#0d1b2a;width:22px}
  .hp-tbl th.dc{width:22px}
  .hp-ftr{display:flex;justify-content:space-between;align-items:center;margin-top:5px;padding-top:4px;border-top:1px solid #ccc;font-size:7.5px;color:#888}
}
#haccp-print-area{display:none}

/* ══════════════════════════════════════════
   QUICK SCAN
══════════════════════════════════════════ */
.dash-action-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.btn-action-card{padding:16px 12px;border:none;border-radius:13px;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:var(--transition);-webkit-tap-highlight-color:transparent}
.btn-action-card:active{transform:scale(.96);opacity:.88}
.bac-ico{font-size:26px;line-height:1}
.bac-lbl{font-size:13px;font-weight:700;line-height:1.2}
.bac-sub{font-size:10px;font-weight:400;opacity:.75}
.btn-scan-card{background:var(--gold);color:var(--navy)}
.btn-audit-card{background:var(--navy);color:var(--white);border:1.5px solid rgba(255,255,255,.1)}
.dash-section-hdr{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.dash-section-hdr::after{content:'';flex:1;height:1px;background:var(--border)}
.streak-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);border-radius:20px;padding:3px 8px;font-size:10px;font-weight:700;color:var(--gold);margin-top:5px}
.scan-card{background:var(--white);border-radius:12px;padding:16px;cursor:pointer;border:1.5px solid rgba(201,168,76,.25);border-left:4px solid var(--gold);transition:var(--transition);box-shadow:var(--shadow-sm)}
.scan-card:active{transform:scale(.985);opacity:.9}
.qs-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.qs-area-card{background:var(--white);border-radius:12px;border:1.5px solid var(--border);overflow:hidden}
.qs-area-head{background:var(--navy);padding:10px 13px;display:flex;align-items:center;gap:8px}
.qs-area-head-ico{font-size:16px;flex-shrink:0}
.qs-area-head-name{font-size:12px;font-weight:700;color:var(--white)}
.qs-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.qs-slot{border:1.5px dashed var(--border);border-radius:8px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fafaf8;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.qs-slot:active{transform:scale(.95)}
.qs-slot.captured{border-style:solid;border-color:var(--green-border);background:var(--green-bg)}
.qs-slot input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}
.qs-slot-ico{font-size:20px;margin-bottom:3px}
.qs-slot-lbl{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.3;padding:0 4px}
.qs-slot.captured .qs-slot-lbl{color:var(--green);font-size:8px}
.qs-slot-img{width:100%;height:54px;object-fit:cover;border-radius:5px}
.qs-slot-rm{position:absolute;top:3px;right:3px;background:var(--red);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:8px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;line-height:1}
.qs-area-result{border-radius:10px;padding:12px 14px;margin-bottom:10px;border:1.5px solid}
.qs-area-result.pass{background:var(--green-bg);border-color:var(--green-border)}
.qs-area-result.flag{background:var(--amber-bg);border-color:var(--amber-border)}
.qs-area-result.fail{background:var(--red-bg);border-color:var(--red-border)}
.qs-area-result-hdr{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.qs-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.qs-dot-pass{background:var(--green)}
.qs-dot-flag{background:var(--amber)}
.qs-dot-fail{background:var(--red)}
.qs-area-name{font-size:13px;font-weight:700;color:var(--navy);flex:1}
.qs-area-note{font-size:12px;color:#444;line-height:1.55}
/* ══════════════════════════════════════════
   SLIDE-OUT PROFILE / LOCATIONS PANEL
══════════════════════════════════════════ */
.slideout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;opacity:0;transition:opacity .25s var(--ease)}
.slideout-overlay.open{display:block;opacity:1}
.slideout-panel{position:fixed;top:0;right:0;bottom:0;width:min(340px,92vw);background:var(--white);z-index:201;transform:translateX(100%);transition:transform .28s var(--ease);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.18);overflow:hidden}
.slideout-panel.open{transform:translateX(0)}
.slideout-header{background:var(--navy);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:3px solid var(--gold)}
.slideout-title{font-family:'Fraunces',serif;font-size:18px;color:var(--white)}
.slideout-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);border-radius:7px;padding:6px 11px;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;min-height:44px;min-width:44px}
.slideout-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px}
.so-account{background:var(--cream);border-radius:12px;padding:14px;margin-bottom:20px;border:1.5px solid var(--border)}
.so-email{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
.so-plan{font-size:11px;color:var(--muted)}
.so-plan span{font-weight:700;color:var(--gold)}
.so-section-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.loc-card{background:var(--white);border:1.5px solid var(--border);border-radius:11px;padding:13px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:10px}
.loc-card-ico{width:34px;height:34px;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:14px;color:var(--gold);flex-shrink:0}
.loc-card-info{flex:1;min-width:0}
.loc-card-name{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-card-meta{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.loc-card-actions{display:flex;gap:6px;flex-shrink:0;margin-top:2px}
.btn-loc-edit{padding:5px 9px;background:var(--cream);border:1.5px solid var(--border);border-radius:7px;font-size:11px;font-weight:600;color:var(--navy);cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-loc-del{padding:5px 9px;background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:7px;font-size:11px;font-weight:600;color:var(--red);cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-add-loc{width:100%;padding:13px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:4px;letter-spacing:.3px}
.btn-add-loc:disabled{opacity:.45}
.add-loc-form{background:var(--cream);border:1.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;display:none}
.add-loc-form.open{display:block}
.add-loc-form .fg{margin-bottom:10px}
.add-loc-form .fg:last-child{margin-bottom:0}
.add-loc-form .fg label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:4px}
.add-loc-form .fg input,.add-loc-form .fg select{width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:9px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:var(--white);outline:none;-webkit-appearance:none}
.add-loc-form .fg input:focus,.add-loc-form .fg select:focus{border-color:var(--gold)}
.add-loc-form-btns{display:flex;gap:8px;margin-top:12px}
.btn-save-loc{flex:1;padding:12px;background:var(--navy);color:var(--white);border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-cancel-loc{padding:12px 14px;background:none;border:1.5px solid var(--border);border-radius:9px;font-size:13px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif}
.loc-limit-note{font-size:11px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:8px;padding:9px 11px;margin-bottom:12px;display:none}
.loc-limit-note.show{display:block}
.so-signout{width:100%;min-height:44px;padding:12px;background:none;border:1.5px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:16px}
/* Was a bare 30px gear circle relying on a title="" tooltip mobile users
   never see (mobile-audit finding) — now a labeled pill sized to the
   44x44 minimum tap target, with the icon+label doubling as the visible
   affordance instead of a hover-only tooltip. */
.btn-profile{min-height:44px;padding:0 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:22px;display:flex;align-items:center;gap:6px;justify-content:center;cursor:pointer;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);flex-shrink:0;line-height:1;font-family:'DM Sans',sans-serif}
.btn-profile-ico{font-size:15px}
/* ══════════════════════════════════════════
   CORPORATE DASHBOARD
══════════════════════════════════════════ */
.corp-wrap{padding:0 0 32px}
.corp-hero{background:var(--navy);padding:20px 16px 28px}
.corp-hero h1{font-family:'Fraunces',serif;font-size:26px;color:var(--white);margin-bottom:4px}
.corp-hero h1 span{color:var(--gold)}
.corp-hero p{font-size:12px;color:rgba(255,255,255,.4)}
.corp-content{padding:16px}
.corp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.corp-stat{background:var(--white);border-radius:11px;padding:13px 8px;text-align:center;border:1.5px solid var(--border);cursor:pointer;transition:var(--transition)}
.corp-stat:active{opacity:.8;transform:scale(.97)}
.corp-stat.active-detail{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.corp-stat-num{font-family:'Fraunces',serif;font-size:24px;font-weight:700;color:var(--navy);line-height:1}
.corp-stat-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.corp-detail-wrap{background:var(--white);border-radius:12px;border:1.5px solid var(--border);padding:16px;margin:0 0 18px;display:none}
.corp-detail-wrap.open{display:block}
.loc-scorecard{background:var(--white);border-radius:13px;border:1.5px solid var(--border);border-left:4px solid;margin-bottom:10px;overflow:hidden;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.loc-scorecard:active{transform:scale(.985);opacity:.9}
.lsc-main{padding:14px 16px;display:flex;align-items:flex-start;gap:10px}
.lsc-rank{font-size:11px;font-weight:800;color:var(--muted);width:18px;flex-shrink:0;padding-top:4px}
.lsc-info{flex:1;min-width:0}
.lsc-name{font-family:'Fraunces',serif;font-size:16px;color:var(--navy)}
.lsc-meta{font-size:11px;color:var(--muted);margin-top:2px}
.lsc-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.lsc-right{text-align:right;flex-shrink:0}
.lsc-score{font-family:'Fraunces',serif;font-size:28px;font-weight:700;line-height:1}
.lsc-grade{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.lsc-trend{font-size:14px;font-weight:800;margin-top:3px}
.lsc-detail{border-top:1px solid var(--border);padding:12px 16px;background:var(--cream);display:none}
.lsc-detail.open{display:block}
.lsc-audit-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--navy)}
.lsc-audit-row:last-child{border-bottom:none}
.lsc-no-locs{background:var(--white);border-radius:13px;border:1.5px dashed var(--border);padding:32px 20px;text-align:center}

.corp-stats2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px}
.corp-stat2{background:var(--white);border-radius:11px;padding:13px 12px;border:1.5px solid var(--border);cursor:default;display:flex;align-items:center;justify-content:space-between}
.corp-stat2.clickable{cursor:pointer}
.corp-stat2.clickable:active{opacity:.75}
.corp-stat2-num{font-family:'Fraunces',serif;font-size:22px;font-weight:700;line-height:1}
.corp-stat2-lbl{font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.corp-trend-card{background:var(--white);border-radius:13px;border:1.5px solid var(--border);padding:14px 16px 10px;margin-bottom:20px}
.corp-trend-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.corp-trend-cur{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--navy)}
.corp-trend-lbl{font-size:10px;color:var(--muted)}
.corp-repeat-card,.corp-overdue-card{background:var(--white);border-radius:11px;border:1.5px solid var(--border);padding:11px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;cursor:pointer}
.corp-repeat-card:active,.corp-overdue-card:active{opacity:.75}
.corp-repeat-badge-num{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);border-radius:50%;width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.corp-overdue-days{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);border-radius:7px;padding:3px 8px;font-size:10px;font-weight:700;flex-shrink:0;white-space:nowrap}
.corp-mini-title{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
.corp-mini-sub{font-size:11px;color:var(--muted);margin-top:2px}
.corp-empty-mini{font-size:12px;color:var(--muted);padding:14px 4px;text-align:center;background:var(--cream);border-radius:10px;margin-bottom:20px}

/* ══════════════════════════════════════════
   CORRECTIVE ACTIONS SCREEN
══════════════════════════════════════════ */
.ca-wrap{padding:0 0 40px}
.ca-hero{background:var(--navy);padding:20px 16px 24px}
.ca-hero h1{font-family:'Fraunces',serif;font-size:26px;color:var(--white);margin-bottom:4px}
.ca-hero h1 span{color:var(--gold)}
.ca-hero p{font-size:12px;color:rgba(255,255,255,.4)}
.ca-filters{display:flex;gap:6px;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ca-filters::-webkit-scrollbar{display:none}
.ca-filter-btn{display:flex;align-items:center;gap:5px;padding:7px 13px;border:1.5px solid var(--border);border-radius:20px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--muted);background:var(--white);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:var(--transition)}
.ca-filter-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy)}
.ca-fbadge{background:rgba(0,0,0,.12);color:inherit;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700}
.ca-filter-btn.active .ca-fbadge{background:rgba(255,255,255,.2)}
.ca-list{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.ca-empty{text-align:center;padding:48px 20px;background:var(--white);border-radius:12px;border:1.5px dashed var(--border);margin:12px 16px}
.ca-card{background:var(--white);border-radius:13px;border:1.5px solid var(--border);border-left:4px solid var(--border);overflow:hidden;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.ca-card:active{transform:scale(.985);opacity:.9}
.ca-card.status-open{border-left-color:var(--red)}
.ca-card.status-inprogress{border-left-color:var(--amber)}
.ca-card.status-resolved{border-left-color:#6366f1}
.ca-card.status-verified{border-left-color:var(--green)}
.ca-card.overdue{background:#fff9f9}
.ca-card-main{padding:14px 16px}
.ca-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ca-card-loc{font-family:'Fraunces',serif;font-size:15px;color:var(--navy);font-weight:600}
.ca-status-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.3px;white-space:nowrap;flex-shrink:0}
.ca-pill-open{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.ca-pill-inprogress{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.ca-pill-resolved{background:#ede9fe;color:#6366f1;border:1px solid #c4b5fd}
.ca-pill-verified{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.ca-sev-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.ca-sev-critical{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.ca-sev-major{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.ca-sev-minor{background:#f1f1f1;color:#888;border:1px solid #ddd}
.ca-timeline{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.ca-timeline-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.ca-timeline-row{display:flex;gap:10px;font-size:12px;color:#555;padding:5px 0}
.ca-timeline-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:5px;flex-shrink:0}
.ca-timeline-text{flex:1;line-height:1.5}
.ca-timeline-when{color:var(--muted);font-size:10.5px}
.ca-card-desc{font-size:13px;font-weight:600;color:var(--navy);line-height:1.4;margin-bottom:5px}
.ca-card-finding{font-size:12px;color:#555;line-height:1.5;margin-bottom:8px;padding:8px 10px;background:var(--cream);border-radius:7px;border:1px solid var(--border)}
.ca-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ca-meta-item{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:3px}
.ca-overdue-flag{margin-top:8px;font-size:11px;font-weight:700;color:var(--red);background:var(--red-bg);border:1px solid var(--red-border);border-radius:6px;padding:4px 9px;display:inline-block}

.ca-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:none;align-items:flex-end;justify-content:center}
.ca-modal-overlay.open{display:flex!important}
.ca-modal{background:var(--white);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:24px 20px 40px;box-shadow:0 -8px 32px rgba(0,0,0,.2)}
.ca-modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.ca-modal-title{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);margin-bottom:3px}
.ca-modal-loc{font-size:12px;color:var(--muted);margin-bottom:16px}
.ca-modal-finding{background:var(--red-bg);border:1px solid var(--red-border);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--navy);line-height:1.55;margin-bottom:16px}
.ca-field{margin-bottom:14px}
.ca-field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.ca-field input,.ca-field select,.ca-field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none}
.ca-field input:focus,.ca-field textarea:focus{border-color:var(--gold);background:var(--white)}
.ca-status-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.ca-sbtn{padding:10px 4px;border:1.5px solid var(--border);border-radius:9px;font-size:10px;font-weight:700;cursor:pointer;background:#fafaf8;color:var(--muted);font-family:'DM Sans',sans-serif;text-align:center;transition:var(--transition);line-height:1.3}
.ca-sbtn:disabled{opacity:.4;cursor:not-allowed}
.ca-sbtn.sel-open{background:var(--red);color:#fff;border-color:var(--red)}
.ca-sbtn.sel-inprogress{background:var(--amber);color:#fff;border-color:var(--amber)}
.ca-sbtn.sel-resolved{background:#6366f1;color:#fff;border-color:#6366f1}
.ca-sbtn.sel-verified{background:var(--green);color:#fff;border-color:var(--green)}
.ca-photo-btn{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--white);border:1.5px dashed var(--border);border-radius:10px;cursor:pointer;position:relative;width:100%;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.ca-photo-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ca-photo-btn.has-photo{border-style:solid;border-color:var(--green-border);background:var(--green-bg);color:var(--green)}
.ca-photo-preview{width:100%;max-height:160px;object-fit:cover;border-radius:8px;margin-bottom:14px;display:none}
.ca-photo-preview.show{display:block}
.ca-modal-btns{display:flex;gap:10px;margin-top:6px}
.ca-save-btn{flex:1;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.ca-save-btn:disabled{opacity:.45}
.ca-cancel-btn{padding:14px 18px;background:none;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif}
/* QS Assign button & modal */
.btn-qs-assign{margin-top:10px;width:100%;padding:10px 14px;background:var(--navy);color:var(--white);border:none;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.2px;transition:var(--transition)}
.btn-qs-assign:active{opacity:.8}
.qs-assign-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:none;align-items:flex-end;justify-content:center}
.qs-assign-overlay.open{display:flex!important}
.qs-assign-modal{background:var(--white);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:24px 20px 40px;box-shadow:0 -8px 32px rgba(0,0,0,.2)}
.qsa-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.qsa-area-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.qsa-title{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);margin-bottom:6px}
.qsa-finding{background:var(--red-bg);border:1px solid var(--red-border);border-radius:9px;padding:10px 13px;font-size:12px;color:var(--navy);line-height:1.55;margin-bottom:16px}
.qsa-field{margin-bottom:14px}
.qsa-field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.qsa-field input,.qsa-field select,.qsa-field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:#fafaf8;outline:none;-webkit-appearance:none}
.qsa-field input:focus,.qsa-field textarea:focus{border-color:var(--gold);background:var(--white)}
.qsa-btns{display:flex;gap:10px;margin-top:6px}
.qsa-save{flex:1;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.qsa-save:disabled{opacity:.45}
.qsa-cancel{padding:14px 18px;background:none;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif}
.qsa-confirm{display:none;align-items:center;gap:8px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--green);margin-bottom:12px}

/* ── CONFIRM DIALOG ──
   Mobile-UX-plan 2.1: a single reusable styled replacement for native
   confirm(), used everywhere the app needs a "delete this?" safeguard.
   Same bottom-sheet visual language as ca-modal/haccp-modal/qs-assign-modal
   rather than a new dialog shape — see confirmDialog() in the script below
   for the Promise-based API call sites use instead of confirm(). */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:flex-end;justify-content:center}
.confirm-overlay.open{display:flex!important}
.confirm-modal{background:var(--white);border-radius:20px 20px 0 0;width:100%;max-width:420px;padding:22px 20px max(22px,env(safe-area-inset-bottom));box-shadow:0 -8px 32px rgba(0,0,0,.2)}
.confirm-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.confirm-title{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);margin-bottom:8px}
.confirm-msg{font-size:14px;color:var(--navy);line-height:1.55;margin-bottom:20px}
.confirm-btns{display:flex;gap:10px}
.confirm-cancel-btn{flex:1;min-height:48px;padding:14px;background:none;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif}
.confirm-ok-btn{flex:1;min-height:48px;padding:14px;background:var(--red);color:var(--white);border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}
.confirm-ok-btn:active,.confirm-cancel-btn:active{opacity:.85}
/* Mobile-ux-plan 2.1b: notify() reuses this same overlay/modal in a
   single-button "acknowledge" mode instead of confirmDialog()'s red
   destructive Yes/No — replaces alert() everywhere. Neutral navy, not red,
   since these are informational (validation errors, save failures), not
   "are you sure" prompts. */
.confirm-ok-btn.neutral{background:var(--navy)}
@media (min-width:560px){.confirm-overlay{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:520px}}