:root {
  color-scheme: light;
  --cc-bg: #f4f7fb;
  --cc-surface: #ffffff;
  --cc-surface-2: #f8fafc;
  --cc-text: #111827;
  --cc-muted: #667085;
  --cc-border: #dde3ea;
  --cc-border-soft: #edf0f4;
  --cc-overlay: rgba(15, 23, 42, .34);
  --cc-accent: #10b981;
  --cc-accent-strong: #059669;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --cc-bg: #09090b;
  --cc-surface: #111113;
  --cc-surface-2: #17171a;
  --cc-text: #f4f4f5;
  --cc-muted: #71717a;
  --cc-border: #2c2f34;
  --cc-border-soft: #232529;
  --cc-overlay: rgba(0,0,0,.82);
}
html, body { background: var(--cc-bg) !important; color: var(--cc-text) !important; }
html[data-theme="light"] .bg-app-950,
html[data-theme="light"] .bg-app-950\/95 { background-color: rgba(244,247,251,.96) !important; }
html[data-theme="light"] .bg-app-900 { background-color: #fff !important; }
html[data-theme="light"] .bg-app-850 { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-app-800 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-black\/20 { background-color: rgba(15,23,42,.045) !important; }
html[data-theme="light"] .bg-black\/70 { background-color: rgba(15,23,42,.72) !important; color:#fff !important; }
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/\[\.025\],
html[data-theme="light"] .bg-white\/\[\.035\],
html[data-theme="light"] .bg-white\/\[\.02\] { background-color: rgba(15,23,42,.045) !important; }
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/8 { border-color: var(--cc-border-soft) !important; }
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/\[\.08\] { border-color: var(--cc-border) !important; }
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-zinc-400 { color: #334155 !important; }
html[data-theme="light"] .text-zinc-500 { color: #64748b !important; }
html[data-theme="light"] .text-zinc-600 { color: #7c8798 !important; }
html[data-theme="light"] .glass { background: rgba(255,255,255,.88) !important; border-color: var(--cc-border) !important; }
html[data-theme="light"] .modal-backdrop { background: rgba(15,23,42,.36) !important; }
html[data-theme="light"] .desktop-sidebar { background: #eef2f7 !important; }
html[data-theme="light"] .desktop-stat,
html[data-theme="light"] .desktop-new-job,
html[data-theme="light"] .job-launch-card { box-shadow: 0 16px 42px rgba(15,23,42,.08) !important; }
html[data-theme="light"] .desktop-table tr { border-color: rgba(15,23,42,.08) !important; }
html[data-theme="light"] .desktop-table th { color:#64748b !important; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color:#111827 !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color:#94a3b8 !important; }
html[data-theme="light"] .camera-shell { border-color: var(--cc-border) !important; }

html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }
html[data-large-controls="1"] button,
html[data-large-controls="1"] input,
html[data-large-controls="1"] select { min-height: 48px; }
html[data-theme="light"][data-contrast="1"] { --cc-border:#c3cbd6; --cc-border-soft:#d7dde5; }
html[data-theme="dark"][data-contrast="1"] { --cc-border:#41444a; --cc-border-soft:#33363b; }
html[data-contrast="1"][data-theme="light"] body { color:#000 !important; }
html[data-contrast="1"][data-theme="light"] .text-zinc-500,
html[data-contrast="1"][data-theme="light"] .text-zinc-600 { color:#374151 !important; }
html[data-theme="dark"][data-contrast="1"] .text-zinc-500,
html[data-theme="dark"][data-contrast="1"] .text-zinc-600 { color:#a1a1aa !important; }
html[data-contrast="1"] input,
html[data-contrast="1"] select,
html[data-contrast="1"] textarea {
  border-width: 2px !important;
  border-color: var(--cc-border) !important;
}
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }

.accessibility-option { border:1px solid var(--cc-border); background:rgba(127,127,127,.06); }
.settings-card { border:1px solid var(--cc-border); background:rgba(127,127,127,.04); }
.desktop-action-menu { position:relative; }
.desktop-action-menu > details > summary { list-style:none; cursor:pointer; }
.desktop-action-menu > details > summary::-webkit-details-marker { display:none; }
.desktop-action-popover { position:absolute; right:0; top:38px; z-index:30; min-width:180px; background:var(--cc-surface); border:1px solid var(--cc-border); border-radius:14px; padding:6px; box-shadow:0 16px 35px rgba(0,0,0,.16); }
.desktop-action-popover button { width:100%; text-align:left; padding:9px 10px; border-radius:9px; font-size:11px; }
.desktop-action-popover button:hover { background:rgba(127,127,127,.08); }
html[data-theme="light"] .desktop-nav-btn.is-active { background:rgba(15,23,42,.08) !important; color:#111827 !important; border-color:rgba(15,23,42,.12) !important; }
html[data-theme="light"] .desktop-table td { color:#334155 !important; border-color:rgba(15,23,42,.08) !important; }
html[data-theme="light"] .desktop-table th { border-color:rgba(15,23,42,.10) !important; }
html[data-theme="light"] #tagFilter { color-scheme:light !important; color:#111827 !important; }
html[data-theme="light"] #tagFilter option { background:#fff !important; color:#111827 !important; }
html[data-theme="light"] .desktop-evidence-thumb { background:#e5e7eb !important; }
html[data-theme="light"] .mobile-bottom-nav { background:rgba(244,247,251,.96) !important; border-color:var(--cc-border) !important; }

/* v8.9.3: neutral outlines follow the selected theme rather than retaining a
   white/dark Tailwind border from the previous theme. */
html[data-theme="light"] .focus\:border-white\/20:focus { border-color:#9eabba !important; }
html[data-theme="dark"] .focus\:border-white\/20:focus { border-color:#555961 !important; }
html[data-theme="light"] .settings-card,
html[data-theme="light"] .accessibility-option,
html[data-theme="light"] .cc-team-card,
html[data-theme="light"] .cc-final-photo-card { border-color:var(--cc-border) !important; }
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .accessibility-option,
html[data-theme="dark"] .cc-team-card,
html[data-theme="dark"] .cc-final-photo-card { border-color:var(--cc-border) !important; }

/* ClientCam v8.7 UI hardening */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; width:100%; overflow-x:hidden; }
body { width:100%; max-width:100%; overflow-x:hidden; }
.filter-menu > summary { list-style:none; }
.filter-menu > summary::-webkit-details-marker { display:none; }
.filter-menu-popover { position:absolute; z-index:70; top:calc(100% + 6px); left:0; min-width:160px; padding:6px; border-radius:14px; background:var(--cc-surface); border:1px solid var(--cc-border); box-shadow:0 16px 40px rgba(0,0,0,.18); }
.filter-menu-popover button { display:block; width:100%; min-height:40px; padding:8px 10px; border-radius:9px; text-align:left; font-size:13px; color:var(--cc-text); }
.filter-menu-popover button:hover, .filter-menu-popover button:focus { background:rgba(127,127,127,.10); outline:none; }
.desktop-table-scroll { overflow:visible; }
.desktop-table-shell { overflow:visible !important; }
.desktop-action-menu details[open] { position:relative; z-index:80; }
.fullscreen-shutter { width:76px; height:76px; border-radius:999px; border:4px solid rgba(255,255,255,.96); padding:6px; display:grid; place-items:center; }
.fullscreen-shutter span { display:block; width:100%; height:100%; border-radius:999px; background:#fff; }
.fullscreen-shutter:active { transform:scale(.96); }

@media (max-width: 1023px) {
  /* Prevent iOS Safari from auto-zooming focused controls. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px !important; }
  #mobileBottomNav { padding-bottom:max(8px, env(safe-area-inset-bottom)); }
  [data-mobile-screen] { display:none !important; }
  body[data-mobile-view="capture"] #jobLaunchCard,
  body[data-mobile-view="capture"] #mobileCaptureSection { display:block !important; }
  body[data-mobile-view="capture"] #mobileContinueCard:not(.hidden),
  body[data-mobile-view="capture"] #companySetupBanner:not(.hidden) { display:block !important; }
  body[data-mobile-view="jobs"] #mobileHistorySection,
  body[data-mobile-view="clients"] #mobileHistorySection { display:block !important; }
  body[data-mobile-view="team"] #mobileTeamScreen { display:block !important; }
  body[data-mobile-view="account"] #mobileAccountScreen { display:block !important; }
  body[data-mobile-view="jobs"] #clientsViewBtn,
  body[data-mobile-view="clients"] #jobsViewBtn,
  body[data-mobile-view="clients"] #archivedViewBtn { display:none !important; }
  body[data-mobile-view="capture"] footer,
  body[data-mobile-view="jobs"] footer,
  body[data-mobile-view="clients"] footer,
  body[data-mobile-view="team"] footer,
  body[data-mobile-view="account"] footer { display:none !important; }
  .field-experience { padding-bottom:88px !important; }
  #cameraShell { min-height:52vh; aspect-ratio:auto !important; }
  .desktop-action-popover { position:static; margin-top:6px; }
}
.preference-choice { min-height:42px; border:1px solid var(--cc-border); border-radius:12px; background:rgba(127,127,127,.06); color:var(--cc-text); font-size:13px; font-weight:700; }
.preference-choice.is-selected { background:var(--cc-accent); color:#04130d; border-color:transparent; box-shadow:0 6px 20px rgba(16,185,129,.18); }
html[data-theme="dark"] .preference-choice.is-selected { color:#03110b; }

/* ClientCam v8.8.5 — mobile capture/detail layout hardening */
@media (max-width: 767px) {
  /* Modal sheets use the real visual viewport and stay clear of Safari/Chrome UI. */
  #previewModal,
  #visitModal,
  #startVisitModal,
  #accountModal,
  #teamModal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #previewModal > div,
  #visitModal > div {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Keep the evidence form compact enough that actions remain reachable. */
  #previewModal .scroll-area {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 18px !important;
  }
  #previewModal #previewImage {
    max-height: 34dvh !important;
    min-height: 180px;
  }
  #previewModal .grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  #previewModal .grid.grid-cols-2.sm\:grid-cols-4 > div {
    padding: 8px !important;
    min-width: 0;
  }
  #previewModal .grid.grid-cols-2.sm\:grid-cols-4 p:last-child {
    overflow-wrap: anywhere;
  }

  /* The verify controls are always visible and thumb-friendly. */
  #previewModal > div > .shrink-0:last-child {
    position: sticky;
    bottom: 0;
    z-index: 90;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--cc-surface) 96%, transparent) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 -12px 30px rgba(0,0,0,.14);
  }
  #retakeBtn {
    grid-column: 1 / -1;
    order: 3;
    min-height: 44px !important;
  }
  #addAnotherBtn,
  #finishVisitBtn {
    min-height: 54px !important;
    height: auto !important;
    padding: 10px 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    font-size: 13px !important;
  }
  #finishVisitBtn {
    box-shadow: 0 8px 24px rgba(16,185,129,.18);
  }

  /* Avoid cramped two-column form fields on narrow phones. */
  #previewModal .space-y-3 > .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  #photoTypeButtons {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  #photoTypeButtons button {
    min-height: 42px !important;
    font-size: 11px !important;
  }

  /* Job details action footer also stays within the safe area. */
  #visitModal > div > .shrink-0:last-child {
    position: sticky;
    bottom: 0;
    z-index: 80;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--cc-surface) 96%, transparent) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  #visitModal > div > .shrink-0:last-child button {
    min-width: 0;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }

  /* Mobile cards should fill the viewport naturally instead of preserving desktop widths. */
  .field-experience,
  [data-mobile-screen],
  #mobileHistorySection,
  #mobileTeamScreen,
  #mobileAccountScreen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .job-launch-card,
  #mobileContinueCard,
  #companySetupBanner {
    border-radius: 18px !important;
  }
}

@media (max-width: 390px) {
  #previewModal #previewImage { max-height: 30dvh !important; min-height: 150px; }
  #previewModal .grid.grid-cols-2.sm\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #previewModal > div > .shrink-0:last-child { grid-template-columns: 1fr !important; }
  #retakeBtn { grid-column: auto; order: 3; }
  #addAnotherBtn, #finishVisitBtn { min-height: 52px !important; }
}

/* ClientCam v8.8.6 — iPhone evidence sheet / bottom navigation fix */
@media (max-width: 767px) {
  /* A modal is a separate screen on mobile. Never let the app nav sit above it. */
  body.cc-modal-open #mobileBottomNav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* previewModal must sit above every fixed app control, including legacy nav z-indexes. */
  #previewModal {
    z-index: 140 !important;
    inset: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #previewModal > div {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Only the middle content scrolls; header and verification actions stay on-screen. */
  #previewModal > div > .shrink-0:first-child {
    flex: 0 0 auto !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }
  #previewModal .scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 12px !important;
  }
  #previewModal #previewImage {
    max-height: min(29svh, 300px) !important;
    min-height: 0 !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Footer is part of the fixed-height flex sheet, not part of its scroll area. */
  #previewModal > div > .shrink-0:last-child {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    z-index: 145 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    background: var(--cc-surface) !important;
    border-top: 1px solid var(--cc-border) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.12) !important;
  }

  /* Finish is the primary thumb action and is always visible. */
  #finishVisitBtn {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 56px !important;
    background: #10b981 !important;
    color: #04130d !important;
    border-color: transparent !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  #addAnotherBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 48px !important;
  }
  #retakeBtn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: initial !important;
    min-height: 48px !important;
  }
}

