/* Stronghold command theme
   Loaded last on purpose: this is the single visual authority for the current
   glass-control direction, while older page-specific CSS keeps layout details. */
:root {
  --cmd-ink: #102a34;
  --cmd-muted: #5f7480;
  --cmd-panel: rgba(244, 250, 250, 0.96);
  --cmd-panel-soft: rgba(228, 241, 243, 0.96);
  --cmd-line: rgba(99, 151, 164, 0.40);
  --cmd-cyan: #29d9e5;
  --cmd-teal: #159ca5;
  --cmd-blue: #6ca6f0;
  --cmd-green: #39c96b;
  --cmd-gold: #d6a95b;
  --cmd-red: #e0574f;
  --cmd-night: #164652;
  --cmd-night-2: #2e6a74;
  --cmd-glass:
    linear-gradient(116deg, transparent 0 64%, rgba(255,255,255,0.16) 64.4% 73%, rgba(255,255,255,0.04) 73.4% 100%),
    radial-gradient(circle at 22% 0%, rgba(64,224,231,0.22), transparent 42%),
    linear-gradient(180deg, rgba(67,130,140,0.95) 0%, rgba(38,96,109,0.97) 100%);
  --cmd-shadow: 0 10px 18px rgba(7,31,44,0.15);
}


/* Must stay at the end: compact deficiency media controls override the global command buttons. */
html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #d84b4b 0%, #a92525 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.18) !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete:hover,
html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete:focus-visible {
  background: linear-gradient(180deg, #e35a5a 0%, #b72d2d 100%) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Final control overrides for compact media actions that should not inherit the large CRM button treatment. */
html body:not(.login-active) .app-shell button.deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #d84b4b 0%, #a92525 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.18) !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell button.deficiency-photo-delete:hover,
html body:not(.login-active) .app-shell button.deficiency-photo-delete:focus-visible {
  background: linear-gradient(180deg, #e35a5a 0%, #b72d2d 100%) !important;
  color: #ffffff !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button {
  width: 188px !important;
  min-width: 188px !important;
  max-width: 188px !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button {
  width: 166px !important;
  min-width: 166px !important;
}

html body:not(.login-active) .app-shell button.deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #d84b4b 0%, #a92525 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.18) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.login-active) .app-shell button.deficiency-photo-delete:hover {
  background: linear-gradient(180deg, #e55a5a 0%, #b42b2b 100%) !important;
  color: #ffffff !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button {
  width: 158px !important;
  min-width: 158px !important;
}

html body:not(.login-active) .app-shell button.deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #d84b4b 0%, #a92525 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.18) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.login-active) .app-shell button.deficiency-photo-delete:hover {
  background: linear-gradient(180deg, #e55a5a 0%, #b42b2b 100%) !important;
  color: #ffffff !important;
}

/* Section map card controls should behave like compact tools, not oversized
   workflow CTAs. This keeps Edit Outline and Submit Inspection from colliding
   on medium and mobile widths. */
html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable .section-outline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  overflow: visible !important;
}

html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable .section-outline-actions button,
html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-open-section-outline-details],
html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-submit-inspection] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  font-size: 0.64rem !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  white-space: nowrap !important;
  box-shadow: 0 7px 15px rgba(5, 22, 29, 0.16) !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-open-section-outline-details] {
  flex: 0 0 142px !important;
}

html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-submit-inspection] {
  flex: 0 0 176px !important;
}

html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable .section-outline-actions button:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 760px), (pointer: coarse) {
  html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable .section-outline-actions {
    gap: 6px !important;
  }

  html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-open-section-outline-details],
  html body:not(.login-active) .app-shell .section-map-panel.section-map-panel-stable button[data-submit-inspection] {
    flex: 1 1 148px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 0.58rem !important;
  }
}

body:not(.login-active) {
  color: var(--cmd-ink) !important;
  background:
    radial-gradient(circle at 82% 2%, rgba(41,217,229,0.08), transparent 28%),
    radial-gradient(circle at 6% 22%, rgba(214,169,91,0.06), transparent 26%),
    linear-gradient(135deg, #eaf3f4 0%, #dfecee 48%, #edf4f4 100%) !important;
  background-size: auto !important;
  overflow-x: hidden !important;
}

body:not(.login-active) .workspace,
body:not(.login-active) .view,
body:not(.login-active) .record-card,
body:not(.login-active) .stat-card,
body:not(.login-active) .folder-item,
body:not(.login-active) .table-wrap,
body:not(.login-active) .dialog-panel,
body:not(.login-active) .project-dialog-card,
body:not(.login-active) .sold-financial-table-card,
body:not(.login-active) .sold-financial-editor-card {
  color: var(--cmd-ink) !important;
}

body:not(.login-active) .record-card,
body:not(.login-active) .stat-card,
body:not(.login-active) .folder-item,
body:not(.login-active) .table-wrap,
body:not(.login-active) .dialog-panel,
body:not(.login-active) .project-dialog-card,
body:not(.login-active) .sold-financial-table-card,
body:not(.login-active) .sold-financial-editor-card {
  border: 1px solid var(--cmd-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, var(--cmd-panel), var(--cmd-panel-soft)) !important;
  box-shadow: 0 8px 18px rgba(7,31,44,0.08) !important;
}

body:not(.login-active) input,
body:not(.login-active) select,
body:not(.login-active) textarea {
  border-color: rgba(99,151,164,0.50) !important;
  background: rgba(248,252,252,0.96) !important;
  color: var(--cmd-ink) !important;
}

body:not(.login-active) input:focus,
body:not(.login-active) select:focus,
body:not(.login-active) textarea:focus {
  border-color: rgba(41,217,229,0.9) !important;
  box-shadow: 0 0 0 3px rgba(41,217,229,0.16) !important;
  outline: none !important;
}

body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.sold-financial-project-link):not(.section-report-page-tab),
body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x),
body:not(.login-active) .button-link,
body:not(.login-active) .top-link,
body:not(.login-active) .folder.ghost,
body:not(.login-active) input[type="file"]::file-selector-button {
  --glass-accent: var(--cmd-cyan);
  --glass-glow: rgba(41,217,229,0.42);
  position: relative !important;
  min-height: 36px !important;
  padding: 9px 14px !important;
  border: 1px solid color-mix(in srgb, var(--glass-accent) 64%, #ffffff 10%) !important;
  border-radius: 8px !important;
  background: var(--cmd-glass) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 10px 18px rgba(7,31,44,0.18),
    0 0 0 1px rgba(4,22,32,0.12) !important;
  color: #f8fcff !important;
  font-family: var(--stronghold-heading-font, inherit) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.65) !important;
  transform: translateZ(0) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important;
}

body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.sold-financial-project-link):not(.section-report-page-tab):hover,
body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):hover,
body:not(.login-active) .button-link:hover,
body:not(.login-active) .top-link:hover,
body:not(.login-active) .folder.ghost:hover,
body:not(.login-active) input[type="file"]::file-selector-button:hover {
  box-shadow:
    inset 3px 0 0 var(--glass-accent),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 13px 22px rgba(7,31,44,0.22),
    0 0 18px var(--glass-glow) !important;
  filter: saturate(1.06) brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-shell button.danger,
body:not(.login-active) .app-shell button.delete-btn,
body:not(.login-active) .app-shell button.employee-delete-btn,
body:not(.login-active) .app-shell button.section-delete-btn,
body:not(.login-active) .app-shell button.file-media-delete-btn,
body:not(.login-active) dialog button.danger,
body:not(.login-active) dialog button.delete-btn {
  --glass-accent: var(--cmd-red);
  --glass-glow: rgba(224,87,79,0.46);
}

body:not(.login-active) .nav-link[data-open-project-wizard="true"],
body:not(.login-active) .submit-section-inspection-btn,
body:not(.login-active) .app-shell button.glass-success,
body:not(.login-active) dialog button.glass-success {
  --glass-accent: var(--cmd-green);
  --glass-glow: rgba(57,201,107,0.46);
}

body:not(.login-active) .tab.active,
body:not(.login-active) .section-report-page-tab.active,
body:not(.login-active) .selected-folder,
body:not(.login-active) .nav-link.active,
body:not(.login-active) .top-link.active {
  --glass-accent: var(--cmd-gold) !important;
  --glass-glow: rgba(214,169,91,0.48) !important;
}

body:not(.login-active) .app-header {
  background: linear-gradient(180deg, rgba(241,249,249,0.98), rgba(222,238,241,0.98)) !important;
  border-bottom: 1px solid rgba(99,151,164,0.42) !important;
  box-shadow: 0 12px 24px rgba(7,31,44,0.11) !important;
}

body:not(.login-active) .app-header .header-links .top-link,
body:not(.login-active) .app-header #loginCard .header-links button.top-link,
body:not(.login-active) .app-header .header-presence-indicator {
  min-height: 27px !important;
  height: 27px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  border-color: rgba(41,217,229,0.42) !important;
  background:
    linear-gradient(116deg, transparent 0 66%, rgba(255,255,255,0.10) 66.4% 76%, transparent 76.4% 100%),
    linear-gradient(180deg, rgba(68,130,140,0.95), rgba(39,98,111,0.97)) !important;
  box-shadow:
    inset 2px 0 0 rgba(41,217,229,0.78),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 7px 13px rgba(7,31,44,0.16) !important;
  color: #f8fcff !important;
}

body:not(.login-active) .app-header .header-chart-link {
  --glass-accent: var(--header-button-accent, var(--cmd-cyan));
  --glass-glow: var(--header-button-glow, rgba(41,217,229,0.42));
  color: #f8fcff !important;
  background: var(--cmd-glass) !important;
  border-color: color-mix(in srgb, var(--glass-accent) 62%, #ffffff 12%) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent),
    inset 0 1px 0 rgba(255,255,255,0.23),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    var(--cmd-shadow),
    0 0 0 1px rgba(4,22,32,0.12) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.66) !important;
}

body:not(.login-active) .app-header .header-nav-icon {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.40), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-accent) 74%, #ffffff 14%), color-mix(in srgb, var(--glass-accent) 62%, #092c37 38%)) !important;
  border: 1px solid color-mix(in srgb, var(--glass-accent) 70%, #ffffff 20%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 5px 12px rgba(0,0,0,0.18) !important;
}

body:not(.login-active) .app-header .header-nav-text,
body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
  color: #f8fcff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.72) !important;
}

