/* =========================================================================
   PWA Site Report — Enterprise Stylesheet
   Target: budget Android phones (Samsung A03, Redmi 9, Realme C-series)
   Design: Professional construction industry — light theme, navy + orange
   Typography: 16px base, 16px inputs (prevents iOS auto-zoom)
   Layout: bottom tab bar, safe-area insets, 100dvh
   Standards: Material Design 3, Apple HIG, WCAG 2.2 AA
   ========================================================================= */

:root {
  /* --- Core palette --- */
  --bg: #F0F2F5;              /* light gray canvas */
  --surface: #FFFFFF;          /* white cards */
  --surface2: #F8F9FB;         /* nested elements, inputs */
  --primary: #1E3A5F;          /* deep navy — headers, brand */
  --primary-light: #2B5278;    /* lighter navy */
  --accent: #B85500;           /* construction orange — CTAs, WCAG 4.84:1 */
  --accent-light: #E8720C;     /* lighter orange for tints/decorative */

  /* --- Text --- */
  --text: #1A1D23;             /* near-black body text */
  --text-dim: #5F6B7A;         /* secondary labels */
  --text-on-dark: #FFFFFF;     /* text on navy/dark backgrounds */

  /* --- Status --- */
  --green: #047857;
  --orange: #B45309;
  --red: #DC2626;

  /* --- Chrome --- */
  --border: #808A9A;           /* 3.49:1 on white, 3.11:1 on bg (WCAG 1.4.11) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --radius: 8px;
  --radius-lg: 12px;
  --focus-ring: 0 0 0 2px rgba(30, 58, 95, 0.3);

  /* --- Layout --- */
  --nav-height: 60px;
  --header-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  /* PWA_MOBILE_STANDARD §8: 100vh on mobile includes the browser chrome
     (URL bar), which pushes the bottom-nav below the visible viewport on
     Android Chrome/Vanadium. 100dvh shrinks as chrome expands. Order
     matters — the last declaration a browser understands wins, so
     100vh comes first as a fallback and 100dvh overrides it everywhere
     that support it (Safari 15.4+, Chrome 108+, Vanadium, Samsung 21+). */
  height: 100vh;
  height: 100dvh;
  /* Body is the flex column that holds <main> (screens) + <nav.bottom-nav>.
     WITHOUT this, <main> expanded to the full 100dvh (because .screen had
     height: 100dvh) and the bottom-nav was pushed below `overflow: hidden`
     into the void. That was the real cause of "no bottom nav on Android" —
     the 100dvh declaration order was a red herring. */
  display: flex;
  flex-direction: column;
}

/* Wraps both screens. Takes all space above the bottom-nav.
   min-height: 0 is the flexbox gotcha that lets overflow-auto descendants
   actually scroll instead of blowing out the parent's intrinsic height. */
#app-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Focus states ---
   Two layers: :focus (legacy, keeps shadow for mouse-click polish) and
   :focus-visible (keyboard/AT-only prominent ring) — WCAG 2.4.7. */
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--focus-ring);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Camera overlay is on a dark background — needs a light ring. */
.camera-overlay button:focus-visible {
  outline-color: rgba(255,255,255,0.9);
}
/* Modal buttons have their own bg; make ring visible against both. */
.modal-btn:focus-visible {
  outline-offset: 3px;
}

/* --- Placeholder styling --- */
::placeholder { color: var(--text-dim); opacity: 0.7; }
::-webkit-input-placeholder { color: var(--text-dim); opacity: 0.7; }

/* --- iOS zoom guard ---
   Safari auto-zooms any focused input whose font-size is < 16px. That
   breaks the viewport on iPhone and makes forms unusable. The !important
   is deliberate — it's a platform constraint (not a design preference)
   that beats any later `.class { font-size: 14px }` rules for specific
   form fields (e.g., .crew-type-select, .material-qty). Non-text inputs
   (checkbox, radio, color, range) aren't zoom-triggers so they're skipped. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input:not([type]),
select, textarea {
  font-size: 16px !important;
}

/* --- Screens ---
   Each screen is a flex column that fills #app-main. Active screen takes
   all available space; inactive screens are display:none and collapse.
   Using flex:1 instead of height:100dvh means the screen respects its
   flex parent (#app-main), which stops above the bottom-nav rather than
   eating the entire viewport. */
.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* =========================================================================
   AUTH SCREEN
   ========================================================================= */
#screen-auth {
  justify-content: center;
  align-items: center;
  padding: 24px;
  padding-top: calc(24px + var(--safe-top));
  background: var(--primary);
  background: linear-gradient(160deg, #162D4A 0%, var(--primary) 50%, #1B3555 100%);
}
.auth-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 28px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.auth-logo { margin-bottom: 16px; }
.auth-box h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; color: var(--primary); }
.auth-subtitle { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-box input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 16px;
  min-height: 48px;
}
.auth-box input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; }
#btn-auth {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  transition: opacity 0.15s;
}
#btn-auth:active { opacity: 0.85; }
.error-msg { color: var(--red); font-size: 14px; margin-top: 10px; min-height: 1.3em; }

