/* ════════════════════════════════
   FieldStamp — Shared App Stylesheet
   Loaded by every page (docket.html, scan.html, photos.html).
   License-gate-only styles live inline in index.html.
════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#f2f4f7;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,0.75);
  --border:rgba(0,0,0,0.08);
  --border-2:rgba(0,0,0,0.13);
  --text:#0d0d12;
  --text-2:#3c3c44;
  --text-3:#7c7c88;
  --text-dim:#b0b0bc;
  --blue:#0058d4;
  --blue-l:#3b7fe8;
  --blue-d:rgba(0,88,212,0.1);
  --green:#15803d;
  --green-d:rgba(21,128,61,0.09);
  --red:#c81c1c;
  --red-d:rgba(200,28,28,0.09);
  --amber:#b45309;
  --amber-d:rgba(180,83,9,0.09);
  --purple:#6d28d9;
  --purple-d:rgba(109,40,217,0.09);
  --dark:#0a0a12;
  --shadow-xs:0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:0 2px 10px rgba(0,0,0,0.09);
  --shadow-md:0 8px 28px rgba(0,0,0,0.12);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.18);
  --blur:blur(18px) saturate(1.6);
  --r:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-pill:999px;
  --tap:52px;
}
html,body{height:100%;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);overscroll-behavior:none}

/* ── SCREENS (used by index.html license gate too) ── */
/* 100vh is unreliable on mobile Safari/Chrome — it's measured against the
   viewport with the browser chrome (address bar) hidden, so the real
   visible area is shorter while the chrome is showing. That mismatch was
   clipping the bottom of the scrollable area, making it feel like you
   couldn't scroll on phone. 100dvh (dynamic viewport height) tracks the
   real visible viewport; kept 100vh first as a fallback for older browsers. */
.screen{display:none;height:100vh;height:100dvh;flex-direction:column;overflow:hidden}
.screen.active{display:flex}

/* ════════════════════════════════
   APP SHELL / TOPBAR
════════════════════════════════ */
#sApp{background:var(--bg);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  flex-shrink:0;min-height:56px;z-index:200;
  background:var(--surface-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  padding:8px 14px;
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  box-shadow:var(--shadow-xs);
}
.logo-block{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:var(--shadow-xs)}
/* Dedicated slot for the client's own uploaded logo (set once in the admin
   Profiles tab, business_profiles.logo_url) — sits next to where the
   generic FieldStamp icon occupies, and applyProfile() in app-shared.js
   swaps between the two on every page automatically once a logo is on
   file, so nobody has to re-add it per-report. White backing + border since
   client logos are usually photos/JPGs that need contrast here. Sized
   larger than the plain geometric FieldStamp icon (34px) because a real
   company logo needs more room to actually be legible — at 34px a
   real-world logo photo just read as a faint blank square against the
   light topbar. */