body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  border-radius: 8px !important;
  border: 1px solid rgba(41,217,229,0.52) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.24), transparent 36%),
    linear-gradient(180deg, rgba(65,126,138,0.95), rgba(36,92,106,0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 8px 16px rgba(7,31,44,0.14) !important;
  color: #e9fcff !important;
}

body:not(.login-active) .app-header svg {
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 220px !important;
    --header-search-width: 340px !important;
    --header-action-width: 122px !important;
    --header-action-height: 58px !important;
    --header-action-icon: 30px !important;
    --header-action-font: 0.56rem !important;
    --header-gap: 10px !important;
    display: grid !important;
    grid-template-columns: var(--header-logo-width) var(--header-search-width) minmax(0, 1fr) max-content !important;
    grid-template-rows: 1fr !important;
    column-gap: var(--header-gap) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  body:not(.login-active) .app-header::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex: none !important;
    width: var(--header-logo-width) !important;
    min-width: 0 !important;
    max-width: var(--header-logo-width) !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  body:not(.login-active) .app-header .header-logo-shell a,
  body:not(.login-active) .app-header .header-logo {
    width: var(--header-logo-width) !important;
    max-width: var(--header-logo-width) !important;
    height: 88px !important;
    max-height: 88px !important;
  }

  body:not(.login-active) .app-header .login-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: none !important;
    width: var(--header-search-width) !important;
    min-width: 0 !important;
    max-width: var(--header-search-width) !important;
    transform: translateY(3px) !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 3 !important;
    grid-row: 1 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--header-gap) !important;
    overflow: hidden !important;
  }

  body:not(.login-active) .app-header .header-chart-links,
  body:not(.login-active) .app-header .header-stage-links {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 var(--header-action-width) !important;
    width: var(--header-action-width) !important;
    min-width: var(--header-action-width) !important;
    max-width: var(--header-action-width) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 2px !important;
    padding: 5px 6px !important;
  }

  body:not(.login-active) .app-header .header-chart-divider {
    flex: 0 0 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    height: calc(var(--header-action-height) + 2px) !important;
  }

  body:not(.login-active) .app-header .header-nav-icon {
    width: var(--header-action-icon) !important;
    height: var(--header-action-icon) !important;
  }

  body:not(.login-active) .app-header .header-nav-text,
  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    width: 100% !important;
    max-width: 100% !important;
    font-size: var(--header-action-font) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.045em !important;
    text-align: center !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 4 !important;
    grid-row: 1 !important;
    flex: none !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: max-content !important;
    padding: 0 0 12px !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-icon-button,
  body:not(.login-active) .app-header #headerHomeButton,
  body:not(.login-active) .app-header .header-user-card,
  body:not(.login-active) .app-header .header-user-toggle,
  body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
  }
}


@media (min-width: 1500px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 250px !important;
    --header-search-width: 390px !important;
    --header-action-width: 142px !important;
    --header-action-height: 60px !important;
    --header-action-icon: 32px !important;
    --header-action-font: 0.64rem !important;
    --header-gap: 12px !important;
  }
}

@media (min-width: 1381px) and (max-width: 1499px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 220px !important;
    --header-search-width: 330px !important;
    --header-action-width: 116px !important;
    --header-action-height: 56px !important;
    --header-action-icon: 28px !important;
    --header-action-font: 0.52rem !important;
    --header-gap: 8px !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    gap: 7px !important;
  }
}

@media (min-width: 1241px) and (max-width: 1380px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 190px !important;
    --header-search-width: 290px !important;
    --header-action-width: 98px !important;
    --header-action-height: 52px !important;
    --header-action-icon: 24px !important;
    --header-action-font: 0.44rem !important;
    --header-gap: 6px !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    gap: 5px !important;
  }

  body:not(.login-active) .app-header .header-icon-button,
  body:not(.login-active) .app-header #headerHomeButton,
  body:not(.login-active) .app-header .header-user-card,
  body:not(.login-active) .app-header .header-user-toggle,
  body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 176px !important;
    --header-search-width: 270px !important;
    --header-action-width: 90px !important;
    --header-action-height: 50px !important;
    --header-action-icon: 24px !important;
    --header-action-font: 0.43rem !important;
    --header-gap: 6px !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    padding-inline: 8px !important;
  }

  body:not(.login-active) .app-header .header-logo-shell a,
  body:not(.login-active) .app-header .header-logo {
    height: 72px !important;
    max-height: 72px !important;
  }

  body:not(.login-active) .app-header .header-links .top-link {
    font-size: 0.52rem !important;
    padding-inline: 5px !important;
  }

  body:not(.login-active) .app-header .search-box input {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 900px) {
  body:not(.login-active) .app-header {
    overflow-x: hidden !important;
    background: linear-gradient(180deg, rgba(241,249,249,0.99), rgba(222,238,241,0.99)) !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 3px !important;
  }

  body:not(.login-active) .app-header,
  body:not(.login-active) .app-header .header-workflow-links,
  body:not(.login-active) .app-header .header-chart-links,
  body:not(.login-active) .app-header .header-stage-links,
  body:not(.login-active) .sidebar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  body:not(.login-active) .app-header::-webkit-scrollbar,
  body:not(.login-active) .app-header .header-workflow-links::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not(.login-active) .app-header .header-chart-links::-webkit-scrollbar,
  body:not(.login-active) .app-header .header-stage-links::-webkit-scrollbar,
  body:not(.login-active) .sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 5px 6px !important;
  }

  body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.sold-financial-project-link):not(.section-report-page-tab),
  body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x) {
    min-height: 38px !important;
    padding: 9px 12px !important;
  }
}

/* Header collision guard.
   The main stylesheet still contains an older high-specificity header lock near
   EOF. Keep these rules at the end of this loaded-last theme file so the large
   workflow buttons keep a reserved lane and never run under the icon controls. */
@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    box-sizing: border-box !important;
    grid-template-columns: var(--header-logo-width) var(--header-search-width) minmax(0, 1fr) max-content !important;
    column-gap: var(--header-gap) !important;
    overflow-x: hidden !important;
  }

  html body:not(.login-active) .app-header .header-brand,
  html body:not(.login-active) .app-header > .header-divider,
  html body:not(.login-active) .app-header .header-divider {
    display: none !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell {
    grid-column: 1 !important;
    width: var(--header-logo-width) !important;
    max-width: var(--header-logo-width) !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    width: var(--header-logo-width) !important;
    max-width: var(--header-logo-width) !important;
  }

  html body:not(.login-active) .app-header .login-card {
    grid-column: 2 !important;
    width: var(--header-search-width) !important;
    max-width: var(--header-search-width) !important;
    min-width: 0 !important;
  }

  html body:not(.login-active) .app-header .search-box,
  html body:not(.login-active) .app-header .search-box input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    flex: 0 0 auto !important;
    gap: calc(var(--header-gap) * 0.7) !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link {
    flex: 0 0 var(--header-action-width) !important;
    width: var(--header-action-width) !important;
    min-width: var(--header-action-width) !important;
    max-width: var(--header-action-width) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    row-gap: 2px !important;
    column-gap: 0 !important;
    padding: 5px 6px !important;
  }

  html body:not(.login-active) .app-header .header-nav-icon {
    width: var(--header-action-icon) !important;
    height: var(--header-action-icon) !important;
  }

  html body:not(.login-active) .app-header .header-nav-text,
  html body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: var(--header-action-font) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.045em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body:not(.login-active) .app-header .header-utility-links {
    grid-column: 4 !important;
    min-width: max-content !important;
    max-width: max-content !important;
    gap: calc(var(--header-gap) * 0.7) !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-icon-button,
  html body:not(.login-active) .app-header #headerHomeButton,
  html body:not(.login-active) .app-header .header-user-card,
  html body:not(.login-active) .app-header .header-user-toggle,
  html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: var(--header-icon-width, 34px) !important;
    min-width: var(--header-icon-width, 34px) !important;
    max-width: var(--header-icon-width, 34px) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
  }
}


@media (min-width: 1800px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 250px !important;
    --header-search-width: 390px !important;
    --header-action-width: 142px !important;
    --header-action-height: 60px !important;
    --header-action-icon: 32px !important;
    --header-action-font: 0.64rem !important;
    --header-gap: 12px !important;
    --header-icon-width: 34px !important;
  }
}

@media (min-width: 1500px) and (max-width: 1799px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 230px !important;
    --header-search-width: 350px !important;
    --header-action-width: 126px !important;
    --header-action-height: 58px !important;
    --header-action-icon: 29px !important;
    --header-action-font: 0.56rem !important;
    --header-gap: 8px !important;
    --header-icon-width: 34px !important;
  }
}

@media (min-width: 1381px) and (max-width: 1499px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 220px !important;
    --header-search-width: 320px !important;
    --header-action-width: 112px !important;
    --header-action-height: 56px !important;
    --header-action-icon: 27px !important;
    --header-action-font: 0.50rem !important;
    --header-gap: 7px !important;
    --header-icon-width: 32px !important;
  }
}

@media (min-width: 1241px) and (max-width: 1380px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 190px !important;
    --header-search-width: 270px !important;
    --header-action-width: 94px !important;
    --header-action-height: 52px !important;
    --header-action-icon: 23px !important;
    --header-action-font: 0.42rem !important;
    --header-gap: 5px !important;
    --header-icon-width: 30px !important;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 176px !important;
    --header-search-width: 270px !important;
    --header-action-width: 90px !important;
    --header-action-height: 50px !important;
    --header-action-icon: 23px !important;
    --header-action-font: 0.42rem !important;
    --header-gap: 5px !important;
    --header-icon-width: 30px !important;
  }
}

/* Integrated section workflow banner: page identity + report page navigation. */
body:not(.login-active) .section-upload-brief.section-page-banner.section-page-banner-integrated {
  grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 236px) !important;
  grid-template-areas:
    "copy logo"
    "tabs tabs" !important;
  align-items: center !important;
  gap: 14px 28px !important;
  min-height: clamp(178px, 16vw, 226px) !important;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.6vw, 38px) clamp(14px, 1.7vw, 24px) clamp(54px, 4.4vw, 78px) !important;
}

body:not(.login-active) .section-page-banner-integrated .section-page-banner-copy {
  grid-area: copy !important;
}

body:not(.login-active) .section-page-banner-integrated .section-page-banner-logo {
  grid-area: logo !important;
  width: clamp(132px, 15vw, 218px) !important;
}