/* Auth divider */
.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 16px;
  color: var(--text-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Field supervisor section */
.auth-field-section { text-align: center; }
.auth-field-hint {
  color: var(--text-dim); font-size: 13px; margin: 0;
  line-height: 1.6;
}
.auth-field-hint a {
  color: var(--accent); text-decoration: none; font-weight: 500;
}
.auth-field-hint a:hover { text-decoration: underline; }
.auth-token-section[hidden] { display: none !important; }
.auth-token-section {
  margin-top: 12px; display: flex; flex-direction: column; gap: 10px;
}
.btn-token-login {
  width: 100%; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface2); color: var(--text);
  font-size: 15px; font-weight: 500; cursor: pointer; min-height: 44px;
  transition: background 0.15s;
}
.btn-token-login:active { background: var(--border); }

/* =========================================================================
   HEADER — Project selector + actions (Procore pattern)
   ========================================================================= */
header {
  background: var(--primary);
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  z-index: 100;
  min-height: var(--header-height);
}
.header-project {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text-on-dark);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  max-width: 220px;
  -webkit-tap-highlight-color: transparent;
}
.header-project:active { background: rgba(255,255,255,0.18); }
#header-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-chevron { width: 12px; height: 12px; flex-shrink: 0; stroke: rgba(255,255,255,0.7); }

.header-right { display: flex; align-items: center; gap: 6px; }
.header-icon-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-tap-highlight-color: transparent;
}
.header-icon-btn:active { background: rgba(255,255,255,0.2); }