@media (max-width: 390px) {
  #previewModal #previewImage { max-height: min(24svh, 230px) !important; }
  #previewModal > div > .shrink-0:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
  #finishVisitBtn { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  #addAnotherBtn { grid-column: 1 !important; grid-row: 2 !important; }
  #retakeBtn { grid-column: 2 !important; grid-row: 2 !important; }
}

/* ClientCam v8.8.9 — dedicated mobile active-job workspace */
@media (max-width: 1023px) {
  body.cc-job-session #companySetupBanner,
  body.cc-job-session #jobLaunchCard,
  body.cc-job-session #mobileContinueCard,
  body.cc-job-session #mobileHistorySection,
  body.cc-job-session #mobileTeamScreen,
  body.cc-job-session #mobileAccountScreen,
  body.cc-job-session footer {
    display: none !important;
  }

  body.cc-job-session #jobSessionBar {
    display: block !important;
  }

  body.cc-job-session #mobileCaptureSection {
    display: grid !important;
  }

  /* The job is its own screen. Keep the bottom app nav out of the way until Home is tapped. */
  body.cc-job-session #mobileBottomNav {
    display: none !important;
  }

  body.cc-job-session .field-experience {
    padding-top: 10px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  body.cc-job-session #cameraShell {
    min-height: min(58svh, 620px);
  }

  #jobSessionBar {
    position: sticky;
    top: 0;
    z-index: 45;
    background: color-mix(in srgb, var(--cc-surface) 94%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ============================================================
   ClientCam v8.9.0 — mobile polish, permissions and dark borders
============================================================ */
.cc-inline-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  animation: cc-spin-v9 .7s linear infinite;
}
@keyframes cc-spin-v9 { to { transform: rotate(360deg); } }
html[data-reduce-motion="1"] .cc-inline-spinner { animation-duration: 1.4s; }