body:not(.login-active) .section-page-banner-tabs {
  position: relative !important;
  z-index: 4 !important;
  grid-area: tabs !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 2px 8px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab {
  flex: 0 0 clamp(134px, 14vw, 180px) !important;
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: 58px !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(199, 249, 255, 0.92) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(226,252,255,0.9) 44%, rgba(139,239,248,0.74)),
    rgba(238, 253, 255, 0.96) !important;
  color: #082936 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 3px 0 0 rgba(0, 201, 219, 0.95),
    0 10px 18px rgba(0,0,0,0.24),
    0 0 0 1px rgba(1, 33, 45, 0.18) !important;
  transform: none !important;
  white-space: normal !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab strong {
  min-width: 0 !important;
  color: #092c3a !important;
  font-size: 0.72rem !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab span {
  min-width: 42px !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  font-size: 0.61rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab .section-report-file-count.is-empty {
  border: 1px solid rgba(168, 111, 0, 0.55) !important;
  background: linear-gradient(180deg, #fff0a8, #ffc94f) !important;
  color: #3f2b00 !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab .section-report-file-count.has-files {
  border: 1px solid rgba(10, 110, 58, 0.56) !important;
  background: linear-gradient(180deg, #a8ffc8, #35d775) !important;
  color: #06351d !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab.active,
body:not(.login-active) .section-page-banner-tabs .section-report-page-tab:hover {
  border-color: rgba(255, 232, 164, 0.98) !important;
  background:
    linear-gradient(135deg, #fff7d9, #ffd979 48%, #e5a83f),
    rgba(255, 219, 126, 0.98) !important;
  color: #122631 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 3px 0 0 rgba(255,255,255,0.82),
    inset 0 -3px 0 rgba(123, 74, 0, 0.58),
    0 13px 20px rgba(0,0,0,0.28),
    0 0 22px rgba(255, 208, 85, 0.38) !important;
}

body:not(.login-active) .section-page-banner-tabs .section-report-page-tab.active strong,
body:not(.login-active) .section-page-banner-tabs .section-report-page-tab:hover strong {
  color: #102936 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
}

@media (max-width: 760px) {
  body:not(.login-active) .section-upload-brief.section-page-banner.section-page-banner-integrated {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "tabs" !important;
    min-height: 166px !important;
    gap: 12px !important;
    padding: 16px 12px 12px 42px !important;
  }

  body:not(.login-active) .section-page-banner-integrated .section-page-banner-logo {
    position: absolute !important;
    right: 10px !important;
    top: 12px !important;
    bottom: auto !important;
    width: 78px !important;
    opacity: 0.22 !important;
  }

  body:not(.login-active) .section-page-banner-tabs {
    margin-left: -28px !important;
    width: calc(100% + 28px) !important;
    padding: 0 0 8px !important;
  }

  body:not(.login-active) .section-page-banner-tabs .section-report-page-tab {
    flex-basis: 132px !important;
    min-height: 48px !important;
    max-height: 54px !important;
    padding: 7px 8px !important;
  }

  body:not(.login-active) .section-page-banner-tabs .section-report-page-tab strong {
    font-size: 0.66rem !important;
  }

  body:not(.login-active) .section-page-banner-tabs .section-report-page-tab span {
    min-width: 36px !important;
    font-size: 0.56rem !important;
  }
}

/* Final contrast lock for section page tabs.
   These are buttons, so the global app button skin has very high specificity. */
html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab {
  border: 1px solid rgba(199, 249, 255, 0.96) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(226,252,255,0.93) 44%, rgba(139,239,248,0.8)),
    rgba(238, 253, 255, 0.98) !important;
  color: #082936 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 3px 0 0 rgba(0, 201, 219, 0.98),
    0 10px 18px rgba(0,0,0,0.24),
    0 0 0 1px rgba(1, 33, 45, 0.18) !important;
  text-shadow: none !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab strong {
  color: #092c3a !important;
  text-shadow: none !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.active,
html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab:hover {
  border-color: rgba(255, 232, 164, 0.98) !important;
  background:
    linear-gradient(135deg, #fff7d9, #ffd979 48%, #e5a83f),
    rgba(255, 219, 126, 0.98) !important;
  color: #122631 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 3px 0 0 rgba(255,255,255,0.82),
    inset 0 -3px 0 rgba(123, 74, 0, 0.58),
    0 13px 20px rgba(0,0,0,0.28),
    0 0 22px rgba(255, 208, 85, 0.38) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.active strong,
html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab:hover strong {
  color: #102936 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab .section-report-file-count.is-empty {
  border: 1px solid rgba(168, 111, 0, 0.55) !important;
  background: linear-gradient(180deg, #fff0a8, #ffc94f) !important;
  color: #3f2b00 !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab .section-report-file-count.has-files {
  border: 1px solid rgba(10, 110, 58, 0.56) !important;
  background: linear-gradient(180deg, #a8ffc8, #35d775) !important;
  color: #06351d !important;
}

/* Mobile header utility lock.
   Older header rules size these buttons like the large chart buttons; keep the icon controls square. */
@media (max-width: 760px), (pointer: coarse) {
  html body:not(.login-active) .app-header .header-utility-links {
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.login-active) .app-header .header-icon-wrap,
  html body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  html body:not(.login-active) .app-header .header-user-icon {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body:not(.login-active) .app-header #headerNotificationsButton svg,
  html body:not(.login-active) .app-header #headerChatButton svg,
  html body:not(.login-active) .app-header #headerHomeButton svg,
  html body:not(.login-active) .app-header .header-user-icon svg {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
  }

  html body:not(.login-active) .app-header .header-icon-badge {
    top: -6px !important;
    right: -5px !important;
  }
}

/* Absolute soft-contrast lock.
   The main stylesheet still has a historical "final command theme" block.
   This loaded-last block keeps the newer palette from snapping back to bright white and near-black teal. */
html body:not(.login-active) {
  --command-panel: rgba(244, 250, 250, 0.96);
  --command-panel-2: rgba(228, 241, 243, 0.96);
  --command-line: rgba(99, 151, 164, 0.40);
  --command-shadow: 0 14px 28px rgba(7, 31, 44, 0.12);
  --command-shadow-soft: 0 8px 18px rgba(7, 31, 44, 0.08);
  --command-button-bg:
    linear-gradient(116deg, rgba(255,255,255,0) 0 64%, rgba(255,255,255,0.16) 64.4% 73%, rgba(255,255,255,0.04) 73.4% 100%),
    radial-gradient(circle at 22% 0%, rgba(64,224,231,0.22), transparent 42%),
    linear-gradient(180deg, rgba(67,130,140,0.95) 0%, rgba(38,96,109,0.97) 100%);
  background:
    radial-gradient(circle at 82% 2%, rgba(41,217,229,0.08), transparent 28%),
    radial-gradient(circle at 6% 22%, rgba(214,169,91,0.06), transparent 26%),
    linear-gradient(135deg, #eaf3f4 0%, #dfecee 48%, #edf4f4 100%) !important;
  background-size: auto !important;
}

html body:not(.login-active) .app-header {
  background: linear-gradient(180deg, rgba(241,249,249,0.98), rgba(222,238,241,0.98)) !important;
  border-bottom: 1px solid rgba(99,151,164,0.42) !important;
  box-shadow: 0 12px 24px rgba(7,31,44,0.11) !important;
}

html body:not(.login-active) .record-card,
html body:not(.login-active) .stat-card,
html body:not(.login-active) .folder-item,
html body:not(.login-active) .inspection-summary,
html body:not(.login-active) .table-wrap,
html body:not(.login-active) .dialog-panel,
html body:not(.login-active) .project-dialog-card,
html body:not(.login-active) .home-command-card,
html body:not(.login-active) .home-base-hero,
html body:not(.login-active) .home-role-panel,
html body:not(.login-active) .home-role-metric,
html body:not(.login-active) .home-role-project-card,
html body:not(.login-active) .home-attention-item,
html body:not(.login-active) .home-dashboard-panel,
html body:not(.login-active) .project-details-card,
html body:not(.login-active) .dashboard-card,
html body:not(.login-active) .form-card,
html body:not(.login-active) .sold-financial-table-card,
html body:not(.login-active) .sold-financial-editor-card {
  border-color: rgba(99,151,164,0.40) !important;
  background: linear-gradient(180deg, rgba(244,250,250,0.96), rgba(228,241,243,0.96)) !important;
  box-shadow: 0 8px 18px rgba(7,31,44,0.08) !important;
}

html body:not(.login-active) #homeView.active,
html body:not(.login-active) .home-base-dashboard {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(21,156,165,0.06), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(216,164,62,0.045), transparent 22%),
    linear-gradient(145deg, #e9f3f3 0%, #deebed 54%, #edf4f4 100%) !important;
  background-size: auto !important;
}

html body:not(.login-active) input,
html body:not(.login-active) select,
html body:not(.login-active) textarea {
  border-color: rgba(99,151,164,0.50) !important;
  background: rgba(248,252,252,0.96) !important;
}

html body:not(.login-active) .app-header .header-links .top-link,
html body:not(.login-active) .app-header #loginCard .header-links button.top-link,
html body:not(.login-active) .app-header .header-presence-indicator {
  border-color: rgba(99,151,164,0.52) !important;
  background: linear-gradient(180deg, rgba(246,252,252,0.96), rgba(224,240,243,0.96)) !important;
  color: #183c48 !important;
  box-shadow: 0 5px 12px rgba(7,31,44,0.07) !important;
  text-shadow: none !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
html body:not(.login-active) .app-header .header-chart-link,
html body:not(.login-active) .nav-link,
html body:not(.login-active) .tab {
  background: var(--command-button-bg) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent, var(--header-button-accent, #29d9e5)),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 9px 16px rgba(7,31,44,0.13),
    0 0 0 1px rgba(4,22,32,0.10) !important;
}

html body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.sold-financial-project-link):not(.section-report-page-tab),
html body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x) {
  background: var(--command-button-bg) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent, #29d9e5),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 14px rgba(7,31,44,0.12),
    0 0 0 1px rgba(4,22,32,0.08) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.54) !important;
}

html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.24), transparent 36%),
    linear-gradient(180deg, rgba(65,126,138,0.95), rgba(36,92,106,0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 16px rgba(7,31,44,0.13) !important;
}

/* Photoshop header reference lock.
   Header order follows the provided mockup: logo, icon controls, divider,
   admin/search controls, then the large workflow buttons. */
html body:not(.login-active) {
  --cmd-panel: rgba(226, 238, 241, 0.96);
  --cmd-panel-soft: rgba(213, 229, 233, 0.96);
  --cmd-line: rgba(77, 128, 139, 0.46);
  --command-panel: rgba(226, 238, 241, 0.96);
  --command-panel-2: rgba(213, 229, 233, 0.96);
  --command-line: rgba(77, 128, 139, 0.46);
  --command-button-bg:
    linear-gradient(116deg, rgba(255,255,255,0) 0 63%, rgba(255,255,255,0.14) 63.4% 72%, rgba(255,255,255,0.03) 72.4% 100%),
    radial-gradient(circle at 20% 0%, rgba(55,221,231,0.18), transparent 43%),
    linear-gradient(180deg, rgba(25,112,126,0.98) 0%, rgba(4,48,64,0.99) 100%);
  background:
    radial-gradient(circle at 72% 0%, rgba(44, 178, 188, 0.08), transparent 28%),
    linear-gradient(135deg, #dce9eb 0%, #d2e0e3 48%, #e2ecee 100%) !important;
}

html body:not(.login-active) .app-shell {
  grid-template-columns: 236px minmax(0, 1fr) !important;
}

html body:not(.login-active) .sidebar {
  background:
    linear-gradient(180deg, #07100f 0%, #061211 42%, #030606 100%) !important;
  border-right: 1px solid rgba(55, 221, 231, 0.22) !important;
}

html body:not(.login-active) .record-card,
html body:not(.login-active) .stat-card,
html body:not(.login-active) .folder-item,
html body:not(.login-active) .inspection-summary,
html body:not(.login-active) .table-wrap,
html body:not(.login-active) .dialog-panel,
html body:not(.login-active) .project-dialog-card,
html body:not(.login-active) .home-command-card,
html body:not(.login-active) .home-base-hero,
html body:not(.login-active) .home-role-panel,
html body:not(.login-active) .home-role-metric,
html body:not(.login-active) .home-role-project-card,
html body:not(.login-active) .home-attention-item,
html body:not(.login-active) .home-dashboard-panel,
html body:not(.login-active) .project-details-card,
html body:not(.login-active) .dashboard-card,
html body:not(.login-active) .form-card,
html body:not(.login-active) .sold-financial-table-card,
html body:not(.login-active) .sold-financial-editor-card {
  border-color: rgba(77, 128, 139, 0.46) !important;
  background: linear-gradient(180deg, rgba(226,238,241,0.97), rgba(213,229,233,0.97)) !important;
  box-shadow: 0 8px 18px rgba(7, 31, 44, 0.08) !important;
}

html body:not(.login-active) #homeView.active,
html body:not(.login-active) .home-base-dashboard {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(21,156,165,0.055), transparent 25%),
    linear-gradient(145deg, #dbe8ea 0%, #d1e0e3 56%, #e0eaec 100%) !important;
}

html body:not(.login-active) .app-header {
  background:
    linear-gradient(180deg, rgba(218, 234, 237, 0.99), rgba(205, 224, 228, 0.99)) !important;
  border-bottom: 1px solid rgba(77, 128, 139, 0.52) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.34),
    0 10px 22px rgba(7, 31, 44, 0.12) !important;
}

@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 236px !important;
    --header-utility-width: 360px !important;
    --header-search-width: 470px !important;
    --header-workflow-min: 716px !important;
    --header-action-width: 138px !important;
    --header-action-height: 64px !important;
    --header-action-icon: 32px !important;
    --header-action-font: 0.57rem !important;
    --header-icon-width: 46px !important;
    --header-icon-height: 70px !important;
    --header-gap: 18px !important;
    display: grid !important;
    grid-template-columns:
      var(--header-logo-width)
      var(--header-utility-width)
      1px
      var(--header-search-width)
      minmax(var(--header-workflow-min), 1fr) !important;
    grid-template-rows: 1fr !important;
    column-gap: var(--header-gap) !important;
    align-items: center !important;
    min-height: 114px !important;
    height: 114px !important;
    max-height: 114px !important;
    padding: 8px 24px 8px 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-brand {
    display: none !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: var(--header-logo-width) !important;
    max-width: var(--header-logo-width) !important;
    height: 98px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    width: 212px !important;
    max-width: 212px !important;
    height: 96px !important;
    max-height: 96px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  html body:not(.login-active) .app-header .header-utility-links {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: var(--header-utility-width) !important;
    min-width: var(--header-utility-width) !important;
    max-width: var(--header-utility-width) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-divider {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 92px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, transparent, rgba(54, 83, 91, 0.78), transparent) !important;
    border: 0 !important;
    opacity: 1 !important;
  }

  html body:not(.login-active) .app-header .login-card {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: var(--header-search-width) !important;
    max-width: var(--header-search-width) !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 13px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body:not(.login-active) .app-header .header-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-links .top-link,
  html body:not(.login-active) .app-header #loginCard .header-links button.top-link {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    border-color: rgba(77, 128, 139, 0.42) !important;
    background: linear-gradient(180deg, rgba(238,247,248,0.98), rgba(218,233,236,0.98)) !important;
    color: #101f28 !important;
    box-shadow: 0 5px 12px rgba(7, 31, 44, 0.08) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.045em !important;
    line-height: 1 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }

  html body:not(.login-active) .app-header .search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.login-active) .app-header .search-box input {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    border-color: rgba(77, 128, 139, 0.44) !important;
    background: rgba(236, 244, 246, 0.96) !important;
    color: #243944 !important;
    font-size: 0.86rem !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.86),
      0 5px 13px rgba(7,31,44,0.07) !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: var(--header-workflow-min) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html body:not(.login-active) .app-header .header-chart-divider {
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 68px !important;
    background: transparent !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 var(--header-action-width) !important;
    width: var(--header-action-width) !important;
    min-width: var(--header-action-width) !important;
    max-width: var(--header-action-width) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
    padding: 6px 10px 7px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 30px minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 1px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: var(--command-button-bg) !important;
  }

  html body:not(.login-active) .app-header .header-nav-icon {
    width: var(--header-action-icon) !important;
    min-width: var(--header-action-icon) !important;
    height: var(--header-action-icon) !important;
    min-height: var(--header-action-icon) !important;
    border-radius: 8px !important;
  }

  html body:not(.login-active) .app-header .header-nav-text,
  html body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    width: 100% !important;
    max-width: 100% !important;
    font-size: var(--header-action-font) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.095em !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    color: #ffffff !important;
  }

  html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: var(--header-icon-width) !important;
    min-width: var(--header-icon-width) !important;
    max-width: var(--header-icon-width) !important;
    height: var(--header-icon-height) !important;
    min-height: var(--header-icon-height) !important;
    max-height: var(--header-icon-height) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(60, 221, 231, 0.54) !important;
    background:
      radial-gradient(circle at 30% 16%, rgba(255,255,255,0.22), transparent 34%),
      linear-gradient(180deg, rgba(22, 123, 137, 0.98), rgba(4, 63, 82, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(0,0,0,0.24),
      9px 8px 0 rgba(45, 78, 84, 0.10),
      0 8px 14px rgba(7, 31, 44, 0.17) !important;
    color: #dffaff !important;
  }

  html body:not(.login-active) .app-header .header-icon-wrap,
  html body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  html body:not(.login-active) .app-header .header-user-icon {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
  }

  html body:not(.login-active) .app-header #headerNotificationsButton svg,
  html body:not(.login-active) .app-header #headerChatButton svg,
  html body:not(.login-active) .app-header #headerHomeButton svg,
  html body:not(.login-active) .app-header .header-user-icon svg {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    stroke-width: 1.85 !important;
  }

  html body:not(.login-active) .app-header .header-user-card {
    width: var(--header-icon-width) !important;
    min-width: var(--header-icon-width) !important;
    max-width: var(--header-icon-width) !important;
    height: var(--header-icon-height) !important;
    min-height: var(--header-icon-height) !important;
    max-height: var(--header-icon-height) !important;
  }

  html body:not(.login-active) .app-header .header-user-status,
  html body:not(.login-active) .app-header .header-user-arrow {
    display: none !important;
  }

  html body:not(.login-active) .app-header .header-user-details {
    top: calc(100% + 8px) !important;
  }

  html body:not(.login-active) .app-header .header-icon-badge {
    top: 2px !important;
    right: 1px !important;
  }

  html body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    position: absolute !important;
    right: -13px !important;
    top: 10px !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: #38df72 !important;
    border: 1px solid rgba(255,255,255,0.86) !important;
    box-shadow: 0 0 13px rgba(56,223,114,0.75) !important;
  }
}

@media (min-width: 1500px) and (max-width: 1799px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 222px !important;
    --header-utility-width: 298px !important;
    --header-search-width: 392px !important;
    --header-workflow-min: 640px !important;
    --header-action-width: 123px !important;
    --header-action-height: 60px !important;
    --header-action-icon: 29px !important;
    --header-action-font: 0.51rem !important;
    --header-icon-width: 43px !important;
    --header-icon-height: 66px !important;
    --header-gap: 12px !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    width: 198px !important;
  }
}

@media (min-width: 1241px) and (max-width: 1499px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 178px !important;
    --header-utility-width: 220px !important;
    --header-search-width: 410px !important;
    --header-workflow-min: 514px !important;
    --header-action-width: 94px !important;
    --header-action-height: 56px !important;
    --header-action-icon: 25px !important;
    --header-action-font: 0.38rem !important;
    --header-icon-width: 38px !important;
    --header-icon-height: 58px !important;
    --header-gap: 8px !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    width: 160px !important;
    height: 78px !important;
    max-height: 78px !important;
  }

  html body:not(.login-active) .app-header .header-links .top-link,
  html body:not(.login-active) .app-header #loginCard .header-links button.top-link {
    padding-inline: 5px !important;
    font-size: 0.47rem !important;
    letter-spacing: 0.035em !important;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 154px !important;
    --header-utility-width: 162px !important;
    --header-search-width: 230px !important;
    --header-workflow-min: 356px !important;
    --header-action-width: 68px !important;
    --header-action-height: 50px !important;
    --header-action-icon: 22px !important;
    --header-action-font: 0.34rem !important;
    --header-icon-width: 34px !important;
    --header-icon-height: 48px !important;
    --header-gap: 5px !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    padding-right: 8px !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell,
  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    height: 68px !important;
    max-height: 68px !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell a,
  html body:not(.login-active) .app-header .header-logo {
    width: 132px !important;
  }

  html body:not(.login-active) .app-header .header-links .top-link,
  html body:not(.login-active) .app-header #loginCard .header-links button.top-link {
    height: 21px !important;
    min-height: 21px !important;
    padding-inline: 5px !important;
    font-size: 0.44rem !important;
  }

  html body:not(.login-active) .app-header .search-box input {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.74rem !important;
  }
}

@media (max-width: 900px) {
  html body:not(.login-active) .app-header {
    background: linear-gradient(180deg, rgba(218,234,237,0.99), rgba(205,224,228,0.99)) !important;
  }

  html body:not(.login-active) .app-shell {
    grid-template-columns: 1fr !important;
  }
}

/* Quick Cam: field-first batch capture for roof section inspections. */
html body:not(.login-active) .app-shell .quick-cam-launch-button,
html body:not(.login-active) .app-shell button.quick-cam-start-button,
html body:not(.login-active) .app-shell button.quick-cam-assign-button {
  border: 1px solid rgba(124, 239, 255, 0.86) !important;
  background:
    linear-gradient(135deg, rgba(20, 130, 145, 0.96), rgba(5, 58, 76, 0.98) 56%, rgba(3, 15, 26, 1)),
    #073040 !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 4px 0 0 rgba(65, 231, 248, 0.85),
    0 14px 24px rgba(4, 25, 37, 0.24),
    0 0 18px rgba(38, 203, 224, 0.22) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38) !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button {
  width: fit-content !important;
  min-height: 34px !important;
  margin-top: 8px !important;
  padding: 7px 14px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .quick-cam-workspace {
  display: grid !important;
  gap: 14px !important;
}

html body:not(.login-active) .quick-cam-command-card,
html body:not(.login-active) .quick-cam-queue-head {
  border: 1px solid rgba(24, 129, 145, 0.28) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(247, 252, 252, 0.98), rgba(226, 241, 242, 0.96)),
    #f3f9f9 !important;
  color: #0d2c38 !important;
  box-shadow: 0 14px 28px rgba(12, 44, 58, 0.1) !important;
}

html body:not(.login-active) .quick-cam-command-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
}

html body:not(.login-active) .quick-cam-command-card span,
html body:not(.login-active) .quick-cam-queue-head span {
  color: #0c7784 !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .quick-cam-command-card strong,
html body:not(.login-active) .quick-cam-queue-head strong {
  display: block !important;
  color: #071b26 !important;
  font-size: 1.2rem !important;
  line-height: 1.05 !important;
}

html body:not(.login-active) .quick-cam-command-card p {
  max-width: 720px !important;
  margin: 6px 0 0 !important;
  color: #415d67 !important;
  font-size: 0.9rem !important;
}

html body:not(.login-active) .app-shell button.quick-cam-start-button {
  min-height: 52px !important;
  width: 100% !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .quick-cam-queue-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}

html body:not(.login-active) .quick-cam-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 12px !important;
}

html body:not(.login-active) .quick-cam-card {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(16, 104, 119, 0.34) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(235,245,246,0.96)),
    #ffffff !important;
  box-shadow: 0 12px 24px rgba(6, 31, 42, 0.11) !important;
}

html body:not(.login-active) .quick-cam-card-preview {
  display: grid !important;
  place-items: center !important;
  min-height: 132px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #0a2230 !important;
}

html body:not(.login-active) .quick-cam-card-preview .thumbnail-button {
  width: 100% !important;
  height: 132px !important;
  border-radius: 10px !important;
}

html body:not(.login-active) .quick-cam-card-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body:not(.login-active) .quick-cam-no-preview {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 132px !important;
  color: #dffcff !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .quick-cam-card-copy {
  display: grid !important;
  gap: 2px !important;
}

html body:not(.login-active) .quick-cam-card-copy strong {
  color: #102d3b !important;
  font-size: 0.9rem !important;
  line-height: 1.1 !important;
}

html body:not(.login-active) .quick-cam-card-copy span,
html body:not(.login-active) .quick-cam-card-copy small {
  color: #55707b !important;
  font-size: 0.72rem !important;
}

html body:not(.login-active) .quick-cam-card-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
}

html body:not(.login-active) .quick-cam-card-controls label {
  color: #123544 !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .quick-cam-card-controls select {
  width: 100% !important;
  min-height: 38px !important;
  margin-top: 4px !important;
  font-size: 0.82rem !important;
}

html body:not(.login-active) .app-shell button.quick-cam-assign-button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body:not(.login-active) .quick-cam-empty {
  grid-column: 1 / -1 !important;
  min-height: 84px !important;
  display: grid !important;
  place-items: center !important;
}

html body:not(.login-active) .camera-capture-status {
  margin: 10px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(76, 225, 241, 0.32) !important;
  border-radius: 8px !important;
  background: rgba(230, 251, 253, 0.08) !important;
  color: #dcfbff !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  html body:not(.login-active) .quick-cam-command-card {
    grid-template-columns: 1fr !important;
  }

  html body:not(.login-active) .quick-cam-card-controls {
    grid-template-columns: 1fr !important;
  }

  html body:not(.login-active) .app-shell button.quick-cam-assign-button {
    width: 100% !important;
  }
}

/* Quick Cam discovery boost: make the fast-capture entry point impossible to miss. */
html body:not(.login-active) .app-shell .quick-cam-launch-button,
html body:not(.login-active) .app-shell button.quick-cam-start-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: rgba(255, 217, 93, 0.94) !important;
  background:
    linear-gradient(115deg, rgba(255, 220, 92, 0.28) 0 24%, transparent 24% 100%),
    linear-gradient(145deg, #11bfd0 0%, #087786 43%, #051728 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 0 rgba(2, 22, 32, 0.62),
    0 12px 22px rgba(4, 25, 37, 0.26),
    0 0 0 3px rgba(255, 218, 97, 0.2),
    0 0 24px rgba(20, 211, 231, 0.28) !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button::before,
html body:not(.login-active) .app-shell button.quick-cam-start-button::before {
  content: "CAM" !important;
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 22px !important;
  border: 1px solid rgba(255, 245, 190, 0.72) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 251, 218, 0.98), rgba(255, 207, 77, 0.94)) !important;
  color: #063240 !important;
  font-size: 0.48rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22) !important;
  z-index: 1 !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button::after,
html body:not(.login-active) .app-shell button.quick-cam-start-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 54% !important;
  width: 44% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent) !important;
  transform: skewX(-22deg) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html body:not(.login-active) .app-shell .quick-cam-launch-button {
  width: 170px !important;
  min-width: 170px !important;
  min-height: 42px !important;
  padding: 9px 17px 9px 50px !important;
  font-size: 0.74rem !important;
}

html body:not(.login-active) .app-shell button.quick-cam-start-button {
  min-height: 58px !important;
  padding-left: 58px !important;
  font-size: 0.92rem !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab {
  flex-basis: clamp(160px, 15vw, 198px) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  border-color: rgba(255, 217, 93, 0.96) !important;
  background:
    linear-gradient(115deg, rgba(255, 220, 92, 0.24) 0 28%, transparent 28% 100%),
    linear-gradient(145deg, #0fb2c4 0%, #086a78 48%, #061827 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 4px 0 0 rgba(255, 217, 93, 0.95),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(1, 22, 32, 0.3),
    0 0 22px rgba(25, 211, 230, 0.28) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab strong {
  grid-column: 1 / 2 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.42) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab .quick-cam-tab-badge {
  grid-column: 1 / 2 !important;
  color: #ffdf75 !important;
  font-size: 0.54rem !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  letter-spacing: 0.07em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.38) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab .section-report-file-count {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  border-color: rgba(255, 238, 158, 0.72) !important;
  background: rgba(255, 225, 104, 0.2) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35) !important;
}

html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab.active,
html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab:hover {
  background:
    linear-gradient(115deg, rgba(255, 245, 188, 0.35) 0 28%, transparent 28% 100%),
    linear-gradient(145deg, #ffd85f 0%, #15b9c9 42%, #062537 100%) !important;
  border-color: rgba(255, 245, 188, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    inset 4px 0 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 0 rgba(0, 0, 0, 0.38),
    0 14px 24px rgba(1, 22, 32, 0.32),
    0 0 30px rgba(255, 218, 97, 0.38) !important;
}

@media (max-width: 760px) {
  html body:not(.login-active) .app-shell .quick-cam-launch-button {
    min-height: 38px !important;
    padding: 8px 13px 8px 44px !important;
    font-size: 0.68rem !important;
  }

  html body:not(.login-active) .app-shell .quick-cam-launch-button::before {
    left: 9px !important;
    width: 28px !important;
    height: 20px !important;
    font-size: 0.44rem !important;
  }

  html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab {
    flex-basis: 150px !important;
  }

  html body:not(.login-active) .app-shell .section-page-banner-tabs button.section-report-page-tab.quick-cam-tab .quick-cam-tab-badge {
    font-size: 0.5rem !important;
  }
}

/* Header fit guard: keep top links, search, workflow buttons, and icons in
   their own lanes at desktop widths without letting the large buttons collide. */
@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: clamp(140px, 12.4vw, 236px) !important;
    --header-utility-width: clamp(146px, 15.8vw, 300px) !important;
    --header-search-width: clamp(230px, 30vw, 570px) !important;
    --header-action-width: clamp(58px, 6.65vw, 126px) !important;
    --header-action-height: clamp(50px, 3.2vw, 60px) !important;
    --header-action-icon: clamp(21px, 1.55vw, 29px) !important;
    --header-action-font: clamp(0.31rem, 0.029vw + 0.28rem, 0.52rem) !important;
    --header-icon-width: clamp(32px, 2.25vw, 43px) !important;
    --header-icon-height: clamp(48px, 3.3vw, 66px) !important;
    --header-gap: clamp(4px, 0.62vw, 12px) !important;
    --header-workflow-min: calc((var(--header-action-width) * 5) + 54px) !important;
    grid-template-columns:
      var(--header-logo-width)
      var(--header-utility-width)
      1px
      var(--header-search-width)
      minmax(var(--header-workflow-min), 1fr) !important;
    column-gap: var(--header-gap) !important;
    padding: 8px clamp(8px, 1vw, 20px) 8px 0 !important;
    overflow-x: clip !important;
  }

  html body:not(.login-active) .app-header .header-utility-links {
    width: var(--header-utility-width) !important;
    min-width: var(--header-utility-width) !important;
    max-width: var(--header-utility-width) !important;
  }

  html body:not(.login-active) .app-header .login-card {
    width: var(--header-search-width) !important;
    max-width: var(--header-search-width) !important;
    gap: clamp(7px, 0.7vw, 11px) !important;
  }

  html body:not(.login-active) .app-header .header-links {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    row-gap: 3px !important;
    overflow: hidden !important;
  }

  html body:not(.login-active) .app-header .header-links .top-link,
  html body:not(.login-active) .app-header #loginCard .header-links button.top-link {
    height: clamp(20px, 1.22vw, 23px) !important;
    min-height: clamp(20px, 1.22vw, 23px) !important;
    padding-inline: clamp(4px, 0.34vw, 7px) !important;
    font-size: clamp(0.42rem, 0.16vw + 0.28rem, 0.53rem) !important;
    letter-spacing: 0.035em !important;
  }

  html body:not(.login-active) .app-header .search-box input {
    height: clamp(32px, 2vw, 38px) !important;
    min-height: clamp(32px, 2vw, 38px) !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    width: 100% !important;
    min-width: var(--header-workflow-min) !important;
    max-width: 100% !important;
    gap: clamp(5px, 0.55vw, 10px) !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    gap: clamp(4px, 0.48vw, 8px) !important;
  }

  html body:not(.login-active) .app-header .header-chart-divider {
    flex-basis: clamp(4px, 0.48vw, 8px) !important;
    width: clamp(4px, 0.48vw, 8px) !important;
    min-width: clamp(4px, 0.48vw, 8px) !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-chart-link {
    padding: 5px clamp(4px, 0.42vw, 8px) 6px !important;
    grid-template-rows: minmax(21px, var(--header-action-icon)) minmax(0, 1fr) !important;
  }

  html body:not(.login-active) .app-header .header-nav-text,
  html body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    letter-spacing: 0.07em !important;
    line-height: 0.9 !important;
  }
}

/* TRUE FINAL HEADER ICON LOCK - Option 2 floating line icons.
   This intentionally removes every older tile/glass treatment from the small
   header utility controls. */
html body:not(.login-active) .app-header .header-utility-links {
  align-items: center !important;
  gap: clamp(14px, 1vw, 22px) !important;
  overflow: visible !important;
}

html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  width: clamp(38px, 2.55vw, 48px) !important;
  min-width: clamp(38px, 2.55vw, 48px) !important;
  max-width: clamp(38px, 2.55vw, 48px) !important;
  height: clamp(38px, 2.55vw, 48px) !important;
  min-height: clamp(38px, 2.55vw, 48px) !important;
  max-height: clamp(38px, 2.55vw, 48px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #064f5a !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button::before,
html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button::after,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button::before,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button::after,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button::before,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button::after,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle::before,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.login-active) .app-header .header-icon-wrap,
html body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
html body:not(.login-active) .app-header .header-user-icon {
  width: clamp(25px, 1.65vw, 31px) !important;
  min-width: clamp(25px, 1.65vw, 31px) !important;
  height: clamp(25px, 1.65vw, 31px) !important;
  min-height: clamp(25px, 1.65vw, 31px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body:not(.login-active) .app-header #headerNotificationsButton svg,
html body:not(.login-active) .app-header #headerChatButton svg,
html body:not(.login-active) .app-header #headerHomeButton svg,
html body:not(.login-active) .app-header .header-user-icon svg {
  width: clamp(25px, 1.65vw, 31px) !important;
  min-width: clamp(25px, 1.65vw, 31px) !important;
  height: clamp(25px, 1.65vw, 31px) !important;
  min-height: clamp(25px, 1.65vw, 31px) !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(0 4px 7px rgba(5, 49, 61, 0.13)) !important;
}

html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button:hover,
html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button.active,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:hover,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button:hover,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:hover,
html body:not(.login-active) .app-header .header-user-card.expanded button#headerUserToggle.header-user-toggle {
  color: #0093a4 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateY(-1px) scale(1.04) !important;
}

html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button.active svg,
html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button:hover svg,
html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:hover svg,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button:hover svg,
html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:hover svg,
html body:not(.login-active) .app-header .header-user-card.expanded button#headerUserToggle.header-user-toggle svg {
  filter: drop-shadow(0 0 8px rgba(41,217,229,0.42)) drop-shadow(0 4px 8px rgba(5, 49, 61, 0.14)) !important;
}

html body:not(.login-active) .app-header .header-user-card {
  width: clamp(38px, 2.55vw, 48px) !important;
  min-width: clamp(38px, 2.55vw, 48px) !important;
  max-width: clamp(38px, 2.55vw, 48px) !important;
  height: clamp(38px, 2.55vw, 48px) !important;
  min-height: clamp(38px, 2.55vw, 48px) !important;
  max-height: clamp(38px, 2.55vw, 48px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.login-active) .app-header .header-user-status,
html body:not(.login-active) .app-header .header-user-arrow {
  display: none !important;
}

html body:not(.login-active) .app-header .header-icon-badge {
  top: -5px !important;
  right: -5px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border: 2px solid #e2eef0 !important;
  border-radius: 999px !important;
  background: #e0574f !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  box-shadow: 0 4px 10px rgba(5, 49, 61, 0.18) !important;
}

@media (max-width: 900px) {
  html body:not(.login-active) .app-header .header-utility-links {
    gap: 10px !important;
  }

  html body:not(.login-active) .app-header button#headerHomeButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerChatButton.header-icon-button,
  html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle,
  html body:not(.login-active) .app-header .header-user-card {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  html body:not(.login-active) .app-header #headerNotificationsButton svg,
  html body:not(.login-active) .app-header #headerChatButton svg,
  html body:not(.login-active) .app-header #headerHomeButton svg,
  html body:not(.login-active) .app-header .header-user-icon svg {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
  }
}


/* Must stay last: compact deficiency media controls override the global command buttons. */
html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #d84b4b 0%, #a92525 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.18) !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete:hover,
html body:not(.login-active) .app-shell [data-deficiency-photo-carousel] > button.deficiency-photo-delete:focus-visible {
  background: linear-gradient(180deg, #e35a5a 0%, #b72d2d 100%) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Section media entry point: keep upload/camera controls out of the page until requested. */
html body:not(.login-active) .app-shell .section-add-photo-command {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 74px !important;
  padding: 10px 0 !important;
}

html body:not(.login-active) .app-shell button.section-add-photo-button {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  width: min(260px, 100%) !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 18px 10px 58px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 218, 95, 0.82) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(120deg, rgba(255, 226, 105, 0.26) 0 24%, transparent 24.5% 100%),
    linear-gradient(145deg, #13bed0 0%, #087988 43%, #041725 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 0 rgba(2, 18, 28, 0.68),
    0 12px 24px rgba(5, 31, 43, 0.20),
    0 0 0 3px rgba(255, 218, 95, 0.14) !important;
  text-align: left !important;
  transform: none !important;
}

html body:not(.login-active) .app-shell button.section-add-photo-button::before {
  content: "+" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

html body:not(.login-active) .app-shell button.section-add-photo-button span {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.055em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
}

html body:not(.login-active) .app-shell button.section-add-photo-button small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(236, 252, 255, 0.86) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

html body:not(.login-active) .app-shell button.section-add-photo-button:hover,
html body:not(.login-active) .app-shell button.section-add-photo-button:focus-visible {
  border-color: rgba(255, 236, 152, 0.98) !important;
  filter: saturate(1.08) brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

html body:not(.login-active) .app-shell .section-photo-upload-dialog,
html body:not(.login-active) .app-shell .deficiency-add-photo-dialog {
  width: min(520px, calc(100vw - 22px)) !important;
  max-width: calc(100vw - 22px) !important;
}

html body:not(.login-active) .app-shell .section-photo-upload-dialog .section-report-upload-control {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.login-active) .app-shell .deficiency-add-photo-dialog {
  width: min(760px, calc(100vw - 22px)) !important;
}

html body:not(.login-active) .app-shell .deficiency-add-photo-panel {
  max-height: min(84vh, 760px) !important;
  overflow: auto !important;
}

@media (max-width: 760px) {
  html body:not(.login-active) .app-shell .section-add-photo-command {
    min-height: 64px !important;
    padding: 8px 0 !important;
  }

  html body:not(.login-active) .app-shell button.section-add-photo-button {
    width: 100% !important;
    min-height: 54px !important;
    padding: 9px 14px 9px 52px !important;
  }

  html body:not(.login-active) .app-shell button.section-add-photo-button::before {
    left: 12px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 1.28rem !important;
  }

  html body:not(.login-active) .app-shell button.section-add-photo-button span {
    font-size: 0.84rem !important;
  }

  html body:not(.login-active) .app-shell button.section-add-photo-button small {
    font-size: 0.62rem !important;
  }
}


/* Final header fit lock.
   command-theme.css loads after the base stylesheet, so the practical sizing
   guard has to live here to prevent the large workflow buttons from clipping. */
@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 210px !important;
    --header-search-width: 320px !important;
    --header-action-width: 120px !important;
    --header-action-height: 56px !important;
    --header-action-icon: 29px !important;
    --header-action-icon-svg: 17px !important;
    --header-action-font: 0.55rem !important;
    --header-action-gap: 8px !important;
    overflow-x: visible !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links,
  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    gap: var(--header-action-gap) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 130px !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header button.top-link.header-chart-link {
    flex: 0 0 var(--header-action-width) !important;
    width: var(--header-action-width) !important;
    min-width: var(--header-action-width) !important;
    max-width: var(--header-action-width) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
    grid-template-rows: 27px minmax(0, 1fr) !important;
    row-gap: 2px !important;
    padding: 7px 8px 7px !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-icon,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-icon,
  html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-icon {
    width: var(--header-action-icon) !important;
    min-width: var(--header-action-icon) !important;
    max-width: var(--header-action-icon) !important;
    height: var(--header-action-icon) !important;
    min-height: var(--header-action-icon) !important;
    max-height: var(--header-action-icon) !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-icon svg,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-icon svg,
  html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-icon svg {
    width: var(--header-action-icon-svg) !important;
    height: var(--header-action-icon-svg) !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-text,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-text,
  html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-text,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.service-opportunities .header-nav-text,
  html body:not(.login-active) .app-header button.top-link.header-chart-link.service-opportunities .header-nav-text {
    font-size: var(--header-action-font) !important;
    letter-spacing: 0.045em !important;
    line-height: 0.98 !important;
  }

  html body:not(.login-active) .app-header .header-utility-links {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 210px !important;
    gap: 8px !important;
  }

  html body:not(.login-active) .app-header .header-icon-button,
  html body:not(.login-active) .app-header #headerHomeButton,
  html body:not(.login-active) .app-header .header-user-card,
  html body:not(.login-active) .app-header .header-user-toggle,
  html body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
    width: var(--header-action-height) !important;
    min-width: var(--header-action-height) !important;
    max-width: var(--header-action-height) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 190px !important;
    --header-search-width: 295px !important;
    --header-action-width: 110px !important;
    --header-action-height: 54px !important;
    --header-action-icon: 27px !important;
    --header-action-icon-svg: 16px !important;
    --header-action-font: 0.50rem !important;
    --header-action-gap: 7px !important;
  }

  html body:not(.login-active) .app-header .header-links .top-link {
    min-width: 68px !important;
    padding: 4px 8px !important;
    font-size: 0.56rem !important;
  }

  html body:not(.login-active) .app-header .search-box input {
    height: 42px !important;
    font-size: 0.78rem !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 10px !important;
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 0 !important;
  }
}

@media (min-width: 1401px) and (max-width: 1440px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 50px !important;
  }
}

@media (min-width: 1501px) and (max-width: 1700px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 0 !important;
  }
}

@media (min-width: 1651px) and (max-width: 1700px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 40px !important;
  }
}

@media (min-width: 1701px) and (max-width: 1840px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 130px !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  html body:not(.login-active) .app-header {
    --header-logo-width: 170px !important;
    --header-search-width: 260px !important;
    --header-action-width: 98px !important;
    --header-action-height: 52px !important;
    --header-action-icon: 24px !important;
    --header-action-icon-svg: 14px !important;
    --header-action-font: 0.44rem !important;
    --header-action-gap: 5px !important;
    padding-right: 10px !important;
  }

  html body:not(.login-active) .app-header .header-chart-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 5px !important;
  }

  html body:not(.login-active) .app-header .header-chart-divider {
    display: none !important;
  }
}

/* Header tools drawer: Option 7 badge controls.
   The smaller utility links now live behind a compact three-line menu so they
   no longer crowd the search field or compete with the workflow buttons. */
@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    --header-tools-width: 52px !important;
    grid-template-columns:
      var(--header-logo-width)
      var(--header-utility-width, 360px)
      1px
      var(--header-search-width)
      var(--header-tools-width)
      minmax(0, 1fr) !important;
  }

  html body:not(.login-active) .app-header .login-card,
  html body:not(.login-active) .app-header #loginCard.login-card {
    grid-column: 4 !important;
    grid-template-rows: 1fr !important;
  }

  html body:not(.login-active) .app-header .header-tools-menu {
    position: relative !important;
    z-index: 80 !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: var(--header-tools-width) !important;
    min-width: var(--header-tools-width) !important;
    max-width: var(--header-tools-width) !important;
    height: var(--header-action-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-tools-toggle {
    position: relative !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(47, 186, 197, 0.58) !important;
    background:
      radial-gradient(circle at 34% 18%, rgba(255,255,255,0.34), transparent 34%),
      linear-gradient(180deg, rgba(34, 104, 116, 0.98), rgba(5, 45, 57, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      0 8px 15px rgba(7,31,44,0.18),
      0 0 0 1px rgba(3,21,29,0.14) !important;
    cursor: pointer !important;
  }

  html body:not(.login-active) .app-header .header-tools-toggle:hover,
  html body:not(.login-active) .app-header .header-tools-toggle:focus-visible,
  html body:not(.login-active) .app-header .header-tools-menu.expanded .header-tools-toggle {
    border-color: rgba(69, 226, 236, 0.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(0,0,0,0.30),
      0 10px 18px rgba(7,31,44,0.22),
      0 0 18px rgba(45,217,229,0.28) !important;
    transform: translateY(-1px) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars,
  html body:not(.login-active) .app-header .header-tools-bars::before,
  html body:not(.login-active) .app-header .header-tools-bars::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #eaffff !important;
    box-shadow: 0 0 8px rgba(71, 232, 241, 0.40) !important;
    transform: translateX(-50%) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars::before {
    top: -7px !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars::after {
    top: 7px !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel {
    position: absolute !important;
    top: calc(100% + 11px) !important;
    left: 50% !important;
    width: 264px !important;
    min-width: 264px !important;
    transform: translateX(-50%) !important;
    padding: 12px !important;
    border: 1px solid rgba(66, 150, 163, 0.48) !important;
    border-radius: 10px !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(52, 211, 222, 0.14), transparent 42%),
      linear-gradient(180deg, rgba(234, 244, 246, 0.98), rgba(213, 229, 233, 0.98)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.72),
      0 18px 34px rgba(5, 27, 37, 0.24) !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel[hidden] {
    display: none !important;
  }

  html body:not(.login-active) .app-header .header-tools-title {
    margin: 0 0 9px !important;
    color: #075d68 !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(65, 137, 150, 0.44) !important;
    background:
      linear-gradient(180deg, rgba(250,253,253,0.98), rgba(227,239,242,0.98)) !important;
    color: #102d38 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.82),
      0 6px 12px rgba(7,31,44,0.08) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
    line-height: 1 !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link::before {
    content: "" !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #46d9e4, #057282) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.58),
      0 0 0 3px rgba(38, 203, 215, 0.13),
      0 0 10px rgba(38, 203, 215, 0.30) !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link.admin-only::before {
    background: linear-gradient(180deg, #f5c755, #9c700a) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.58),
      0 0 0 3px rgba(210, 165, 50, 0.13),
      0 0 10px rgba(210, 165, 50, 0.28) !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link:hover,
  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link:focus-visible,
  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link.active {
    border-color: rgba(22, 174, 190, 0.76) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(218,239,242,0.99)) !important;
    transform: translateX(2px) !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 6 !important;
  }
}

@media (min-width: 1121px) and (max-width: 1450px) {
  html body:not(.login-active) .app-header {
    grid-template-columns: clamp(140px, 12.4vw, 190px) 202px 1px 250px 48px minmax(0, 1fr) !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  html body:not(.login-active) .app-header {
    --header-tools-width: 48px !important;
  }

  html body:not(.login-active) .app-header .header-tools-toggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel {
    left: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  html body:not(.login-active) .app-header .header-tools-menu {
    position: absolute !important;
    top: 12px !important;
    left: clamp(128px, 43vw, 178px) !important;
    z-index: 170 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 0 !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-tools-toggle {
    position: relative !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(47, 186, 197, 0.62) !important;
    background:
      radial-gradient(circle at 34% 18%, rgba(255,255,255,0.34), transparent 34%),
      linear-gradient(180deg, rgba(34, 104, 116, 0.98), rgba(5, 45, 57, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      0 7px 13px rgba(7,31,44,0.18) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars,
  html body:not(.login-active) .app-header .header-tools-bars::before,
  html body:not(.login-active) .app-header .header-tools-bars::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 17px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #eaffff !important;
    box-shadow: 0 0 8px rgba(71, 232, 241, 0.38) !important;
    transform: translateX(-50%) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars::before {
    top: -7px !important;
  }

  html body:not(.login-active) .app-header .header-tools-bars::after {
    top: 7px !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel {
    position: fixed !important;
    z-index: 1000 !important;
    top: 96px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    padding: 12px !important;
    border: 1px solid rgba(66, 150, 163, 0.48) !important;
    border-radius: 10px !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(52, 211, 222, 0.14), transparent 42%),
      linear-gradient(180deg, rgba(234, 244, 246, 0.98), rgba(213, 229, 233, 0.98)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.72),
      0 18px 34px rgba(5, 27, 37, 0.24) !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel[hidden] {
    display: none !important;
  }

  html body:not(.login-active) .app-header .header-tools-title {
    margin: 0 0 9px !important;
    color: #075d68 !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-height: 38px !important;
    height: 38px !important;
    width: 100% !important;
    padding: 0 11px 0 12px !important;
    border-radius: 8px !important;
    color: #102d38 !important;
    background: linear-gradient(180deg, rgba(250,253,253,0.98), rgba(227,239,242,0.98)) !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link::before {
    content: "" !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #46d9e4, #057282) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.58),
      0 0 0 3px rgba(38, 203, 215, 0.13),
      0 0 10px rgba(38, 203, 215, 0.30) !important;
  }

  html body:not(.login-active) .app-header .header-tools-panel .header-links .top-link.admin-only::before {
    background: linear-gradient(180deg, #f5c755, #9c700a) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.58),
      0 0 0 3px rgba(210, 165, 50, 0.13),
      0 0 10px rgba(210, 165, 50, 0.28) !important;
  }
}

/* Option 2 lightweight button system.
   This intentionally sits at the end so older "heavy glass" button locks cannot
   repaint generic CRM actions back into bulky command bars. Header workflow,
   map controls, media thumbnails, and section tabs keep their specialized UI. */
html body:not(.login-active) {
  --soft-pill-bg: linear-gradient(180deg, #1b93a0 0%, #0a6571 100%);
  --soft-pill-bg-hover: linear-gradient(180deg, #23a5b1 0%, #08707c 100%);
  --soft-pill-bg-pressed: linear-gradient(180deg, #075d67 0%, #064c55 100%);
  --soft-pill-border: rgba(18, 122, 133, 0.72);
  --soft-pill-shadow: 0 6px 13px rgba(7, 31, 44, 0.13);
  --soft-pill-shadow-hover: 0 8px 16px rgba(7, 31, 44, 0.16);
}

html body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.gm-control-active):not(.sold-financial-project-link):not(.section-report-page-tab):not(.header-icon-button):not(.header-chart-link):not(.header-tools-toggle):not(.top-link),
html body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.header-tools-toggle):not(.top-link),
html body:not(.login-active) .app-shell .button-link,
html body:not(.login-active) .app-shell .primary-action,
html body:not(.login-active) .app-shell input[type="file"]::file-selector-button,
html body:not(.login-active) dialog input[type="file"]::file-selector-button {
  min-height: 32px !important;
  height: auto !important;
  padding: 7px 14px !important;
  border: 1px solid var(--soft-pill-border) !important;
  border-radius: 6px !important;
  background: var(--soft-pill-bg) !important;
  color: #f7fdff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    var(--soft-pill-shadow) !important;
  font-weight: 850 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.12 !important;
  text-shadow: 0 1px 0 rgba(2, 27, 36, 0.34) !important;
  text-transform: none !important;
  transform: none !important;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

html body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.gm-control-active):not(.sold-financial-project-link):not(.section-report-page-tab):not(.header-icon-button):not(.header-chart-link):not(.header-tools-toggle):not(.top-link):hover,
html body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.header-tools-toggle):not(.top-link):hover,
html body:not(.login-active) .app-shell .button-link:hover,
html body:not(.login-active) .app-shell .primary-action:hover,
html body:not(.login-active) .app-shell input[type="file"]::file-selector-button:hover,
html body:not(.login-active) dialog input[type="file"]::file-selector-button:hover {
  border-color: rgba(45, 205, 218, 0.86) !important;
  background: var(--soft-pill-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    var(--soft-pill-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

html body:not(.login-active) .app-shell button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.gm-control-active):not(.sold-financial-project-link):not(.section-report-page-tab):not(.header-icon-button):not(.header-chart-link):not(.header-tools-toggle):not(.top-link):active,
html body:not(.login-active) dialog button:not(.thumbnail-button):not(.video-thumbnail-button):not(.employee-photo-trigger):not(.deficiency-thumb):not(.preview-photo-nav-btn):not(.deficiency-photo-arrow):not(.deficiency-photo-delete):not(.close-x):not(.header-tools-toggle):not(.top-link):active,
html body:not(.login-active) .app-shell .button-link:active,
html body:not(.login-active) .app-shell .primary-action:active {
  background: var(--soft-pill-bg-pressed) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(0) !important;
}

html body:not(.login-active) .app-shell button.danger,
html body:not(.login-active) .app-shell button.delete-btn,
html body:not(.login-active) .app-shell button.employee-delete-btn,
html body:not(.login-active) .app-shell button.section-delete-btn,
html body:not(.login-active) .app-shell button.file-media-delete-btn,
html body:not(.login-active) dialog button.danger,
html body:not(.login-active) dialog button.delete-btn {
  border-color: rgba(184, 55, 49, 0.78) !important;
  background: linear-gradient(180deg, #d95a54 0%, #b83331 100%) !important;
  color: #fffafb !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 13px rgba(118, 19, 18, 0.16) !important;
}

html body:not(.login-active) .app-shell button:disabled,
html body:not(.login-active) dialog button:disabled,
html body:not(.login-active) .app-shell .button-link[aria-disabled="true"],
html body:not(.login-active) .app-shell .primary-action[aria-disabled="true"] {
  opacity: 0.58 !important;
  filter: grayscale(0.2) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

html body:not(.login-active) .sidebar .nav-link,
html body:not(.login-active) .sidebar .quick-add-btn {
  min-height: 36px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(24, 137, 149, 0.96) 0%, rgba(8, 91, 103, 0.98) 100%) !important;
  border: 1px solid rgba(44, 201, 216, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.18) !important;
  color: #f8fdff !important;
  text-shadow: 0 1px 0 rgba(0, 25, 32, 0.34) !important;
}

/* Slightly deeper app tone.
   Keeps the pale Stronghold look, but removes the stark white wash from the
   header, page canvas, and light cards. */
html body:not(.login-active) {
  --command-panel: rgba(226, 239, 241, 0.97);
  --command-panel-2: rgba(210, 228, 232, 0.97);
  background:
    radial-gradient(circle at 74% 4%, rgba(41, 217, 229, 0.08), transparent 30%),
    linear-gradient(135deg, #ddebee 0%, #cddfe3 46%, #e3eef0 100%) !important;
}

html body:not(.login-active) .app-header {
  background:
    linear-gradient(180deg, rgba(224, 240, 243, 0.99) 0%, rgba(204, 225, 230, 0.99) 100%) !important;
  border-bottom-color: rgba(82, 139, 153, 0.52) !important;
  box-shadow: 0 12px 26px rgba(7, 31, 44, 0.16) !important;
}

html body:not(.login-active) .app-shell,
html body:not(.login-active) .content,
html body:not(.login-active) main {
  background:
    radial-gradient(circle at 12% 0%, rgba(21, 156, 165, 0.055), transparent 28%),
    linear-gradient(145deg, #dcebee 0%, #cfE1e5 54%, #e4eef0 100%) !important;
}

html body:not(.login-active) .record-card,
html body:not(.login-active) .stat-card,
html body:not(.login-active) .folder-item,
html body:not(.login-active) .inspection-summary,
html body:not(.login-active) .table-wrap,
html body:not(.login-active) .dialog-panel,
html body:not(.login-active) .project-dialog-card,
html body:not(.login-active) .home-command-card,
html body:not(.login-active) .home-base-hero,
html body:not(.login-active) .home-role-panel,
html body:not(.login-active) .home-role-metric,
html body:not(.login-active) .home-role-project-card,
html body:not(.login-active) .home-attention-item,
html body:not(.login-active) .home-dashboard-panel,
html body:not(.login-active) .project-details-card,
html body:not(.login-active) .dashboard-card,
html body:not(.login-active) .form-card,
html body:not(.login-active) .sold-financial-table-card,
html body:not(.login-active) .sold-financial-editor-card,
html body:not(.login-active) .upload-recovery-metric,
html body:not(.login-active) .upload-recovery-file,
html body:not(.login-active) .upload-recovery-audit > div {
  background:
    linear-gradient(180deg, rgba(229, 241, 243, 0.97), rgba(211, 229, 233, 0.97)) !important;
  border-color: rgba(82, 139, 153, 0.46) !important;
  box-shadow: 0 9px 20px rgba(7, 31, 44, 0.11) !important;
}

html body:not(.login-active) input,
html body:not(.login-active) select,
html body:not(.login-active) textarea {
  background: rgba(235, 246, 247, 0.98) !important;
  border-color: rgba(82, 139, 153, 0.56) !important;
}

/* Center the property-section deficiency page as one focused column. */
html body:not(.login-active) .app-shell .deficiency-workspace {
  width: min(100%, 780px) !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 780px) !important;
  justify-content: center !important;
}

html body:not(.login-active) .app-shell .deficiency-add-photo-command {
  width: 100% !important;
}

html body:not(.login-active) .app-shell .deficiency-add-photo-button {
  width: min(260px, 100%) !important;
}

html body:not(.login-active) .app-shell .deficiency-entry-list {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  html body:not(.login-active) .app-shell .deficiency-workspace {
    width: 100% !important;
    margin-inline: 0 !important;
    justify-content: stretch !important;
  }
}

/* Final large-header-button visual lock: Option 4 light blueprint.
   This must remain at the end so older dark/glass button rules cannot win. */
html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
html body:not(.login-active) .app-header button.top-link.header-chart-link {
  --header-blueprint-accent: #30c8d5;
  --header-blueprint-ink: #073744;
  --header-blueprint-border: rgba(6, 82, 96, 0.36);
  --header-blueprint-shadow: rgba(6, 38, 49, 0.14);
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 5px !important;
  column-gap: 7px !important;
  row-gap: 2px !important;
  align-items: center !important;
  justify-items: stretch !important;
  padding: 6px 8px !important;
  color: var(--header-blueprint-ink) !important;
  border: 1px solid var(--header-blueprint-border) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(232,248,250,0.96) 44%, rgba(203,229,233,0.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.84),
    inset 0 -1px 0 rgba(8,69,82,0.08),
    0 8px 14px var(--header-blueprint-shadow) !important;
  overflow: hidden !important;
  text-shadow: none !important;
  transform: none !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link::before,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link::before,
html body:not(.login-active) .app-header button.top-link.header-chart-link::before {
  content: "" !important;
  position: static !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: min(58px, 78%) !important;
  height: 4px !important;
  justify-self: start !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--header-blueprint-accent), rgba(255,255,255,0.86), var(--header-blueprint-accent)) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--header-blueprint-accent) 55%, transparent) !important;
  opacity: 0.98 !important;
  pointer-events: none !important;
  transform: none !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link::after,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link::after,
html body:not(.login-active) .app-header button.top-link.header-chart-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px 5px auto 5px !important;
  width: auto !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  transform: none !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-icon,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-icon,
html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #f9ffff !important;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,0.34), transparent 38%),
    linear-gradient(180deg, #0b5362 0%, #073744 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 3px 8px rgba(7,55,68,0.22) !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-icon svg,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-icon svg,
html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-icon svg {
  color: #f9ffff !important;
  stroke: currentColor !important;
  width: 17px !important;
  height: 17px !important;
  filter: none !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link .header-nav-text,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link .header-nav-text,
html body:not(.login-active) .app-header button.top-link.header-chart-link .header-nav-text,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.service-opportunities .header-nav-text,
html body:not(.login-active) .app-header button.top-link.header-chart-link.service-opportunities .header-nav-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--header-blueprint-ink) !important;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(0.43rem, 0.49vw, 0.56rem) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: 0.032em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link:hover,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link:hover,
html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link:focus-visible,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link:focus-visible,
html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link.active,
html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(236,250,251,0.98) 48%, rgba(199,229,234,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(8,69,82,0.12),
    0 10px 18px rgba(6,38,49,0.18),
    0 0 0 1px color-mix(in srgb, var(--header-blueprint-accent) 34%, transparent) !important;
  transform: translateY(-1px) !important;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link.production {
  --header-blueprint-accent: #5f9bf7;
}

html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link.service {
  --header-blueprint-accent: #35c2b0;
}

html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.pipeline {
  --header-blueprint-accent: #d8a73b;
}

html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.service-opportunities {
  --header-blueprint-accent: #39cbdc;
}

html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.approved {
  --header-blueprint-accent: #63c36f;
}

@media (min-width: 901px) {
  html body:not(.login-active) .app-header {
    --header-action-width: 124px !important;
    --header-action-height: 56px !important;
  }

  html body:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link,
  html body:not(.login-active) .app-header button.top-link.header-chart-link {
    flex-basis: var(--header-action-width) !important;
    width: var(--header-action-width) !important;
    min-width: var(--header-action-width) !important;
    max-width: var(--header-action-width) !important;
    height: var(--header-action-height) !important;
    min-height: var(--header-action-height) !important;
    max-height: var(--header-action-height) !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 20px !important;
  }

  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    gap: 7px !important;
  }
}

/* Field usability cleanup: page content should follow the back button in normal flow.
   Older theme passes used per-page negative margins and JS transforms, which made
   cards overlap at certain viewport widths. Keep one stable rhythm instead. */
html body:not(.login-active) .workspace {
  display: block !important;
  padding-top: 10px !important;
  gap: 0 !important;
}

html body:not(.login-active) .workspace-topbar {
  margin: 0 0 10px !important;
  height: 30px !important;
  min-height: 28px !important;
  max-height: 30px !important;
  align-items: center !important;
  overflow: visible !important;
}

html body:not(.login-active) .workspace > .view.active {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
}

html body:not(.login-active) .workspace > .view.active > :first-child {
  margin-top: 0 !important;
}

html body:not(.login-active) #customersView .clients-page-layout,
html body:not(.login-active) #recentPropertiesView .clients-page-layout,
html body:not(.login-active) #fileLibraryView .file-library-layout {
  margin-top: 0 !important;
}

html body:not(.login-active) #customersView .clients-page-layout {
  grid-template-columns: minmax(620px, 760px) 1px minmax(320px, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

html body:not(.login-active) #customersView .clients-list-actions {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 0 8px !important;
}

html body:not(.login-active) #customersView .clients-list-shell {
  grid-column: 1 !important;
}

html body:not(.login-active) #customersView .clients-map-divider {
  grid-column: 2 !important;
  display: block !important;
}

html body:not(.login-active) #customersView .clients-map-shell {
  grid-column: 3 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body:not(.login-active) #customersView .customer-list-map {
  width: 100% !important;
  min-width: 0 !important;
}

html body:not(.login-active) #customersView .owner-name-cell .customer-expand {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin-left: 4px !important;
  padding: 0 !important;
  border: 1px solid rgba(23, 124, 135, 0.34) !important;
  border-radius: 999px !important;
  color: #0a5964 !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95), rgba(230, 247, 248, 0.78) 58%, rgba(188, 226, 231, 0.82) 100%) !important;
  box-shadow:
    0 3px 8px rgba(7, 31, 44, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  transform: none !important;
}

html body:not(.login-active) #customersView .owner-name-cell .customer-expand:hover,
html body:not(.login-active) #customersView .owner-name-cell .customer-expand:focus-visible {
  border-color: rgba(21, 156, 165, 0.72) !important;
  color: #023d47 !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 1), rgba(211, 247, 249, 0.92) 58%, rgba(140, 220, 226, 0.9) 100%) !important;
  box-shadow:
    0 5px 12px rgba(7, 31, 44, 0.16),
    0 0 0 3px rgba(21, 156, 165, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Header interaction lock: profile menu and mobile tools placement.
   Keep this last so older header experiments cannot move these controls again. */
html body:not(.login-active) .app-header .header-user-details {
  position: fixed !important;
  top: var(--header-user-menu-top, 76px) !important;
  left: var(--header-user-menu-left, calc(100vw - 184px)) !important;
  right: auto !important;
  z-index: 5000 !important;
  pointer-events: auto !important;
}

html body:not(.login-active) .app-header .header-user-details button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (max-width: 900px) {
  html body:not(.login-active) .app-header {
    display: grid !important;
    grid-template-columns: 58px 44px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "logo tools utilities utilities"
      "search search search search"
      "workflow workflow workflow workflow" !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html body:not(.login-active) .app-header .header-tools-menu {
    grid-area: tools !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    justify-self: center !important;
    align-self: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    z-index: 220 !important;
  }

  html body:not(.login-active) .app-header .header-tools-toggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

html body:not(.login-active) .app-header .header-tools-panel {
    position: fixed !important;
    top: 104px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 5001 !important;
  }
}

/* Daily progress field relay: make foreman photo batching obvious and fast. */
html body:not(.login-active) .app-shell .daily-progress-capture-panel {
  border-color: rgba(21, 156, 165, 0.48) !important;
  background:
    linear-gradient(126deg, rgba(33, 185, 198, 0.13) 0 34%, transparent 34.5% 100%),
    linear-gradient(180deg, rgba(239, 250, 251, 0.98), rgba(210, 231, 235, 0.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(7, 31, 44, 0.10) !important;
}

html body:not(.login-active) .app-shell button.daily-progress-quickcam-button {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  width: 100% !important;
  min-height: 66px !important;
  padding: 10px 14px 10px 58px !important;
  border: 1px solid rgba(42, 220, 231, 0.78) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(120deg, rgba(255, 226, 105, 0.22) 0 22%, transparent 22.5% 100%),
    linear-gradient(145deg, #11aebe 0%, #087684 45%, #041826 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(2, 18, 28, 0.62),
    0 12px 24px rgba(5, 31, 43, 0.18),
    0 0 0 3px rgba(42, 220, 231, 0.13) !important;
  text-align: left !important;
}

html body:not(.login-active) .app-shell button.daily-progress-quickcam-button::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 30px !important;
  height: 22px !important;
  border: 2px solid rgba(255, 255, 255, 0.88) !important;
  border-radius: 7px !important;
  transform: translateY(-50%) !important;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.12) !important;
}

html body:not(.login-active) .app-shell button.daily-progress-quickcam-button::after {
  content: "" !important;
  position: absolute !important;
  left: 25px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
}

html body:not(.login-active) .app-shell button.daily-progress-quickcam-button span {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body:not(.login-active) .app-shell button.daily-progress-quickcam-button small {
  margin-top: 4px !important;
  color: rgba(235, 252, 255, 0.86) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
}

html body:not(.login-active) .app-shell button.daily-progress-gallery-button {
  width: 100% !important;
  min-height: 38px !important;
}

@media (max-width: 760px) {
  html body:not(.login-active) .app-shell .daily-progress-capture-panel {
    padding: 11px !important;
  }

  html body:not(.login-active) .app-shell .daily-progress-capture-copy strong {
    font-size: 1.08rem !important;
  }

  html body:not(.login-active) .app-shell button.daily-progress-quickcam-button {
    min-height: 60px !important;
  }
}