/* v32: refresh button spin animation */
#btn-refresh.spin svg {
  animation: spin-refresh 0.8s linear infinite;
}
@keyframes spin-refresh {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.online-dot.online { background: #34D399; }

/* =========================================================================
   DATE NAVIGATION BAR (Raken pattern — shown on Report tab)
   ========================================================================= */
.date-nav {
  display: none; /* shown via JS when report tab active */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.date-nav.show { display: flex; }
.date-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.date-arrow:active { background: var(--bg); }
.date-display {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
  min-height: 44px;
}
.btn-copy-prev {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-copy-prev:active { background: var(--bg); }
.hidden-date-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =========================================================================
   STICKY SUBMIT BAR (above bottom nav, report tab only)
   ========================================================================= */
.submit-bar {
  display: none; /* shown via JS */
  padding: 10px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.submit-bar.show { display: block; }
.btn-submit {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  letter-spacing: 0.3px;
}
.btn-submit:active { opacity: 0.85; }

/* =========================================================================
   PROJECT SELECTOR OVERLAY
   ========================================================================= */
.project-selector {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-md);
}
.project-selector h3 {
  margin-bottom: 16px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.project-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  transition: border-color 0.15s, background 0.15s;
}
.project-option.selected {
  border-color: var(--primary);
  background: rgba(30, 58, 95, 0.06);
  color: var(--primary);
}
.project-option:active { opacity: 0.7; }
.btn-cancel {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}

/* =========================================================================
   BOTTOM TAB BAR
   ========================================================================= */
.bottom-nav {
  display: none;                         /* hidden until body.logged-in */
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  flex-shrink: 0;
  z-index: 100;
  min-height: var(--nav-height);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
body.logged-in .bottom-nav { display: flex; }
.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  min-height: var(--nav-height);
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-tab.active {
  color: var(--primary);
}
.nav-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.1s;
}
/* Apple HIG §6 / PWA_MOBILE_STANDARD §6: selected = filled icon,
   unselected = outlined icon. Shipping both SVGs per tab and toggling
   display gives crisp, hand-tuned shapes at each state; a CSS fill
   swap on a single outlined path looks wrong (the interior of the
   shape floods instead of appearing solid by design). */
.nav-icon-filled  { display: none; }
.nav-tab.active .nav-icon-outline { display: none; }
.nav-tab.active .nav-icon-filled  { display: block; }
.nav-tab.active .nav-icon         { transform: scale(1.02); }
.nav-tab span {
  font-size: 12px;
  line-height: 1;
}

/* =========================================================================
   MAIN CONTENT AREA
   ========================================================================= */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.tab-content { display: none; padding: 16px; }
.tab-content.active { display: block; }

/* =========================================================================
   SECTION CARDS (enterprise card pattern — each form section in a card)
   ========================================================================= */
.section-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-section-action {
  padding: 8px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: rgba(30, 58, 95, 0.06);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-section-action:active { background: rgba(30, 58, 95, 0.12); }

/* =========================================================================
   FORM ELEMENTS
   ========================================================================= */
.form-group { margin-bottom: 20px; }
.form-group > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.field-label { font-size: 13px; color: var(--text-dim); display: block; margin-bottom: 4px; font-weight: 500; }

.form-group + .form-group { padding-top: 2px; }

/* --- Picker buttons (project, villa) --- */
.picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
.picker-btn {
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-width: 48px;
  min-height: 44px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background 0.15s;
}
.picker-btn.selected {
  border-color: var(--primary);
  background: rgba(30, 58, 95, 0.08);
  color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.picker-btn:active { opacity: 0.7; }

/* --- Capture context row (villa dropdown + GPS) --- */
.capture-context { padding: 12px 16px; }
.capture-context-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.capture-context-field { flex-shrink: 0; }
.capture-context-field .field-label { margin-bottom: 0; margin-right: 8px; display: inline; }
.villa-select {
  min-width: 130px;
}
.capture-gps { flex: 1; text-align: right; }

/* --- GPS label --- */
/* v28: raised font to 14px + darker fail/ok colors for WCAG AA 4.5:1 on
   the section-card backdrop (#F0F2F5 variant). Prior #B45309 orange was
   4.48 — just below threshold. Green likewise tightened. */
#gps-label { font-size: 14px; color: var(--text); }
#gps-label.gps-ok { color: #0E7F52; }   /* darker green — 5.6:1 on #F0F2F5 */
#gps-label.gps-fail { color: #8A2F0A; }  /* darker orange — 6.8:1 on #F0F2F5 */

/* --- Capture buttons --- */
.capture-buttons { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.btn-capture, .btn-gallery {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}
.btn-capture { background: var(--accent); }
.btn-gallery { background: var(--surface); border: 2px solid var(--primary); color: var(--primary); }
.btn-capture:disabled, .btn-gallery:disabled { background: #D1D5DB; color: #9CA3AF; cursor: not-allowed; border-color: #D1D5DB; }
.btn-capture:active:not(:disabled), .btn-gallery:active:not(:disabled) { opacity: 0.8; }

/* File input (hidden) */
#photo-input { display: none; }

/* --- Snackbar (Material Design spec) ---
   Bottom-anchored, single-line transient notification with optional action.
   Used for "Photo added · UNDO" after capture-and-commit.
   Spec reference: https://m2.material.io/components/snackbars */
#snackbar-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-height, 68px) + 12px);  /* sit above bottom nav */
  display: flex;
  justify-content: center;
  padding: 0 8px;
  pointer-events: none;
  z-index: 1000;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  #snackbar-host { bottom: calc(var(--nav-height, 68px) + 12px + env(safe-area-inset-bottom)); }
}
.snackbar {
  pointer-events: auto;
  background: #323232;
  color: #fff;
  border-radius: 4px;
  padding: 14px 16px;
  min-width: 288px;
  max-width: 568px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);
  animation: snackbar-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  line-height: 1.4;
}
.snackbar-msg { flex: 1; }
.snackbar-action {
  background: none;
  border: none;
  color: #FFAB40;  /* Material amber-A200 — high contrast on dark */
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 8px;
  margin: -8px -8px -8px 0;
  cursor: pointer;
  min-height: 36px;
  border-radius: 4px;
}
.snackbar-action:active { background: rgba(255,255,255,0.08); }
@keyframes snackbar-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:active { opacity: 0.8; }

.btn-full { width: 100%; padding: 16px; border: none; border-radius: var(--radius); font-size: 17px; font-weight: 700; cursor: pointer; min-height: 48px; }

.status-msg { font-size: 14px; margin-top: 10px; min-height: 1.3em; text-align: center; }
.status-msg.success { color: var(--green); }
.status-msg.error { color: var(--red); }

/* =========================================================================
   GLOBAL SELECT RESET
   ========================================================================= */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235F6B7A'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 28px 12px 10px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}

/* =========================================================================
   DAILY REPORT FORM
   ========================================================================= */

.date-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.date-row-field { flex: 1; }

/* --- Action button --- */
.btn-action {
  padding: 8px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: rgba(30, 58, 95, 0.06);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-action:active { background: rgba(30, 58, 95, 0.12); }

/* --- Inline input field --- */
.input-field {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  min-height: 44px;
}

/* --- Weather and Hours --- */
.weather-row, .hours-row {
  display: flex;
  gap: 10px;
}
.weather-row > div, .hours-row > div { flex: 1; }

.weather-row select, .hours-row input, .hours-row select, textarea, input[type="date"] {
  width: 100%;
  padding: 12px 28px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  min-height: 44px;
}

/* Date input */
input[type="date"] {
  cursor: pointer;
  position: relative;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6B7A'%3E%3Cpath d='M5 0v2H3v1h2v1H0v12h16V4h-5V3h2V2h-2V0h-2v2H7V0H5zm-4 8h14v8H1V8zm2 2v2h2v-2H3zm4 0v2h2v-2H7zm4 0v2h2v-2h-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto;
  background: transparent;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.hours-row select {
  padding: 14px 28px 14px 12px;
  font-size: 18px;
  font-weight: 600;
}

textarea {
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  padding: 12px !important;
  min-height: 64px;
}

/* --- Delays sub-section (inside Hours card) --- */
.delays-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.delays-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.delays-toggle .field-label { margin-bottom: 0; flex-shrink: 0; }
.toggle-btn-sm {
  padding: 10px 18px;                /* bumped so WCAG 2.5.8 target is met */
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;                  /* WCAG 2.5.8 AA + Apple HIG (was 40) */
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-btn-sm.active-no {
  border-color: var(--green);
  background: rgba(5, 150, 105, 0.08);
  color: var(--green);
}
.toggle-btn-sm.active-yes {
  border-color: var(--red);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}
.disrupted-detail { display: none; margin-top: 10px; }
.disrupted-detail.show { display: block; }
/* v32: safety + problems Yes/No toggles */
.safety-toggle, .problems-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.safety-toggle .field-label, .problems-toggle .field-label {
  flex: 1;
  min-width: 120px;
}
.incident-detail { display: none; margin-top: 10px; }
.incident-detail.show { display: block; }
.problems-detail { display: none; margin-top: 10px; }
.problems-detail.show { display: block; }
.delays-fields {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.delays-fields .input-field { flex: 1; min-width: 0; }
.delays-hours {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.delays-hours .field-label { margin-bottom: 4px; white-space: nowrap; }
.delays-hours input[type="number"] {
  width: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  text-align: center;
  min-height: 44px;
}

/* --- Toggle buttons (Yes/No) --- */
.toggle-row { display: flex; gap: 8px; }
.toggle-btn {
  flex: 1;
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background 0.15s;
}
.toggle-btn.active-no {
  border-color: var(--green);
  background: rgba(5, 150, 105, 0.08);
  color: var(--green);
}
.toggle-btn.active-yes {
  border-color: var(--red);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

/* --- Offline banner --- */
.offline-banner {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #F59E0B;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 12px;
}

/* --- Project hint --- */
.project-hint {
  text-align: center;
  padding: 16px;
  color: var(--text-dim);
  font-size: 15px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.form-locked {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

/* =========================================================================
   CREW CARDS
   ========================================================================= */
/* =========================================================================
   CREW CARDS (Raken/PlanGrid coupled pattern — one card per crew)
   ========================================================================= */
.crew-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  margin-top: 6px;
}

/* Row 1: Type dropdown + Name + Remove */
.crew-row-top {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.crew-type-select {
  width: 140px;
  flex-shrink: 0;
  padding: 10px 28px 10px 10px;
  font-size: 14px;
  min-height: 44px;
}
.crew-card .crew-name {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  min-width: 0; /* allow shrink in flex */
}
.btn-remove-circle {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-remove-circle:active { background: var(--red); color: #fff; }

/* Row 2: Discipline + Workers + Hours (Procore/Raken pattern) */
.crew-row-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crew-row-main .crew-discipline {
  width: 100%;
  padding: 10px 28px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235F6B7A'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px;
  color: var(--text);
  font-size: 14px;
  min-height: 44px;
}
.crew-metrics {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.metric-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.count-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Workforce total badge — sits next to the section title */
.workforce-total-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(30, 58, 95, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
  white-space: nowrap;
}
.workforce-total-badge:empty { display: none; }
.count-wrap input::-webkit-inner-spin-button,
.count-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.count-wrap input[type=number] {
  -moz-appearance: textfield;
}
.count-wrap input {
  width: 44px;
  text-align: center;
  padding: 10px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  min-height: 44px;
}
.count-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.count-btn:active { background: var(--primary); color: #fff; }

/* --- Tasks --- */
.crew-tasks {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.crew-tasks-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.btn-tiny {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.btn-tiny:active { background: rgba(30, 58, 95, 0.08); }

.task-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.task-row .task-villa {
  width: 72px;
  flex-shrink: 0;
  padding: 10px 22px 10px 6px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235F6B7A'/%3E%3C/svg%3E") no-repeat right 6px center;
  background-size: 8px 5px;
  color: var(--text);
  min-height: 44px;
}
.task-row .task-desc {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  min-width: 0;
}
.btn-remove-sm {
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.btn-remove-sm:active { background: var(--red); color: #fff; }

/* --- Safety --- */
.safety-checklist { display: flex; flex-direction: column; gap: 10px; }
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  min-height: 48px;
}
.check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* --- Crew notes --- */
.crew-notes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.crew-comment {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-style: italic;
  min-height: 40px;
}

/* =========================================================================
   EQUIPMENT ROWS
   ========================================================================= */
.equipment-row {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin-bottom: 0;
}
.equipment-row:last-child { border-bottom: none; }
.equip-row-top {
  display: flex;
  gap: 6px;
  align-items: center;
}
.equipment-row .equip-type {
  flex: 1;
  min-width: 0;
  padding: 8px 24px 8px 8px;
  font-size: 14px;
  min-height: 44px;
}
.equip-asset {
  width: 80px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-height: 44px;
  text-align: center;
}
.equip-row-top .btn-remove-sm { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; }
.equip-row-detail {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.equip-row-detail input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-height: 36px;
}
.equipment-row .equip-qty {
  width: 44px;
  text-align: center;
  padding: 10px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  min-height: 44px;
  -moz-appearance: textfield;
}
.equipment-row .equip-qty::-webkit-inner-spin-button,
.equipment-row .equip-qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================================================
   PHOTOS SUMMARY GRID (on report tab)
   ========================================================================= */
.photos-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.photo-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 2px;
}
.photo-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
}
.photos-count-badge {
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}
.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
}
.btn-link:active { opacity: 0.7; }

/* =========================================================================
   SIGN-OFF
   ========================================================================= */
.signoff-card {
  border-left: 3px solid var(--accent);
}

/* =========================================================================
   DELIVERY CARDS
   ========================================================================= */
.delivery-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  margin-top: 8px;
  box-shadow: var(--shadow-sm);
}
.delivery-header {
  display: flex;
  gap: 8px;
  align-items: center;
}
.delivery-header .delivery-supplier {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 16px;
  min-height: 44px;
}
.delivery-items-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.delivery-item-row {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 6px;
}
.delivery-item-row .delivery-item-desc {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
}
.delivery-item-row .delivery-item-qty {
  width: 58px;
  text-align: center;
  padding: 10px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
}
.delivery-card .delivery-photo-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.btn-photo-sm {
  padding: 10px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: rgba(30, 58, 95, 0.06);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.btn-photo-sm:active { background: rgba(30, 58, 95, 0.12); }
.delivery-photo-label {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   VISITOR ROWS
   ========================================================================= */
.visitor-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.visitor-row input[type="text"] {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 16px;
  min-height: 44px;
}

/* =========================================================================
   SUBMIT BUTTON
   ========================================================================= */
.btn-primary.btn-full {
  background: var(--accent) !important;
  border: none !important;
  padding: 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 8px;
  min-height: 48px;
  color: #fff !important;
}
.btn-primary.btn-full:active { opacity: 0.85; }

/* =========================================================================
   QUEUE TAB
   ========================================================================= */
.queue-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sync-badge {
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sync-badge.empty { background: #D1D5DB; color: var(--text-dim); }

.queue-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.stat-box {
  flex: 1;
  min-width: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-box .num { font-size: 24px; font-weight: 700; }
.stat-box .label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }
.stat-box.pending .num { color: var(--orange); }
.stat-box.synced .num { color: var(--green); }
.stat-box.failed .num { color: var(--red); }

.queue-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
}
.queue-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}
.queue-item .info { flex: 1; }
.queue-item .info .project { font-weight: 600; font-size: 15px; }
.queue-item .info .detail { font-size: 13px; color: var(--text-dim); }
.queue-item .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.queue-item .status-dot.pending { background: var(--orange); }
.queue-item .status-dot.synced { background: var(--green); }
.queue-item .status-dot.failed { background: var(--red); }

/* v32: report sync status line in queue stats */
.queue-report-line {
  width: 100%;
  font-size: 13px;
  color: var(--text-dim);
  padding: 6px 2px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.queue-report-line .rpt-icon {
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.6;
}
.queue-report-line .rpt-pending { color: var(--orange); font-weight: 600; }
.queue-report-line .rpt-synced { color: var(--green); }

/* v32: report items in queue list */
.queue-rpt-icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.queue-item.queue-report-item.pending .queue-rpt-icon { stroke: var(--orange); }
.queue-item.queue-report-item.synced .queue-rpt-icon { stroke: var(--green); }
.queue-item.queue-report-item { border-left: 3px solid var(--primary); padding-left: 13px; }
.queue-item.queue-report-item.pending { border-left-color: var(--orange); }
.queue-item.queue-report-item.synced { border-left-color: var(--green); }

#btn-manual-sync {
  display: block;
  margin: 14px auto;
  padding: 12px 24px;
  font-size: 14px;
  min-height: 48px;
}

/* =========================================================================
   REMOVE BUTTONS
   ========================================================================= */
.btn-remove {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-small {
  padding: 8px 14px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: rgba(30, 58, 95, 0.06);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s;
}
.btn-small:active { background: rgba(30, 58, 95, 0.12); }

/* =========================================================================
   OVERLAY
   ========================================================================= */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.overlay-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-md);
}
.overlay-content h3 { margin-bottom: 14px; color: var(--primary); font-size: 18px; }
.overlay-content button {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 15px;
}
.empty-state .icon { font-size: 40px; margin-bottom: 10px; }

/* Legacy activity-row */
.activity-row select { width: 70px; flex-shrink: 0; }
.activity-row input { flex: 1; }
.activity-row input[type="text"] {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 16px;
  min-height: 44px;
}

/* =========================================================================
   IN-APP CAMERA OVERLAY
   -------------------------------------------------------------------------
   Full-screen black overlay mirroring the WhatsApp / Instagram Stories
   pattern: round shutter bottom-center, flip top-right, close top-left.
   Respects iOS safe-area insets so buttons clear the notch / home bar.
   ========================================================================= */
.camera-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
  z-index: 300;
  overflow: hidden;
  touch-action: none;
}
body.camera-open { overflow: hidden; }

.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Mirror the preview when on the front camera — natural feel, like a mirror.
   The saved file is not mirrored (we draw the raw frame to canvas). */
.camera-overlay[data-facing="user"] .camera-video { transform: scaleX(-1); }

.camera-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.camera-flash.flashing { animation: camera-flash-anim 160ms ease-out; }
@keyframes camera-flash-anim {
  0%   { opacity: 0; }
  20%  { opacity: 0.85; }
  100% { opacity: 0; }
}

.camera-btn {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.camera-btn:active { background: rgba(0, 0, 0, 0.7); }

.camera-btn-close {
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
}
.camera-btn-flip {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
}

.camera-status {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 14px;
  pointer-events: none;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camera-status:empty { display: none; }

/* Thumbnail strip — last N shots taken in this camera session. Horizontal
   scroll, sits above the shutter. */
.camera-thumbs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  height: 56px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.camera-thumbs::-webkit-scrollbar { display: none; }
.camera-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #222;
}

/* Shutter — 72px outer ring, 58px inner circle, WhatsApp-style. */
.camera-shutter {
  position: absolute;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-out;
}
.camera-shutter:active { transform: translateX(-50%) scale(0.92); }
.camera-shutter-inner {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  transition: background 120ms ease-out;
}
.camera-shutter:active .camera-shutter-inner { background: #e6e6e6; }

/* =========================================================================
   SW UPDATE BANNER — "New version available. Update?"
   Sits above the bottom-nav, below the header. Non-blocking; user can keep
   working. Tapping Update reloads to the new build; X dismisses.
   ========================================================================= */
.sw-update-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--nav-height, 68px) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  background: #1E3A5F;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 1.3;
}
.sw-update-banner[hidden] { display: none; }
.sw-update-msg { flex: 1; min-width: 0; }
.sw-update-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: none;
  border-radius: 18px;
  background: #4CAF50;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-update-btn:active { background: #3d8b40; }
.sw-update-dismiss {
  min-width: 32px; min-height: 32px;
  padding: 0 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-update-dismiss:active { color: #fff; }

/* Done pill — primary exit. Bottom-right, large and labelled so supervisors
   never hunt for a way out with unsaved-looking photos. 44px min height
   meets WCAG AAA + Apple HIG. Count badge shows in-session shots. */
.camera-done {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 24px;
  border: none;
  background: #1E3A5F;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease-out, background 120ms ease-out;
}
.camera-done:active { transform: scale(0.96); background: #152942; }
.camera-done-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #4CAF50;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.camera-done-count[hidden] { display: none; }

/* =========================================================================
   MODAL — in-app replacement for alert() / confirm()
   ========================================================================= */
.modal-host {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-host.open { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  animation: modalFadeIn 160ms ease-out;
}
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  max-width: 360px; width: 100%;
  padding: 20px;
  animation: modalPopIn 180ms ease-out;
}
.modal-title {
  font-size: 17px; font-weight: 600;
  margin-bottom: 8px; color: #1a1a1a;
}
.modal-title:empty { display: none; }
.modal-body {
  font-size: 15px; line-height: 1.45;
  color: #333; white-space: pre-wrap;
  margin-bottom: 18px;
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.modal-actions button {
  min-height: 40px; padding: 0 16px;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal-actions .btn-cancel {
  background: transparent; color: #555;
}
.modal-actions .btn-cancel:active { background: #f0f0f0; }
.modal-actions .btn-confirm {
  background: #1976d2; color: #fff;
}
.modal-actions .btn-confirm:active { background: #1565c0; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width: 600px) {
  .tab-content { max-width: 500px; margin: 0 auto; }
}

/* =========================================================================
   v30 — OUTDOOR CONTRAST, QUEUE RETRY, ERROR SHAKE, FOCUS SCROLL
   ========================================================================= */

/* Per-item retry button on failed queue photos. 44×44 hit area (WCAG 2.5.8),
   subtle until hovered/tapped. */
.btn-queue-retry {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 20px;
  color: var(--primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-left: 8px;
}
.btn-queue-retry:active { background: rgba(30, 58, 95, 0.08); }
.queue-item.failed { border-left: 3px solid #EF4444; padding-left: 13px; }

/* Error shake — one-shot keyframe for submit-button / input validation
   failures. Pro-app calibre feedback: the element that failed visually
   tells you so. Triggered by adding .shake class in JS; class removes
   itself via animationend. */
@keyframes errShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.shake { animation: errShake 350ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* Outdoor contrast mode. Toggled by body.outdoor (user setting) OR by
   prefers-contrast: more. Goes beyond AA into "readable in direct sunlight":
   pure black text, heavier borders, desaturated surfaces, bold buttons.
   Not a dark mode — it's an HIGH-contrast mode. Construction supervisors
   check the phone outside in 80k-lux sunlight. */
@media (prefers-contrast: more) {
  :root {
    --text: #000000;
    --text-dim: #1F2937;
    --border: #000000;
    --primary: #0B2540;
  }
}
body.outdoor {
  --text: #000000;
  --text-dim: #1F2937;
  --border: #000000;
  --primary: #0B2540;
  --surface: #FFFFFF;
  --bg: #F0F2F5;
}
body.outdoor .section-card {
  border-width: 2px;
}
body.outdoor input, body.outdoor select, body.outdoor textarea {
  border-width: 2px;
  color: #000;
}
body.outdoor .btn-submit,
body.outdoor .btn-capture,
body.outdoor .btn-action {
  font-weight: 800;
  border: 2px solid #000;
}
body.outdoor .nav-tab { font-weight: 700; }
body.outdoor .online-dot.pill { border: 1.5px solid #000; }

.sync-settings {
  margin: 16px 0 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.outdoor-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
  min-height: 44px;
}
.outdoor-toggle-row input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0;
}

/* =========================================================================
   v29 — DATE-NAV TODAY BUTTON, DATALIST INPUTS, UNDO ROWS, LONG-PRESS DELETE
   ========================================================================= */

/* Long-press delete visual — subtle scale + red ring as the timer ticks.
   Fires via JS adding .long-press-fired at 500ms. */
.camera-thumb {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.camera-thumb.long-press-fired {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px #EF4444;
}

/* Today jump-back button. Hidden by default; JS adds .show when the report
   date isn't today. Keep it low-profile so it doesn't steal attention when
   you're on today's date (which is >90% of the time). */
.btn-today {
  display: none;
  margin-left: 4px;
  padding: 6px 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
}
.btn-today.show { display: inline-flex; align-items: center; }

/* =========================================================================
   v28 — MICRO-INTERACTIONS (haptic feedback visual pair, tab transitions,
   skeletons, loading states, install prompt, photos empty state)
   ========================================================================= */

/* Universal tap feedback — subtle scale+opacity on press. Pro-app calibre
   (Procore, Fieldwire): buttons "respond" physically under the finger.
   prefers-reduced-motion fully disables the transform. */
@media (prefers-reduced-motion: no-preference) {
  button, .nav-tab, [role="button"], .queue-item {
    transition: transform 80ms ease-out, opacity 80ms ease-out;
  }
  button:active:not(:disabled),
  .nav-tab:active,
  [role="button"]:active {
    transform: scale(0.97);
  }
}

/* Soft cross-fade between tabs. Very short (140ms) so tap-to-content feels
   instant, not "animated". */
@media (prefers-reduced-motion: no-preference) {
  .tab-content.active {
    animation: tabFadeIn 140ms ease-out;
  }
}
/* Translate-only, no opacity. A mid-flight opacity < 1 blends text colors
   with the backdrop, which can push borderline-contrast pairs (e.g. darker
   orange on white) below WCAG AA and fails axe. Translate alone is enough
   "motion" to signal the tab change. */
@keyframes tabFadeIn {
  from { transform: translateY(4px); }
  to   { transform: translateY(0); }
}

/* Sync pill — extends #online-dot into a text-pill when pending>0 or sync
   is in progress. Stays a dot at rest (quiet), expands only when it has
   something to say. Pro-app pattern: signal-when-useful, not decorative. */
.online-dot {
  /* override size when pill content is present */
  transition: width 180ms ease, padding 180ms ease;
}
.online-dot.pill {
  width: auto;
  height: 22px;
  padding: 0 10px 0 20px;
  border-radius: 11px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.online-dot.pill::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; opacity: 0.95;
}
.online-dot.pill.online    { background: #10B981; }
.online-dot.pill.syncing   { background: #F59E0B; }
.online-dot.pill.syncing::before {
  animation: pillPulse 1s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Submit button loading state — disabled + spinner, replaces text. */
.btn-submit.is-loading {
  opacity: 0.85;
  cursor: wait;
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-submit.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Skeleton rows for the Queue tab while IDB reads are in flight.
   Matches the shape of .queue-item (dot + two lines). */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.skeleton-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #E5E7EB; flex-shrink: 0;
}
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-line {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, #EEF0F3 0%, #E5E7EB 50%, #EEF0F3 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.3s ease-in-out infinite;
}
.skeleton-line.short { width: 55%; }
.skeleton-line.long  { width: 85%; }
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* Install-app CTA button in header — shown when beforeinstallprompt fired.
   Hidden by default; JS sets .show when the event is captured and the app
   isn't already installed. */
.btn-install {
  display: none;
  padding: 6px 12px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 28px;
}
.btn-install.show { display: inline-flex; align-items: center; gap: 4px; }

/* Photos tab empty-state hint card — shown when no photos this session. */
.capture-empty-hint {
  margin: 20px 12px 0;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  /* Use --text (near-black, 16.9:1 on white) not --text-dim. axe was flagging
     the nested <span> when the stacking context resolved to a tinted backdrop
     behind the card; --text is safe everywhere. */
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.capture-empty-hint .icon {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
  opacity: 0.7;
}

/* Landscape on short phones: reclaim vertical space so bottom-nav stays visible
   and the camera preview isn't squashed. Hides the top-bar title on very short
   viewports (< 500 CSS px) and compacts nav heights. */
@media (orientation: landscape) and (max-height: 500px) {
  .top-bar { padding: 4px 12px; }
  .top-bar h1 { font-size: 14px; }
  .bottom-nav { padding: 2px 0 calc(2px + var(--safe-bottom)); }
  .nav-tab { padding: 4px 0; min-height: 44px; }
  .nav-tab .nav-label { font-size: 10px; }
  #date-nav { padding: 4px 12px; }
  .tab-content { padding: 8px 12px; }
}

/* v32: "Prepared By" is server-known from the supervisor's token, so the
   input renders as a label (greyed, not-editable) rather than a typing
   field. Keeps the visual shape of a form field — supervisors know it's
   been captured — without the foot-gun of them editing someone else's
   name in. */
.signoff-readonly {
  background: var(--surface);
  color: var(--text);
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}
.signoff-readonly:focus { outline: none; }

/* =========================================================================
   v33: Hamburger menu, Drawer, Admin panel
   ========================================================================= */

/* Hamburger button — left side of header */
.header-hamburger {
  background: none;
  border: none;
  color: var(--text-on-dark);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
  margin-right: 4px;
}
.header-hamburger:active { background: rgba(255,255,255,0.15); }

/* Drawer — slides from left */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--surface);
  z-index: 910;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 20px 16px;
  padding-top: calc(20px + var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title { font-size: 18px; font-weight: 700; }
.drawer-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-user {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--bg);
}

.drawer-menu {
  list-style: none;
  flex: 1;
  padding: 8px 0;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drawer-item:active { background: var(--bg); }
.drawer-item.active {
  color: var(--primary);
  background: rgba(30,58,95,0.06);
  font-weight: 600;
}
.drawer-item svg { flex-shrink: 0; }

.drawer-footer {
  border-top: 1px solid var(--bg);
  padding: 12px 16px;
}
.drawer-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--red);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 4px;
  width: 100%;
}

/* Admin screen */
.admin-header {
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-top));
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-height);
}
.admin-back {
  background: none;
  border: none;
  color: var(--text-on-dark);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-header h2 { font-size: 17px; font-weight: 600; flex: 1; }
.admin-count { font-size: 13px; opacity: 0.75; }

.admin-body {
  overflow-y: auto;
  padding: 16px;
  height: calc(100dvh - var(--header-height) - var(--safe-top));
  height: calc(100vh - var(--header-height) - var(--safe-top));
}
.admin-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.admin-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--primary);
}
/* User type toggle (Field / Office) */
.admin-type-toggle {
  display: flex; gap: 0; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.admin-type-btn {
  flex: 1; padding: 10px 0; border: none; cursor: pointer;
  font-size: 14px; font-weight: 500;
  background: var(--surface2); color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}
.admin-type-btn.active {
  background: var(--accent); color: #fff;
}
.admin-type-btn:not(.active):hover { background: var(--border); }
.admin-office-fields[hidden] { display: none !important; }

.admin-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-field { flex: 1; min-width: 140px; }
.admin-field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 500;
}
.admin-field input[type="text"],
.admin-field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--surface2);
}
.admin-field-check {
  display: flex;
  align-items: flex-end;
  min-width: auto;
  flex: 0;
}
.admin-field-check label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
  padding-bottom: 10px;
}
.admin-hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.admin-error { font-size: 13px; color: var(--red); margin-top: 8px; }
.admin-loading { color: var(--text-dim); }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left;
  padding: 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--bg);
}
.admin-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--bg);
  vertical-align: middle;
}
.admin-table tr.inactive td { opacity: 0.45; }
.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.admin-badge.active { background: #dcf2e1; color: #1b6b35; }
.admin-badge.inactive { background: var(--bg); color: var(--text-dim); }
.admin-badge.admin-role { background: #e8eeff; color: #2d4fa0; margin-left: 4px; }
.admin-badge.field { background: #e8f5e9; color: #2e7d32; margin-right: 4px; }
.admin-badge.office { background: #e3f2fd; color: #1565c0; margin-right: 4px; }
.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-row-actions button {
  padding: 6px 10px;
  font-size: 12px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}
.admin-btn-link { background: var(--primary); color: #fff; }
.admin-btn-danger { background: var(--red); color: #fff; }

/* Admin QR modal */
.admin-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 950;
  padding: 20px;
}
.admin-qr-modal.open { display: flex; }
.admin-qr-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.admin-qr-card h3 { font-size: 17px; margin-bottom: 4px; }
.admin-qr-sup { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.admin-qr-card svg { width: 100%; max-width: 240px; height: auto; }
.admin-link-row {
  background: var(--bg);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
  margin-top: 14px;
  text-align: left;
}
.admin-qr-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.admin-qr-actions button {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
}
.btn-ghost { background: var(--bg) !important; color: var(--text) !important; }

/* Modal prompt input */
.modal-prompt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  margin-top: 10px;
  background: var(--surface2);
}