.cc-permission-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--cc-border);
  border-radius:14px;
  padding:12px;
  background:rgba(127,127,127,.05);
}
.cc-permission-option b { display:block; font-size:12px; }
.cc-permission-option small { display:block; margin-top:3px; color:var(--cc-muted); font-size:10px; line-height:1.4; }
.cc-permission-option input { width:20px; height:20px; flex:0 0 auto; }
.desktop-action-popover .cc-danger-action { color:#ef4444; }

/* Dark mode should use quiet charcoal separators, not bright white outlines. */
html[data-theme="dark"] .border-white\/5,
html[data-theme="dark"] .border-white\/8 {
  border-color: var(--cc-border-soft) !important;
}
html[data-theme="dark"] .border-white\/10,
html[data-theme="dark"] .border-white\/\[\.08\] {
  border-color: var(--cc-border) !important;
}
html[data-theme="dark"] .glass,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .accessibility-option,
html[data-theme="dark"] .desktop-stat {
  border-color: var(--cc-border) !important;
}
html[data-theme="dark"] .desktop-table th,
html[data-theme="dark"] .desktop-table td,
html[data-theme="dark"] .desktop-table tr {
  border-color: var(--cc-border-soft) !important;
}
html[data-theme="dark"] .camera-shell { border-color: var(--cc-border) !important; }

/* Mobile navigation is visually segmented and can collapse into its attached arrow. */
.cc-mobile-nav-toggle {
  position:absolute;
  left:50%;
  top:-19px;
  transform:translateX(-50%);
  width:54px;
  height:20px;
  border:1px solid var(--cc-border);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:var(--cc-surface);
  color:var(--cc-muted);
  font-size:16px;
  font-weight:800;
  line-height:18px;
  box-shadow:0 -5px 16px rgba(0,0,0,.08);
}
.mobile-bottom-nav { gap:4px; }
.mobile-bottom-nav .mobile-nav-btn {
  max-width:none !important;
  border:1px solid var(--cc-border);
  border-radius:12px !important;
  background:rgba(127,127,127,.045);
}
.mobile-bottom-nav .mobile-nav-btn[aria-current="page"] {
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.34);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.08);
}
body.cc-mobile-nav-collapsed #mobileBottomNav {
  min-height:0 !important;
  height:max(14px, env(safe-area-inset-bottom)) !important;
  padding:0 !important;
  border-top:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.cc-mobile-nav-collapsed #mobileBottomNav .mobile-nav-btn { display:none !important; }
body.cc-mobile-nav-collapsed #mobileBottomNav .cc-mobile-nav-toggle {
  top:-26px;
  border-bottom:1px solid var(--cc-border);
  border-radius:14px;
}

@media (max-width: 1023px) {
  /* Settings lives in the bottom navigation; don't waste an entire header row on it. */
  #accountBtn { display:none !important; }
  .header-actions {
    width:auto !important;
    display:flex !important;
    grid-template-columns:none !important;
    order:0 !important;
    margin-left:auto;
  }
  .header-actions button { width:auto !important; }

  /* Dedicated active-job screen: camera first, status concise. */
  body.cc-job-session #cameraShell {
    min-height: clamp(285px, 42svh, 430px) !important;
    max-height: 430px;
    aspect-ratio: 4 / 3 !important;
  }
  body.cc-job-session #mobileCaptureSection > aside > *:not(:first-child) { display:none !important; }
  body.cc-job-session #mobileCaptureSection > aside > :first-child {
    border-radius:18px !important;
    padding:12px !important;
  }
  body.cc-job-session #mobileCaptureSection > aside > :first-child .mb-4 { margin-bottom:8px !important; }
  body.cc-job-session #mobileCaptureSection > aside > :first-child .space-y-2 {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  body.cc-job-session #mobileCaptureSection > aside > :first-child .space-y-2 > div {
    border:0 !important;
    padding:7px 6px !important;
    border-radius:10px;
    background:rgba(127,127,127,.055);
    display:block !important;
    text-align:center;
  }
  body.cc-job-session #mobileCaptureSection > aside > :first-child .space-y-2 > div span { display:block; }
  body.cc-job-session #mobileCaptureSection > aside > :first-child .space-y-2 > div span:last-child { margin-top:3px; }
  body.cc-job-session #advancedCameraControls { margin-bottom:0 !important; }
  body.cc-job-session #advancedCameraControls > * { min-width:0; }
  body.cc-job-session #zoomWrap { flex:1 1 180px; }
  body.cc-job-session #importPhotoBtn { flex:1 1 120px; }
  body.cc-job-session .shutter { transform:scale(.88); }

  #jobSessionBar {
    padding:9px !important;
    border-radius:16px !important;
    margin-bottom:8px !important;
  }
  #jobSessionBar > div { gap:7px !important; }
  #jobSessionHomeBtn { width:44px; padding:0 !important; font-size:0 !important; }
  #jobSessionHomeBtn::after { content:"←"; font-size:20px; }
  #jobSessionTitle { font-size:13px !important; }
  #jobSessionMeta { font-size:9px !important; }
  .cc-job-session-actions { gap:5px !important; }
  #finishActiveJobBtn, #cancelActiveJobBtn {
    height:40px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:10px !important;
  }

  /* Clear visual division between full-screen mobile sections. */
  [data-mobile-screen="jobs"],
  [data-mobile-screen="clients"],
  [data-mobile-screen="team"],
  [data-mobile-screen="account"] {
    border-top:1px solid var(--cc-border);
    padding-top:12px;
  }
}

@media (max-width: 420px) {
  .field-experience { padding-left:7px !important; padding-right:7px !important; }
  body.cc-job-session #cameraShell { min-height:270px !important; }
  #jobSessionBar { margin-left:0 !important; margin-right:0 !important; }
  #jobSessionBar .cc-job-session-actions { flex-direction:column; }
  #finishActiveJobBtn, #cancelActiveJobBtn { height:31px !important; padding:0 8px !important; }
  .mobile-bottom-nav { gap:3px; padding-left:5px !important; padding-right:5px !important; }
  .mobile-bottom-nav .mobile-nav-btn { font-size:9px !important; }
}

/* ============================================================
   ClientCam v8.9.1 — mobile workflow + team management polish
============================================================ */