.top-logo{width:44px;height:44px;border-radius:10px;object-fit:contain;flex-shrink:0;box-shadow:var(--shadow-xs);background:#fff;border:1px solid var(--border);padding:4px;box-sizing:border-box}
.logo-name{font-size:15px;font-weight:800;letter-spacing:-0.3px;white-space:nowrap}
[data-licensed="1"] .logo-name{display:none}
[data-licensed="1"] .logo-co{font-size:14px;font-weight:800;color:var(--text);max-width:220px}
.logo-co{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Module / page nav tabs */
.mod-tabs{display:flex;gap:2px;background:rgba(0,0,0,0.06);border-radius:var(--r-pill);padding:3px;flex-shrink:0;margin-left:6px}
.mod-tab{
  min-height:38px;padding:6px 13px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;border:none;background:transparent;
  color:var(--text-3);cursor:pointer;transition:all 0.16s;
  font-family:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap;
  text-decoration:none;
}
.mod-tab svg{width:13px;height:13px;flex-shrink:0}
.mod-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.topbar-right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}

/* ── BUTTONS ─────────────────── */
.btn{
  min-height:var(--tap);padding:0 20px;border-radius:var(--r-pill);
  font-family:inherit;font-size:14px;font-weight:600;border:none;
  cursor:pointer;transition:all 0.18s;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;
}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-sm{min-height:40px;padding:0 16px;font-size:13px}
.btn-xs{min-height:34px;padding:0 12px;font-size:12px}
.btn-ghost{background:var(--surface);color:var(--text-2);border:1.5px solid var(--border-2);box-shadow:var(--shadow-xs)}
.btn-ghost:hover{background:#fff;border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-sm)}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-l));color:#fff;box-shadow:0 4px 16px rgba(0,88,212,0.3)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,88,212,0.42)}
.btn-blue:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-green{background:linear-gradient(135deg,var(--green),#16a34a);color:#fff;box-shadow:0 4px 16px rgba(21,128,61,0.3)}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(21,128,61,0.4)}
.btn-red{background:linear-gradient(135deg,var(--red),#dc2626);color:#fff}
.btn-red:hover{transform:translateY(-1px)}
.btn-dark{background:var(--dark);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,0.25)}
.btn-dark:hover{background:#16161f;transform:translateY(-1px)}
.btn-purple{background:linear-gradient(135deg,var(--purple),#7c3aed);color:#fff;box-shadow:0 4px 16px rgba(109,40,217,0.3)}
.btn-purple:hover{transform:translateY(-1px)}
.btn-outline-red{background:var(--red-d);color:var(--red);border:1.5px solid rgba(200,28,28,0.2)}

/* ════════════════════════════════
   MODULES / PAGE CONTAINERS
════════════════════════════════ */
.module{display:none;flex:1;overflow:hidden;flex-direction:column}
.module.active{display:flex}

/* ── Cards (shared by docket + photos) ── */
.dk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-xs)}
.dk-card-head{padding:13px 16px;background:rgba(0,0,0,0.018);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.dk-card-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dk-card-icon svg{width:15px;height:15px}
.i-blue{background:var(--blue-d);color:var(--blue)}
.i-green{background:var(--green-d);color:var(--green)}
.i-amber{background:var(--amber-d);color:var(--amber)}
.i-purple{background:var(--purple-d);color:var(--purple)}
.i-dark{background:rgba(0,0,0,0.06);color:var(--text-2)}
.dk-card-title{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-3)}
.dk-body{padding:14px 16px;display:flex;flex-direction:column;gap:13px}

/* ── Form controls (shared) ── */
.fgrid{display:grid;gap:10px}
.fg2{grid-template-columns:1fr 1fr}
.fg3{grid-template-columns:1fr 1fr 1fr}
.fg4{grid-template-columns:1fr 1fr 1fr 1fr}
.ff{display:flex;flex-direction:column;gap:5px}
.fl{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3)}
.fi{
  width:100%;min-height:var(--tap);padding:0 13px;
  border:1.5px solid var(--border-2);border-radius:var(--r);
  font-family:inherit;font-size:15px;font-weight:500;color:var(--text);
  background:var(--surface);outline:none;transition:all 0.15s;
}
.fi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,88,212,0.12)}
.fi::placeholder{color:var(--text-dim);font-weight:400;font-size:14px}
select.fi{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c7c88' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
textarea.fi{min-height:84px;resize:vertical;line-height:1.55;padding-top:13px;padding-bottom:13px}
.fl-sub{font-size:9px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-dim)}

/* ── Saved custom addresses (docket Submit & Email) ──
   Apple Mail / iOS-style swipe-left-to-delete list. Each row is a
   fixed-height clip window; .sea-swipe (label + delete button) is
   translated left via touch/pointer drag, revealing the red delete
   button that sat underneath it all along. Tapping the label (when not
   swiped) selects that address into the Custom Email input. */
.saved-emails{margin-top:8px}
.saved-emails-label{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.saved-emails-list{border:1.5px solid var(--border-2);border-radius:var(--r);overflow:hidden;max-height:168px;overflow-y:auto}
.sea-row{position:relative;overflow:hidden;height:42px;border-bottom:1px solid var(--border)}
.sea-row:last-child{border-bottom:none}
.sea-delete{
  position:absolute;top:0;right:0;bottom:0;width:76px;
  background:var(--red);color:#fff;border:none;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sea-swipe{
  position:absolute;inset:0;background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 13px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  transform:translateX(0);transition:transform 0.18s ease;
}
.sea-swipe.dragging{transition:none}
.sea-swipe.selected{background:var(--blue-d)}
.sea-email{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sea-empty{padding:12px 13px;font-size:12px;color:var(--text-dim);text-align:center}

/* ════════════════════════════════
   TOAST & OVERLAYS (shared)
════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(40px);
  background:var(--dark);color:#fff;border-radius:var(--r-pill);
  padding:12px 20px;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);
  z-index:9999;opacity:0;transition:all 0.22s;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.toast-dot.err{background:var(--red)}
.toast-dot.warn{background:var(--amber)}
.loading-ov{position:fixed;inset:0;background:rgba(0,0,0,0.48);backdrop-filter:blur(8px);z-index:9998;display:none;align-items:center;justify-content:center}
.loading-ov.show{display:flex}
.loading-box{background:var(--surface);border-radius:var(--r-xl);padding:36px 32px;max-width:360px;width:90%;text-align:center;box-shadow:var(--shadow-lg)}
.loading-icon{width:56px;height:56px;border-radius:16px;background:var(--blue-d);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.loading-icon svg{width:28px;height:28px;color:var(--blue)}
.loading-title{font-size:18px;font-weight:800;margin-bottom:6px;letter-spacing:-0.3px}
.loading-msg{font-size:12px;color:var(--text-3);margin-bottom:18px;line-height:1.55}
.loading-bar{height:5px;background:rgba(0,0,0,0.08);border-radius:3px;overflow:hidden;margin-bottom:8px}
.loading-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-l));border-radius:3px;width:0%;transition:width 0.3s}
.loading-step{font-size:11px;color:var(--text-dim);font-weight:500}
.spin{width:20px;height:20px;border:2px solid rgba(109,40,217,0.2);border-top-color:var(--purple);border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Action bar (shared bottom bar, used by docket + photos) ── */
.action-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:rgba(255,255,255,0.94);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);padding:10px 16px;
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  box-shadow:0 -4px 20px rgba(0,0,0,0.06);
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.ab-status{font-size:11px;color:var(--text-3);margin-right:auto}

/* ════════════════════════════════
   RESPONSIVE (shared)
════════════════════════════════ */
@media(max-width:680px){
  .fg3,.fg4{grid-template-columns:1fr 1fr}
  .fg2{grid-template-columns:1fr}
  .mod-tab span{display:none}
  .topbar{padding:6px 10px}
}
@media(max-width:420px){
  .fg3,.fg4,.fg2{grid-template-columns:1fr}
}

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes cardSlideUp{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes toastBounce{
  from{opacity:0;transform:translateX(-50%) translateY(32px) scale(0.94)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)    scale(1)}
}
@keyframes loadingPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,88,212,0.35)}
  50%    {box-shadow:0 0 0 10px rgba(0,88,212,0)}
}
@keyframes rowSlideUp{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Card stagger — docket page sections */
.dk-card{animation:cardSlideUp 0.38s cubic-bezier(0.16,1,0.3,1) both}
.dk-card:nth-child(1){animation-delay:0.04s}
.dk-card:nth-child(2){animation-delay:0.09s}
.dk-card:nth-child(3){animation-delay:0.14s}
.dk-card:nth-child(4){animation-delay:0.19s}
.dk-card:nth-child(5){animation-delay:0.24s}
.dk-card:nth-child(6){animation-delay:0.29s}
.dk-card:nth-child(7){animation-delay:0.34s}
.dk-card:nth-child(8){animation-delay:0.39s}

/* Docket history rows */
.dkt-row{animation:rowSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both}

/* Button press feedback */
.btn:active:not(:disabled){transform:scale(0.97) translateY(1px)!important;box-shadow:none!important}
.btn-sm:active:not(:disabled){transform:scale(0.96) translateY(1px)!important}

/* Tab bar — smoother transitions */
.mod-tab{transition:all 0.2s cubic-bezier(0.16,1,0.3,1)}
.mod-tab:hover:not(.active){color:var(--text-2);background:rgba(0,0,0,0.035)}

/* Toast bounce-in */
.toast.show{animation:toastBounce 0.42s cubic-bezier(0.16,1,0.3,1) forwards}

/* Loading icon pulse while overlay is visible */
.loading-ov.show .loading-icon{animation:loadingPulse 1.8s ease-in-out infinite}

/* Input focus — subtle scale lift */
.fi:focus{transform:scale(1.004)}