/* Team management */
.cc-team-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}
.cc-team-search {
  min-width:0;
  flex:1 1 320px;
  height:44px;
  border:1px solid var(--cc-border);
  border-radius:14px;
  background:rgba(127,127,127,.045);
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
}
.cc-team-search svg { width:17px; height:17px; color:var(--cc-muted); flex:0 0 auto; }
.cc-team-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--cc-text); font-size:13px; }
.cc-team-search input::placeholder { color:var(--cc-muted); }
.cc-team-filter { display:flex; gap:4px; padding:4px; border:1px solid var(--cc-border); border-radius:14px; background:rgba(127,127,127,.04); }
.cc-team-filter button { min-height:34px; padding:0 11px; border-radius:10px; color:var(--cc-muted); font-size:10px; font-weight:800; }
.cc-team-filter button.is-active { background:var(--cc-text); color:var(--cc-surface); }
.cc-team-section { margin-top:18px; }
.cc-team-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cc-team-card {
  border:1px solid var(--cc-border);
  border-radius:18px;
  background:rgba(127,127,127,.035);
  overflow:hidden;
}
.cc-team-card-main { padding:15px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; }
.cc-team-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.cc-team-name { font-size:14px; font-weight:850; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cc-team-email { color:var(--cc-muted); font-size:11px; margin-top:3px; overflow-wrap:anywhere; }
.cc-team-meta { color:var(--cc-muted); font-size:10px; margin-top:8px; line-height:1.5; }
.cc-team-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cc-team-actions button { min-height:36px; padding:0 11px; border:1px solid var(--cc-border); border-radius:11px; font-size:10px; font-weight:800; }
.cc-team-actions .danger { color:#ef4444; border-color:rgba(239,68,68,.24); background:rgba(239,68,68,.07); }
.cc-team-permissions { border-top:1px solid var(--cc-border); padding:14px 15px 15px; background:rgba(127,127,127,.02); }
.cc-team-permissions-title { font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.13em; color:var(--cc-muted); }
.cc-permission-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.cc-permission-preset { border:1px solid var(--cc-border); border-radius:14px; padding:11px; text-align:left; background:rgba(127,127,127,.035); min-width:0; }
.cc-permission-preset strong { display:block; font-size:11px; color:var(--cc-text); }
.cc-permission-preset span { display:block; margin-top:4px; color:var(--cc-muted); font-size:9px; line-height:1.45; }
.cc-permission-preset.is-selected { border-color:rgba(16,185,129,.48); background:rgba(16,185,129,.10); box-shadow:inset 0 0 0 1px rgba(16,185,129,.08); }
.cc-team-capabilities { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cc-team-capability { border:1px solid var(--cc-border); border-radius:999px; padding:5px 8px; font-size:9px; color:var(--cc-muted); background:rgba(127,127,127,.035); }
.cc-team-capability.yes { color:#059669; border-color:rgba(16,185,129,.28); background:rgba(16,185,129,.07); }
.cc-team-capability.no { color:#a1a1aa; }
.cc-team-invite-card { border:1px solid rgba(245,158,11,.24); background:rgba(245,158,11,.045); border-radius:16px; padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.cc-team-empty { border:1px dashed var(--cc-border); border-radius:16px; padding:22px; color:var(--cc-muted); font-size:12px; text-align:center; }

/* Final job review */
.cc-final-review-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; background:var(--cc-surface); }
.cc-final-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cc-final-photo-card { border:1px solid var(--cc-border); border-radius:16px; overflow:hidden; background:rgba(127,127,127,.035); }
.cc-final-photo-card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#09090b; display:block; }
.cc-final-photo-card-body { padding:11px; }
.cc-final-photo-top { display:flex; justify-content:space-between; align-items:start; gap:8px; }
.cc-final-photo-remove { min-height:34px; padding:0 10px; border-radius:10px; color:#ef4444; border:1px solid rgba(239,68,68,.24); background:rgba(239,68,68,.06); font-size:10px; font-weight:800; }
.cc-final-review-note { border:1px solid rgba(16,185,129,.25); background:rgba(16,185,129,.07); border-radius:15px; padding:12px; margin-bottom:12px; }

/* Post-verification decision card */
.cc-post-verify-actions { border:1px solid rgba(16,185,129,.28); background:rgba(16,185,129,.075); border-radius:18px; padding:13px; margin-bottom:10px; }
body.cc-job-session #postVerifyActions:not(.hidden) { display:block !important; }

/* External, reliable mobile nav handle. It stays tappable even when the tabs move away. */
.cc-mobile-nav-toggle {
  position:fixed !important;
  z-index:58 !important;
  left:50% !important;
  top:auto !important;
  bottom:calc(68px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:58px !important;
  height:25px !important;
  border:1px solid var(--cc-border) !important;
  border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
  background:var(--cc-surface) !important;
  color:var(--cc-muted) !important;
  display:none;
  align-items:center;
  justify-content:center;
  touch-action:manipulation;
  box-shadow:0 -4px 16px rgba(0,0,0,.10);
  transition:bottom .2s ease, transform .2s ease;
}
.cc-mobile-nav-toggle span { font-size:17px; line-height:1; pointer-events:none; }
#mobileBottomNav { transition:transform .2s ease, opacity .2s ease; will-change:transform; }
body.cc-mobile-nav-collapsed #mobileBottomNav {
  display:flex !important;
  height:auto !important;
  min-height:0 !important;
  padding:8px 8px max(8px, env(safe-area-inset-bottom)) !important;
  border-top:1px solid var(--cc-border) !important;
  background:color-mix(in srgb, var(--cc-surface) 96%, transparent) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  transform:translateY(calc(100% + 8px));
  opacity:.2;
  pointer-events:none;
}
body.cc-mobile-nav-collapsed #mobileBottomNav .mobile-nav-btn { display:flex !important; }
body.cc-mobile-nav-collapsed #mobileNavToggleBtn {
  bottom:max(5px, env(safe-area-inset-bottom)) !important;
  border-bottom:1px solid var(--cc-border) !important;
  border-radius:14px !important;
}
body.cc-mobile-nav-collapsed main.scroll-area { padding-bottom:28px !important; }

@media (max-width:1023px) {
  /* The collapse handle is mobile-only. The base rule intentionally keeps it
     hidden so later component CSS can never leak it into the desktop workspace. */
  #mobileNavToggleBtn { display:flex !important; }

  /* Mobile header stays clean: Settings is a bottom tab, not a second header button. */
  #accountBtn { display:none !important; }
  body.cc-job-session .header-actions { display:none !important; }
  body.cc-job-session #mobileNavToggleBtn { display:none !important; }

  /* Make the active-job header obvious without stealing half the screen. */
  #jobSessionBar { padding:10px !important; }
  .cc-job-session-top { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px !important; }
  .cc-job-home-btn,
  .cc-job-details-btn { height:44px; border-radius:13px; border:1px solid var(--cc-border); font-size:11px; font-weight:850; }
  .cc-job-home-btn { min-width:92px; padding:0 14px; background:var(--cc-text); color:var(--cc-surface); }
  .cc-job-details-btn { min-width:68px; padding:0 11px; background:rgba(127,127,127,.055); color:var(--cc-text); }
  #jobSessionHomeBtn { width:auto !important; padding:0 14px !important; font-size:11px !important; }
  #jobSessionHomeBtn::after { content:none !important; }
  .cc-job-session-actions { display:grid !important; grid-template-columns:1.25fr .8fr; gap:7px !important; margin-top:8px; }
  .cc-job-finish-btn,
  .cc-job-cancel-btn { min-height:44px !important; border-radius:13px; font-size:11px !important; font-weight:900; }
  .cc-job-finish-btn { background:#10b981; color:#fff; border:1px solid transparent; }
  .cc-job-cancel-btn { background:rgba(239,68,68,.07); color:#ef4444; border:1px solid rgba(239,68,68,.24); }

  /* Final review is a true mobile screen and never sits underneath Safari chrome/app nav. */
  #finalReviewModal { padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
  #finalReviewModal > .cc-final-review-shell { width:100% !important; max-width:none !important; height:100svh !important; max-height:100svh !important; border-radius:0 !important; border-left:0 !important; border-right:0 !important; }
  .cc-final-review-header { padding-top:max(14px, env(safe-area-inset-top)) !important; }
  .cc-final-review-actions { grid-template-columns:1fr !important; padding-bottom:max(12px, env(safe-area-inset-bottom)) !important; }
  .cc-final-review-grid { grid-template-columns:1fr 1fr; }
  body.cc-modal-open #mobileNavToggleBtn { display:none !important; }

  .cc-team-toolbar { flex-direction:column; align-items:stretch; }
  .cc-team-search { flex-basis:auto; }
  .cc-team-filter { width:100%; }
  .cc-team-filter button { flex:1; }
  .cc-team-card-main { grid-template-columns:1fr; }
  .cc-team-actions { justify-content:flex-start; }
  .cc-permission-presets { grid-template-columns:1fr; }
  .cc-team-invite-card { grid-template-columns:1fr; }
}

@media (max-width:420px) {
  .cc-job-session-top { grid-template-columns:auto minmax(0,1fr); }
  .cc-job-details-btn { grid-column:1 / -1; width:100%; height:38px; }
  .cc-job-session-actions { grid-template-columns:1fr 1fr !important; }
  .cc-job-finish-btn,.cc-job-cancel-btn { min-height:44px !important; height:44px !important; padding:0 8px !important; }
  .cc-final-review-grid { grid-template-columns:1fr; }
  .cc-mobile-nav-toggle { bottom:calc(66px + env(safe-area-inset-bottom)) !important; }
}

.cc-big-spinner {
  width:48px;
  height:48px;
  border-radius:999px;
  border:4px solid color-mix(in srgb, var(--cc-text) 22%, transparent);
  border-top-color:#10b981;
  display:inline-block;
  animation:cc-spin-v9 .75s linear infinite;
}
html[data-reduce-motion="1"] .cc-big-spinner { animation-duration:1.5s; }
@media (max-width:767px) {
  #finishFlowOverlay { padding:0 !important; }
  #finishFlowOverlay > div { width:100% !important; max-width:none !important; min-height:100svh; border-radius:0 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px !important; }
}


/* ============================================================
   ClientCam v8.9.3 — logo-led colour system + readable light UI
   Blue follows the ClientCam "C" mark; green is reserved for
   verified/success states and is darkened where used as text.
============================================================ */
:root {
  --cc-brand-blue: #176da8;
  --cc-brand-blue-strong: #0b5689;
  --cc-brand-blue-deep: #073f68;
  --cc-brand-blue-soft: #eaf4fb;
  --cc-brand-blue-line: #a9c9df;
  --cc-success-text: #08783f;
  --cc-success-soft: rgba(22, 163, 74, .10);
}
html[data-theme="dark"] {
  --cc-brand-blue: #4ba2dc;
  --cc-brand-blue-strong: #77bce7;
  --cc-brand-blue-deep: #b9dff5;
  --cc-brand-blue-soft: rgba(43, 132, 190, .12);
  --cc-brand-blue-line: #315e7b;
  --cc-success-text: #6ee7a7;
  --cc-success-soft: rgba(34, 197, 94, .10);
}

/* Green copy was too pale in light mode. Keep semantic green, but use a
   contrast-safe shade for text. Blue remains the primary navigation/action colour. */
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400,
html[data-theme="light"] .text-emerald-500,
html[data-theme="light"] .text-emerald-600 { color: var(--cc-success-text) !important; }
html[data-theme="dark"] .text-emerald-300,
html[data-theme="dark"] .text-emerald-400,
html[data-theme="dark"] .text-emerald-500,
html[data-theme="dark"] .text-emerald-600 { color: var(--cc-success-text) !important; }

.cc-brand-eyebrow,
.cc-brand-note { color: var(--cc-brand-blue-strong) !important; }
html[data-theme="dark"] .cc-brand-eyebrow,
html[data-theme="dark"] .cc-brand-note { color: var(--cc-brand-blue-strong) !important; }

.cc-primary-action {
  color:#fff !important;
  background:linear-gradient(135deg, #227fba 0%, #0d5e96 100%) !important;
  border:1px solid rgba(7,63,104,.25) !important;
  box-shadow:0 12px 34px rgba(13,94,150,.23) !important;
}
.cc-primary-action:hover { filter:brightness(1.04); }
.cc-primary-action:focus-visible { outline:3px solid color-mix(in srgb, var(--cc-brand-blue) 34%, transparent); outline-offset:2px; }
html[data-theme="dark"] .cc-primary-action {
  background:linear-gradient(135deg, #2684bd 0%, #115f95 100%) !important;
  border-color:rgba(119,188,231,.30) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.30) !important;
}

/* The light New Job card must be light. The old dark gradient made body copy
   disappear into the background on iPhone. */
html[data-theme="light"] .job-launch-card {
  color:#0f172a !important;
  background:
    radial-gradient(circle at 86% 2%, rgba(35,126,184,.14), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #edf6fb 58%, #f7fafc 100%) !important;
  border:1px solid var(--cc-brand-blue-line) !important;
  box-shadow:0 16px 38px rgba(15,66,99,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] .job-launch-card #jobLaunchTitle { color:#0b1726 !important; }
html[data-theme="light"] .job-launch-card #jobLaunchText { color:#3d4b5e !important; }
html[data-theme="light"] .job-launch-card #jobLaunchEyebrow { color:var(--cc-brand-blue-strong) !important; }
html[data-theme="light"] .job-launch-card.has-job {
  background:
    radial-gradient(circle at 86% 2%, rgba(35,126,184,.13), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #eef6fb 58%, #f8fafc 100%) !important;
  border-color:var(--cc-brand-blue-line) !important;
}

/* Desktop quick action now uses the same logo-led palette. */
html[data-theme="light"] .desktop-new-job {
  background:linear-gradient(135deg, #f8fcff 0%, #eaf4fb 58%, #f7fafc 100%) !important;
  border-color:var(--cc-brand-blue-line) !important;
}
html[data-theme="dark"] .desktop-new-job {
  background:linear-gradient(135deg, rgba(31,119,176,.18), rgba(31,119,176,.055)) !important;
  border-color:rgba(75,162,220,.26) !important;
}

/* Mobile tabs use the blue ClientCam C rather than pale green. */
.mobile-bottom-nav .mobile-nav-btn[aria-current="page"] {
  color:var(--cc-brand-blue-strong) !important;
  background:color-mix(in srgb, var(--cc-brand-blue) 12%, transparent) !important;
  border-color:color-mix(in srgb, var(--cc-brand-blue) 38%, var(--cc-border)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cc-brand-blue) 10%, transparent) !important;
}
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-btn[aria-current="page"] {
  color:var(--cc-brand-blue-strong) !important;
}

/* Team permission success chips remain semantic green, but readable. */
.cc-team-capability.yes { color:var(--cc-success-text) !important; }
.cc-permission-preset.is-selected {
  border-color:color-mix(in srgb, var(--cc-brand-blue) 52%, var(--cc-border)) !important;
  background:color-mix(in srgb, var(--cc-brand-blue) 10%, transparent) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cc-brand-blue) 8%, transparent) !important;
}

/* Personalised desktop company identity. */
.cc-desktop-company {
  border-color:var(--cc-border);
  background:color-mix(in srgb, var(--cc-surface) 88%, var(--cc-brand-blue-soft));
  box-shadow:0 5px 18px rgba(15,23,42,.05);
}
.cc-desktop-company-label { color:var(--cc-muted); }
.cc-desktop-company-name { color:var(--cc-text); }
.cc-desktop-company-logo {
  width:32px;
  height:32px;
  padding:3px;
  border:1px solid var(--cc-border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
html[data-theme="dark"] .cc-desktop-company { box-shadow:none; }

@media (max-width:1023px) {
  #desktopCompanyIdentity { display:none !important; }
}

/* Brand the selected settings/navigation state with ClientCam blue as well. */
.preference-choice.is-selected {
  background:var(--cc-brand-blue) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 6px 20px rgba(23,109,168,.18) !important;
}
html[data-theme="light"] .desktop-nav-btn.is-active {
  background:var(--cc-brand-blue-soft) !important;
  color:var(--cc-brand-blue-deep) !important;
  border-color:var(--cc-brand-blue-line) !important;
}
html[data-theme="dark"] .desktop-nav-btn.is-active {
  background:rgba(75,162,220,.12) !important;
  color:var(--cc-brand-blue-deep) !important;
  border-color:rgba(75,162,220,.28) !important;
}

/* ============================================================
   ClientCam v8.10.0 — builder workflow UI
============================================================ */
.cc-network-status {
  position: sticky;
  top: 0;
  z-index: 44;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  background:var(--cc-surface);
  border-bottom:1px solid var(--cc-border);
  color:var(--cc-text);
  font-size:11px;
  font-weight:800;
  box-shadow:0 4px 18px rgba(15,23,42,.05);
}
.cc-network-status.hidden { display:none !important; }
.cc-network-status.is-offline { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.cc-network-status.is-uploading { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.cc-network-status.is-synced { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
html[data-theme="dark"] .cc-network-status.is-offline { background:#2a1710; color:#fdba74; border-color:#7c2d12; }
html[data-theme="dark"] .cc-network-status.is-uploading { background:#0f1e33; color:#93c5fd; border-color:#1e3a5f; }
html[data-theme="dark"] .cc-network-status.is-synced { background:#0d2518; color:#86efac; border-color:#14532d; }
.cc-network-status-dot { width:8px;height:8px;border-radius:999px;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 15%,transparent); }

.cc-today-panel { border:1px solid var(--cc-border); background:var(--cc-surface); border-radius:24px; padding:14px; box-shadow:0 10px 30px rgba(15,23,42,.055); }
html[data-theme="dark"] .cc-today-panel { box-shadow:none; }
.cc-today-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cc-today-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.cc-today-card { border:1px solid var(--cc-border); border-radius:16px; padding:11px; background:var(--cc-surface-2); min-width:0; }
.cc-today-card strong { display:block; font-size:12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-today-card small { display:block; margin-top:4px; font-size:10px; color:var(--cc-muted); line-height:1.35; }
.cc-today-card button { margin-top:8px; min-height:36px; padding:0 10px; border-radius:10px; background:var(--cc-brand-blue); color:#fff; font-size:10px; font-weight:850; }
.cc-today-stat { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cc-today-stat b { font-size:20px; color:var(--cc-brand-blue-deep); }
.cc-install-card { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid color-mix(in srgb,var(--cc-brand-blue) 30%,var(--cc-border)); background:var(--cc-brand-blue-soft); border-radius:16px; padding:12px; }
.cc-install-card.hidden { display:none !important; }
.cc-compact-btn { min-height:36px; padding:0 11px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface-2); color:var(--cc-text); font-size:10px; font-weight:800; }
.cc-primary-mini { min-height:36px; padding:0 12px; border-radius:10px; background:var(--cc-brand-blue); color:#fff; font-size:10px; font-weight:900; }
.cc-new-job-actions { display:grid; gap:8px; min-width:160px; }
.cc-secondary-action { border:1px solid color-mix(in srgb,var(--cc-brand-blue) 35%,var(--cc-border)); background:var(--cc-brand-blue-soft); color:var(--cc-brand-blue-deep); }

.cc-job-checklist { display:flex; flex-wrap:wrap; gap:6px; }
.cc-check-pill { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 9px; border-radius:999px; border:1px solid var(--cc-border); background:var(--cc-surface-2); color:var(--cc-muted); font-size:9px; font-weight:850; }
.cc-check-pill.is-complete { color:#166534; border-color:#86efac; background:#f0fdf4; }
.cc-check-pill.is-missing { color:#9a3412; border-color:#fed7aa; background:#fff7ed; }
.cc-check-pill.is-required-missing { color:#991b1b; border-color:#fecaca; background:#fef2f2; }
html[data-theme="dark"] .cc-check-pill.is-complete { color:#86efac; border-color:#14532d; background:#0d2518; }
html[data-theme="dark"] .cc-check-pill.is-missing { color:#fdba74; border-color:#7c2d12; background:#2a1710; }
html[data-theme="dark"] .cc-check-pill.is-required-missing { color:#fca5a5; border-color:#7f1d1d; background:#2b1010; }
.cc-job-contact-row { display:flex; flex-wrap:wrap; gap:6px; }
.cc-job-contact-row a,.cc-job-contact-row button { min-height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface-2); color:var(--cc-text); font-size:9px; font-weight:850; display:inline-flex; align-items:center; justify-content:center; }
.cc-job-secondary-btn { min-height:44px; border-radius:13px; border:1px solid var(--cc-border); background:var(--cc-surface-2); color:var(--cc-text); font-size:11px; font-weight:900; }

.cc-company-checklist { border-top:1px solid var(--cc-border); padding-top:16px; }
.cc-checklist-setting-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cc-checklist-setting { display:grid; gap:8px; border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:14px; padding:11px; }
.cc-checklist-setting strong { font-size:12px; }
.cc-checklist-setting label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; color:var(--cc-muted); }
.cc-checklist-setting input[type="number"] { width:62px; height:36px; border-radius:9px; border:1px solid var(--cc-border); background:var(--cc-surface); color:var(--cc-text); padding:0 8px; }
.cc-checklist-setting .cc-check-required { justify-content:flex-start; }

.cc-field-label { display:grid; gap:7px; color:var(--cc-muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.cc-field-input,.cc-field-textarea { width:100%; border:1px solid var(--cc-border); border-radius:12px; background:var(--cc-surface-2); color:var(--cc-text); padding:11px 12px; font-size:14px; text-transform:none; letter-spacing:normal; font-weight:500; outline:none; }
.cc-field-input { min-height:44px; }
.cc-field-textarea { resize:vertical; }
.cc-file-input { display:block; width:100%; border:1px solid var(--cc-border); border-radius:12px; padding:10px; background:var(--cc-surface-2); color:var(--cc-muted); font-size:12px; text-transform:none; letter-spacing:normal; }
.cc-field-help { display:block; font-size:9px; line-height:1.45; text-transform:none; letter-spacing:normal; font-weight:500; color:var(--cc-muted); }
.cc-diary-editor { display:grid; gap:12px; }
.cc-diary-entry { border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:16px; padding:13px; }
.cc-diary-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.cc-diary-field { border:1px solid var(--cc-border-soft); border-radius:11px; padding:10px; background:var(--cc-surface); }
.cc-diary-field b { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--cc-muted); }
.cc-diary-field p { margin-top:5px; font-size:11px; line-height:1.45; white-space:pre-wrap; }
.cc-diary-photos { display:flex; gap:7px; overflow-x:auto; margin-top:10px; }
.cc-diary-photos img { width:92px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--cc-border); background:#000; }

.cc-annotation-tools { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.cc-annotation-tools button { min-height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface-2); color:var(--cc-text); font-size:10px; font-weight:850; }
.cc-annotation-tools button.is-active { background:var(--cc-brand-blue); color:#fff; border-color:transparent; }
.cc-annotation-canvas-wrap { width:100%; overflow:auto; border:1px solid var(--cc-border); background:#0a0a0a; border-radius:16px; touch-action:none; }
#annotationCanvas { display:block; max-width:100%; height:auto; margin:0 auto; touch-action:none; }
.cc-annotation-thumb { position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--cc-border); background:#000; }
.cc-annotation-thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.cc-annotation-badge { position:absolute; top:7px; left:7px; border-radius:999px; padding:4px 7px; background:rgba(0,0,0,.72); color:#fff; font-size:8px; font-weight:900; letter-spacing:.05em; }

.cc-final-intelligence { border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:16px; padding:13px; margin-bottom:12px; }
.cc-final-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:10px; }
.cc-final-metric { border:1px solid var(--cc-border-soft); background:var(--cc-surface); border-radius:11px; padding:9px; text-align:center; }
.cc-final-metric b { display:block; font-size:15px; }
.cc-final-metric span { display:block; margin-top:2px; color:var(--cc-muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }
.cc-final-warning { margin-top:8px; padding:9px 10px; border-radius:10px; font-size:10px; font-weight:750; line-height:1.45; }
.cc-final-warning.warn { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.cc-final-warning.block { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
html[data-theme="dark"] .cc-final-warning.warn { background:#2a1710; color:#fdba74; border-color:#7c2d12; }
html[data-theme="dark"] .cc-final-warning.block { background:#2b1010; color:#fca5a5; border-color:#7f1d1d; }
.cc-signoff-card { margin-top:14px; border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:16px; padding:13px; }
.cc-signature-pad { width:100%; height:150px; display:block; border:1px dashed color-mix(in srgb,var(--cc-text) 28%,transparent); border-radius:12px; background:#fff; touch-action:none; }
.cc-signoff-note { color:var(--cc-muted); font-size:9px; line-height:1.45; }

.cc-quick-section + .cc-quick-section { margin-top:18px; padding-top:18px; border-top:1px solid var(--cc-border); }
.cc-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.cc-quick-card { border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:15px; padding:12px; min-width:0; }
.cc-quick-card h4 { font-size:12px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-quick-card p { font-size:10px; color:var(--cc-muted); margin-top:4px; line-height:1.4; }
.cc-quick-card .cc-quick-actions { display:flex; gap:6px; margin-top:9px; }
.cc-quick-card button { flex:1; min-height:36px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface); color:var(--cc-text); font-size:9px; font-weight:850; }
.cc-quick-card button.primary { background:var(--cc-brand-blue); border-color:transparent; color:#fff; }

@media (max-width:1023px) {
  body[data-mobile-view="capture"] #todayPanel { display:block !important; }
  body.cc-job-session #todayPanel,
  body.cc-job-session #jobLaunchCard,
  body.cc-job-session #mobileContinueCard,
  body.cc-job-session #companySetupBanner { display:none !important; }
  .cc-job-session-actions { grid-template-columns:.8fr 1.2fr .85fr !important; }
}
@media (max-width:639px) {
  .cc-today-summary { grid-template-columns:1fr 1fr; }
  .cc-new-job-actions { width:100%; grid-template-columns:1fr .72fr; min-width:0; }
  .cc-install-card { align-items:flex-start; flex-direction:column; }
  .cc-checklist-setting-grid { grid-template-columns:1fr; }
  .cc-diary-entry-grid { grid-template-columns:1fr; }
  .cc-final-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cc-quick-grid { grid-template-columns:1fr; }
  .cc-job-session-actions { grid-template-columns:1fr !important; }
  .cc-job-secondary-btn,.cc-job-finish-btn,.cc-job-cancel-btn { width:100%; }
}

/* ============================================================
   ClientCam v8.10.1 patch
============================================================ */
.cc-clientcam-home {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  border-radius:16px;
}
.cc-clientcam-home:focus-visible { outline:2px solid var(--cc-brand-blue); outline-offset:4px; }
.cc-clientcam-home:active { transform:translateY(1px); }

.cc-desktop-company-logo {
  width:40px;
  height:40px;
  padding:4px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
}
.cc-desktop-company-logo img { width:100%; height:100%; object-fit:contain; border-radius:8px; }
.cc-desktop-company-logo-fallback {
  width:100%; height:100%; display:grid; place-items:center; border-radius:8px;
  background:var(--cc-brand-blue-soft); color:var(--cc-brand-blue-deep); font-size:11px; font-weight:900; letter-spacing:.04em;
}
.cc-desktop-company-name { line-height:1.25; max-width:265px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cc-camera-switch {
  position:absolute;
  z-index:25;
  right:12px;
  bottom:12px;
  width:46px;
  height:46px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.62);
  color:#fff;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  touch-action:manipulation;
}
.cc-camera-switch:not(.hidden) { display:flex; }
.cc-camera-switch-fullscreen { right:14px; bottom:16px; }
.cc-camera-switch:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.cc-evidence-type-badge {
  display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border-radius:999px;
  background:var(--cc-surface-2); border:1px solid var(--cc-border); color:var(--cc-muted); font-size:10px; font-weight:850;
}
.cc-annotate-choice { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }

.cc-annotation-tools { align-items:center; }
.cc-annotation-tools .cc-annotation-control {
  min-height:38px; padding:5px 9px; border-radius:10px; border:1px solid var(--cc-border);
  background:var(--cc-surface-2); display:flex; align-items:center; gap:7px; color:var(--cc-text); font-size:10px; font-weight:800;
}
.cc-annotation-control input[type="color"] { width:28px; height:28px; padding:1px; border:0; background:transparent; }
.cc-annotation-control input[type="range"] { width:90px; }
.cc-annotation-tools .cc-annotation-icon-btn { width:40px; min-width:40px; padding:0; display:grid; place-items:center; }
.cc-annotation-icon-btn svg { width:18px; height:18px; }
#annotationCanvas { cursor:crosshair; user-select:none; -webkit-user-select:none; }


.cc-status-actions-v101 { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.cc-team-inline { max-width:1180px; }
.cc-team-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }
.cc-team-summary-tile { border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:14px; padding:12px; }
.cc-team-summary-tile b { display:block; font-size:17px; }
.cc-team-summary-tile span { display:block; color:var(--cc-muted); font-size:10px; margin-top:2px; }
.cc-team-inline-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:15px; }
.cc-team-inline-toolbar input { flex:1 1 240px; min-width:0; height:42px; border:1px solid var(--cc-border); background:var(--cc-surface); border-radius:12px; padding:0 12px; color:var(--cc-text); }
.cc-team-inline-filter { display:flex; gap:5px; flex-wrap:wrap; }
.cc-team-inline-filter button { min-height:38px; padding:0 11px; border:1px solid var(--cc-border); border-radius:11px; background:var(--cc-surface-2); font-size:11px; font-weight:800; }
.cc-team-inline-filter button.is-active { background:var(--cc-brand-blue); border-color:var(--cc-brand-blue); color:#fff; }
.cc-team-inline-card { border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:17px; padding:14px; margin-top:10px; }
.cc-team-inline-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cc-team-inline-meta { color:var(--cc-muted); font-size:11px; line-height:1.55; margin-top:4px; overflow-wrap:anywhere; }
.cc-team-role-badge,.cc-team-status-badge { display:inline-flex; min-height:24px; align-items:center; padding:0 8px; border-radius:999px; border:1px solid var(--cc-border); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.cc-team-status-badge.active { color:#166534; background:#dcfce7; border-color:#bbf7d0; }
.cc-team-status-badge.disabled { color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
html[data-theme="dark"] .cc-team-status-badge.active { color:#86efac; background:#052e16; border-color:#166534; }
html[data-theme="dark"] .cc-team-status-badge.disabled { color:#fca5a5; background:#2b1010; border-color:#7f1d1d; }
.cc-team-inline-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cc-team-inline-actions button { min-height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface); font-size:10px; font-weight:800; }
.cc-team-perm-grid-v101 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--cc-border-soft); }
.cc-team-perm-v101 { border:1px solid var(--cc-border); background:var(--cc-surface); border-radius:11px; padding:9px; display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:10px; font-weight:800; }
.cc-team-perm-v101 input { width:19px; height:19px; accent-color:var(--cc-brand-blue); }
.cc-permission-presets-v101 { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cc-permission-presets-v101 button { min-height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--cc-border); background:var(--cc-surface); font-size:10px; font-weight:800; }
.cc-team-invite-inline { margin-top:18px; border:1px solid var(--cc-border); background:var(--cc-surface-2); border-radius:17px; padding:14px; }
.cc-team-invite-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:10px; }
.cc-team-invite-form input { height:44px; border:1px solid var(--cc-border); background:var(--cc-surface); border-radius:12px; padding:0 12px; color:var(--cc-text); }
.cc-team-invite-form button { min-height:44px; padding:0 15px; border-radius:12px; background:var(--cc-brand-blue); color:#fff; font-weight:850; }

body.cc-access-disabled #app { pointer-events:none; user-select:none; }
#disabledAccessModal:not(.hidden) { display:flex; }

/* Slight readability lift without making the interface oversized. */
body { font-size:16px; }
.text-\[9px\] { font-size:10px !important; }
.text-\[10px\] { font-size:11px !important; }
.text-\[11px\] { font-size:12px !important; }
.text-xs { font-size:13px !important; }
.desktop-table th { font-size:10px !important; }
.desktop-table td { font-size:13px !important; }
button, input, select, textarea { line-height:1.35; }
.mobile-bottom-nav .mobile-nav-btn { font-size:11px !important; }
.cc-field-label, .cc-field-help { font-size:11px; }
.cc-field-input,.cc-field-textarea,.cc-file-input { font-size:14px; }

@media (min-width:1024px) {
  main.scroll-area { overflow:hidden !important; }
  #desktopWorkspace { height:100%; }
  .desktop-sidebar { scrollbar-gutter:stable; }
  .desktop-main { scrollbar-gutter:stable; }
}

@media (max-width:1023px) {
  header > div { padding-top:6px !important; padding-bottom:8px !important; }
  .cc-camera-switch { width:44px; height:44px; }
  .cc-team-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cc-team-inline-card-head { flex-direction:column; }
  .cc-team-inline-actions { justify-content:flex-start; width:100%; }
  .cc-team-perm-grid-v101 { grid-template-columns:1fr 1fr; }
  .cc-team-invite-form { grid-template-columns:1fr; }
  #annotationModal > div { height:100dvh; max-height:100dvh !important; border-radius:0 !important; }
  #annotationModal { padding:0 !important; }
  #annotationModal > div > .p-3.border-t { padding-bottom:max(12px, env(safe-area-inset-bottom)) !important; }
  #captureFullscreen { height:100dvh; }
}

@media (max-width:639px) {
  main.scroll-area { padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important; }
  body.cc-mobile-nav-collapsed main.scroll-area { padding-bottom:32px !important; }
  #mobileBottomNav { transform:translateY(0); }
  body.cc-mobile-nav-collapsed #mobileBottomNav {
    transform:translateY(calc(100% + env(safe-area-inset-bottom) + 14px)) !important;
    opacity:1 !important;
    pointer-events:none !important;
  }
  body.cc-mobile-nav-collapsed #mobileNavToggleBtn { bottom:max(5px, env(safe-area-inset-bottom)) !important; }
  .cc-team-perm-grid-v101 { grid-template-columns:1fr; }
}

/* ============================================================
   ClientCam v8.10.2 — mobile camera-first / standalone PWA polish
============================================================ */

/* The inline v8 shell fixed the body to the layout viewport. That is fragile in
   iOS standalone mode. Let #app own the dynamic viewport instead. */
body {
  position: relative !important;
  inset: auto !important;
  min-height: 100dvh !important;
}
#app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden;
}
.safe-top { padding-top: env(safe-area-inset-top) !important; }

.cc-preview-image-button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
  cursor: zoom-in;
}
.cc-preview-expand-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}
#imageLightbox { z-index: 190 !important; }

.cc-job-details-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cc-job-details-quick-actions button {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: var(--cc-surface-2);
  color: var(--cc-text);
  font-size: 11px;
  font-weight: 850;
}
.cc-job-details-quick-actions .cc-job-details-finish {
  background: #10b981;
  border-color: transparent;
  color: #fff;
}
.cc-share-expiry-select { color: var(--cc-text); }
.cc-share-expiry-select option { background: var(--cc-surface); color: var(--cc-text); }

.cc-camera-torch-v102 {
  position: absolute !important;
  z-index: 25 !important;
  right: 66px !important;
  bottom: 12px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(0,0,0,.62) !important;
  color: #fff !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cc-camera-torch-v102.bg-white { background:#fff !important; color:#000 !important; }

@media (max-width: 1023px) {
  /* No stacked extra top padding: safe-area belongs to .safe-top, content padding
     belongs to the inner header row. This is consistent in Safari and standalone. */
  header > div {
    padding: 4px 12px 6px !important;
    min-height: 58px;
  }
  #clientCamHomeBtn { min-height: 48px; }

  /* Compact active-job strip. Everything not required for the next photograph is
     available from Details instead of permanently covering the camera. */
  body.cc-job-session .field-experience { padding: 6px 8px max(12px, env(safe-area-inset-bottom)) !important; }
  body.cc-job-session #jobSessionBar {
    position: relative !important;
    top: auto !important;
    margin: 0 0 8px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }
  body.cc-job-session .cc-job-session-top {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
  }
  body.cc-job-session #jobSessionHomeBtn { display: none !important; }
  body.cc-job-session #jobSessionTitle,
  body.cc-job-session #jobSessionMeta { text-align: left; }
  body.cc-job-session #jobSessionDetailsBtn {
    grid-column: auto !important;
    width: auto !important;
    min-width: 82px !important;
    height: 38px !important;
    padding: 0 11px !important;
  }
  body.cc-job-session #jobSessionChecklist {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 7px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  body.cc-job-session #jobSessionChecklist::-webkit-scrollbar { display:none; }
  body.cc-job-session #jobSessionChecklist > * { flex: 0 0 auto; }
  body.cc-job-session #jobSessionContacts,
  body.cc-job-session .cc-job-session-actions { display: none !important; }

  body.cc-job-session #mobileCaptureSection {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
  }
  body.cc-job-session #mobileCaptureSection > aside { display: none !important; }
  body.cc-job-session #cameraShell {
    min-height: clamp(340px, 52dvh, 590px) !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
  }
  body.cc-job-session #advancedCameraControls {
    margin: 0 !important;
    padding-top: 2px;
    gap: 7px !important;
  }
  body.cc-job-session #zoomWrap { flex: 1 1 180px !important; }
  body.cc-job-session #importPhotoBtn { flex: 0 1 150px !important; }

  #evidenceReviewScroll { scroll-padding-top: 0; }
  #previewImageExpandBtn { scroll-margin-top: 0; }
  #previewModal > div { height: 100dvh !important; max-height: 100dvh !important; }

  #jobDetailsEditModal { padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
  #jobDetailsEditModal > div {
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
  #jobDetailsEditModal > div > .shrink-0:first-child { padding-top:max(12px, env(safe-area-inset-top)) !important; }
  #jobDetailsEditModal > div > .shrink-0:last-child { padding-bottom:max(12px, env(safe-area-inset-bottom)) !important; }

  #completeModal { padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 420px) {
  .cc-job-details-quick-actions { grid-template-columns: 1fr 1fr; }
  body.cc-job-session #cameraShell { min-height: clamp(315px, 49dvh, 500px) !important; }
  .cc-preview-expand-hint { font-size: 9px; }
}

@media (display-mode: standalone) and (max-width: 1023px) {
  html, body { height: 100dvh !important; min-height: 100dvh !important; }
  #app { height: 100dvh !important; min-height: 100dvh !important; }
  header { flex: 0 0 auto; }
  main.scroll-area { min-height:0; }
  .field-experience { padding-top: 6px !important; }
  #mobileBottomNav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
}
.cc-final-photo-view { position:relative; display:block; width:100%; padding:0; background:#09090b; cursor:zoom-in; }
.cc-final-photo-view > span { position:absolute; right:8px; bottom:8px; min-height:26px; display:inline-flex; align-items:center; padding:0 8px; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font-size:9px; font-weight:800; }


/* ============================================================
   ClientCam v8.10.3 — active-job duplicate shortcut fix
============================================================ */
@media (max-width:1023px) {
  /* The Continue Active Job card is a shortcut for leaving screens. Never show
     it while the user is already inside the active-job workspace. Specificity
     intentionally beats the generic capture-view display rule above. */
  body.cc-job-session[data-mobile-view="capture"] #mobileContinueCard {
    display:none !important;
  }
}

/* ============================================================
   ClientCam v8.10.4 - installed iPhone final-review safe area
   The job-final-review close control must never sit underneath the
   status bar / Dynamic Island in an installed Home Screen PWA.
============================================================ */
@media (max-width: 767px) {
  #finalReviewModal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #finalReviewModal > .cc-final-review-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .cc-final-review-header {
    padding-top: calc(env(safe-area-inset-top) + 12px) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
  #closeFinalReviewBtn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
  }
  .cc-final-review-actions {
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* iOS standalone can occasionally report a zero safe-area during the first
   paint. Give only the full-screen final review a conservative top fallback. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (max-width: 767px) {
    .cc-final-review-header {
      padding-top: max(52px, calc(env(safe-area-inset-top) + 12px)) !important;
    }
  }
}


/* ============================================================
   ClientCam v8.10.5 - iPhone installed-PWA Job Evidence safe area
   View Job is a separate full-screen modal from Final Review. Its
   header must sit below the Dynamic Island/status bar and remain tappable.
============================================================ */
@media (max-width: 767px) {
  #visitModal {
    inset: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  #visitModal > div {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  #visitModal > div > .shrink-0:first-child {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    padding-top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
    padding-left: max(16px, calc(env(safe-area-inset-left) + 16px)) !important;
    padding-right: max(16px, calc(env(safe-area-inset-right) + 16px)) !important;
    background: var(--cc-surface) !important;
  }
  #closeVisitBtn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    position: relative !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }
  #visitModalBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #visitModal > div > .shrink-0:last-child {
    flex: 0 0 auto !important;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  }
}

/* iOS Home Screen apps using a translucent status bar can briefly report a
   zero safe-area during first paint. The fallback applies only to View Job. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (max-width: 767px) {
    #visitModal > div > .shrink-0:first-child {
      padding-top: max(64px, calc(env(safe-area-inset-top) + 10px)) !important;
    }
  }
}


/* ============================================================
   ClientCam v8.10.6 - signed-out interaction gate
   The account/recovery dialogs live outside #app. When no valid
   Supabase session exists the application workspace itself is inert.
============================================================ */
body.cc-auth-locked #app {
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}
body.cc-auth-locked #app * {
  pointer-events: none !important;
}


/* ===========================================================
   ClientCam v8.10.7 — desktop/mobile boundary + auth borders
   =========================================================== */
/* Belt-and-braces desktop guard: neither the mobile tab bar nor its collapse
   handle is ever rendered in the desktop management workspace. */
@media (min-width:1024px) {
  #mobileNavToggleBtn,
  #mobileBottomNav {
    display:none !important;
  }
}

/* High Contrast strengthens real form-control boundaries without inventing
   opposite-colour outlines around intentionally borderless buttons. */
#authModal #toggleAuthPasswordBtn,
#authModal #signUpBtn,
#authModal #authContactBtn,
#signInModal #toggleSignInPasswordBtn,
#signInModal #signInBtn,
#signInModal #backToSignUpBtn,
#forgotPasswordModal #sendResetEmailBtn,
#forgotPasswordModal #backToSignInBtn,
#resetPasswordModal #toggleNewPasswordBtn,
#resetPasswordModal #saveNewPasswordBtn,
#teamInviteAccountModal #toggleTeamInvitePasswordBtn,
#teamInviteAccountModal #completeTeamInviteBtn,
#teamInviteAccountModal #teamInviteDifferentAccountBtn {
  border:0 !important;
  box-shadow:none !important;
}

#authModal #openSignInBtn,
#signInModal #forgotPasswordBtn {
  border:1px solid var(--cc-border) !important;
}
html[data-contrast="1"] #authModal #openSignInBtn,
html[data-contrast="1"] #signInModal #forgotPasswordBtn {
  border-width:2px !important;
}