@font-face {
  font-family: "Ringbearer";
  src: url("./RingbearerMedium-51mgZ.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Stronghold usability redesign layer */
:root {
  --stronghold-ink: #102a34;
  --stronghold-ink-soft: #284d5c;
  --stronghold-muted: #607682;
  --stronghold-line: #bfd2dc;
  --stronghold-line-strong: #88b6c2;
  --stronghold-paper: #f7fbfc;
  --stronghold-grid: rgba(21, 156, 165, 0.09);
  --stronghold-teal: #159ca5;
  --stronghold-teal-dark: #0b6f78;
  --stronghold-green: #2aa84a;
  --stronghold-blue: #2f79c8;
  --stronghold-red: #cf3e38;
  --stronghold-gold: #d8a43e;
  --stronghold-shadow: 0 14px 34px rgba(16, 42, 52, 0.11);
  --stronghold-shadow-soft: 0 7px 18px rgba(16, 42, 52, 0.08);
}

body:not(.login-active) {
  color: var(--stronghold-ink);
  background:
    linear-gradient(90deg, var(--stronghold-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--stronghold-grid) 1px, transparent 1px),
    linear-gradient(135deg, #f9fcfd 0%, #ecf5f7 48%, #f7fbfc 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

/* Stronghold command theme refresh.
   Final layer: keeps the accepted teal glass banner as the source of truth for
   buttons and high-touch controls while leaving data/forms readable. */
:root {
  --command-ink: #102a34;
  --command-ink-2: #1b3b48;
  --command-muted: #5d7581;
  --command-page: #f4f9fa;
  --command-panel: rgba(255, 255, 255, 0.94);
  --command-panel-2: rgba(239, 248, 250, 0.94);
  --command-line: rgba(121, 171, 184, 0.44);
  --command-cyan: #29d9e5;
  --command-teal: #159ca5;
  --command-teal-dark: #073c4d;
  --command-night: #071f2c;
  --command-night-2: #102f3e;
  --command-gold: #d6a95b;
  --command-green: #39c96b;
  --command-red: #e0574f;
  --command-blue: #6ca6f0;
  --command-purple: #8ea1ff;
  --command-shadow: 0 18px 34px rgba(7, 31, 44, 0.16);
  --command-shadow-soft: 0 9px 20px rgba(7, 31, 44, 0.10);
  --command-button-bg:
    linear-gradient(116deg, rgba(255,255,255,0) 0 64%, rgba(255,255,255,0.12) 64.3% 72%, rgba(255,255,255,0.02) 72.4% 100%),
    radial-gradient(circle at 22% 0%, rgba(41, 217, 229, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%);
}

body:not(.login-active) {
  color: var(--command-ink) !important;
  background:
    radial-gradient(circle at 74% 4%, rgba(41, 217, 229, 0.10), transparent 30%),
    linear-gradient(135deg, #f8fbfc 0%, #edf5f7 46%, #f6fafb 100%) !important;
  background-size: auto !important;
}

body:not(.login-active) .workspace,
body:not(.login-active) .view {
  color: var(--command-ink) !important;
}

body:not(.login-active) .record-card,
body:not(.login-active) .stat-card,
body:not(.login-active) .folder-item,
body:not(.login-active) .inspection-summary,
body:not(.login-active) .table-wrap,
body:not(.login-active) .dialog-panel,
body:not(.login-active) .project-dialog-card,
body:not(.login-active) .home-command-card,
body:not(.login-active) .sold-financial-table-card,
body:not(.login-active) .sold-financial-editor-card {
  border: 1px solid var(--command-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, var(--command-panel) 0%, var(--command-panel-2) 100%) !important;
  box-shadow: var(--command-shadow-soft) !important;
  color: var(--command-ink) !important;
}

body:not(.login-active) input,
body:not(.login-active) select,
body:not(.login-active) textarea {
  border-color: rgba(121, 171, 184, 0.58) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--command-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !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),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !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(.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(.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(--command-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(--command-button-bg) !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;
  text-transform: none !important;
  transform: translateZ(0) !important;
  transition:
    transform 150ms ease,
    border-color 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(.close-x):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(.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 {
  border-color: color-mix(in srgb, var(--glass-accent) 76%, #ffffff 24%) !important;
  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:focus-visible,
body:not(.login-active) dialog button:focus-visible,
body:not(.login-active) .button-link:focus-visible,
body:not(.login-active) .top-link:focus-visible,
body:not(.login-active) input[type="file"]::file-selector-button:focus-visible {
  outline: 3px solid rgba(41, 217, 229, 0.34) !important;
  outline-offset: 2px !important;
}

body:not(.login-active) .app-shell button.small,
body:not(.login-active) dialog button.small,
body:not(.login-active) #backBtn.small {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 0.66rem !important;
}

body:not(.login-active) .app-shell button.ghost,
body:not(.login-active) dialog button.ghost,
body:not(.login-active) .folder.ghost {
  --glass-accent: #8ec7d4;
  --glass-glow: rgba(142, 199, 212, 0.28);
}

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

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(--command-red);
  --glass-glow: rgba(224, 87, 79, 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(--command-gold) !important;
  --glass-glow: rgba(214, 169, 91, 0.48) !important;
  border-color: rgba(214, 169, 91, 0.78) !important;
  box-shadow:
    inset 3px 0 0 var(--command-gold),
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 20px rgba(7, 31, 44, 0.20),
    0 0 18px rgba(214, 169, 91, 0.34) !important;
}

body:not(.login-active) .app-shell button:disabled,
body:not(.login-active) dialog button:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.45) !important;
  transform: none !important;
}

body:not(.login-active) .sidebar {
  background:
    radial-gradient(circle at 50% -10%, rgba(41, 217, 229, 0.16), transparent 36%),
    linear-gradient(180deg, #082f2e 0%, #08251f 100%) !important;
  border-right: 1px solid rgba(41, 217, 229, 0.28) !important;
  box-shadow: 10px 0 32px rgba(7, 31, 44, 0.18) !important;
}

body:not(.login-active) .sidebar .nav-link {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
  --glass-accent: var(--command-cyan);
}

body:not(.login-active) .sidebar-module-label {
  color: rgba(232, 249, 252, 0.82) !important;
  letter-spacing: 0.12em !important;
}

body:not(.login-active) .app-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,250,0.98) 100%) !important;
  border-bottom: 1px solid rgba(121, 171, 184, 0.46) !important;
  box-shadow: 0 12px 26px rgba(7, 31, 44, 0.12) !important;
}

body:not(.login-active) .app-header .header-links .top-link,
body:not(.login-active) .app-header .header-presence-indicator {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 9px !important;
  --glass-accent: #8ec7d4;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(237,247,249,0.96)) !important;
  color: var(--command-ink) !important;
  border-color: rgba(121, 171, 184, 0.56) !important;
  box-shadow: 0 5px 12px rgba(7, 31, 44, 0.07) !important;
  text-shadow: none !important;
}

body:not(.login-active) .app-header .header-chart-link {
  --glass-accent: var(--header-button-accent, var(--command-cyan));
  --glass-glow: var(--header-button-glow, rgba(41, 217, 229, 0.42));
  color: #f8fcff !important;
  background: var(--command-button-bg) !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.22),
    0 10px 18px rgba(7, 31, 44, 0.18),
    0 0 0 1px rgba(4, 22, 32, 0.12) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.62) !important;
}

body:not(.login-active) .app-header .header-chart-link::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(116deg, transparent 0 66%, rgba(255,255,255,0.12) 66.4% 75%, transparent 75.4% 100%) !important;
}

body:not(.login-active) .app-header .header-chart-link::after {
  background: var(--glass-accent) !important;
  box-shadow: 0 0 12px var(--glass-glow) !important;
}

body:not(.login-active) .app-header .header-nav-icon {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.38), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-accent) 76%, #ffffff 12%) 0%, color-mix(in srgb, var(--glass-accent) 64%, #092c37 36%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--glass-accent) 72%, #ffffff 18%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 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.7) !important;
}

body:not(.login-active) .app-header .header-icon-button,
body:not(.login-active) .app-header #headerHomeButton,
body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  --glass-accent: var(--command-cyan);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.26), transparent 34%),
    linear-gradient(180deg, rgba(21, 72, 85, 0.96), rgba(7, 34, 48, 0.98)) !important;
  border: 1px solid rgba(41, 217, 229, 0.54) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 16px rgba(7, 31, 44, 0.18) !important;
}

body:not(.login-active) .app-header .header-icon-button svg,
body:not(.login-active) .app-header #headerHomeButton svg,
body:not(.login-active) .app-header .header-user-icon svg {
  color: #e9fcff !important;
  fill: #e9fcff !important;
}

body:not(.login-active) .section-report-page-tab,
body:not(.login-active) .tab {
  min-height: 36px !important;
  color: #f8fcff !important;
}

body:not(.login-active) .section-report-page-tab strong,
body:not(.login-active) .section-report-page-tab span,
body:not(.login-active) .tab strong,
body:not(.login-active) .tab span {
  color: inherit !important;
}

body:not(.login-active) .section-report-file-count.is-empty {
  background: rgba(214, 169, 91, 0.24) !important;
  border-color: rgba(214, 169, 91, 0.72) !important;
  color: #fff4ce !important;
}

body:not(.login-active) .section-report-file-count.has-files {
  background: rgba(57, 201, 107, 0.24) !important;
  border-color: rgba(57, 201, 107, 0.70) !important;
  color: #d9ffe5 !important;
}

body:not(.login-active) table th {
  background: linear-gradient(180deg, #0d4f58 0%, #073646 100%) !important;
  color: #f3fdff !important;
  border-bottom-color: rgba(41, 217, 229, 0.35) !important;
}

body:not(.login-active) table td {
  color: var(--command-ink) !important;
}

@media (max-width: 760px) {
  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(.close-x):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(.close-x),
  body:not(.login-active) .button-link,
  body:not(.login-active) .top-link,
  body:not(.login-active) input[type="file"]::file-selector-button {
    min-height: 38px !important;
    padding: 9px 12px !important;
    font-size: 0.72rem !important;
  }

  body:not(.login-active) .sidebar .nav-link {
    min-height: 42px !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 {
    box-shadow: 0 8px 18px rgba(7, 31, 44, 0.09) !important;
  }
}

/* Sold job financial control center */
#soldFinancialsView.active {
  display: block;
}

.sold-financial-heading small {
  display: block;
  color: #496073;
  font-weight: 700;
  margin-top: 4px;
}

.sold-financial-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  margin: 6px 0 14px;
}

.sold-financial-kpi {
  background: linear-gradient(145deg, #ffffff 0%, #eef7f8 100%);
  border: 1px solid rgba(13, 78, 82, 0.18);
  border-top: 5px solid var(--stronghold-teal);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(10, 38, 48, 0.11);
  min-height: 104px;
  padding: 14px 14px 12px;
}

.sold-financial-kpi.gold { border-top-color: var(--stronghold-gold); }
.sold-financial-kpi.green { border-top-color: #2da95f; }
.sold-financial-kpi.blue { border-top-color: #2f7df6; }
.sold-financial-kpi.red { border-top-color: var(--stronghold-red); }
.sold-financial-kpi.teal { border-top-color: var(--stronghold-teal); }

.sold-financial-kpi span,
.sold-financial-kpi small {
  display: block;
  color: #496073;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sold-financial-kpi span {
  font-size: 0.72rem;
}

.sold-financial-kpi strong {
  display: block;
  color: #102f3a;
  font-family: var(--stronghold-heading-font);
  font-size: 1.25rem;
  margin: 9px 0 5px;
}

.sold-financial-kpi small {
  font-size: 0.68rem;
  text-transform: none;
}

.sold-financial-layout {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(430px, 0.75fr);
  gap: 14px;
}

.sold-financial-card-head,
.sold-financial-editor-head,
.sold-financial-save-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sold-financial-card-head h3,
.sold-financial-editor-head h3 {
  color: #12313e;
  font-family: var(--stronghold-heading-font);
  margin: 4px 0 0;
}

.sold-financial-card-head > strong {
  background: rgba(214, 64, 53, 0.1);
  border: 1px solid rgba(214, 64, 53, 0.24);
  border-radius: 8px;
  color: #a0251f;
  padding: 7px 10px;
  white-space: nowrap;
}

.sold-financial-table-card,
.sold-financial-editor-card {
  border-color: rgba(13, 78, 82, 0.18);
  box-shadow: 0 18px 36px rgba(10, 38, 48, 0.1);
}

.sold-financial-table-wrap {
  max-height: 64vh;
  margin-top: 12px;
}

.sold-financial-table th {
  background: #0d5554;
  color: #ffffff;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.sold-financial-table td {
  background: rgba(255, 255, 255, 0.92);
  color: #163847;
  font-size: 0.8rem;
  vertical-align: middle;
}

.sold-financial-table tr.selected td {
  background: #e9fbfc;
  box-shadow: inset 0 1px 0 rgba(21, 166, 170, 0.25), inset 0 -1px 0 rgba(21, 166, 170, 0.25);
}

.sold-financial-table .sold-financial-project-cell {
  min-width: 180px;
}

.sold-financial-table a.sold-financial-project-link,
.sold-financial-table a.sold-financial-project-link:visited {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0b6f78 !important;
  display: inline;
  font-family: inherit;
  height: auto !important;
  letter-spacing: 0;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
}

.sold-financial-table a.sold-financial-project-link strong {
  color: #0b5662 !important;
  display: inline;
  font-weight: 900;
}

.sold-financial-table a.sold-financial-project-link span {
  color: #415b68 !important;
  display: block;
  font-size: 0.72rem;
  font-weight: 750;
  margin-top: 2px;
}

.sold-financial-table a.sold-financial-project-link:hover strong,
.sold-financial-table a.sold-financial-project-link:focus-visible strong {
  color: #004d56 !important;
  text-decoration: underline;
}

.sold-financial-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sold-financial-pill {
  border-radius: 999px;
  border: 1px solid rgba(13, 78, 82, 0.18);
  color: #163847;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 4px 8px;
  text-transform: uppercase;
}

.sold-financial-pill.good {
  background: #e8f8ef;
  border-color: rgba(45, 169, 95, 0.35);
  color: #136638;
}

.sold-financial-pill.warn {
  background: #fff7df;
  border-color: rgba(210, 154, 43, 0.42);
  color: #80540c;
}

.sold-financial-pill.risk {
  background: #ffe8e6;
  border-color: rgba(214, 64, 53, 0.35);
  color: #9f2720;
}

.money-risk {
  color: #b92820 !important;
  font-weight: 900 !important;
}

.money-good {
  color: #12693a !important;
  font-weight: 900 !important;
}

.sold-financial-editor-head small {
  color: #52687a;
  display: block;
  font-weight: 700;
  margin-top: 3px;
}

.sold-financial-auto-grid,
.sold-financial-readouts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
}

.sold-financial-auto-grid span,
.sold-financial-readouts span {
  background: #f7fbfb;
  border: 1px solid rgba(13, 78, 82, 0.14);
  border-radius: 8px;
  padding: 8px;
}

.sold-financial-auto-grid small,
.sold-financial-readouts small {
  color: #5a7080;
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sold-financial-auto-grid strong,
.sold-financial-readouts strong {
  color: #132f3a;
  display: block;
  font-size: 0.82rem;
  margin-top: 3px;
}

.sold-financial-form {
  display: grid;
  gap: 12px;
}

.sold-financial-form fieldset {
  border: 1px solid rgba(13, 78, 82, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 14px;
}

.sold-financial-form legend {
  color: #0c5056;
  font-family: var(--stronghold-heading-font);
  font-size: 0.86rem;
  font-weight: 900;
  padding: 0 8px;
}

.sold-financial-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sold-financial-field span {
  color: #354e60;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sold-financial-field input,
.sold-financial-field select,
.sold-financial-field textarea {
  background: #ffffff;
  border: 1px solid rgba(13, 78, 82, 0.24);
  border-radius: 8px;
  color: #112f3b;
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.sold-financial-field textarea {
  min-height: 88px;
  resize: vertical;
}

.sold-financial-field.wide,
.sold-financial-notes-fieldset,
.sold-financial-readouts {
  grid-column: 1 / -1;
}

.sold-financial-save-row {
  background: #f4fbfb;
  border: 1px solid rgba(13, 78, 82, 0.15);
  border-radius: 8px;
  padding: 12px;
}

.sold-financial-save-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sold-financial-save-actions button {
  min-width: 178px;
  white-space: nowrap;
}

.sold-financial-save-row small {
  color: #52687a;
  font-weight: 800;
}

.sold-financial-empty {
  max-width: 820px;
}

@media (max-width: 1380px) {
  .sold-financial-kpi-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .sold-financial-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sold-financial-kpi-grid,
  .sold-financial-auto-grid,
  .sold-financial-readouts,
  .sold-financial-form fieldset {
    grid-template-columns: 1fr;
  }

  .sold-financial-card-head,
  .sold-financial-editor-head,
  .sold-financial-save-row {
    align-items: stretch;
    flex-direction: column;
  }

  .sold-financial-save-actions {
    justify-content: stretch;
  }

  .sold-financial-save-actions button {
    width: 100%;
  }

  .sold-financial-table-wrap {
    max-height: none;
  }
}

/* Section report capture workflow: clear field rhythm, stable desktop lanes,
   and a single-column mobile path that keeps every control tappable. */
.section-folder-command-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-left: 4px solid #159ca5;
}

.section-folder-command-card h3 {
  margin: 2px 0 0;
}

.section-folder-kicker {
  display: block;
  color: #0f7178;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-report-page-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 12px;
  max-width: 100%;
  padding: 0 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.section-report-page-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 142px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid #bfd4dd;
  border-radius: 8px;
  background: #ffffff;
  color: #143345;
  text-align: left;
  box-shadow: 0 5px 12px rgba(17, 46, 61, 0.05);
  white-space: nowrap;
}

.section-report-page-tab strong {
  color: #123142;
  font-size: 0.78rem;
  line-height: 1.05;
}

.section-report-page-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf5f7;
  color: #58717e;
  font-size: 0.64rem;
  font-weight: 800;
}

.section-report-page-tab .section-report-file-count.is-empty {
  border: 1px solid rgba(176, 127, 0, 0.35);
  background: #fff2bf;
  color: #7a5400;
}

.section-report-page-tab .section-report-file-count.has-files {
  border: 1px solid rgba(20, 133, 78, 0.32);
  background: #dff6e8;
  color: #11653b;
}

.section-report-page-tab.active,
.section-report-page-tab:hover {
  border-color: rgba(21, 156, 165, 0.62);
  background: #eaf8f9;
  color: #0f5e64;
}

.section-report-page-tab.active {
  box-shadow: inset 0 -3px 0 #159ca5, 0 5px 12px rgba(17, 46, 61, 0.05);
}

.section-photo-capture-workspace {
  display: grid;
  gap: 12px;
  color: #17344b;
}

.section-upload-brief {
  display: grid;
  gap: 3px;
  width: fit-content;
  min-width: min(100%, 280px);
  padding: 10px 12px;
  border: 1px solid rgba(21, 156, 165, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(242, 250, 250, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.section-upload-brief span {
  color: #0f7178;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.section-upload-brief strong {
  color: #112e3d;
  font-size: 1.04rem;
}

.section-upload-brief small,
.section-upload-footer p,
.section-upload-status {
  color: #526a78;
  font-size: 0.78rem;
  line-height: 1.35;
}

.section-report-upload-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(240px, 300px) minmax(300px, 520px);
  gap: 12px;
  align-items: stretch;
  justify-content: start;
  width: 100%;
}

.section-report-upload-grid.section-report-upload-grid-dialog-flow {
  grid-template-columns: minmax(240px, 320px);
}

.section-report-form-panel,
.section-report-upload-control,
.section-photo-locator-wrap {
  min-width: 0;
  min-height: 246px;
  padding: 12px;
  border: 1px solid #c9d8df;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(17, 46, 61, 0.06);
}

.section-report-form-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.section-report-form-panel[hidden],
.section-photo-locator-wrap[hidden],
.section-add-folder-item-btn[hidden],
.section-photo-details-next[hidden] {
  display: none !important;
}

.section-report-form-panel label,
.section-report-upload-control label {
  color: #17344b;
  font-size: 0.78rem;
  font-weight: 800;
}

.section-report-form-panel input,
.section-report-form-panel textarea {
  width: 100%;
  margin-top: 5px;
  font-size: 16px;
}

.section-report-form-panel textarea {
  min-height: 118px;
  resize: vertical;
}

.section-report-upload-control {
  display: grid;
  gap: 9px;
  align-content: start;
}

.section-report-upload-control .file-input-stack {
  gap: 9px;
}

.section-report-upload-control .file-drop-zone {
  min-height: 126px;
  align-content: start;
}

.section-upload-status {
  margin: 0;
  padding: 8px 9px;
  border: 1px dashed #c8d7de;
  border-radius: 8px;
  background: #f8fbfc;
}

.section-photo-locator-wrap {
  display: grid;
  align-content: stretch;
  padding: 0;
  overflow: hidden;
}

.section-photo-locator-standby {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 100%;
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(21, 156, 165, 0.08) 0%, rgba(255, 255, 255, 0.95) 58%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(21, 156, 165, 0.06) 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(21, 156, 165, 0.06) 24px);
}

.section-photo-locator-standby strong,
.section-photo-locator-head strong {
  color: #112e3d;
  font-size: 0.95rem;
}

.section-photo-locator-standby span {
  color: #0f7178;
  font-weight: 900;
}

.section-photo-locator-standby small,
.section-photo-locator-head small {
  max-width: 320px;
  color: #526a78;
  font-size: 0.76rem;
  line-height: 1.35;
}

.section-photo-initial-pin-panel {
  gap: 8px;
  padding: 10px;
}

.section-photo-locator-head {
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
}

.section-photo-draft-pin-map,
#sectionPhotoDraftPinMap {
  width: 100% !important;
  height: 222px !important;
  min-height: 222px !important;
}

.section-upload-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.section-upload-footer p {
  max-width: 680px;
  margin: 0;
}

.section-add-folder-item-btn,
body .app-shell .section-add-folder-item-btn,
.section-photo-details-next,
body .app-shell .section-photo-details-next {
  grid-column: auto !important;
  min-width: 190px;
  min-height: 42px;
  margin-top: 0 !important;
}

.section-photo-details-next {
  width: fit-content;
}

.section-photo-details-reopen[hidden] {
  display: none !important;
}

.section-photo-flow-dialog {
  width: min(540px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.section-photo-map-dialog {
  width: min(780px, calc(100vw - 24px));
}

.section-photo-flow-dialog::backdrop {
  background: rgba(7, 20, 27, 0.52);
  backdrop-filter: blur(2px);
}

.section-photo-flow-panel {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.section-photo-flow-panel h2 {
  margin: 0;
}

.section-photo-flow-panel label {
  color: #17344b;
  font-size: 0.78rem;
  font-weight: 800;
}

.section-photo-flow-panel input,
.section-photo-flow-panel textarea {
  width: 100%;
  margin-top: 5px;
  font-size: 16px;
}

.section-photo-flow-panel textarea {
  min-height: 118px;
  resize: vertical;
}

.section-photo-map-dialog .section-photo-initial-pin-panel {
  padding: 0;
}

.section-photo-map-dialog .section-photo-draft-pin-map,
.section-photo-map-dialog #sectionPhotoDraftPinMap {
  height: 420px !important;
  min-height: 420px !important;
}

.section-add-folder-item-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  opacity: 0.58;
  transform: none !important;
}

.section-page .folder-items {
  margin-top: 16px;
}

@media (max-width: 1180px) {
  .section-report-upload-grid {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
  }

  .section-photo-locator-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .section-folder-command-card,
  .section-report-upload-grid {
    grid-template-columns: 1fr !important;
  }

  .section-photo-capture-workspace {
    gap: 10px;
  }

  .section-upload-brief {
    width: 100%;
  }

  .section-report-form-panel,
  .section-report-upload-control,
  .section-photo-locator-wrap {
    min-height: 0;
    padding: 10px;
  }

  .section-photo-draft-pin-map,
  #sectionPhotoDraftPinMap {
    height: 240px !important;
    min-height: 240px !important;
  }

  .section-upload-footer {
    display: grid;
  }

  .section-add-folder-item-btn,
  body .app-shell .section-add-folder-item-btn {
    width: 100%;
  }

  .section-photo-flow-dialog {
    width: min(100vw - 16px, 540px);
  }

  .section-photo-map-dialog .section-photo-draft-pin-map,
  .section-photo-map-dialog #sectionPhotoDraftPinMap {
    height: 330px !important;
    min-height: 330px !important;
  }
}

body.dialog-fallback-open {
  overflow: hidden;
}

.workspace {
  display: grid;
  gap: 14px;
}

.view {
  animation: strongholdViewIn 0.16s ease-out;
}

@keyframes strongholdViewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-heading,
.toolbar,
.record-card,
.kpi-card,
.contact-card,
.employee-card,
.crew-summary-card,
.property-folder-card,
.section-link-card,
.file-library-tree-card,
.file-library-summary-card,
.project-details-card,
.production-calendar-sidecard,
.production-calendar-main,
.production-board-column,
.dialog-panel {
  border: 1px solid rgba(136, 182, 194, 0.62) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 252, 0.96) 100%) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  box-shadow: var(--stronghold-shadow-soft) !important;
}

.section-heading {
  align-items: center;
  min-height: 66px;
  padding: 12px 14px !important;
  border-left: 5px solid var(--stronghold-teal) !important;
}

.section-heading h2,
.record-card h3,
.project-details-card h3,
.production-calendar-toolbar h3,
.production-board-toolbar h3 {
  color: var(--stronghold-ink) !important;
  letter-spacing: 0;
}

.section-heading .eyebrow,
.kpi-label,
.record-card .eyebrow {
  color: var(--stronghold-teal-dark) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

button,
.doc-btn,
.tab,
.ghost,
.nav-link,
.top-link,
.header-chart-link {
  border-radius: 8px !important;
  letter-spacing: 0.01em;
}

button:not(.ghost):not(.tab):not(.top-link):not(.nav-link):not(.header-chart-link):not(.delete-btn):not(.danger):not(.employee-delete-btn):not(.file-media-delete-btn):not(.section-delete-btn):not(.preview-delete-btn):not(.text-annotation-delete):not(.section-report-page-tab),
.primary-action,
.property-opportunity-btn,
.quick-opportunity-btn {
  border: 1px solid rgba(11, 111, 120, 0.38) !important;
  background: linear-gradient(180deg, #1fb4bf 0%, #0b6f78 100%) !important;
  box-shadow: 0 9px 20px rgba(21, 156, 165, 0.24) !important;
  color: #fff !important;
  font-weight: 850 !important;
}

button:not(.ghost):not(.tab):not(.top-link):not(.nav-link):not(.header-chart-link):not(.delete-btn):not(.danger):not(.employee-delete-btn):not(.file-media-delete-btn):not(.section-delete-btn):not(.preview-delete-btn):not(.text-annotation-delete):not(.section-report-page-tab):hover,
.primary-action:hover,
.property-opportunity-btn:hover,
.quick-opportunity-btn:hover {
  filter: saturate(1.08);
  transform: translateY(-1px);
}

.ghost,
.tab {
  border: 1px solid rgba(136, 182, 194, 0.68) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--stronghold-ink) !important;
}

.tab.active,
.ghost:hover,
.tab:hover {
  border-color: rgba(21, 156, 165, 0.62) !important;
  background: rgba(230, 246, 248, 0.96) !important;
}

input,
select,
textarea {
  border-color: rgba(136, 182, 194, 0.72) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--stronghold-ink) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--stronghold-teal) !important;
  box-shadow: 0 0 0 3px rgba(21, 156, 165, 0.13) !important;
  outline: none !important;
}

.table-wrap {
  border: 1px solid rgba(136, 182, 194, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--stronghold-shadow-soft);
}

table th {
  background: linear-gradient(180deg, #eff8fa 0%, #dcecef 100%) !important;
  color: var(--stronghold-ink) !important;
  border-bottom: 1px solid rgba(136, 182, 194, 0.7) !important;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

table td {
  border-bottom-color: rgba(136, 182, 194, 0.28) !important;
}

table tbody tr:hover {
  background: rgba(21, 156, 165, 0.07);
}

.pill,
.file-library-node-count,
.production-calendar-view-chip,
.calendar-date-entry {
  border-radius: 8px !important;
  border: 1px solid rgba(21, 156, 165, 0.25) !important;
  background: rgba(229, 247, 249, 0.92) !important;
  color: var(--stronghold-ink) !important;
}

.home-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.home-command-center {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
  gap: 14px;
  align-items: stretch;
}

.home-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.home-focus-card {
  min-height: 185px;
  padding: 18px !important;
}

.home-focus-card strong {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.home-focus-card.production {
  border-top-color: var(--stronghold-blue) !important;
}

.home-focus-card.bids {
  border-top-color: var(--stronghold-gold) !important;
}

.home-hero-card,
.home-priority-card {
  min-height: 230px;
}

.home-command-copy {
  max-width: 680px;
  margin: 5px 0 12px;
  color: var(--stronghold-muted);
  font-size: 0.92rem;
}

.home-announcement-label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.home-announcement-label textarea {
  min-height: 82px;
}

.home-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.home-metric-card {
  min-height: 116px;
  padding: 14px !important;
  border-top: 4px solid var(--stronghold-teal) !important;
}

.home-metric-card strong {
  display: block;
  margin: 4px 0 3px;
  color: var(--stronghold-ink);
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1;
}

.home-metric-card small {
  color: var(--stronghold-muted);
  line-height: 1.25;
}

.home-metric-card.attention {
  border-top-color: var(--stronghold-gold) !important;
}

.home-metric-card.service {
  border-top-color: var(--stronghold-blue) !important;
}

.home-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
}

.home-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
}

.home-module-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 238px;
  padding: 16px !important;
  border-top: 5px solid var(--stronghold-teal) !important;
}

.home-module-card.sales { border-top-color: var(--stronghold-gold) !important; }
.home-module-card.production { border-top-color: var(--stronghold-blue) !important; }
.home-module-card.service { border-top-color: #23a37f !important; }
.home-module-card.assets { border-top-color: var(--stronghold-teal) !important; }
.home-module-card.media { border-top-color: #6c8aa0 !important; }
.home-module-card.company { border-top-color: #587d8d !important; }

.home-module-card h3 {
  margin: 0;
  color: var(--stronghold-ink);
  font-size: 1rem;
  line-height: 1.2;
}

.home-module-card p {
  margin: 0;
  color: var(--stronghold-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.home-module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.home-module-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(136, 182, 194, 0.55);
  border-radius: 8px;
  background: rgba(239, 248, 250, 0.86);
  color: var(--stronghold-ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.home-module-card button {
  justify-self: start;
  margin-top: auto;
}

.home-finance-shell {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(92, 145, 158, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(80, 158, 173, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(80, 158, 173, 0.065) 1px, transparent 1px),
    radial-gradient(circle at top right, rgba(21, 156, 165, 0.2), transparent 34%),
    linear-gradient(135deg, #07151d 0%, #102a34 54%, #071117 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 0 18px 42px rgba(7, 18, 24, 0.28);
  color: #edf8fa;
}

.home-finance-head {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
}

.home-finance-head h3 {
  margin: 2px 0 6px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.home-finance-head p {
  max-width: 760px;
  margin: 0;
  color: #b9d4dc;
  font-size: 0.88rem;
  line-height: 1.35;
}

.home-finance-head .kpi-label,
.home-finance-panel .kpi-label,
.home-finance-list-card .kpi-label {
  color: #76dce6 !important;
}

.home-finance-badge {
  display: grid;
  min-width: 250px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 164, 62, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(216, 164, 62, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-finance-badge span,
.home-finance-badge small {
  color: #d7e6ea;
  font-size: 0.72rem;
  font-weight: 800;
}

.home-finance-badge strong {
  color: #fff;
  font-size: 1.45rem;
  line-height: 1.1;
}

.home-finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  gap: 10px;
}

.home-finance-kpi,
.home-finance-panel,
.home-finance-list-card {
  border: 1px solid rgba(136, 182, 194, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.home-finance-kpi {
  display: grid;
  align-content: start;
  min-height: 118px;
  padding: 13px;
  border-top: 4px solid #76dce6;
}

.home-finance-kpi.gold { border-top-color: var(--stronghold-gold); }
.home-finance-kpi.teal { border-top-color: #21c3cb; }
.home-finance-kpi.blue { border-top-color: #5ca7f2; }
.home-finance-kpi.green { border-top-color: #50d172; }
.home-finance-kpi.red { border-top-color: #ff625c; }

.home-finance-kpi span {
  color: #b9d4dc;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-finance-kpi strong {
  margin: 7px 0 5px;
  color: #ffffff;
  font-size: clamp(1.15rem, 2vw, 1.72rem);
  line-height: 1.05;
}

.home-finance-kpi small {
  color: #aac6cf;
  font-size: 0.72rem;
  line-height: 1.2;
}

.home-finance-analysis-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(190px, 1fr));
  gap: 12px;
}

.home-finance-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  padding: 14px;
}

.home-finance-panel h4 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
}

.home-finance-panel p {
  margin: 0;
  color: #b7ced6;
  font-size: 0.78rem;
  line-height: 1.35;
}

.home-finance-flow {
  display: grid;
  gap: 9px;
}

.home-finance-flow span {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(136, 182, 194, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.home-finance-flow span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--flow);
  max-width: 100%;
  background: linear-gradient(90deg, rgba(21, 156, 165, 0.34), rgba(216, 164, 62, 0.2));
  pointer-events: none;
}

.home-finance-flow b,
.home-finance-flow em {
  position: relative;
  z-index: 1;
  color: #f5fbfd;
  font-size: 0.75rem;
  font-style: normal;
}

.home-finance-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.home-finance-mini-metrics span {
  padding: 9px;
  border: 1px solid rgba(136, 182, 194, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.065);
}

.home-finance-mini-metrics b,
.home-finance-mini-metrics small {
  display: block;
}

.home-finance-mini-metrics b {
  color: #fff;
  font-size: 0.95rem;
}

.home-finance-mini-metrics small {
  color: #abc8d1;
  font-size: 0.68rem;
}

.home-finance-drill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
}

.home-finance-list-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 270px;
  padding: 13px;
}

.home-finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(136, 182, 194, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  color: #edf8fa !important;
  text-align: left;
}

.home-finance-row:hover {
  border-color: rgba(118, 220, 230, 0.62) !important;
  background: rgba(21, 156, 165, 0.16) !important;
}

.home-finance-row span,
.home-finance-row strong,
.home-finance-row small {
  min-width: 0;
}

.home-finance-row strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-finance-row small {
  display: block;
  overflow: hidden;
  color: #abc8d1;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-finance-row b {
  color: #ffffff;
  font-size: 0.76rem;
  white-space: nowrap;
}

.home-finance-row em {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid rgba(216, 164, 62, 0.34);
  border-radius: 8px;
  background: rgba(216, 164, 62, 0.14);
  color: #f4dba2;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.home-watch-card,
.home-production-card {
  min-height: 250px;
}

.home-priority-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.home-work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(136, 182, 194, 0.58) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--stronghold-ink) !important;
  box-shadow: none !important;
  text-align: left;
}

.home-work-item:hover {
  border-color: rgba(21, 156, 165, 0.65) !important;
  background: rgba(232, 248, 250, 0.96) !important;
}

.home-work-item span,
.home-work-item strong,
.home-work-item small,
.home-work-item b,
.home-work-item em {
  min-width: 0;
}

.home-work-item strong {
  display: block;
  overflow: hidden;
  color: var(--stronghold-ink);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-work-item small {
  display: block;
  overflow: hidden;
  color: var(--stronghold-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-work-item b {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(21, 156, 165, 0.12);
  color: var(--stronghold-teal-dark);
  font-size: 0.7rem;
  white-space: nowrap;
}

.home-work-item em {
  color: var(--stronghold-muted);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.home-empty-state {
  padding: 12px;
  border: 1px dashed rgba(136, 182, 194, 0.75);
  border-radius: 8px;
  color: var(--stronghold-muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
}

.home-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 14px;
}

.home-primary-production-grid {
  grid-template-columns: 1fr;
}

.home-production-card .table-wrap {
  max-height: 360px;
  overflow: auto;
}

.home-production-project-name {
  color: inherit;
  font-weight: 800;
}

.app-header {
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 250, 251, 0.98) 100%) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  border-bottom: 1px solid rgba(136, 182, 194, 0.75) !important;
}

.app-header .header-brand-name {
  color: var(--stronghold-ink) !important;
}

.app-header .header-brand-subtitle {
  color: var(--stronghold-teal-dark) !important;
}

.sidebar {
  background:
    linear-gradient(180deg, #ffffff 0%, #edf7f8 100%) !important;
  border-right: 1px solid rgba(136, 182, 194, 0.68) !important;
}

.sidebar-module-label {
  margin: 10px 4px 6px;
  color: var(--stronghold-teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar > .nav-link[data-open-project-wizard] {
  min-height: 50px;
  background: linear-gradient(180deg, #32bf59 0%, #19853a 100%) !important;
  box-shadow: 0 10px 22px rgba(42, 168, 74, 0.28) !important;
}

.property-leaflet-map,
.property-list-map,
.project-detail-map,
.section-outline-map,
#sectionOutlineMap,
.production-calendar-main {
  border-radius: 8px !important;
  overflow: hidden;
}

@media (max-width: 1320px) {
  .home-metric-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 980px) {
  .home-focus-grid,
  .home-command-center,
  .home-ops-grid,
  .home-module-grid,
  .home-live-grid {
    grid-template-columns: 1fr;
  }

  .home-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-work-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-work-item b,
  .home-work-item em {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .section-heading {
    align-items: start;
  }

  .home-heading-actions {
    justify-content: stretch;
    width: 100%;
  }

  .home-heading-actions button {
    flex: 1 1 160px;
  }

  .home-metric-grid {
    grid-template-columns: 1fr;
  }

  .home-focus-card {
    min-height: 145px;
  }
}

@font-face {
  font-family: "Metal Mania";
  src: url("./MetalMania-owno4.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --ink: #10181d;
  --muted: #4f5d67;
  --line: #b8c4cc;
  --paper: #e6ecef;
  --white: #f7fafb;
  --brand: #1a9ca6;
  --brand-strong: #126f77;
  --brand-2: #a93030;
  --accent: #9cd9de;
  --surface: #f9fcfd;
  --surface-strong: #ffffff;
  --steel: #17344b;
  --green-soft: #d8eef0;
  --red-soft: #edd8d8;
  --yellow-soft: #e5eff0;
  --shadow: 0 10px 24px rgba(16, 24, 29, 0.1);
  --shadow-soft: 0 8px 20px rgba(16, 24, 29, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, #eef4f6 0%, #e3eaee 46%, #dce5e9 100%);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

body.login-active {
  height: 100vh;
  overflow: hidden;
}

.login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  min-height: 100vh;
  width: 100vw;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at top right, rgba(63, 137, 237, 0.18), transparent 28%),
    linear-gradient(135deg, #eaf0f5 0%, #dde6ee 52%, #eef3f7 100%);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 9999;
}

.login-screen[hidden],
.app-header[hidden],
.app-shell[hidden] {
  display: none !important;
}

.login-panel {
  width: min(960px, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-panel-shell {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.92fr);
  overflow: hidden;
  border: 1px solid #d3dde5;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(16, 30, 44, 0.14);
  backdrop-filter: blur(10px);
}

.login-brand-panel {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: center;
  min-height: 500px;
  padding: 42px 44px;
  color: #f5fbff;
  background:
    linear-gradient(160deg, rgba(8, 24, 39, 0.94) 0%, rgba(18, 43, 68, 0.96) 56%, rgba(37, 92, 145, 0.94) 100%);
  overflow: hidden;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 24, 39, 0.10) 0%, rgba(8, 24, 39, 0.28) 100%),
    url("./login-stronghold-blueprint.png") no-repeat right -72px bottom -243px / min(146%, 1261px);
  opacity: 0.22;
  pointer-events: none;
}

.login-brand-panel > * {
  position: relative;
  z-index: 1;
}

.login-brand-panel .eyebrow {
  transform: none;
  color: #a7cae8;
}

.login-brand-panel h1 {
  margin: 0;
  line-height: 1;
  color: #ffffff;
}

.login-brand-title {
  display: grid;
  gap: 4px;
  width: max-content;
  justify-items: center;
}

.login-brand-name {
  font-family: "Ringbearer", "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", serif;
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.login-brand-subtitle {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9dceb;
  opacity: 0.84;
  transform: translateY(-15px);
}

.login-brand-copy {
  max-width: 28rem;
  color: #d7e7f4;
  font-size: 1rem;
  line-height: 1.6;
}

.login-brand-points {
  display: grid;
  gap: 13px;
}

.login-brand-points span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #eef7ff;
  font-size: 0.94rem;
  font-weight: 600;
}

.login-brand-points span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8bc0ff;
  box-shadow: 0 0 0 5px rgba(139, 192, 255, 0.12);
}

.login-form-panel {
  display: grid;
  gap: 18px;
  align-content: center;
  padding: 42px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.login-form-head {
  display: grid;
  gap: 8px;
}

.login-form-head .eyebrow {
  transform: translateY(-25px);
  color: #5f7b92;
}

.login-form-head h2 {
  margin: 0;
  color: #17344b;
  font-size: 1.8rem;
  transform: translateY(-30px);
}

.login-form-head .helper {
  color: #627c8f;
  line-height: 1.5;
  transform: translateY(-40px);
}

.login-fields {
  display: grid;
  gap: 14px;
  transform: translateY(-40px);
}

.login-fields label {
  display: grid;
  gap: 6px;
  color: #314c60;
  font-weight: 600;
}

.login-fields label + label {
  transform: translateY(5px);
}

.login-fields input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #ccd8e2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 31, 47, 0.04);
}

.login-fields input:focus {
  outline: none;
  border-color: #6ca6f0;
  box-shadow: 0 0 0 4px rgba(63, 137, 237, 0.14);
}

.login-submit {
  min-height: 46px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  transform: translateY(-10px);
}

.login-submit:hover {
  transform: translateY(-10px);
}

.login-footer-note {
  display: grid;
  gap: 4px;
  padding-top: 4px;
  color: #577082;
  transform: translateY(10px);
}

.login-footer-note span {
  font-size: 0.82rem;
  font-weight: 700;
}

.login-footer-note small {
  color: #728898;
}

@media (max-width: 860px) {
  .login-screen {
    padding: 18px;
  }

  .login-panel-shell {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: auto;
    padding: 28px 26px 24px;
  }

  .login-form-panel {
    padding: 26px;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 13px;
  color: var(--white);
  background: var(--brand-strong);
  cursor: pointer;
}

button:hover {
  filter: brightness(0.96);
}

.ghost {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--white);
}

.small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.85rem;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.action-btn {
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(20, 30, 35, 0.08);
}

.edit-btn {
  min-height: 28px;
  padding: 0 10px;
}

.delete-btn {
  min-height: 24px;
  padding: 0 7px;
  color: var(--white);
  border: 1px solid #b42f2f;
  background: #b42f2f;
  font-size: 0.76rem;
  box-shadow: 0 4px 10px rgba(180, 47, 47, 0.18);
}

.delete-btn:hover {
  filter: brightness(0.95);
}

.app-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px clamp(14px, 3vw, 34px) 9px;
  background: #f0f5f7;
  border-bottom: 1px solid var(--line);
}

.header-brand {
  flex: 0 0 auto;
  min-width: 240px;
  align-self: center;
  display: grid;
  gap: 3px;
  margin-left: -10px;
}

.header-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin-left: -50px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.header-brand-title {
  display: grid;
  gap: 2px;
  width: max-content;
  justify-items: start;
}

.header-brand-name {
  font-family: "Ringbearer", "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  color: #2b5a84;
}

.header-brand-subtitle {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(0.62rem, 0.78vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b879e;
  transform: translateY(-3px);
}

.header-company {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #3d5569;
}

h2 {
  margin-top: 4px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.eyebrow {
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateY(-6px);
}

.login-card {
  display: grid;
  align-self: stretch;
  justify-items: stretch;
  flex: 1;
  gap: 10px;
  color: var(--muted);
}

.header-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.header-workflow-links {
  flex: 0 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-left: 8px;
}

.header-chart-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-chart-divider {
  width: 1px;
  height: 74px;
  background: #cfd9e1;
}

.header-stage-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo-shell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 300px;
}

.header-logo-shell::before {
  content: none;
}

.header-logo-shell a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.header-logo-shell a:hover {
  background: transparent;
  box-shadow: none;
}

.header-logo {
  width: min(495px, 100%);
  height: 101px;
  max-height: 101px;
  display: block;
  margin-top: -5px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.top-link {
  min-height: 34px;
  padding: 0 10px;
  color: var(--brand);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
}

.top-link:hover {
  border-color: var(--line);
  background: var(--paper);
}

#notificationBadge {
  color: var(--brand-2);
}

.search-box {
  position: relative;
  width: min(420px, 100%);
  align-self: end;
  margin-top: auto;
}

.search-box input {
  min-height: 36px;
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(9, 20, 30, 0.48);
  backdrop-filter: blur(2px);
}

.app-loading[hidden],
.app-toast[hidden] {
  display: none !important;
}

.loading-panel {
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 42px));
  min-width: 260px;
  padding: 20px 22px;
  border: 1px solid #8ba2af;
  border-radius: 8px;
  background: #f7fafc;
  box-shadow: 0 18px 42px rgba(9, 20, 30, 0.18);
  justify-items: center;
}

.loading-panel p {
  margin: 0;
  text-align: center;
}

.loading-meter {
  display: grid;
  gap: 6px;
  width: 100%;
}

.loading-meter[hidden] {
  display: none !important;
}

.loading-meter-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(26, 76, 96, 0.22);
  border-radius: 999px;
  background: #d9e5ea;
}

.loading-meter-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #13a3ad, #d7a642);
  transition: width 0.16s linear;
}

.loading-meter small {
  color: #2b4b5d;
  font-size: 0.76rem;
  text-align: center;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #c6d2d8;
  border-top-color: #1a9ca6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.app-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2100;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 14px 16px;
  border-radius: 8px;
  color: #f7fafb;
  background: #186f78;
  box-shadow: 0 12px 28px rgba(16, 24, 29, 0.22);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-toast.is-clickable {
  display: grid;
  gap: 5px;
  padding: 12px 14px 13px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.app-toast.is-clickable:hover,
.app-toast.is-clickable:focus-visible {
  transform: translateY(0) scale(1.01);
  box-shadow: 0 16px 34px rgba(16, 24, 29, 0.28);
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.app-toast-kicker {
  color: rgba(247, 250, 251, 0.74);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-toast strong {
  font-size: 0.96rem;
  line-height: 1.2;
}

.app-toast-detail {
  color: rgba(247, 250, 251, 0.9);
  font-size: 0.84rem;
  line-height: 1.28;
}

.app-toast small {
  color: rgba(247, 250, 251, 0.76);
  font-size: 0.72rem;
}

.app-toast[data-type="error"] {
  background: #a93030;
}

.app-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.thumbnail-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 96px;
  min-height: 96px;
  padding: 4px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #f8fbfc;
  overflow: hidden;
}

.thumbnail-button img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(16, 24, 29, 0.12);
}

.file-link,
.button-link {
  color: var(--brand-strong);
  font-weight: 700;
  text-decoration: none;
}

.photo-dialog {
  width: min(1490px, 97vw);
}

.photo-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, calc(100% - 384px)) 360px;
  gap: 24px;
}

.photo-dialog.is-markup-editing .photo-dialog-grid {
  grid-template-columns: minmax(0, 1fr) 230px;
}

.photo-dialog.is-markup-editing .preview-location-panel,
.photo-dialog.is-markup-editing #fileEditPanel > label,
.photo-dialog.is-markup-editing #previewDeficiencyFields,
.photo-dialog.is-markup-editing .file-input-stack {
  display: none;
}

.photo-dialog.is-markup-editing .photo-preview-meta {
  gap: 10px;
}

.photo-dialog .close-x {
  top: 4px;
  right: 4px;
  min-height: 40px;
  width: 40px;
  font-size: 0.72rem;
  z-index: 8;
}

#filePreviewDialog [hidden] {
  display: none !important;
}

.photo-preview-stage {
  position: relative;
  min-height: 546px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eff4f6;
  overflow: hidden;
  padding: 0;
}

.preview-stage-scroll {
  height: 100%;
  min-height: 546px;
  overflow: auto;
  overflow-x: hidden;
  padding: 38px 8px 8px;
  cursor: grab;
  user-select: none;
}

.preview-stage-surface {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  max-width: 100%;
}

.preview-stage-scroll.is-panning {
  cursor: grabbing;
}

.preview-stage-surface img,
.preview-stage-surface video,
.preview-stage-surface canvas,
.preview-canvas-overlay {
  position: absolute;
  inset: 0;
}

.preview-stage-scroll img,
.preview-stage-scroll video,
.preview-stage-scroll canvas {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  box-shadow: 0 10px 28px rgba(28, 52, 74, 0.12);
  user-select: none;
  -webkit-user-drag: none;
}

.video-thumbnail-button {
  position: relative;
}

.video-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(31, 127, 143, 0.18), rgba(16, 42, 47, 0.16)),
    linear-gradient(180deg, #eef6f3 0%, #d9e7e5 100%);
  box-shadow: 0 6px 14px rgba(16, 24, 29, 0.12);
}

.video-placeholder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(16, 42, 47, 0.82);
  transform: translate(-50%, -50%);
}

.video-placeholder::after {
  content: "";
  position: absolute;
  left: calc(50% + 2px);
  top: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #ffffff;
  transform: translate(-45%, -50%);
}

.thumbnail-button video,
.deficiency-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-badge {
  position: absolute;
  left: 50%;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 42, 47, 0.84);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

.preview-video-status {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 8;
  width: min(360px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(17, 71, 93, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(12, 42, 56, 0.18);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.3;
  transform: translateX(-50%);
}

.preview-video-status strong,
.preview-video-status span,
.preview-video-status a {
  display: block;
}

.preview-video-status strong {
  margin-bottom: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preview-video-status a {
  width: fit-content;
  margin-top: 8px;
  color: var(--blueprint);
  font-weight: 800;
}

.preview-photo-nav {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  pointer-events: none;
}

.preview-photo-nav-btn {
  position: absolute;
  top: 50%;
  min-width: 32px;
  width: 32px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(16, 42, 47, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #102a2f;
  box-shadow: 0 8px 18px rgba(16, 42, 47, 0.14);
  transform: translateY(-50%);
  pointer-events: auto;
}

.preview-photo-nav-btn.prev {
  left: 8px;
}

.preview-photo-nav-btn.next {
  right: 8px;
}

.preview-photo-nav-count {
  position: absolute;
  left: 50%;
  bottom: 10px;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #102a2f;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 14px rgba(16, 42, 47, 0.12);
  transform: translateX(-50%);
}

.photo-dialog.is-markup-editing .preview-photo-nav {
  display: none;
}

.preview-canvas-overlay {
  pointer-events: none;
}

.preview-stage-toolbar {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.preview-stage-toolbar > * {
  pointer-events: auto;
}

.preview-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.preview-zoom-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
}

.camera-dialog {
  width: min(720px, calc(100vw - 32px));
  gap: 14px;
}

.camera-dialog-heading {
  display: grid;
  gap: 4px;
  padding-right: 28px;
}

.camera-dialog-heading h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.camera-dialog-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.camera-capture-shell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #10181d;
  overflow: hidden;
}

.camera-capture-video {
  display: block;
  width: 100%;
  max-height: min(62vh, 520px);
  object-fit: cover;
  background: #0b1114;
}

.camera-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.preview-zoom-readout {
  min-width: 78px;
  font-size: 0.86rem;
}

.preview-edit-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.08rem;
  font-weight: 700;
}

#previewCanvas {
  cursor: crosshair;
}

.text-annotation-box {
  position: absolute;
  display: grid;
  gap: 4px;
  padding: 3px;
  border: 1px dashed rgba(35, 84, 132, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(1px);
  pointer-events: auto;
}

.text-annotation-box.is-selected {
  border-color: rgba(34, 118, 220, 0.95);
  box-shadow: 0 0 0 1px rgba(34, 118, 220, 0.18);
}

.text-annotation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.text-annotation-handle {
  flex: 1 1 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 61, 96, 0.72);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.5;
  cursor: move;
  user-select: none;
  text-align: center;
}

.text-annotation-delete {
  min-width: 20px;
  min-height: 20px;
  width: 20px;
  padding: 0;
  border-radius: 999px;
  background: #b93e39;
  border-color: #a53430;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
}

.text-annotation-input {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  box-shadow: none;
  line-height: 1.14;
}

.photo-preview-meta {
  display: grid;
  align-content: start;
  gap: 16px;
}

.preview-location-panel {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.preview-location-map {
  width: 364px;
  height: 234px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #dfe8ec;
  cursor: crosshair;
}

.deficiency-initial-pin-panel {
  display: grid;
  gap: 6px;
}

.section-photo-initial-pin-panel {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}

.section-photo-initial-pin-panel strong {
  color: #102a2f;
  font-size: 0.84rem;
}

.section-photo-initial-pin-panel small {
  color: var(--muted);
  font-size: 0.76rem;
}

.deficiency-initial-pin-panel strong {
  color: #102a2f;
  font-size: 0.84rem;
}

.deficiency-initial-pin-panel small {
  color: var(--muted);
  font-size: 0.76rem;
}

.deficiency-draft-pin-map {
  width: 100%;
  height: 178px;
}

.section-photo-draft-pin-map {
  width: 100%;
  height: 178px;
}

.preview-location-map .leaflet-container,
.preview-location-map .leaflet-interactive,
.preview-location-map .leaflet-pane {
  cursor: crosshair !important;
}

.photo-actions,
.photo-editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.photo-actions {
  justify-content: flex-start;
}

.preview-delete-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.74rem;
  background: linear-gradient(180deg, #d95a52 0%, #b93e39 100%);
  border-color: #a53430;
  color: #fff;
}

.photo-editor-tools label {
  display: grid;
  gap: 4px;
}

.folder-item.media-item {
  display: grid;
  align-items: start;
  align-content: start;
  width: 236px;
  min-height: 280px;
  height: 280px;
  max-height: 280px;
  padding: 10px 8px 8px;
  border: 1px solid #d6dee6;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 8px 18px rgba(15, 31, 47, 0.05);
  overflow: hidden;
}

.folder-item.media-item small {
  color: #4b5963;
  font-size: 0.64rem;
}

.compact-media-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: start;
  justify-items: center;
  min-height: 0;
  padding: 0;
}

.compact-media-title {
  color: #1c3446;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 0.92;
  display: block;
  width: 200px;
  max-width: 200px;
  margin: -2px auto 0;
  text-align: center;
  justify-self: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.image-media-card {
  display: grid;
  grid-template-areas:
    "title"
    "media"
    "desc"
    "section"
    "actions";
  grid-template-rows: auto auto 28px 18px 1fr;
  align-content: start;
  min-height: 100%;
  justify-items: center;
  text-align: center;
}

.image-media-card.folder-item.media-item {
  width: 201px;
  min-height: 238px;
  height: 238px;
  max-height: 238px;
  padding: 8px 7px 7px;
}

.image-media-card .thumbnail-button {
  grid-area: media;
  display: grid;
  place-items: center;
  height: 180px;
  width: 180px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 3px auto 0;
}

.image-media-card .compact-media-title {
  grid-area: title;
  width: 170px;
  max-width: 170px;
  font-size: 0.6rem;
  text-align: center !important;
  justify-self: center;
  align-self: start;
  margin: 0 auto;
}

.image-media-card .thumbnail-button img {
  display: block;
  width: 180px;
  max-width: 180px;
  max-height: 180px;
  height: 180px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
}

.image-media-card .thumbnail-button.thumbnail-missing {
  border: 1px dashed rgba(186, 58, 58, 0.55);
  background: rgba(255, 244, 230, 0.9);
}

.missing-thumbnail-label {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 12px;
  color: #8a2f24;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.image-media-card .compact-media-description {
  grid-area: desc;
  width: 187px;
  max-width: 187px;
  justify-self: center;
  align-self: start;
  margin: 1px auto 0;
  font-size: 0.59rem;
  line-height: 0.98;
  text-align: center;
}

.compact-media-section-number {
  grid-area: section;
  display: block;
  width: 187px;
  max-width: 187px;
  justify-self: center;
  align-self: start;
  margin: 1px auto 0;
  color: #425b70;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.image-media-card .row-actions {
  grid-area: actions;
  width: 100%;
  justify-content: flex-start;
  align-self: end;
  margin-top: auto;
}

.compact-media-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compact-media-description {
  color: #526a7b;
  font-size: 0.69rem;
  line-height: 1.18;
  margin-top: 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.file-edit-panel {
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.file-edit-panel label {
  display: grid;
  gap: 6px;
}

.file-edit-panel textarea {
  min-height: 110px;
  resize: vertical;
}

.preview-deficiency-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5fafb;
}

.preview-deficiency-fields[hidden] {
  display: none;
}

.preview-deficiency-fields .span-2 {
  grid-column: 1 / -1;
}

.preview-deficiency-fields textarea {
  min-height: 80px;
}

.file-input-stack {
  display: grid;
  gap: 8px;
}

.file-drop-zone {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px dashed #b7cad8;
  border-radius: 10px;
  background: #f7fbfd;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.file-drop-zone input[type="file"] {
  position: static;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px;
  border: 1px solid #cbd8e1;
  border-radius: 8px;
  background: #ffffff;
  color: #17344b;
  font-size: 16px;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

.file-drop-zone input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid #9db4c4;
  border-radius: 7px;
  background: #edf4f8;
  color: #17344b;
  font-weight: 800;
  cursor: pointer;
}

.file-drop-zone.drag-active {
  border-color: #2f7df6;
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(47, 125, 246, 0.12);
}

.photo-drop-zone.drag-active {
  border-color: #35a85a;
  background: #edf9f1;
  box-shadow: inset 0 0 0 1px rgba(53, 168, 90, 0.12);
}

.file-drop-copy {
  color: #5d7688;
  font-size: 0.72rem;
  line-height: 1.25;
}

.camera-capture-actions {
  display: grid;
  gap: 6px;
}

.camera-capture-btn {
  justify-self: stretch;
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #0f3553;
  background: linear-gradient(180deg, #f4fbff 0%, #dbefff 100%);
  border-color: #8db6d7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(20, 44, 66, 0.08);
}

.camera-capture-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d1e9ff 100%);
  border-color: #6d9fc8;
}

.video-capture-btn {
  color: #17402d;
  background: linear-gradient(180deg, #f4fff7 0%, #dff4e6 100%);
  border-color: #86bf97;
}

.video-capture-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d5efd7 100%);
  border-color: #62a978;
}

.inline-link-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1867b7;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.client-contact-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.client-contact-grid .contact-card {
  flex: 0 0 180px;
  width: 180px;
  min-height: 130px;
  height: 130px;
  padding: 8px 9px;
  gap: 5px;
  align-content: start;
  border: 1px solid #cfdbe4;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fb 100%);
  box-shadow: 0 6px 14px rgba(16, 36, 52, 0.06);
}

.client-contact-grid .contact-card strong {
  font-size: 0.84rem;
  line-height: 1.46;
  text-align: center;
  color: #153149;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(142, 170, 194, 0.35);
}

.client-contact-grid .contact-card span,
.client-contact-grid .contact-card small {
  font-size: 0.67rem;
  line-height: 1.37;
  overflow-wrap: anywhere;
  color: #486273;
}

.client-contact-grid .contact-card small {
  margin-top: auto;
  padding-top: 3px;
  color: #6a8292;
}

.property-contact-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.clickable-contact-card {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.clickable-contact-card:hover {
  transform: translateY(-1px);
  border-color: #9bb4c7;
  box-shadow: 0 9px 18px rgba(16, 36, 52, 0.08);
}

.storage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.storage-stat-tile {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #d6dee6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fb 100%);
}

.storage-stat-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.storage-stat-button:hover {
  transform: translateY(-1px);
  border-color: #9bb4c7;
  box-shadow: 0 10px 18px rgba(15, 31, 47, 0.08);
}

.storage-stat-tile small {
  color: #607889;
  font-size: 0.72rem;
}

.storage-stat-tile strong {
  color: #173247;
  font-size: 0.98rem;
}

.compact-media-card .row-actions {
  margin-top: auto;
  justify-content: flex-start;
}

.media-card-actions {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: 5px;
}

.compact-media-card .edit-btn {
  min-height: 22px;
  padding: 0 8px;
  font-size: 0.72rem;
}

.compact-media-card .delete-btn {
  min-height: 15px;
  padding: 0 5px;
  font-size: 0.54rem;
}

.image-media-card .delete-btn {
  transform: translateY(5px);
  margin-left: 0;
  min-height: 13px;
  padding: 0 4px;
  font-size: 0.46rem;
}

.compact-open-link {
  font-size: 0.74rem;
}

.photo-location-pin {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(15, 31, 47, 0.18);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
}

.photo-location-pin span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.compact-file-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 118px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #244054;
  font-size: 0.74rem;
  font-weight: 700;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.search-results {
  position: fixed;
  z-index: 980;
  top: var(--search-results-top, 0);
  left: var(--search-results-left, 0);
  width: var(--search-results-width, min(420px, 88vw));
  max-height: min(360px, calc(100vh - var(--search-results-top, 0px) - 12px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.search-result {
  display: grid;
  width: 100%;
  min-height: auto;
  gap: 4px;
  padding: 10px 12px;
  color: var(--ink);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  text-align: left;
}

.search-result span,
.search-empty {
  color: var(--muted);
  font-size: 0.86rem;
}

.search-empty {
  padding: 12px;
}

.app-shell {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  min-height: calc(100vh - 78px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  background: #10171b;
}

.nav-link {
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 5px;
  color: #edf5f6;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  min-height: 34px;
  padding: 0 11px;
  font-size: 0.88rem;
}

.nav-link.active,
.nav-link:hover {
  color: #f8fcfd;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
}

.sidebar-spacer {
  min-height: 0;
  margin: 10px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.production-nav {
  margin-top: 0;
  color: var(--white);
  border: 1px solid var(--brand);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(18, 182, 188, 0.24);
}

.production-nav.active,
.production-nav:hover {
  color: var(--white);
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
}

.sidebar-user {
  display: grid;
  gap: 8px;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  color: #f2f5f6;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(26, 156, 166, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.14);
}

.sidebar-user .home-nav {
  width: 100%;
  margin-bottom: 2px;
}

.sidebar-user-copy {
  display: grid;
  gap: 4px;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 0.77rem;
  line-height: 1.35;
}

.sidebar-user-greeting,
.sidebar-user-name {
  color: var(--brand);
  font-weight: 700;
}

.sidebar-user #signOutBtn {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
  background: rgba(24, 32, 37, 0.34);
}

.sidebar-notifications {
  display: grid;
}

.notification-link {
  width: 100%;
  min-height: 28px;
  padding: 7px 9px;
  color: var(--brand);
  border-color: rgba(18, 182, 188, 0.3);
  background: rgba(24, 32, 37, 0.28);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.workspace {
  min-width: 0;
  padding: clamp(8px, 1.5vw, 16px) clamp(12px, 2vw, 22px) clamp(12px, 2vw, 20px);
}

.workspace > .view.active {
  padding: 2px;
}

.workspace-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;
}

#backBtn {
  min-height: 28px;
  padding: 0 9px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.toolbar,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(80, 115, 140, 0.14);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tab {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--white);
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.tab.active {
  color: var(--white);
  border-color: var(--brand);
  background: var(--brand);
}

#productionChartView .section-heading {
  margin-bottom: 8px;
}

#productionChartView .production-toggle {
  margin: 0 0 12px;
}

.production-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  background: #eef3f5;
  box-shadow: 0 4px 12px rgba(20, 30, 35, 0.05);
}

.production-toggle .tab {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 0.84rem;
  font-weight: 700;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 6px 16px rgba(16, 24, 29, 0.07);
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

th,
td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.86rem;
}

th {
  color: #42515b;
  font-size: 0.7rem;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.owner-name-cell {
  position: relative;
  min-width: 190px;
  padding-bottom: 46px;
}

.owner-name-cell .customer-expand {
  position: absolute;
  left: 12px;
  bottom: 8px;
}

#customerList tbody > tr:not(.customer-property-row) td {
  height: 33px;
  min-height: 33px;
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
}

#customerList .owner-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  padding-bottom: 6px;
}

#customerList .owner-name-cell .customer-expand {
  position: static;
  left: auto;
  bottom: auto;
  margin-left: 2px;
  min-width: 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
}

#customerList table {
  min-width: 760px;
  width: 760px;
}

#recentPropertyList table {
  min-width: 860px;
  width: 860px;
}

#customerList,
#customerList .table-wrap {
  width: 760px;
  max-width: 760px;
}

#recentPropertyList,
#recentPropertyList .table-wrap {
  width: 860px;
  max-width: 860px;
}

#customerList {
  width: 100%;
  max-width: none;
}

#recentPropertyList {
  width: 100%;
  max-width: none;
  display: block;
}

.clients-page-layout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.clients-list-shell {
  width: 760px;
  max-width: 760px;
  flex: 0 0 760px;
}

.properties-list-shell {
  width: 860px;
  max-width: 860px;
  flex: 0 0 860px;
}

.clients-map-divider {
  width: 1px;
  min-height: 400px;
  background: linear-gradient(180deg, rgba(31, 56, 78, 0.1) 0%, rgba(31, 56, 78, 0.3) 50%, rgba(31, 56, 78, 0.1) 100%);
  align-self: stretch;
}

.clients-map-shell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 800px;
  flex: 0 0 800px;
}

.clients-map-action-rail {
  display: flex;
  justify-content: flex-end;
  width: 118px;
  flex: 0 0 118px;
}

.clients-map-add-btn {
  width: 112px;
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
}

.clients-page-empty {
  display: grid;
  gap: 12px;
  align-items: start;
  justify-items: start;
}

.properties-map-shell {
  width: 670px;
  flex: 0 0 670px;
}

.customer-list-map {
  width: 670px;
  height: 450px;
  min-height: 450px;
  border: 1px solid rgba(53, 83, 107, 0.18);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(18, 41, 61, 0.08);
}

.property-list-map {
  width: 670px;
  height: 450px;
  min-height: 450px;
}

.file-library-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.file-library-tree-shell {
  width: 360px;
  max-width: 360px;
  flex: 0 0 360px;
}

.file-library-content-shell {
  min-width: 0;
  flex: 1 1 auto;
}

.file-library-tree-card,
.file-library-summary-card {
  padding: 14px;
}

.file-library-tree {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.file-library-branch,
.file-library-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  padding-left: calc(12px + (var(--depth, 0) * 18px));
  border-radius: 8px;
  text-align: left;
}

.file-library-branch {
  color: #244054;
  font-weight: 700;
  background: rgba(47, 111, 208, 0.06);
  border: 1px solid rgba(47, 111, 208, 0.12);
}

.file-library-node {
  border: 1px solid #d6dee6;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  color: #355060;
  box-shadow: 0 8px 20px rgba(15, 31, 47, 0.05);
}

.file-library-node:hover {
  transform: none;
  border-color: rgba(47, 111, 208, 0.32);
  background: linear-gradient(180deg, #f9fcff 0%, #eef5fd 100%);
}

.file-library-node.active {
  color: #ffffff;
  border-color: #2f6fd0;
  background: linear-gradient(180deg, #3f89ed 0%, #2f6fd0 100%);
  box-shadow: 0 10px 22px rgba(47, 111, 208, 0.22);
}

.file-library-node-count {
  flex: 0 0 auto;
  min-width: 32px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(21, 38, 55, 0.08);
  color: inherit;
  font-size: 0.72rem;
  text-align: center;
}

.file-library-node.active .file-library-node-count {
  background: rgba(255, 255, 255, 0.18);
}

.file-library-table-wrap {
  margin-top: 12px;
}

.file-library-table-wrap table {
  min-width: 100%;
}

.file-library-table-wrap td:first-child small {
  display: block;
  margin-top: 2px;
}

.file-library-list-shell {
  width: 860px;
  max-width: 860px;
  flex: 0 0 860px;
}

.file-library-layout .table-wrap table {
  min-width: 100%;
}

.file-library-list-shell tbody > tr:not(.customer-property-row) td {
  height: 30px;
  min-height: 30px;
  padding-top: 1px;
  padding-bottom: 1px;
  vertical-align: middle;
}

.file-library-list-shell .owner-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  padding-bottom: 4px;
}

.file-library-list-shell .owner-name-cell .customer-expand {
  position: static;
  left: auto;
  bottom: auto;
  margin-left: 2px;
  min-width: 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  font-size: 0.52rem;
  line-height: 1;
}

.file-library-property-stack {
  display: grid;
  gap: 8px;
}

.file-library-property-item {
  border: 1px solid #d6dee6;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  min-height: 40px;
  padding: 4px 12px;
  box-shadow: 0 8px 20px rgba(15, 31, 47, 0.05);
}

.file-library-property-item.is-selected {
  border-color: rgba(47, 111, 208, 0.42);
  box-shadow: 0 10px 22px rgba(47, 111, 208, 0.12);
}

.file-library-property-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

.file-library-property-main {
  display: grid;
  gap: 0;
}

.file-library-property-link {
  justify-content: flex-start;
  padding: 0;
  color: #1c3446;
  font-weight: 700;
}

.file-library-property-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-library-property-meta .customer-expand {
  min-width: 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  font-size: 0.52rem;
  line-height: 1;
}

.file-library-project-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(129, 143, 152, 0.18);
}

.file-library-project-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid #d6dee6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: #3a5568;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 31, 47, 0.04);
}

.file-library-project-chip strong {
  flex: 0 0 auto;
  min-width: 64px;
}

.file-library-project-chip span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-library-project-chip small {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.7rem;
}

.file-library-project-chip:hover {
  transform: none;
  border-color: rgba(47, 111, 208, 0.3);
  background: linear-gradient(180deg, #f9fcff 0%, #eef5fd 100%);
}

.file-library-project-chip.active {
  color: #ffffff;
  border-color: #2f6fd0;
  background: linear-gradient(180deg, #3f89ed 0%, #2f6fd0 100%);
  box-shadow: 0 10px 22px rgba(47, 111, 208, 0.2);
}

.file-library-project-chip strong,
.file-library-project-chip span,
.file-library-project-chip small {
  color: inherit;
}

.file-library-folder-grid {
  margin-top: 12px;
  margin-bottom: 12px;
}

.file-library-search-wrap {
  margin: 0 0 12px;
}

.file-library-search-wrap label {
  display: grid;
  gap: 6px;
  max-width: 420px;
  color: #50687a;
}

.file-library-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.file-library-filter-chip {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 12px;
  letter-spacing: 0;
}

#customerList .table-wrap {
  overflow-x: hidden;
}

#recentPropertyList .table-wrap {
  overflow-x: hidden;
}

.client-property-pin {
  background: transparent;
  border: 0;
}

.client-property-pin span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #54a7ff 0%, #2f6fd8 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(25, 61, 98, 0.28);
}

.client-property-pin span::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}

.property-row-link {
  display: inline-block;
  color: #0b3550;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 2px solid rgba(26, 156, 166, 0.32);
  padding-bottom: 1px;
}

.property-row-link:hover {
  color: #0f5f76;
  border-bottom-color: rgba(26, 156, 166, 0.72);
}

.map-link {
  color: #4f6572;
  font-weight: 600;
  text-decoration: none;
}

.map-link:hover {
  color: #244556;
  text-decoration: underline;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 240px));
  gap: 10px;
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(264px, 264px));
  gap: 10px;
}

.quick-add-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.quick-add-card {
  min-height: 88px;
  border: 1px solid rgba(24, 32, 37, 0.1);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: linear-gradient(160deg, #f4f8f9 0%, #dce8eb 100%);
  box-shadow: 0 8px 18px rgba(20, 30, 35, 0.08);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.quick-add-card:hover {
  transform: translateY(-1px);
}

.quick-add-grid .quick-add-card:nth-child(1) { background: linear-gradient(160deg, #ffffff 0%, #dff6f7 100%); }
.quick-add-grid .quick-add-card:nth-child(2) { background: linear-gradient(160deg, #ffffff 0%, #d7f1f3 100%); }
.quick-add-grid .quick-add-card:nth-child(3) { background: linear-gradient(160deg, #ffffff 0%, #edf9fa 100%); }
.quick-add-grid .quick-add-card:nth-child(4) { background: linear-gradient(160deg, #ffffff 0%, #dff6f7 100%); }
.quick-add-grid .quick-add-card:nth-child(5) { background: linear-gradient(160deg, #ffffff 0%, #e6fafb 100%); }
.quick-add-grid .quick-add-card:nth-child(6) { background: linear-gradient(160deg, #ffffff 0%, #d7f1f3 100%); }

.record-card {
  border: 1px solid rgba(80, 115, 140, 0.18);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 248, 250, 0.96) 100%);
  box-shadow: var(--shadow-soft);
}

.record-card h3 {
  margin-bottom: 6px;
  color: var(--steel);
}

.meta {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pill {
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--green-soft);
  font-size: 0.8rem;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.compact-folder-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.folder {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfc;
}

.folder strong {
  display: block;
  margin-bottom: 4px;
}

.add-property-inline {
  margin: 4px 0 8px;
}

.danger {
  background: var(--brand-2);
}

.danger-text {
  color: var(--brand-2);
}

.property-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.property-hero-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(250px, 0.9fr) minmax(220px, 0.7fr) minmax(380px, 1.45fr);
  gap: 14px;
  align-items: start;
}

.property-hero-panel {
  min-height: 100%;
}

.property-details-panel .compact-meta {
  gap: 6px;
}

.property-contacts-panel {
  border: 1px solid rgba(201, 56, 56, 0.24);
  background: linear-gradient(180deg, #fdf7f7 0%, #f5ecec 100%);
}

.property-sections-panel {
  display: grid;
  gap: 8px;
}

.property-folders-panel {
  align-self: start;
  min-height: auto;
}

.property-files-card {
  display: grid;
  gap: 12px;
}

.property-files-toggle {
  display: none;
}

.property-files-body {
  display: grid;
  gap: 14px;
}

.property-files-quick-links,
.property-files-upload-workspace {
  display: grid;
  gap: 10px;
}

.property-folder-card-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 4px;
}

.property-folder-card {
  min-height: 40px;
  height: 40px;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.property-folder-card strong {
  margin-bottom: 0;
  font-size: 0.76rem;
  line-height: 1.05;
}

.property-folder-card span {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.section-link-list {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}

.section-link-card {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 24px;
  padding: 4px 8px;
  text-align: left;
  border: 1px solid rgba(47, 125, 246, 0.22);
  border-radius: 6px;
  background: #f9fbfd;
}

.section-link-card strong {
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.05;
}

.section-link-card span {
  color: #4b5962;
  font-size: 0.64rem;
  line-height: 1.05;
}

.compact-heading {
  margin-bottom: 8px;
}

.property-map-panel {
  display: grid;
  grid-column: 3 / -1;
  gap: 8px;
  min-width: 0;
}

.leaflet-map {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #dfe8ec;
}

.property-leaflet-map {
  min-height: 370px;
}

.section-outline-map {
  min-height: 260px;
}

.mobile-map-activation-overlay {
  display: none;
}

.mobile-map-activation-overlay[hidden] {
  display: none !important;
}

.mobile-map-scroll-guard {
  position: relative;
}

.mobile-map-scroll-guard .mobile-map-activation-overlay {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: rgba(10, 35, 42, 0.04) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
  touch-action: pan-y;
  cursor: pointer;
}

.mobile-map-scroll-guard .mobile-map-activation-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(82%, 280px);
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(10, 35, 42, 0.74);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
  pointer-events: none;
}

.mobile-map-scroll-guard.is-mobile-map-active::after {
  content: "Map active - tap outside to scroll";
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 900;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(10, 35, 42, 0.82);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  pointer-events: none;
  text-transform: uppercase;
}

.offline-map-snapshot {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0;
  overflow: hidden;
  background: #dfe8ec;
}

.offline-map-snapshot img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.offline-map-snapshot figcaption {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #314955;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.section-measure-map {
  min-height: 420px;
  cursor: crosshair;
}

.section-number-pin {
  display: grid;
  place-items: center;
  width: 14px;
  height: 20px;
  border: 0;
  color: #10344d;
  background: transparent;
  box-shadow: none;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1;
  overflow: visible;
}

.section-number-pin span {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(180deg, #58b1ff 0%, #2d72d9 100%);
  box-shadow: 0 4px 9px rgba(25, 61, 98, 0.28);
  transform: rotate(-45deg);
}

.section-number-pin.compound-section-pin {
  width: 30px;
  height: 22px;
}

.section-number-pin.compound-section-pin span {
  width: 28px;
  height: 18px;
  border-radius: 10px 10px 10px 0;
}

.section-number-pin.compound-section-pin b {
  font-size: 0.44rem;
  letter-spacing: -0.02em;
}

.section-number-pin.active-section-pin span {
  background: linear-gradient(180deg, #36d477 0%, #15803d 100%);
}

.section-number-pin span::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}

.section-number-pin b {
  position: relative;
  z-index: 1;
  display: block;
  font: inherit;
  transform: rotate(45deg);
}

.measure-point-pin {
  width: 20px;
  height: 20px;
  border: 1px solid #7f2020;
  border-radius: 999px;
  background: #c93838;
  font-size: 0.65rem;
  color: #fff;
  box-shadow: 0 3px 8px rgba(16, 24, 29, 0.22);
  overflow: hidden;
}

.measure-point-pin span {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-0.5px);
}

.measure-point-pin span::after {
  display: none;
}

.measure-point-pin b {
  transform: none;
}

@media (pointer: coarse) {
  .measure-point-pin {
    width: 26px;
    height: 26px;
    font-size: 0.76rem;
  }

  .section-number-pin:not(.measure-point-pin) {
    width: 16px;
    height: 22px;
    font-size: 0.54rem;
  }

  .section-number-pin:not(.measure-point-pin) span {
    width: 16px;
    height: 16px;
  }

  .photo-location-pin {
    width: 16px;
    height: 16px;
  }
}

.outline-section-pin,
.property-section-pin,
.section-id-edit-pin {
  background: transparent;
}

.section-id-edit-pin {
  cursor: grab;
}

.section-id-edit-pin span {
  background: linear-gradient(180deg, #25b7c0 0%, #177f94 100%);
}

.section-id-edit-pin:active {
  cursor: grabbing;
}

.gm-style-mtc,
.gm-fullscreen-control,
.gm-svpc,
.gm-bundled-control,
.gm-style gmp-internal-camera-control,
.gm-style button[aria-label="Map camera controls"],
.gm-style button[aria-label="Zoom in"],
.gm-style button[aria-label="Zoom out"],
.gm-style button[aria-label="Keyboard shortcuts"],
.gm-style button[aria-label="Map Data"],
.gm-style button[title="Map Data"] {
  display: none !important;
}

.quick-cam-launch-button {
  width: 136px;
  min-width: 136px;
  white-space: nowrap;
}

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

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

.map-empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: inherit;
  color: #4b5962;
  font-size: 0.84rem;
}

.property-section-dialog {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(380px, 1.22fr);
  gap: 16px;
  margin: 14px 0;
}

.section-hero-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(320px, 0.95fr) minmax(420px, 1.25fr);
  gap: 14px;
  margin-bottom: 14px;
}

.section-property-panel,
.section-outline-panel,
.section-map-panel {
  align-content: start;
}

.section-dialog-fields,
.section-dialog-map-wrap {
  display: grid;
  gap: 10px;
}

.measure-overlay {
  padding: 8px 10px;
  border: 1px solid rgba(47, 125, 246, 0.18);
  border-radius: 8px;
  background: #f4f8fb;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 1400px) {
  .property-hero-layout {
    grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr);
  }

  .property-map-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .property-hero-layout,
  .property-section-dialog,
  .section-hero-layout {
    grid-template-columns: 1fr;
  }
}

.property-layout .record-card {
  padding-top: 10px;
  padding-bottom: 10px;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.contact-card-grid.client-contact-grid,
.contact-card-grid.property-contact-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.contact-card-grid.client-contact-grid .contact-card,
.contact-card-grid.property-contact-list .contact-card {
  flex: 0 0 180px;
  width: 180px;
}

.contact-card {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(127, 176, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(145deg, rgba(71, 79, 85, 0.92) 0%, rgba(50, 57, 63, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.contact-card strong {
  color: #f6fbff;
}

.contact-card span,
.contact-card small {
  color: #c6d3db;
}

.contact-card .contact-email {
  font-size: 0.58rem;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.map-frame {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.project-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px 500px;
  align-items: start;
  gap: 12px;
}

.project-title-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}

.project-title-number {
  color: #0e6970;
  font-size: 1.32em;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.project-title-name {
  color: #48606c;
  font-size: 0.74em;
  font-weight: 750;
}

.project-overview-details {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.project-overview-secondary {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 0;
  width: 250px;
}

.project-overview-actions {
  display: flex;
  justify-content: stretch;
  margin: 0 0 6px;
}

.project-files-button {
  width: 100%;
  min-width: 118px;
  min-height: 38px;
  border-color: rgba(26, 156, 166, 0.32);
  background: linear-gradient(180deg, #f3fbfc 0%, #e2f3f5 100%);
  color: #116772;
  box-shadow: 0 0 0 1px rgba(26, 156, 166, 0.08), 0 8px 18px rgba(26, 156, 166, 0.14);
}

.project-detail-map-card {
  display: grid;
  gap: 8px;
  width: 500px;
}

.project-detail-map-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(26, 156, 166, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcfd 0%, #eef6f7 100%);
  color: #17344b;
}

.project-detail-map-head span {
  color: #5d7285;
  font-size: 0.78rem;
  font-weight: 800;
}

.project-detail-map {
  width: 500px;
  height: 350px;
  min-height: 350px;
  border: 1px solid rgba(47, 95, 156, 0.22);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(14, 39, 63, 0.1);
}

.project-summary-pay-app-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.project-summary-pay-app-button {
  display: flex;
  justify-content: center;
  width: 100%;
}

.project-files-page {
  display: grid;
  gap: 12px;
}

.project-files-folder-grid {
  display: grid;
  gap: 10px;
}

.project-files-folder {
  overflow: hidden;
  border: 1px solid rgba(47, 95, 156, 0.15);
  border-radius: 8px;
  background: #f8fbfc;
}

.project-files-folder summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  color: #17344b;
  font-weight: 900;
}

.project-files-folder summary span {
  padding: 4px 8px;
  border-radius: 7px;
  background: #e6f4f5;
  color: #116772;
  font-size: 0.74rem;
}

.compact-map {
  min-height: 210px;
  margin: 10px 0;
}

.selected-folder {
  border-color: var(--brand);
  background: var(--green-soft);
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  align-items: end;
}

.estimate-completed-panel {
  display: grid;
  gap: 12px;
}

.estimate-completed-grid {
  padding: 12px;
  border: 1px solid rgba(26, 156, 166, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcfd 0%, #edf5f7 100%);
}

.estimate-completed-grid .estimate-inline-upload {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 94px minmax(0, 1fr) 94px 70px;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: 60px;
  max-height: 60px;
  padding: 5px 7px;
  border: 1px solid rgba(80, 115, 140, 0.16);
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

.estimate-inline-upload-title {
  color: #17344b;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.estimate-inline-title-field {
  display: grid;
  gap: 0;
  margin: 0;
  min-width: 0;
  font-size: 0;
  color: #50687a;
}

.estimate-inline-upload input[type="text"],
.estimate-inline-upload input:not([type]) {
  min-width: 0;
  min-height: 28px;
  height: 28px;
  padding: 0 7px;
  font-size: 0.76rem;
}

.estimate-inline-file-picker {
  display: grid;
  place-items: center;
  height: 30px;
  min-width: 0;
  margin: 0;
  border: 1px dashed #b7cad8;
  border-radius: 8px;
  background: #f7fbfd;
  color: #17344b;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.estimate-inline-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.estimate-inline-upload button {
  display: inline-grid;
  place-items: center;
  justify-self: end;
  min-width: 78px;
  width: 78px;
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
}

.estimate-completed-grid .estimate-inline-upload button {
  width: 70px;
  min-width: 70px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1;
}

.estimate-completed-grid button {
  justify-self: start;
  min-height: 42px;
  min-width: 210px;
}

.estimate-completed-meta {
  padding: 8px 10px;
  border: 1px solid rgba(80, 115, 140, 0.14);
  border-radius: 8px;
  background: #f8fbfc;
}

.project-overview-estimate-card {
  width: 250px;
  max-width: 250px;
  margin: 0 0 10px auto;
}

.project-job-start-summary {
  display: grid;
  gap: 8px;
  width: 250px;
  max-width: 250px;
  margin: 0 0 10px auto;
  padding: 8px 10px;
  border: 1px solid rgba(26, 156, 166, 0.2);
  border-radius: 8px;
  background: #f8fbfc;
}

.project-job-start-summary > strong {
  color: #17344b;
  font-size: 0.82rem;
}

.project-job-start-summary .folder-items {
  grid-template-columns: 1fr;
  margin: 0;
}

.proposal-phase-panel {
  display: grid;
  gap: 12px;
}

.proposal-phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(26, 156, 166, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcfd 0%, #eef6f7 100%);
}

.proposal-phase-head > div:first-child {
  display: grid;
  gap: 3px;
}

.proposal-phase-head strong {
  color: #17344b;
  font-size: 1rem;
}

.proposal-phase-head span,
.proposal-lane-head small {
  color: #5d7285;
  font-size: 0.82rem;
  line-height: 1.25;
}

.proposal-phase-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.proposal-phase-counts span,
.proposal-file-summary summary span {
  padding: 4px 8px;
  border-radius: 7px;
  background: #e6f4f5;
  color: #116772;
  font-size: 0.74rem;
  font-weight: 900;
}

.proposal-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 420px));
  justify-content: start;
  gap: 10px;
}

.proposal-upload-lane {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(80, 115, 140, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.proposal-lane-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.proposal-lane-head > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #17344b;
  color: #ffffff;
  font-weight: 900;
}

.proposal-lane-head > div {
  display: grid;
  gap: 1px;
}

.proposal-upload-lane .file-drop-zone {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 8px;
}

.proposal-upload-lane button {
  min-height: 36px;
}

.closing-notes-lane textarea {
  min-height: 138px;
  resize: vertical;
}

.closing-note-meta {
  margin: 0;
  color: #5d7285;
  font-size: 0.82rem;
  font-weight: 800;
}

.material-assignment-row {
  display: flex;
  align-items: start;
  gap: 12px;
}

.assigned-crew-card {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 200px;
  height: 200px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(21, 156, 165, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #eff8f9 100%);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 0 10px 24px rgba(24, 56, 68, 0.1);
}

.assigned-crew-head {
  display: grid;
  gap: 2px;
}

.assigned-crew-kicker,
.assigned-crew-line span,
.assigned-crew-members > span {
  color: #5d7285;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.assigned-crew-card strong {
  color: #17344b;
  font-size: 0.9rem;
  line-height: 1.05;
}

.assigned-crew-line {
  display: grid;
  gap: 2px;
}

.assigned-crew-line b {
  color: #183844;
  font-size: 0.72rem;
  line-height: 1.1;
}

.assigned-crew-line.compact b {
  font-size: 0.63rem;
}

.assigned-crew-members {
  display: grid;
  gap: 4px;
  min-height: 0;
}

.assigned-crew-members div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 72px;
  overflow: auto;
}

.assigned-crew-members small {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(21, 156, 165, 0.2);
  border-radius: 7px;
  color: #17344b;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.assigned-crew-remove {
  width: 100%;
  min-height: 30px;
  margin-top: 2px;
  border-color: rgba(178, 55, 55, 0.28) !important;
  color: #8f1f1f !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.meeting-upload-card {
  width: min(100%, 280px);
  gap: 7px;
  padding: 9px;
}

.meeting-upload-card .proposal-lane-head > span {
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
}

.meeting-upload-card .proposal-lane-head strong {
  font-size: 0.82rem;
}

.meeting-upload-card .proposal-lane-head small {
  font-size: 0.68rem;
}

.meeting-upload-card label {
  gap: 3px;
  font-size: 0.68rem;
}

.meeting-upload-card input {
  min-height: 30px;
}

.meeting-upload-card .file-drop-zone {
  min-height: 46px;
  padding: 7px 8px;
}

.meeting-upload-card button {
  min-height: 30px;
  font-size: 0.7rem;
}

.meeting-file-summary {
  grid-template-columns: minmax(240px, 360px);
}

.proposal-file-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 420px));
  justify-content: start;
  gap: 10px;
}

.proposal-file-summary details {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(47, 95, 156, 0.15);
  border-radius: 8px;
  background: #f8fbfc;
}

.proposal-file-summary summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  color: #17344b;
  font-weight: 900;
}

.proposal-file-summary .folder-items {
  grid-template-columns: 1fr;
  margin: 0;
  padding: 8px;
}

.estimate-specs-lane,
.estimate-document-lane,
.decision-phase-lane,
.production-phase-lane,
.work-progress-lane {
  width: min(100%, 420px);
}

.work-progress-lane {
  width: min(100%, 520px);
}

.estimate-specs-summary {
  grid-template-columns: minmax(280px, 420px);
}

.two-card-grid {
  grid-template-columns: repeat(2, minmax(280px, 420px));
}

.phase-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .proposal-phase-head,
  .proposal-upload-grid,
  .proposal-file-summary,
  .two-card-grid,
  .material-assignment-row,
  .phase-date-row {
    grid-template-columns: 1fr;
  }

  .material-assignment-row {
    display: grid;
  }

  .estimate-completed-grid .estimate-inline-upload {
    grid-template-columns: 74px minmax(0, 1fr) 82px 62px;
  }

  .project-details-grid,
  .project-details-two,
  .project-contact-row {
    grid-template-columns: 1fr;
  }

  .project-details-file-card,
  .project-details-sections-card,
  .project-details-notes-card {
    grid-column: 1 / -1;
  }

  .proposal-phase-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .proposal-phase-counts {
    justify-content: flex-start;
  }
}

.daily-log-sections-panel {
  align-self: stretch;
}

.daily-log-sections-panel .checkbox-grid {
  align-content: start;
}

.compact-section-picker {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(47, 95, 156, 0.18);
  border-radius: 8px;
  background: #f8fbfc;
}

.compact-section-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  cursor: pointer;
  color: #17344b;
}

.compact-section-picker summary span {
  font-size: 0.78rem;
  color: #61758a;
}

.compact-section-picker .checkbox-grid {
  padding: 8px 10px 10px;
}

.weekly-safety-open-btn {
  border-color: rgba(26, 156, 166, 0.36);
  color: #116772;
  background: #f3fbfc;
}

.weekly-safety-dialog {
  width: min(900px, calc(100vw - 28px));
}

.weekly-safety-shell {
  display: grid;
  gap: 12px;
}

.weekly-safety-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(23, 52, 75, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
}

.weekly-safety-summary span {
  font-size: 0.86rem;
  color: #50677b;
}

.weekly-safety-summary strong,
.weekly-safety-summary span {
  min-width: 0;
}

.weekly-safety-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weekly-safety-fields label:nth-child(n + 4),
.weekly-safety-topics {
  grid-column: 1 / -1;
}

.weekly-safety-official-section {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(17, 93, 89, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.weekly-safety-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.weekly-safety-section-head strong {
  color: #17344b;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-safety-section-head small {
  color: #667780;
  font-size: 0.68rem;
  font-weight: 900;
}

.weekly-safety-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.weekly-safety-fields textarea {
  min-height: 86px;
}

.weekly-safety-participants {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(80, 115, 140, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.weekly-safety-select-all {
  width: fit-content;
}

.weekly-safety-log-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.weekly-safety-log-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(47, 95, 156, 0.16);
  border-radius: 8px;
  background: #f8fbfc;
}

.weekly-safety-log-card div:first-child {
  display: grid;
  gap: 2px;
}

.weekly-safety-log-card span,
.weekly-safety-log-card small {
  color: #5d7285;
}

.weekly-safety-file-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.weekly-safety-file-links a {
  padding: 4px 7px;
  border-radius: 7px;
  background: #e9f5f6;
  color: #116772;
  font-size: 0.78rem;
  font-weight: 800;
}

.weekly-safety-report-dialog {
  width: min(860px, calc(100vw - 28px));
}

.weekly-safety-report-sheet {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(23, 52, 75, 0.2);
  border-radius: 8px;
  padding: 16px;
  color: #17344b;
  background: #fff;
}

.weekly-safety-report-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid rgba(23, 52, 75, 0.16);
  padding-bottom: 12px;
}

.weekly-safety-report-head h2 {
  margin: 0;
  font-size: 1.24rem;
}

.weekly-safety-report-date {
  border: 1px solid rgba(17, 93, 89, 0.18);
  border-radius: 7px;
  padding: 6px 9px;
  background: #f6fbfa;
  font-weight: 900;
}

.weekly-safety-report-meta,
.weekly-safety-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weekly-safety-report-meta span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(17, 93, 89, 0.12);
  border-radius: 7px;
  padding: 8px;
  background: #fbfdfd;
}

.weekly-safety-report-meta small {
  color: #667780;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-safety-report-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekly-safety-report-block {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(17, 93, 89, 0.14);
  border-radius: 8px;
  padding: 11px;
  background: #ffffff;
}

.weekly-safety-report-block p {
  margin: 0;
  color: #304a5d;
  font-size: 0.88rem;
  line-height: 1.45;
}

.weekly-safety-report-topics,
.weekly-safety-attendee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weekly-safety-report-topics span,
.weekly-safety-attendee-list span {
  border: 1px solid rgba(17, 93, 89, 0.18);
  border-radius: 999px;
  padding: 4px 8px;
  color: #115d59;
  background: #f0f8f6;
  font-size: 0.76rem;
  font-weight: 900;
}

.weekly-safety-report-topics em,
.weekly-safety-attendee-list em {
  color: #667780;
  font-style: normal;
}

.weekly-safety-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(23, 52, 75, 0.14);
  padding-top: 10px;
  color: #667780;
  font-size: 0.72rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .weekly-safety-summary,
  .weekly-safety-fields,
  .weekly-safety-topic-grid,
  .weekly-safety-report-meta,
  .weekly-safety-report-grid {
    grid-template-columns: 1fr;
  }

  .weekly-safety-report-head,
  .weekly-safety-report-footer {
    display: grid;
  }
}

.folder-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 236px);
  justify-content: start;
  gap: 10px;
  margin-top: 10px;
}

.section-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: start;
  gap: 10px;
  margin-top: 0;
}

.section-summary-card {
  width: 150px;
  min-height: 92px;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(47, 95, 156, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  box-shadow: 0 8px 18px rgba(14, 39, 63, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  cursor: pointer;
}

.section-summary-card:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 95, 156, 0.42);
  box-shadow: 0 12px 24px rgba(14, 39, 63, 0.12);
}

.section-summary-card strong {
  display: block;
  color: #15446e;
}

.section-summary-card:hover strong {
  color: #1f68a9;
}

.section-summary-card .row-actions {
  margin-top: auto;
  justify-content: flex-end;
}

.section-summary-card strong,
.section-summary-card span,
.section-summary-card small {
  font-size: 0.7rem;
  line-height: 1.15;
}

.clickable-section-card {
  position: relative;
  top: -10px;
}

.section-delete-btn {
  width: 46px !important;
  min-width: 46px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 4px !important;
  font-size: 0.5rem !important;
  line-height: 1 !important;
  border-color: #c24848 !important;
  background: linear-gradient(180deg, #e16767 0%, #c24848 100%) !important;
  color: #fff !important;
}

.context-panel {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
  color: var(--muted);
  font-size: 0.88rem;
}

.folder-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfc;
}

.folder-item small {
  color: var(--muted);
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.employee-card {
  width: 264px;
  min-width: 264px;
  min-height: 284px;
  height: 284px;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 5px;
  cursor: pointer;
  overflow: visible;
}

.employee-card-top {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 67px;
  height: 67px;
  max-height: 67px;
  margin-bottom: -14px;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.employee-card-avatar {
  width: 67px;
  height: 67px;
  min-width: 67px;
  min-height: 67px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.employee-card:hover {
  border-color: var(--brand);
}

.employee-avatar,
.employee-profile-avatar {
  display: block;
  width: 67px;
  height: 67px;
  border: 1px solid rgba(160, 169, 175, 0.34);
  border-radius: 8px;
  object-fit: cover;
  vertical-align: top;
  background: rgba(63, 72, 79, 0.96);
}

.employee-avatar-fallback {
  display: grid;
  place-items: center;
  color: #fdfefe;
  font-family: "Bahnschrift", "Segoe UI Variable", "Consolas", monospace;
  font-weight: 700;
  font-size: 1.15rem;
}

.employee-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: start;
  min-width: 0;
  padding-top: 0;
  padding-right: 0;
  transform: translate(8px, -9px);
  position: relative;
  z-index: 3;
}

.employee-card-roles .pill {
  max-width: 100%;
  font-size: 0.535rem;
  line-height: 1.15;
  padding: 2px 5px;
  overflow-wrap: anywhere;
}

.employee-card h3 {
  margin: 14px 0 3px;
}

.employee-card .meta {
  margin: -6px 0 0;
  gap: 2px;
  font-size: 0.79rem;
  line-height: 1.12;
}

.employee-card-stats {
  display: block;
  color: #617887;
  font-size: 0.62rem;
  line-height: 1.2;
}

.employee-card-stats:first-of-type {
  transform: translateY(-12px);
}

.employee-card-stats + .employee-card-stats {
  margin-top: -2px;
}

.employee-card-avatar .employee-avatar,
.employee-card-avatar .employee-avatar-fallback {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.employee-card button.small {
  width: 80px;
  min-width: 80px;
  height: 20px;
  min-height: 20px;
  padding: 0 6px;
  font-size: 0.64rem;
  line-height: 1;
  align-self: end;
}

.employee-card [data-message-employee],
.employee-card .employee-note-btn {
  height: 29px;
  min-height: 29px;
  border-radius: 4px;
}

.employee-card-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.employee-card-actions-left {
  display: flex;
  gap: 6px;
  align-items: end;
}

.employee-card-actions-right {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.employee-eval-btn {
  width: 58px !important;
  min-width: 58px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 4px !important;
  font-size: 0.5rem !important;
  line-height: 1 !important;
  color: #fff !important;
  border-color: #2f6fd8 !important;
  background: linear-gradient(180deg, #4d91ff 0%, #2f6fd8 100%) !important;
}

.employee-delete-btn {
  width: 58px !important;
  min-width: 58px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 4px !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
  justify-self: end;
}

.employee-profile-head {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 0;
}

.employee-photo-workbench {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.employee-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  width: 100%;
}

#employeeTypeTabs {
  margin-left: auto;
}

.employee-photo-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 169, 175, 0.34);
  border-radius: 10px;
  background: linear-gradient(180deg, #eef4f7 0%, #dbe5eb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  cursor: grab;
}

.employee-photo-trigger:hover {
  filter: none;
  border-color: var(--brand);
}

.employee-photo-trigger:active {
  cursor: grabbing;
}

.employee-profile-avatar {
  width: 108px;
  height: 108px;
  display: block;
}

.employee-photo-summary {
  display: grid;
  gap: 5px;
  align-content: center;
}

.employee-photo-summary strong {
  color: #163247;
  font-size: 0.94rem;
}

.employee-photo-summary small {
  color: #5d7483;
  font-size: 0.76rem;
  line-height: 1.35;
}

.employee-photo-editor {
  display: grid;
  gap: 10px;
  width: 360px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, #fbfdfe 0%, #f2f7fa 100%);
  overflow: hidden;
}

.employee-photo-editor[hidden] {
  display: none !important;
}

.employee-photo-editor-heading {
  display: grid;
  gap: 4px;
}

.employee-photo-editor-heading strong {
  color: #173247;
  font-size: 0.84rem;
}

.employee-photo-editor-heading small {
  color: #617888;
  font-size: 0.69rem;
  line-height: 1.28;
  max-width: 320px;
}

.employee-photo-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  justify-content: stretch;
  margin-top: -15px;
}

.employee-photo-control-grid label {
  display: grid;
  gap: 4px;
}

.employee-range-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #274156;
  font-size: 0.77rem;
  font-weight: 600;
}

.employee-range-label strong {
  padding: 2px 7px;
  border: 1px solid #d4e0e8;
  border-radius: 999px;
  background: #fff;
  color: #183348;
  font-size: 0.72rem;
}

.employee-photo-fit-row {
  align-self: end;
  padding-top: 8px;
}

.employee-photo-editor-actions {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  margin-top: -2px;
}

.employee-photo-editor-actions [data-reset-employee-photo] {
  background: linear-gradient(180deg, #d95852 0%, #b93e39 100%);
  border-color: #bd423d;
  color: #fff;
}

.employee-photo-editor-actions [data-close-photo-editor] {
  background: linear-gradient(180deg, #40b65e 0%, #2d8f47 100%);
  border-color: #2d8f47;
  color: #fff;
}

.employee-photo-editor .file-input-stack {
  max-width: 100%;
  gap: 6px;
}

.employee-photo-editor .file-drop-zone {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f9fcfe;
}

.employee-photo-editor .file-drop-copy {
  font-size: 0.68rem;
}

.employee-evaluation-shell {
  display: grid;
  gap: 14px;
}

.employee-evaluation-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.employee-evaluation-photo-wrap {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid #d6dee6;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef4f7 0%, #dbe5eb 100%);
}

.employee-evaluation-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.employee-evaluation-summary {
  display: grid;
  gap: 6px;
}

.employee-evaluation-summary strong {
  color: #173247;
  font-size: 1rem;
}

.employee-evaluation-summary span {
  color: #496173;
  font-size: 0.8rem;
  line-height: 1.3;
}

.employee-evaluation-notes {
  display: grid;
  gap: 8px;
}

.employee-evaluation-notes > strong {
  color: #173247;
  font-size: 0.88rem;
}

.employee-evaluation-notes-list {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding: 2px;
}

.employee-evaluation-note {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #d6dee6;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.employee-evaluation-note span {
  color: #20394b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.employee-evaluation-note small {
  color: #6a8292;
  font-size: 0.68rem;
}

.employee-evaluation-form-grid {
  display: grid;
  gap: 12px;
}

.compact-heading {
  margin-bottom: 6px;
}

.crew-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.crew-stat-card {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid rgba(18, 64, 66, 0.16);
  border-left: 5px solid #16999f;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f3faf9 100%);
  box-shadow: 0 10px 22px rgba(16, 44, 54, 0.08);
}

.crew-stat-card span {
  color: #496777;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.crew-stat-card strong {
  color: #102d3b;
  font-size: 1.55rem;
  line-height: 1;
}

.crew-stat-card small {
  color: #6a8291;
  font-size: 0.7rem;
  line-height: 1.2;
}

.crew-stat-card.assigned {
  border-left-color: #d39b2e;
}

.crew-stat-card.available {
  border-left-color: #2cb56a;
}

.crew-stat-card.roster {
  border-left-color: #3c7edb;
}

.crew-builder-card {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 430px;
  align-content: start;
}

.crew-layout {
  display: grid;
  grid-template-columns: minmax(360px, 430px) 1px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.crew-layout-divider {
  width: 1px;
  min-height: 100%;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(204, 215, 224, 0.2) 0%, rgba(204, 215, 224, 0.95) 18%, rgba(204, 215, 224, 0.95) 82%, rgba(204, 215, 224, 0.2) 100%);
}

.crew-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.crew-builder-head h3 {
  margin: 0;
  color: #102d3b;
  font-size: 1.15rem;
  line-height: 1.1;
}

.crew-builder-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(22, 153, 159, 0.22);
  border-radius: 999px;
  color: #0b7177;
  background: #e8fbfb;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crew-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

#crewNameInput,
#crewForemanSelect,
#crewGradeSelect,
#crewForemanGradeSelect {
  width: 100%;
  max-width: 100%;
}

.crew-foreman-field {
  margin-left: 0;
}

.crew-laborer-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d5e3e8;
  border-radius: 8px;
  background: #f7fbfb;
}

.crew-laborer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.crew-laborer-head strong {
  color: #183247;
  font-size: 0.92rem;
}

.crew-laborer-head small {
  color: #6a8292;
  font-size: 0.72rem;
}

.crew-laborer-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  max-height: 250px;
  overflow: auto;
  padding-right: 2px;
}

.crew-member-row {
  align-items: start;
  min-height: 46px;
  padding: 8px 9px;
  border-color: #d7e4e9;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
}

.crew-member-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crew-member-copy strong {
  color: #1d3447;
  font-size: 0.8rem;
  line-height: 1.2;
}

.crew-member-copy small {
  overflow: hidden;
  color: #6b8291;
  font-size: 0.68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-builder-actions {
  justify-content: flex-end;
}

.crew-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.crew-summary-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 248px;
  padding: 14px;
  border-top: 4px solid #16999f !important;
}

.crew-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 0;
}

.crew-card-head .crew-card-actions {
  grid-column: 1 / -1;
}

.crew-status-pill {
  padding: 5px 8px;
  border: 1px solid rgba(22, 153, 159, 0.22);
  border-radius: 999px;
  color: #0b7177;
  background: #e8fbfb;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.crew-status-pill.assigned {
  border-color: rgba(211, 155, 46, 0.24);
  color: #8f610b;
  background: #fff4d8;
}

.crew-status-pill.available {
  border-color: rgba(44, 181, 106, 0.26);
  color: #126a39;
  background: #eafaf0;
}

.crew-card-focus {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #d5e3e8;
  border-radius: 8px;
  background: #f6fbfb;
}

.crew-card-focus span {
  color: #6a8291;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crew-card-focus strong {
  color: #102d3b;
  font-size: 0.88rem;
  line-height: 1.25;
}

.crew-open-project {
  width: max-content;
  margin-top: 2px;
}

.crew-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crew-meta-grid span {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 8px;
  border: 1px solid #dce8ec;
  border-radius: 7px;
  color: #1f3c4e;
  background: #ffffff;
  font-size: 0.78rem;
  line-height: 1.15;
}

.crew-meta-grid strong {
  color: #6a8291;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crew-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crew-pill-list .pill {
  max-width: 100%;
}

.foreman-pill {
  border-color: rgba(211, 155, 46, 0.34);
  color: #7a5309;
  background: #fff3d3;
}

.crew-card-actions {
  justify-content: flex-end;
  margin-top: 0;
  gap: 6px;
}

.crew-card-actions .small {
  min-height: 22px;
  height: 22px;
  min-width: 62px;
  padding: 0 8px;
  font-size: 0.62rem;
  line-height: 1;
}

.crew-edit-shell {
  display: grid;
  gap: 14px;
}

.crew-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
}

.employee-photo-trigger .employee-profile-avatar,
.employee-photo-trigger .employee-avatar-fallback {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.comments-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.comment-list {
  display: grid;
  gap: 4px;
}

.comment-item {
  position: relative;
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
  border-bottom: 1px solid rgba(80, 115, 140, 0.16);
}

.comment-check {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--brand);
  font-weight: 700;
}

.reply-list {
  display: grid;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
}

.comment-reply-row,
.compact-comment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.compact-delete-btn {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: 0.74rem;
}

.mention-chip {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

.comment-highlight {
  border-color: rgba(80, 115, 140, 0.16);
  box-shadow: none;
}

.compact-comments {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(80, 115, 140, 0.16);
}

.compact-comments p {
  margin: 0;
  color: #243b48;
  font-size: 0.84rem;
  line-height: 1.35;
}

.compact-comment-row p {
  flex: 1 1 auto;
}

.compact-comments span {
  color: #607682;
  font-weight: 700;
}

.compact-comments-empty {
  color: #607682 !important;
}

.section-page {
  border-color: var(--brand);
}

.inspection-summary {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  padding: 16px;
  background: var(--yellow-soft);
}

.deficiency-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.deficiency-capture-card,
.deficiency-form-card,
.deficiency-entry-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  color: #183042;
}

.deficiency-capture-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #f7fbfd 0%, #eef7f8 100%);
  border-color: #b7d3dc;
}

.deficiency-capture-card div {
  display: grid;
  gap: 4px;
}

.deficiency-capture-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deficiency-capture-card strong {
  color: #102a2f;
  font-size: 1rem;
}

.deficiency-capture-card small,
.deficiency-photo-count {
  color: var(--muted);
  font-size: 0.8rem;
}

.multi-section-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(21, 157, 165, 0.28);
  border-radius: 6px;
  background: rgba(21, 157, 165, 0.1);
  color: #0d6f78;
  font-size: 0.72rem;
  font-weight: 800;
}

.deficiency-capture-actions {
  display: grid;
  gap: 8px;
}

.deficiency-capture-btn {
  min-height: 42px;
  background: #0f8f9a;
  box-shadow: 0 0 0 1px rgba(15, 143, 154, 0.2), 0 8px 18px rgba(15, 143, 154, 0.22);
}

.deficiency-video-capture-btn {
  background: #23894a;
  box-shadow: 0 0 0 1px rgba(35, 137, 74, 0.22), 0 8px 18px rgba(35, 137, 74, 0.2);
}

.deficiency-form-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.deficiency-form-card[hidden] {
  display: none;
}

.deficiency-form-head {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.deficiency-form-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deficiency-form-head strong {
  font-size: 1rem;
  color: #102a2f;
}

.deficiency-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.deficiency-form-grid .span-2 {
  grid-column: 1 / -1;
}

.deficiency-entry-list {
  display: grid;
  gap: 12px;
}

.deficiency-entry-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px;
  align-items: start;
}

.deficiency-entry-media-stack {
  display: grid;
  gap: 10px;
  width: 280px;
}

.deficiency-photo-carousel {
  position: relative;
  width: 280px;
  min-height: 185px;
}

.deficiency-thumb {
  width: 280px;
  height: 185px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #eef3f5;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
}

.deficiency-photo-arrow {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 42, 47, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: #102a2f;
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 4px 10px rgba(16, 42, 47, 0.14);
}

.deficiency-photo-arrow.prev {
  left: 4px;
}

.deficiency-photo-arrow.next {
  right: 4px;
}

.deficiency-photo-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 42, 47, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

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

.deficiency-photo-delete:hover {
  background: linear-gradient(180deg, #e55a5a 0%, #b42b2b 100%);
  color: #ffffff;
}

.deficiency-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deficiency-map-card {
  display: block;
  width: 280px;
  height: 185px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.deficiency-map-card-live {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #dce8ea;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.deficiency-map-card-live::after {
  content: "Adjust";
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(5, 34, 42, 0.82);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.deficiency-map-card-live:hover,
.deficiency-map-card-live:focus-visible {
  border-color: #17b8c7;
  box-shadow: 0 0 0 3px rgba(23, 184, 199, 0.2), 0 8px 18px rgba(10, 34, 42, 0.18);
  outline: none;
  transform: translateY(-1px);
}

.deficiency-map-card-live:hover::after,
.deficiency-map-card-live:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.deficiency-map-card-live img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deficiency-map-card-live > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #526a78;
  font-size: 0.74rem;
  font-weight: 800;
}

.deficiency-map-card-empty {
  place-items: center;
  align-content: center;
  text-align: center;
  color: #526a78;
}

.deficiency-map-card-empty strong {
  color: #0a5962;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deficiency-map-card-empty span {
  font-size: 0.76rem;
}

.deficiency-map-adjust-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: 760px;
  padding: 18px;
}

.deficiency-map-adjust-dialog h2 {
  margin: 0 0 6px;
}

.deficiency-map-adjust-dialog .dialog-helper {
  margin: 0 0 12px;
  color: #42606a;
  line-height: 1.35;
}

.deficiency-map-adjust-map {
  width: 100%;
  height: min(56vh, 430px);
  min-height: 340px;
  border: 1px solid #8fb7c1;
  border-radius: 8px;
  overflow: hidden;
  background: #dce8ea;
}

.deficiency-map-adjust-dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.deficiency-entry-main {
  display: grid;
  gap: 10px;
}

.deficiency-entry-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deficiency-entry-title strong {
  color: #102a2f;
  font-size: 1.02rem;
}

.deficiency-alert {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #c91515;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.82rem;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
}

.deficiency-alert--proactive {
  width: 20px;
  height: 18px;
  border-radius: 0;
  background: #f2c230;
  color: #102a2f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  align-items: end;
  padding-bottom: 2px;
  font-size: 0.68rem;
}

.deficiency-alert--replacement {
  width: 18px;
  height: 18px;
  background: transparent;
  color: #1f7ae0;
  text-shadow: none;
}

.deficiency-alert--replacement svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.deficiency-alert--monitor {
  background: transparent;
  color: #1f7ae0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  text-shadow: none;
}

.deficiency-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.deficiency-facts span {
  display: grid;
  gap: 2px;
  min-width: 90px;
  color: #102a2f;
}

.deficiency-facts small,
.deficiency-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.deficiency-copy p {
  margin: 2px 0 8px;
  color: #3c4b53;
  line-height: 1.35;
}

.deficiency-entry-actions {
  display: grid;
  gap: 6px;
}

@media (max-width: 900px) {
  .deficiency-workspace,
  .deficiency-entry-card {
    grid-template-columns: 1fr;
  }

  .deficiency-entry-media-stack,
  .deficiency-photo-carousel {
    width: 100%;
  }

  .deficiency-thumb {
    width: 100%;
    height: 180px;
  }

  .deficiency-map-card {
    width: 100%;
    height: 180px;
  }

  .deficiency-map-card-live {
    height: 100%;
  }

  .deficiency-entry-actions {
    display: flex;
  }
}

.progress-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.progress-step {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
  color: #183042;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: none;
}

.progress-step.done {
  border-color: var(--brand);
  background: var(--green-soft);
  color: #123929;
}

.progress-step.active-step {
  border-color: rgba(242, 194, 48, 0.72);
  color: #183042;
  box-shadow: 0 0 0 1px rgba(242, 194, 48, 0.16);
}

.progress-step.viewed-step {
  outline: 2px solid rgba(127, 176, 255, 0.45);
}

.project-number-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 8px 0 0;
  padding: 0 12px;
  border: 1px solid rgba(21, 156, 165, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(236, 251, 253, 0.98), rgba(209, 242, 246, 0.98));
  color: var(--stronghold-teal-dark);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(16, 42, 52, 0.08);
}

.property-action-stack {
  margin: 8px 0 12px;
}

.progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.gantt {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.gantt-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: center;
}

.gantt-bar {
  border-radius: 8px;
  padding: 10px;
  color: var(--white);
  background: var(--brand);
}

.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}

.production-calendar-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.production-calendar-sidebar {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 12px;
}

.production-calendar-create {
  position: relative;
  width: 100%;
  min-height: 48px;
  height: 48px;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(14, 105, 112, 0.34);
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #eef8f9 100%);
  background-size: 16px 16px, 16px 16px, auto;
  color: #0e4550;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(21, 156, 165, 0.14);
}

.production-calendar-create::after {
  content: "Switch";
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(180deg, #159ca5 0%, #0e6970 100%);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.production-calendar-create:hover,
.production-calendar-create.is-board-mode {
  border-color: rgba(14, 105, 112, 0.36);
  background: linear-gradient(180deg, #159ca5 0%, #0e6970 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(21, 156, 165, 0.22);
}

.production-calendar-create:hover::after,
.production-calendar-create.is-board-mode::after {
  color: #0e6970;
  background: #ffffff;
}

.production-calendar-sidecard {
  border: 1px solid rgba(53, 83, 107, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 12px 28px rgba(18, 41, 61, 0.07);
}

.production-calendar-sidecard h4 {
  margin: 0 0 8px;
  color: #17344b;
  font-size: 0.94rem;
}

.production-at-a-glance-card {
  border-color: rgba(47, 111, 208, 0.34);
  background: linear-gradient(180deg, rgba(47, 111, 208, 0.12) 0%, #ffffff 46%, #f7fbff 100%);
  box-shadow: 0 14px 30px rgba(47, 111, 208, 0.15);
}

.production-at-a-glance-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f4277;
  font-size: 1rem;
  font-weight: 900;
}

.production-at-a-glance-card h4::before {
  content: "";
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: #2f7df6;
  box-shadow: 0 0 12px rgba(47, 125, 246, 0.65);
}

.production-calendar-main {
  min-width: 0;
}

.production-calendar-toolbar {
  margin: 0 0 8px;
  padding: 0 2px 4px;
}

.production-calendar-toolbar-left,
.production-calendar-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.production-calendar-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.production-calendar-month-nav .ghost,
.production-calendar-today {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(53, 83, 107, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 6px 14px rgba(18, 41, 61, 0.06);
}

.production-calendar-toolbar h3 {
  margin: 0;
  font-size: 1.48rem;
  font-weight: 800;
  color: #17344b;
}

.production-calendar-view-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(47, 111, 208, 0.18);
  border-radius: 8px;
  background: rgba(47, 111, 208, 0.08);
  color: #0f4277;
  font-size: 0.9rem;
  font-weight: 700;
}

.production-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.production-mini-header h4 {
  margin: 0;
  font-size: 1rem;
}

.production-mini-weekdays,
.production-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.production-mini-weekdays {
  margin-bottom: 4px;
}

.production-mini-weekdays span {
  text-align: center;
  color: #6d7f8c;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.production-mini-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  color: #17344b;
  font-size: 0.72rem;
}

.production-mini-day.outside-month {
  color: #a3afb8;
}

.production-mini-day.is-today {
  border: 1px solid rgba(47, 111, 208, 0.3);
  background: rgba(47, 111, 208, 0.08);
}

.production-mini-day.is-selected {
  color: #fff;
  background: linear-gradient(180deg, #3f89ed 0%, #2f6fd0 100%);
}

.production-calendar-stats {
  display: grid;
  gap: 6px;
}

.production-calendar-stat {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(47, 111, 208, 0.06);
}

.production-calendar-stat strong {
  color: #17344b;
  font-size: 1.02rem;
}

.production-calendar-stat span {
  color: #5c7180;
  font-size: 0.78rem;
}

.production-board-shell {
  align-items: stretch;
}

.production-board-main {
  display: grid;
  gap: 12px;
}

.production-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(21, 156, 165, 0.2);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 56, 68, 0.08);
}

.production-board-toolbar h3 {
  margin: 1px 0 0;
  color: #17344b;
  font-size: 1.1rem;
}

.production-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.production-board-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 420px;
  border: 1px solid rgba(21, 156, 165, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fcfd 0%, #eef7f8 100%);
}

.production-board-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(21, 156, 165, 0.18);
  background: #ffffff;
}

.production-board-column-head strong {
  color: #17344b;
  font-size: 0.82rem;
  line-height: 1.15;
}

.production-board-column-head span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
  background: #0e6970;
  font-size: 0.72rem;
  font-weight: 900;
}

.production-board-stack {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 8px;
  overflow: auto;
}

.production-board-card {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(21, 156, 165, 0.22);
  border-radius: 8px;
  color: #17344b;
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(24, 56, 68, 0.08);
}

.production-board-card:hover {
  border-color: rgba(14, 105, 112, 0.38);
  box-shadow: 0 10px 22px rgba(21, 156, 165, 0.14);
}

.production-board-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.production-board-card-top strong {
  font-size: 0.78rem;
}

.production-board-card-top span {
  color: #0f5a26;
  font-size: 0.72rem;
  font-weight: 900;
}

.production-board-card b {
  font-size: 0.82rem;
  line-height: 1.15;
}

.production-board-card small {
  color: #405865;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.18;
}

.production-board-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(21, 156, 165, 0.14);
}

.production-board-progress::before {
  content: "";
  display: block;
  width: var(--job-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #159ca5 0%, #39c37a 100%);
}

.production-at-a-glance-list {
  display: grid;
  gap: 5px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.production-at-a-glance-item {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 7px 9px 8px 13px;
  border: 1px solid rgba(47, 111, 208, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(47, 125, 246, 0.08) 100%);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(18, 41, 61, 0.07);
  overflow: hidden;
}

.production-at-a-glance-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #2f7df6;
}

.production-at-a-glance-item:hover {
  background: linear-gradient(180deg, #ffffff 0%, rgba(47, 125, 246, 0.14) 100%);
  border-color: rgba(47, 111, 208, 0.42);
  box-shadow: 0 10px 20px rgba(47, 111, 208, 0.16);
}

.production-at-a-glance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #17344b;
  font-size: 0.78rem;
  line-height: 1.1;
}

.production-at-a-glance-percent {
  min-width: 46px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #0f5a26;
  text-align: center;
  background: rgba(47, 152, 63, 0.16);
  border: 1px solid rgba(47, 152, 63, 0.2);
  font-weight: 900;
}

.production-at-a-glance-name {
  color: #29445a;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-at-a-glance-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(53, 83, 107, 0.12);
  overflow: hidden;
}

.production-at-a-glance-progress::before {
  content: "";
  display: block;
  width: var(--job-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f983f 0%, #7ccf65 100%);
}

.production-at-a-glance-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  color: #5c7180;
  font-size: 0.68rem;
  line-height: 1.1;
}

.production-at-a-glance-meta span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-at-a-glance-meta strong {
  margin-right: 4px;
  color: #29445a;
}

.production-executive-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.production-exec-card {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 7px 7px;
  border: 1px solid rgba(69, 95, 113, 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fcfd 0%, #eef5f8 100%);
  box-shadow: 0 8px 18px rgba(18, 41, 61, 0.05);
}

.production-exec-card span {
  color: #5a6f7c;
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
}

.production-exec-card strong {
  color: #17344b;
  font-size: 0.98rem;
  line-height: 1.05;
}

.production-exec-card small {
  min-width: 0;
  color: #627783;
  font-size: 0.6rem;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.production-exec-card-primary {
  border-color: rgba(26, 156, 166, 0.28);
  background: linear-gradient(180deg, #f4fbfb 0%, #e5f2f4 100%);
}

.production-exec-card.is-alert {
  border-color: rgba(214, 69, 69, 0.25);
  background: linear-gradient(180deg, #fffafa 0%, #f6eeee 100%);
}

.production-watch-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.production-watchlist {
  display: grid;
  gap: 6px;
}

.production-watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(69, 95, 113, 0.12);
  border-radius: 8px;
  background: #f8fbfc;
}

.production-watch-row div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.production-watch-row strong {
  color: #17344b;
  font-size: 1rem;
}

.production-watch-row span {
  color: #4f6573;
  font-size: 0.72rem;
  font-weight: 800;
}

.production-watch-row a,
.production-watch-row small {
  flex: 0 0 auto;
  color: #315d88;
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
}

.production-watch-row.tone-danger {
  border-color: rgba(214, 69, 69, 0.22);
  background: #fff5f5;
}

.production-watch-row.tone-warning {
  border-color: rgba(198, 154, 28, 0.24);
  background: #fffaf0;
}

.production-watch-row.tone-neutral {
  border-color: rgba(80, 115, 140, 0.18);
  background: #f4f8fb;
}

.production-calendar-entry-dialog {
  width: min(620px, calc(100vw - 28px));
}

.production-calendar-entry-shell {
  display: grid;
  gap: 12px;
}

.production-calendar-entry-date-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(26, 156, 166, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, #f6fbfc 0%, #e6f2f4 100%);
}

.production-calendar-entry-date-card span {
  color: #587082;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.production-calendar-entry-date-card strong {
  color: #17344b;
  font-size: 1.2rem;
}

.production-calendar-entry-date-card small {
  color: #526a7a;
  font-size: 0.76rem;
}

.production-calendar-entry-fields {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
}

.production-calendar-entry-fields label:last-child {
  grid-column: 1 / -1;
}

.production-calendar-entry-fields textarea {
  min-height: 104px;
}

.production-calendar-entry-existing {
  display: grid;
  gap: 8px;
}

.production-calendar-entry-existing > strong {
  color: #17344b;
  font-size: 0.88rem;
}

.production-calendar-entry-existing-list {
  display: grid;
  gap: 7px;
  max-height: 190px;
  overflow: auto;
}

.production-calendar-entry-existing-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid #d6e0e7;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.production-calendar-entry-existing-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.production-calendar-entry-existing-item strong {
  color: #17344b;
  font-size: 0.82rem;
}

.production-calendar-entry-existing-item span,
.production-calendar-entry-existing-item small {
  min-width: 0;
  color: #5d7280;
  font-size: 0.7rem;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-controls button {
  min-height: 32px;
  padding: 0 12px;
}

.calendar-controls h3 {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #17344b;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid rgba(53, 83, 107, 0.1);
  border-radius: 10px;
  background: rgba(53, 83, 107, 0.1);
  box-shadow: 0 18px 34px rgba(18, 41, 61, 0.07);
}

.production-calendar-grid {
  min-width: 0;
  border-color: #d7e4ec;
  background: #d7e4ec;
  box-shadow: 0 14px 28px rgba(18, 41, 61, 0.06);
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  color: #486173;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0;
  background: #f5f8fb;
  border-bottom: 0;
}

.calendar-day {
  position: relative;
  min-height: 162px;
  border: 0;
  padding: 10px 9px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  overflow: visible;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.calendar-add-day {
  cursor: pointer;
}

.calendar-add-day:hover {
  background: #f4f9ff;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 208, 0.12);
}

.calendar-day-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.calendar-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #274155;
  font-size: 0.84rem;
  font-weight: 800;
}

.calendar-day-weekday {
  display: none;
}

.service-calendar-empty-state {
  display: none;
}

.calendar-day.is-today .calendar-day-number {
  color: #fff;
  background: linear-gradient(180deg, #3f89ed 0%, #2f6fd0 100%);
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.14);
}

.calendar-add-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}

.calendar-add-day:hover .calendar-add-hint {
  opacity: 1;
}

.calendar-day.muted {
  background: #f7f9fb;
}

.calendar-job {
  display: block;
  margin-top: 6px;
  border-radius: 8px;
  padding: 5px;
  color: var(--white);
  font-size: 0.72rem;
  text-decoration: none;
}

.calendar-bar-stack {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  margin-left: -9px;
  width: calc(100% + 18px);
}

.calendar-span-bar {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--span-width, auto);
  min-height: 24px;
  border-radius: 5px;
  padding: 4px 9px;
  color: #17344b;
  font-size: 0.7rem;
  line-height: 1.12;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(18, 41, 61, 0.09);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 4px solid rgba(47, 111, 208, 0.85);
}

.calendar-span-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress-fill, 0%);
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
  border-radius: inherit;
  box-shadow:
    inset -1px 0 0 rgba(9, 96, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  z-index: 0;
}

.calendar-span-copy {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.calendar-span-project {
  font-weight: 900;
}

.calendar-span-crew {
  display: inline-block;
  margin-left: 5px;
  color: #7a2e00;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

.calendar-span-bar small {
  display: block;
  margin-top: 0;
  color: #5c7180;
  font-size: 0.62rem;
  line-height: 1.02;
}

.production-calendar-grid .calendar-head {
  min-height: 28px;
  color: #597383;
  background: #edf5f9;
  font-size: 0.64rem;
}

.production-calendar-grid .calendar-day {
  min-height: 92px;
  padding: 5px 6px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%);
}

.production-calendar-grid .calendar-day.calendar-weekend {
  background: linear-gradient(180deg, #f6fafc 0%, #eef5f8 100%);
}

.production-calendar-grid .calendar-day.muted {
  background: linear-gradient(180deg, #dce7ee 0%, #cfdae2 100%);
}

.production-calendar-grid .calendar-add-day:hover {
  background: #f0f8fb;
  box-shadow: inset 0 0 0 1px rgba(26, 156, 166, 0.14);
}

.production-calendar-grid .calendar-day-top {
  margin-bottom: 3px;
}

.production-calendar-grid .calendar-day-number {
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.74rem;
}

.production-calendar-grid .calendar-add-hint {
  top: 7px;
  left: 7px;
  font-size: 0.58rem;
}

.production-calendar-grid .calendar-bar-stack {
  position: absolute;
  right: auto;
  bottom: 5px;
  left: 6px;
  gap: 3px;
  margin-top: 0;
  width: calc(100% + 12px);
}

.production-calendar-grid .calendar-span-bar {
  min-height: 18px;
  padding: 2px 6px;
  border-left-width: 3px;
  font-size: 0.62rem;
  line-height: 1.08;
}

.production-calendar-grid .calendar-span-bar small {
  display: none;
}

.production-calendar-grid .calendar-span-bar.color-0 {
  border-left-color: #d91f1f;
  background: linear-gradient(180deg, #ffc8c3 0%, #f08b83 100%);
}

.production-calendar-grid .calendar-span-bar.color-1 {
  border-left-color: #4f86c6;
  background: linear-gradient(180deg, #c7def6 0%, #8eb9e4 100%);
}

.production-calendar-grid .calendar-span-bar.color-2 {
  border-left-color: #559c6a;
  background: linear-gradient(180deg, #c9edcf 0%, #90d19c 100%);
}

.production-calendar-grid .calendar-span-bar.color-3 {
  border-left-color: #c3a347;
  background: linear-gradient(180deg, #f4dfa1 0%, #d8bb63 100%);
}

.production-calendar-grid .calendar-span-bar.color-4 {
  border-left-color: #718696;
  background: linear-gradient(180deg, #c7d5df 0%, #93aaba 100%);
}

.production-calendar-grid .calendar-span-bar.is-warning {
  border-left-color: #c28a13;
  background: linear-gradient(180deg, #ffe58a 0%, #f0bd35 100%);
}

.production-calendar-grid .calendar-span-bar.is-overdue {
  border-left-color: #b51f1a;
  background: linear-gradient(180deg, #ff928b 0%, #d7352d 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden {
  min-height: 14px;
  padding: 0;
  border-left-width: 0;
  box-shadow:
    inset 0 0 0 1px rgba(21, 48, 67, 0.14),
    0 4px 10px rgba(18, 41, 61, 0.12);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden .calendar-span-progress {
  width: var(--progress-fill, 0%);
  opacity: 1;
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden.color-0 .calendar-span-progress {
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden.color-1 .calendar-span-progress {
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden.color-2 .calendar-span-progress {
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden.color-3 .calendar-span-progress {
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

.production-calendar-grid .calendar-span-bar.is-label-hidden.color-4 .calendar-span-progress {
  background: linear-gradient(180deg, #39d978 0%, #16a34a 100%);
}

#serviceChartView.service-calendar-view-active > .section-heading,
#serviceChartView.service-calendar-view-active > .production-toggle {
  display: none;
}

.service-calendar-shell {
  align-items: start;
}

.service-calendar-create {
  border-color: rgba(38, 132, 112, 0.34);
  background:
    linear-gradient(90deg, rgba(45, 160, 136, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(45, 160, 136, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #effaf7 100%);
  color: #0f4f43;
  box-shadow: 0 12px 24px rgba(38, 132, 112, 0.14);
}

.service-calendar-create::after {
  background: linear-gradient(180deg, #2da088 0%, #176b5c 100%);
}

.service-calendar-create:hover {
  border-color: rgba(23, 107, 92, 0.38);
  background: linear-gradient(180deg, #2da088 0%, #176b5c 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(38, 132, 112, 0.22);
}

.service-calendar-create:hover::after {
  color: #176b5c;
  background: #ffffff;
}

.service-dispatch-card {
  border-color: rgba(38, 132, 112, 0.3);
  background: linear-gradient(180deg, rgba(45, 160, 136, 0.12) 0%, #ffffff 46%, #f6fbf9 100%);
  box-shadow: 0 14px 30px rgba(38, 132, 112, 0.14);
}

.service-dispatch-card h4 {
  color: #0f4f43;
}

.service-dispatch-card h4::before {
  background: #2da088;
  box-shadow: 0 0 12px rgba(45, 160, 136, 0.6);
}

.service-executive-strip .production-exec-card-primary,
.service-exec-card-primary {
  border-color: rgba(45, 160, 136, 0.3);
  background: linear-gradient(180deg, #f4fbf9 0%, #e5f4f1 100%);
}

.service-calendar-grid {
  min-width: 0;
  border-color: #d7e4ec;
  background: #d7e4ec;
  box-shadow: 0 14px 28px rgba(18, 41, 61, 0.06);
}

.service-calendar-grid .calendar-head {
  min-height: 28px;
  color: #597383;
  background: #edf5f9;
  font-size: 0.64rem;
}

.service-calendar-grid .calendar-day {
  min-height: 92px;
  padding: 5px 6px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%);
}

.service-calendar-grid .calendar-day.calendar-weekend {
  background: linear-gradient(180deg, #f6fafc 0%, #eef5f8 100%);
}

.service-calendar-grid .calendar-day.muted {
  background: linear-gradient(180deg, #dce7ee 0%, #cfdae2 100%);
}

.service-calendar-grid .calendar-day-top {
  margin-bottom: 3px;
}

.service-calendar-grid .calendar-day-number {
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.74rem;
}

.service-calendar-grid .calendar-bar-stack {
  position: absolute;
  right: auto;
  bottom: 5px;
  left: 6px;
  gap: 3px;
  margin-top: 0;
  width: calc(100% + 12px);
}

.service-calendar-grid .calendar-span-bar {
  min-height: 18px;
  padding: 2px 6px;
  border-left-width: 3px;
  font-size: 0.62rem;
  line-height: 1.08;
}

.service-calendar-grid .calendar-span-bar small {
  display: none;
}

.service-calendar-grid .calendar-span-bar.color-0 {
  border-left-color: #2da088;
  background: linear-gradient(180deg, #f2fbf8 0%, #dff3ee 100%);
}

.service-calendar-grid .calendar-span-bar.color-1 {
  border-left-color: #4f86c6;
  background: linear-gradient(180deg, #f7fbff 0%, #e6f0fa 100%);
}

.service-calendar-grid .calendar-span-bar.color-2 {
  border-left-color: #d69b2d;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ead0 100%);
}

.service-calendar-grid .calendar-span-bar.color-3,
.service-calendar-grid .calendar-span-bar.color-4 {
  border-left-color: #718696;
  background: linear-gradient(180deg, #f9fbfc 0%, #e8eef2 100%);
}

.service-at-a-glance-item {
  border-color: rgba(45, 160, 136, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, rgba(45, 160, 136, 0.08) 100%);
}

.service-at-a-glance-item::before {
  background: #2da088;
}

.service-at-a-glance-item:hover {
  border-color: rgba(23, 107, 92, 0.42);
  background: linear-gradient(180deg, #ffffff 0%, rgba(45, 160, 136, 0.14) 100%);
  box-shadow: 0 10px 20px rgba(38, 132, 112, 0.16);
}

.service-list-shell {
  width: min(100%, 1320px);
}

.calendar-entry-stack {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding-right: 2px;
}

.calendar-date-entry,
.calendar-date-entry-more {
  display: block;
  min-width: 0;
  max-width: 100%;
  border-radius: 5px;
  padding: 2px 5px;
  color: #355165;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.calendar-date-entry {
  width: 100%;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.calendar-date-entry.is-report {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(24, 94, 64, 0.2);
  background: rgba(38, 140, 92, 0.12);
  color: #1f5c43;
}

.calendar-date-entry.is-safety-report {
  min-height: 18px;
  height: 18px;
  padding: 2px 5px;
  border-color: rgba(161, 111, 0, 0.7);
  background: #f5c84b;
  color: #4d3300;
}

.calendar-date-entry.is-safety-report span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-date-entry.is-report small {
  min-width: 0;
  overflow: hidden;
  color: #557064;
  font-size: 0.52rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-date-entry.is-vehicle-report {
  height: auto;
  min-height: 0;
  padding: 2px 5px;
  border-color: rgba(43, 95, 150, 0.22);
  background: rgba(43, 95, 150, 0.12);
  color: #274f7a;
}

.calendar-date-entry.is-vehicle-report small {
  color: #5a6f83;
}

.calendar-date-entry.is-scheduled-ticket {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(17, 107, 116, 0.28);
  background: linear-gradient(135deg, rgba(29, 156, 166, 0.2), rgba(247, 184, 70, 0.2));
  color: #123b45;
}

.calendar-date-entry.is-scheduled-ticket span,
.calendar-date-entry.is-scheduled-ticket small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-date-entry.is-scheduled-ticket small {
  color: #496577;
  font-size: 0.52rem;
}

.calendar-date-entry.is-report:hover,
.calendar-date-entry.is-report:focus-visible,
.calendar-date-entry.is-scheduled-ticket:hover,
.calendar-date-entry.is-scheduled-ticket:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(17, 39, 32, 0.12);
}

.calendar-date-entry.is-event {
  border: 1px solid rgba(26, 156, 166, 0.22);
  background: rgba(26, 156, 166, 0.1);
}

.calendar-date-entry.is-note {
  border: 1px solid rgba(84, 111, 130, 0.2);
  background: rgba(84, 111, 130, 0.1);
}

.calendar-date-entry-more {
  color: #627783;
  padding-left: 1px;
}

@media (max-width: 1240px) {
  .production-calendar-shell {
    grid-template-columns: 1fr;
  }

  .production-calendar-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-board-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .production-executive-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .production-calendar-sidebar {
    grid-template-columns: 1fr;
  }

  .production-calendar-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .production-calendar-toolbar-left {
    flex-wrap: wrap;
  }

  .production-executive-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-board-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .production-board-grid {
    grid-template-columns: 1fr;
  }
}

.bottom-tabs {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
}

.media-item {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
}

.media-item img {
  grid-row: span 4;
  width: 86px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.mention-wrap {
  position: relative;
}

.mention-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.mention-menu[hidden] {
  display: none !important;
}

.global-mention-menu {
  right: auto;
  bottom: auto;
  z-index: 2000;
  max-height: 220px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
}

.global-mention-menu button {
  justify-content: flex-start;
  min-height: 30px;
  width: 100%;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.kpi-card {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  background: linear-gradient(180deg, #f8fbfc 0%, #ebf1f4 100%);
  box-shadow: 0 4px 12px rgba(20, 30, 35, 0.05);
}

.kpi-card strong {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1;
}

.kpi-card small {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.2;
}

.kpi-mainline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kpi-breakdown {
  display: grid;
  gap: 3px;
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
}

.kpi-breakdown span:not(.kpi-breakdown-item) {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.kpi-breakdown b {
  color: var(--ink);
}

.kpi-breakdown.horizontal {
  display: flex;
  align-items: stretch;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
}

.kpi-breakdown-item {
  display: grid;
  min-width: 78px;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 5px;
}

.kpi-breakdown-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.kpi-breakdown-item b {
  font-size: 0.93rem;
  line-height: 1;
}

.kpi-breakdown-item small {
  max-width: 88px;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.15;
}

.kpi-breakdown-item.primary b {
  font-size: 1.12rem;
}

.kpi-label {
  color: var(--brand-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.accent-kpi {
  border-color: rgba(18, 182, 188, 0.38);
  background: linear-gradient(180deg, #ffffff 0%, #dff6f7 100%);
}

.split-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.split-kpi span {
  display: grid;
  gap: 4px;
}

.split-kpi span + span {
  border-left: 1px solid rgba(23, 107, 101, 0.26);
  padding-left: 6px;
}

.split-kpi b {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1;
}

.split-kpi small {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.1;
}

.color-0 { background: var(--brand-strong); }
.color-1 { background: var(--brand); }
.color-2 { background: #159ba0; }
.color-3 { background: #0c666a; }
.color-4 { background: #3e5058; }

dialog {
  width: min(980px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(12, 18, 22, 0.48);
}

.dialog-panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #f3f7f9;
}

.dialog-panel.wide {
  width: 100%;
}

.property-folder-dialog {
  width: min(980px, calc(100vw - 32px));
}

.property-folder-dialog-body {
  display: grid;
  gap: 12px;
}

.property-folder-dialog-items {
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.property-photo-tree {
  display: grid;
  gap: 10px;
}

.property-photo-tree-section,
.property-photo-category {
  border: 1px solid rgba(26, 156, 166, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.property-photo-tree-section > summary,
.property-photo-category > summary {
  min-height: 40px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #102a2f;
}

.property-photo-tree-section > summary span,
.property-photo-category > summary span {
  color: var(--muted);
  font-size: 0.74rem;
}

.property-photo-category-stack {
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
  background: rgba(245, 249, 250, 0.78);
}

.property-photo-category {
  background: #ffffff;
}

.property-photo-category > summary {
  min-height: 36px;
  padding: 7px 10px;
}

.property-photo-tree .property-folder-dialog-items {
  max-height: none;
  overflow: visible;
  padding: 0 10px 10px;
}

.file-library-section-folder-stack {
  display: grid;
  gap: 10px;
}

.file-library-section-folder-group {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(26, 156, 166, 0.2);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.file-library-section-folder-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  text-align: left;
}

.file-library-section-folder-toggle b {
  color: var(--brand);
  font-size: 0.9rem;
}

.file-library-section-folder-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(26, 156, 166, 0.22);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.close-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: #b93e39;
  border-color: #a53430;
  line-height: 1;
  touch-action: manipulation;
  z-index: 20;
}

.wizard,
.project-form-grid {
  display: grid;
  gap: 10px;
}

.project-form-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.project-wizard-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.project-wizard-pill {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(53, 83, 107, 0.14);
  border-radius: 999px;
  color: #5c7180;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.55);
}

.project-wizard-pill.active {
  color: #17344b;
  border-color: rgba(47, 111, 208, 0.28);
  background: rgba(47, 111, 208, 0.1);
}

.project-wizard-step-label {
  margin: 0 0 8px;
  color: #5c7180;
  font-size: 0.8rem;
  font-weight: 700;
}

.project-form-grid fieldset[hidden] {
  display: none;
}

fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.project-dialog-actions {
  margin-top: -2px;
}

.project-dialog-actions .small {
  min-height: 28px;
  font-size: 0.8rem;
}

.project-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  align-items: start;
  gap: 8px;
}

.project-details-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(80, 115, 140, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fa 100%);
  box-shadow: 0 6px 14px rgba(16, 24, 29, 0.06);
}

.project-details-card h3 {
  margin: 0;
  color: #17344b;
  font-size: 0.88rem;
  line-height: 1.1;
}

.project-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-card-title-row h3 {
  min-width: 0;
}

.project-card-title-row .small {
  flex: 0 0 auto;
}

.project-details-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.project-details-card label {
  min-width: 0;
}

.project-details-card input,
.project-details-card select,
.project-details-card textarea {
  min-width: 0;
}

#prebidDateTimeWrap,
#projectBidDateLabel {
  font-size: 0.76rem;
}

#prebidDateTime,
#bidDate {
  min-height: 32px;
  height: 32px;
  padding: 0 5px;
  font-size: 0.74rem;
}

.project-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.project-gc-control {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(180px, 1.1fr);
  align-items: end;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(34, 88, 106, 0.18);
  border-radius: 8px;
  background: rgba(236, 247, 248, 0.72);
}

.project-gc-check {
  align-self: center;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #153342;
}

.project-gc-name {
  margin: 0;
}

.project-gc-name[hidden] {
  display: none !important;
}

.project-details-file-card,
.project-details-notes-card {
  grid-column: 1 / -1;
}

.project-details-file-card {
  grid-column: auto;
}

.project-details-sections-card {
  grid-column: span 2;
}

.project-details-notes-card textarea {
  min-height: 58px;
}

.project-section-detail-panel {
  margin: 0;
  padding: 8px;
}

.project-section-detail-panel .checkbox-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 5px;
}

.project-section-detail-panel .check-row {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.78rem;
}

.project-file-selection-list {
  display: grid;
  gap: 4px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
}

.project-file-selection-entry,
.project-file-selection-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.project-file-selection-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-file-selection-entry span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-section-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.project-section-select-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-section-select-all {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.project-file-selection-entry strong {
  color: var(--ink);
}

.project-file-selection-remove {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 8px;
  font-size: 0.68rem;
}

legend {
  padding: 0 6px;
  font-weight: 700;
}

label,
.label-text {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--white);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.split-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.split-line::before,
.split-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.map-panel {
  display: grid;
  gap: 10px;
}

.map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-canvas {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(35deg, rgba(18, 182, 188, 0.22), transparent 30%),
    linear-gradient(140deg, rgba(24, 32, 37, 0.12), transparent 36%),
    #dceff0;
  cursor: crosshair;
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 34px 34px;
}

.roof-section {
  position: absolute;
  border: 2px solid var(--brand-2);
  background: rgba(180, 47, 47, 0.18);
  clip-path: polygon(var(--points));
}

.map-hint,
.scale {
  position: absolute;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
}

.map-hint {
  left: 12px;
  top: 12px;
}

.scale {
  right: 12px;
  bottom: 12px;
}

.helper {
  color: var(--muted);
  font-size: 0.86rem;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.check-row input {
  width: auto;
  min-height: 0;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
}

a {
  color: var(--brand);
  font-weight: 700;
}

.empty {
  padding: 22px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--white);
}

@media (max-width: 900px) {
  .app-shell,
  .wizard,
  .project-form-grid,
  .property-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 12px;
  }

  .sidebar-spacer {
    display: none;
  }

  .production-nav {
    margin-top: 0;
  }

  .nav-link {
    width: auto;
    min-width: max-content;
    margin: 0;
  }

  .toolbar,
  .section-heading,
  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-divider {
    display: none;
  }

  .login-card,
  .header-links,
  .header-logo-shell {
    width: 100%;
  }

  .header-logo-shell {
    justify-content: flex-start;
  }

  .kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Bid pipeline summary tech-display styling */
.kpi-card {
  border-color: rgba(160, 169, 175, 0.3);
}

.kpi-card strong,
.kpi-breakdown b,
.split-kpi b,
.kpi-breakdown-item b,
.kpi-mainline strong {
  font-family: "Bahnschrift", "Segoe UI Variable", "Consolas", "Roboto Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #f7f9fa;
  text-shadow: 0 0 10px rgba(47, 125, 246, 0.16);
}

.kpi-card strong {
  font-size: 1.34rem;
}

.kpi-label,
.kpi-card > small,
.kpi-breakdown-item small,
.split-kpi small {
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  color: #f2c230;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-breakdown {
  color: #b8ced1;
}

.kpi-breakdown-item {
  border-left-color: rgba(160, 169, 175, 0.26);
}

.accent-kpi .kpi-label,
.accent-kpi .split-kpi small {
  color: #ffd457;
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
  }

  .quick-summary-wrap {
    grid-template-columns: 1fr;
  }
}

.header-presence-indicator {
  position: relative;
  padding: 0 12px 0 28px !important;
  color: #145a45 !important;
  border-color: rgba(58, 182, 75, 0.35) !important;
  background: linear-gradient(180deg, rgba(238, 252, 242, 0.98) 0%, rgba(223, 249, 231, 0.98) 100%) !important;
  box-shadow: 0 0 0 1px rgba(58, 182, 75, 0.08), 0 0 18px rgba(58, 182, 75, 0.18);
}

.header-presence-indicator::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #3ab64b;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(58, 182, 75, 0.15), 0 0 12px rgba(58, 182, 75, 0.42);
}

.header-presence-indicator:hover {
  color: #0f4b39 !important;
  border-color: rgba(58, 182, 75, 0.48) !important;
  background: linear-gradient(180deg, rgba(244, 254, 246, 1) 0%, rgba(227, 250, 234, 1) 100%) !important;
}

.app-header .search-box input {
  min-height: 38px;
  border: 1px solid #cdd8e1;
  border-radius: 10px;
  background: #ffffff;
  color: #1c3143;
  box-shadow: inset 0 1px 2px rgba(15, 31, 47, 0.04);
}

.app-header .search-box input::placeholder {
  color: #7a8f9d;
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-header {
    gap: 12px;
    padding: 12px 14px 10px;
    align-items: stretch;
    flex-direction: column;
  }

  .header-brand,
  .login-card,
  .header-workflow-links,
  .header-links,
  .header-chart-links,
  .header-chart-divider,
  .header-stage-links,
  .header-logo-shell,
  .search-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-brand {
    margin-left: 0;
    min-width: 0;
  }

  .project-overview-layout {
    grid-template-columns: 1fr;
  }

  .project-overview-secondary {
    width: 100%;
  }

  .project-detail-map-card,
  .project-detail-map {
    width: 100%;
  }

  .project-overview-actions {
    justify-content: flex-start;
  }

  .header-brand-title {
    width: 100%;
    justify-items: start;
  }

  .header-divider {
    display: none;
  }

  .header-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    gap: 8px;
  }

  .header-workflow-links {
    gap: 12px;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .header-chart-links {
    justify-content: flex-start;
  }

  .header-chart-divider {
    display: none;
  }

  .header-stage-links {
    justify-content: flex-start;
  }

  .app-header .top-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .app-header .header-chart-link {
    width: 140px;
    min-width: 140px;
    height: 60px;
    min-height: 60px;
    white-space: normal;
  }

  .header-logo-shell {
    justify-content: center;
    min-width: 0;
  }

  .header-logo {
    width: min(100%, 340px);
    height: auto;
    max-height: none;
    margin-top: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 25;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(129, 143, 152, 0.2);
  }

  .sidebar-spacer,
  .sidebar-user-copy,
  .sidebar-notifications {
    display: none;
  }

  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .sidebar-user .home-nav,
  .sidebar-user #signOutBtn,
  .nav-link {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    margin: 0;
    white-space: nowrap;
  }

  .nav-link {
    min-height: 40px;
    padding: 0 14px;
  }

  .workspace {
    padding: 12px;
  }

  .workspace-topbar {
    flex-wrap: wrap;
    margin-bottom: 8px;
  }

  .toolbar,
  .section-heading,
  .calendar-controls,
  .calendar-controls h3,
  .photo-actions,
  .employee-photo-editor-actions {
    align-items: stretch;
  }

  .toolbar,
  .section-heading,
  .calendar-controls {
    flex-direction: column;
  }

  .tabs,
  .production-toggle,
  .bottom-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs .tab,
  .production-toggle .tab,
  .bottom-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .table-wrap,
  #customerList .table-wrap,
  #recentPropertyList .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table,
  #customerList table,
  #recentPropertyList table {
    min-width: 720px !important;
    width: max-content !important;
  }

  .clients-page-layout,
  .file-library-layout,
  .crew-layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .clients-list-shell,
  .properties-list-shell,
  .file-library-list-shell,
  .clients-map-shell,
  .file-library-tree-shell,
  .file-library-content-shell,
  .properties-map-shell,
  #customerList,
  #recentPropertyList,
    .crew-builder-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .clients-map-divider,
  .file-library-divider,
  .crew-layout-divider {
    display: none;
  }

  .customer-list-map,
  .property-list-map,
  .property-leaflet-map,
  .leaflet-map {
    width: 100% !important;
    min-height: 320px;
  }

  .customer-list-map,
  .property-list-map {
    height: 320px !important;
  }

  .property-layout,
  .property-hero-layout,
  .section-hero-layout,
  .project-form-grid,
  .wizard,
  .home-hero,
  .home-feed-grid,
  .home-actions,
  .employee-profile-head,
  .crew-builder-grid,
  .crew-edit-grid {
    grid-template-columns: 1fr !important;
  }

  .property-map-panel,
  .section-map-panel {
    grid-column: auto !important;
  }

  .grid-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }

  .employee-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .crew-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .section-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .contact-card-grid.client-contact-grid,
  .contact-card-grid.property-contact-list {
    padding-bottom: 4px;
  }

  .contact-card-grid.client-contact-grid .contact-card,
  .contact-card-grid.property-contact-list .contact-card {
    flex: 0 0 170px;
    width: 170px;
  }

  dialog,
  .photo-dialog {
    width: min(calc(100vw - 16px), 980px) !important;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }

  .dialog-panel {
    padding: 14px;
  }

  .photo-dialog-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .photo-preview-stage,
  .preview-stage-scroll {
    min-height: 420px;
  }

  .preview-location-map {
    width: min(100%, 320px);
    height: 210px;
  }

  .employee-photo-editor {
    width: 100%;
    max-width: 100%;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(86px, 1fr));
  }

  .calendar-day {
    min-height: 128px;
  }
}

@media (max-width: 640px) {
  .property-files-card {
    gap: 0;
  }

  .property-files-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
  }

  .property-files-toggle span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .property-files-toggle strong {
    color: var(--steel);
    font-size: 1rem;
  }

  .property-files-toggle small {
    color: var(--muted);
    font-size: 0.78rem;
  }

  .property-files-toggle b {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 0.78rem;
    text-transform: uppercase;
  }

  .property-files-card:not(.is-open) .property-files-body {
    display: none;
  }

  .property-files-card.is-open .property-files-body {
    margin-top: 12px;
  }

  .login-screen {
    padding: 10px;
  }

  .login-panel {
    width: 100%;
  }

  .login-panel-shell {
    border-radius: 12px;
  }

  .login-brand-panel,
  .login-form-panel {
    padding: 22px 18px;
  }

  .login-brand-panel::after {
    background:
      linear-gradient(180deg, rgba(8, 24, 39, 0.14) 0%, rgba(8, 24, 39, 0.32) 100%),
      url("./login-stronghold-blueprint.png") no-repeat right -24px bottom -150px / min(150%, 760px);
  }

  .login-brand-copy,
  .login-brand-points span,
  .login-form-head .helper,
  .login-footer-note small {
    font-size: 0.9rem;
  }

  .header-brand-name {
    font-size: clamp(1.2rem, 7vw, 1.7rem);
  }

  .header-brand-subtitle {
    font-size: 0.62rem;
  }

  .workspace {
    padding: 10px;
  }

  .record-card,
  fieldset,
  .dialog-panel,
  .section-heading,
  .toolbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .top-link,
  .nav-link,
  button {
    min-height: 42px;
  }

  .quick-add-grid,
  .folder-grid,
  .compact-folder-grid,
  .progress-track,
  .kpi-row,
  .grid-list,
  .employee-grid,
  .crew-card-grid,
  .section-card-grid {
    grid-template-columns: 1fr !important;
  }

  .folder-item.media-item,
  .folder-item.file-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }

  .photo-preview-stage,
  .preview-stage-scroll {
    min-height: 340px;
  }

  .preview-stage-toolbar {
    top: 6px;
    left: 6px;
    right: 6px;
  }

  .preview-zoom-btn,
  .preview-edit-btn {
    min-width: 34px;
    min-height: 34px;
  }

  .preview-location-map {
    width: 100%;
    max-width: 100%;
    height: 190px;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(74px, 1fr));
    gap: 3px;
    padding: 6px;
  }

  .production-executive-strip {
    grid-template-columns: 1fr;
  }

  .production-calendar-entry-fields {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 116px;
    padding: 4px;
  }

  .calendar-span-bar {
    min-height: 22px;
    padding: 1px 5px;
    font-size: 0.62rem;
  }

  .calendar-span-bar small {
    font-size: 0.56rem;
  }
}

.chat-launcher-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2050;
}

.chat-launcher-toggle,
.chat-launcher-panel {
  border: 1px solid #b8c9d4;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 31, 47, 0.18);
}

.chat-launcher-toggle {
  position: relative;
  min-width: 110px;
  min-height: 44px;
  padding: 0 16px;
  background: linear-gradient(180deg, #1a9ca6 0%, #177d85 100%);
  color: #fff;
  font-weight: 800;
  border-color: #177f87;
}

.chat-launcher-toggle-main {
  display: grid;
  gap: 1px;
  justify-items: start;
}

.chat-launcher-toggle-meta {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
}

.chat-launcher-toggle:hover {
  background: linear-gradient(180deg, #1ca7b2 0%, #18838b 100%);
}

.chat-launcher-toggle-alert {
  box-shadow: 0 0 0 1px rgba(39, 157, 164, 0.2), 0 0 18px rgba(208, 60, 90, 0.22);
  animation: chatPulse 2s ease-in-out infinite;
}

@keyframes chatPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(39, 157, 164, 0.2), 0 0 12px rgba(208, 60, 90, 0.16);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(39, 157, 164, 0.3), 0 0 20px rgba(208, 60, 90, 0.32);
  }
}

.chat-launcher-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #3ab64b;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(58, 182, 75, 0.18), 0 0 16px rgba(58, 182, 75, 0.28);
}

.chat-launcher-panel {
  width: 340px;
  max-height: min(72vh, 560px);
  padding: 12px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.chat-launcher-head,
.chat-launcher-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-launcher-head strong,
.chat-launcher-subhead span {
  color: #1d3747;
  font-size: 0.95rem;
}

.chat-launcher-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.chat-launcher-tab {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #ced9e1;
  background: #f9fbfd;
  color: #365064;
  font-weight: 700;
}

.chat-launcher-tab.active {
  background: linear-gradient(180deg, #eef6fb 0%, #dfeef8 100%);
  border-color: #a8c8de;
  color: #183d56;
}

.chat-tab-icon {
  margin-right: 4px;
}

.chat-launcher-tab-badge {
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #d03c5a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.chat-launcher-body {
  min-height: 0;
}

.chat-launcher-list {
  display: grid;
  gap: 8px;
  max-height: min(54vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
}

.chat-launcher-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d6e0e8;
  background: #ffffff;
  display: grid;
  gap: 3px;
  box-shadow: 0 4px 10px rgba(15, 31, 47, 0.04);
}

.chat-launcher-item:hover {
  border-color: #9fb8c9;
  background: #f5fafc;
}

.chat-launcher-item strong {
  color: #17384a;
  font-size: 0.88rem;
}

.chat-launcher-item small {
  color: #6b8090;
  font-size: 0.74rem;
  line-height: 1.25;
}

.chat-conversation-item {
  gap: 7px;
}

.chat-conversation-head,
.chat-conversation-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-conversation-time {
  font-size: 0.7rem;
  color: #7d8d99;
  white-space: nowrap;
}

.chat-conversation-preview small {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-conversation-unread {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #d03c5a;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 800;
}

.chat-thread-panel {
  display: grid;
  gap: 10px;
}

.chat-thread-messages {
  min-height: 220px;
  max-height: min(46vh, 360px);
  overflow-y: auto;
  padding-right: 4px;
  display: grid;
  gap: 8px;
}

.chat-thread-message {
  width: fit-content;
  max-width: min(76%, 160px);
  min-width: 0;
  padding: 8px 10px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 4px 12px rgba(15, 31, 47, 0.06);
}

.chat-thread-message-body {
  display: grid;
  gap: 4px;
}

.chat-thread-message p {
  margin: 0;
  color: #17384a;
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-thread-message small {
  color: #6f8090;
  font-size: 0.68rem;
  line-height: 1;
  margin-top: 3px;
  align-self: flex-end;
}

.chat-thread-message.incoming {
  justify-self: start;
  background: #ffffff;
  border: 1px solid #d7e1e8;
}

.chat-thread-message.outgoing {
  justify-self: end;
  background: linear-gradient(180deg, #eef8ff 0%, #dff0ff 100%);
  border: 1px solid #b9d7f0;
}

.chat-thread-compose {
  display: grid;
  gap: 8px;
}

.chat-thread-compose textarea {
  min-height: 74px;
  resize: vertical;
}

.chat-thread-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.chat-thread-upload-group {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-thread-upload-btn {
  display: grid;
  gap: 5px;
  cursor: pointer;
}

.chat-thread-file-input {
  position: static;
  width: 100%;
  min-height: 40px;
  padding: 8px;
  border: 1px solid #cbd8e1;
  border-radius: 8px;
  background: #ffffff;
  color: #17344b;
  font-size: 16px;
  opacity: 1;
  pointer-events: auto;
}

.chat-thread-file-name {
  color: #6f8090;
  font-size: 0.68rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 180px;
}

.chat-thread-attachment .comment-attachment {
  margin-top: 0;
}

.chat-thread-attachment .comment-attachment img {
  width: min(180px, 100%);
  max-height: 140px;
}

@media (max-width: 900px) {
  .chat-launcher-root {
    right: 12px;
    bottom: 12px;
  }

  .chat-launcher-panel {
    width: min(340px, calc(100vw - 24px));
  }
}

.chat-thread-message-body {
  width: max-content;
  max-width: 100%;
}

.chat-thread-message.has-attachment {
  max-width: min(76%, 320px);
}

.chat-thread-message.has-attachment .chat-thread-message-body {
  width: auto;
}


.login-footer-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
}

.login-footer-logo {
  display: block;
  width: min(320px, 100%);
  height: auto;
  object-fit: contain;
}


.file-media-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 4px 8px;
  overflow: hidden;
}

.file-media-card .compact-media-title {
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
  justify-self: start;
}

.compact-file-title-link {
  flex: 1 1 auto;
  min-width: 0;
  color: #1b5f9d;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-file-title-link:hover {
  color: #134d80;
  text-decoration: underline;
}

.log-entry-title {
  color: #17344b;
  cursor: default;
}

.log-entry-title:hover {
  color: #17344b;
  text-decoration: none;
}

.daily-log-card {
  height: auto;
  min-height: 46px;
  max-height: none;
  align-items: start;
}

.daily-log-open-btn {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.daily-log-attachment-btn {
  min-height: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 0.58rem;
  text-decoration: none;
}

.daily-log-viewer-dialog {
  width: min(680px, calc(100vw - 32px));
  color: #14252d;
}

.daily-log-viewer-body {
  display: grid;
  gap: 12px;
}

.daily-log-viewer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.daily-log-viewer-summary span,
.daily-log-viewer-section {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(14, 105, 112, 0.24);
  border-radius: 8px;
  color: #14252d;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(24, 56, 68, 0.06);
}

.daily-log-viewer-summary strong,
.daily-log-viewer-section > strong {
  color: #0e6970;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.daily-log-viewer-summary span {
  color: #14252d;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}

.daily-log-viewer-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.daily-log-viewer-metrics span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(14, 105, 112, 0.28);
  border-radius: 8px;
  color: #14252d;
  font-weight: 800;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
    #ffffff;
  background-size: 18px 18px, 18px 18px, auto;
}

.daily-log-viewer-metrics strong {
  color: #0e6970;
  font-size: 1.35rem;
  line-height: 1;
}

.daily-log-viewer-section p {
  margin: 0;
  color: #14252d;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.48;
}

.daily-log-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.daily-log-section-pills span {
  padding: 4px 8px;
  border: 1px solid rgba(14, 105, 112, 0.26);
  border-radius: 7px;
  color: #14252d;
  background: #eef8f9;
  font-size: 0.72rem;
  font-weight: 800;
}

.daily-log-viewer-attachment {
  justify-self: start;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(14, 105, 112, 0.24);
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(180deg, #159ca5 0%, #0e6970 100%);
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
}

.daily-log-viewer-empty {
  color: #334851;
  font-size: 0.78rem;
  font-weight: 750;
}

.file-media-card .media-card-actions {
  flex: 0 0 auto;
  width: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.file-media-card .file-media-edit-btn {
  min-height: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.62rem;
}

.file-media-card .file-media-delete-btn {
  min-height: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.5rem;
}

.folder-item.media-item.file-media-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 236px;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 4px 8px;
}

.file-media-card {
  gap: 6px;
}

.file-media-card .media-card-actions {
  gap: 3px;
}

.file-media-card .file-media-edit-btn {
  min-height: 16px;
  height: 16px;
  padding: 0 5px;
  font-size: 0.58rem;
}

.file-media-card .file-media-delete-btn {
  min-height: 14px;
  height: 14px;
  padding: 0 4px;
  font-size: 0.48rem;
}

.project-client-combo-label {
  display: grid;
  gap: 5px;
}

.project-client-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 5px;
}

.project-client-combo input {
  min-width: 0;
  min-height: 38px;
}

.project-client-combo #projectCustomerComboToggle {
  min-width: 34px;
  width: 34px;
  min-height: 38px;
  padding: 0;
  font-size: 0.72rem;
}

.project-client-combo-list {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(21, 156, 165, 0.28);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(24, 56, 68, 0.16);
}

.project-client-combo-list button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  color: #17343e;
  border: 0;
  border-bottom: 1px solid rgba(80, 115, 140, 0.12);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  text-align: left;
}

.project-client-combo-list button:hover {
  color: #ffffff;
  background: #159ca5;
}

.project-client-combo-empty {
  padding: 10px;
  color: #5c6b74;
  font-size: 0.82rem;
}

.project-detail-substep-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.project-detail-substep {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #ccd8e2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  color: #17344b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.project-detail-substep.active {
  border-color: rgba(21, 156, 165, 0.46);
  background: linear-gradient(180deg, #eaf8fa 0%, #d9f0f4 100%);
  color: #0d5360;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
}

#projectDialog .project-details-grid {
  grid-template-columns: minmax(0, 1fr);
}

#projectDialog .project-detail-step-card {
  grid-column: 1 / -1;
  min-height: 310px;
  padding: 14px;
}

#projectDialog .project-detail-step-card[hidden] {
  display: none;
}

#projectDialog .project-detail-step-card h3 {
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(108, 166, 240, 0.22);
  font-size: 1.05rem;
}

#projectDialog .project-details-sections-card .project-section-detail-panel,
#projectDialog .project-details-notes-card textarea,
#projectDialog .project-details-file-card .project-file-selection-list {
  min-height: 150px;
}

.project-hidden-assignment-fields {
  display: none !important;
}

.project-client-combo-list {
  border-color: #ccd8e2;
  box-shadow: 0 18px 34px rgba(16, 30, 44, 0.16);
}

.project-client-combo-list button {
  color: #17344b;
  background: #ffffff;
}

.project-client-combo-list button:hover {
  color: #ffffff;
  background: #255c91;
}

.address-autocomplete-wrap {
  position: relative;
}

.address-suggestion-list {
  position: absolute;
  z-index: 2200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow: auto;
  border: 1px solid #ccd8e2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(16, 30, 44, 0.18);
}

.address-suggestion-list button {
  display: grid;
  width: 100%;
  min-height: 38px;
  gap: 2px;
  padding: 8px 10px;
  color: #17344b;
  border: 0;
  border-bottom: 1px solid rgba(80, 115, 140, 0.12);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  text-align: left;
}

.address-suggestion-list button strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.address-suggestion-list button span,
.address-suggestion-status {
  color: #5f7b92;
  font-size: 0.7rem;
  line-height: 1.2;
}

.address-suggestion-list button:hover,
.address-suggestion-list button.active {
  color: #ffffff;
  background: linear-gradient(180deg, #255c91 0%, #122b44 100%);
}

.address-suggestion-list button:hover span,
.address-suggestion-list button.active span {
  color: #d7e7f4;
}

.address-suggestion-status {
  padding: 10px;
}

/* Responsive app usability layer */
@media (max-width: 1180px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not(.login-active) {
    min-height: 100vh;
    overflow-y: auto;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .app-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 42vh;
    padding: 8px 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .header-brand {
    min-width: 0;
    margin-left: 0 !important;
  }

  .header-brand-title {
    width: auto;
  }

  .header-brand-name {
    font-size: clamp(1.12rem, 5vw, 1.55rem);
  }

  .header-brand-subtitle {
    font-size: 0.58rem;
    line-height: 1.1;
    white-space: normal;
    transform: none !important;
  }

  .header-divider,
  .header-chart-divider {
    display: none;
  }

  .header-logo-shell {
    width: auto;
    margin-left: auto;
    transform: none !important;
  }

  .header-logo {
    width: min(138px, 32vw);
    max-height: 54px;
    object-fit: contain;
  }

  .header-links,
  .header-workflow-links,
  .header-chart-links,
  .header-stage-links {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .app-header .top-link,
  .app-header .header-chart-link {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 96px;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: normal;
  }

  .app-shell {
    display: grid;
    grid-template-columns: 1fr !important;
    min-height: auto;
    width: 100%;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-spacer {
    display: none;
  }

  .sidebar .nav-link {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 112px;
    margin: 0;
    justify-content: center;
    text-align: center;
  }

  .sidebar-user {
    flex: 0 0 min(280px, 74vw);
    margin: 0;
    padding: 8px;
  }

  .sidebar-user .home-nav,
  .sidebar-user #signOutBtn {
    width: 100% !important;
  }

  .workspace {
    width: 100%;
    min-width: 0;
    padding: 8px;
    overflow-x: hidden;
  }

  .workspace > .view.active,
  .view.active {
    width: 100%;
    min-width: 0;
  }

  .toolbar,
  .section-heading,
  .calendar-controls,
  .project-detail-map-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .record-card,
  .storage-stats-card,
  .live-feed-page-card {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .grid-list,
  .employee-grid,
  .folder-grid,
  .compact-folder-grid,
  .project-files-folder-grid,
  .crew-card-grid,
  .kpi-grid,
  .home-dashboard-grid,
  .production-dashboard-grid,
  .project-details-grid,
  .project-details-two,
  .employee-evaluation-form-grid,
  .crew-edit-grid,
  .checkbox-grid,
  .deficiency-form-grid,
  .preview-deficiency-fields {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  }

  .property-layout,
  .property-hero-layout,
  .project-detail-layout,
  .project-main-layout,
  .project-overview-layout,
  .project-header-layout,
  .crew-layout,
  .file-library-layout,
  .clients-page-layout,
  .production-calendar-shell,
  .photo-dialog-grid,
  .property-section-dialog {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .crew-layout-divider,
  .clients-map-divider {
    display: none !important;
  }

  .clients-list-shell,
  .properties-list-shell,
  .clients-map-shell,
  .properties-map-shell,
  .file-library-tree-shell,
  .file-library-content-shell,
  .crew-builder-card,
  .project-detail-map-card,
  .project-details-file-card,
  .project-details-notes-card,
  .project-details-sections-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    grid-column: auto !important;
  }

  .client-contact-grid,
  .property-contact-list,
  .table-wrap,
  .file-library-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #customerList .table-wrap,
  #recentPropertyList .table-wrap,
  #customerList table,
  #recentPropertyList table {
    width: 100% !important;
    max-width: 100% !important;
  }

  table,
  .file-library-table-wrap table {
    min-width: 720px;
  }

  .customer-list-map,
  .property-list-map,
  .project-detail-map,
  .section-outline-map,
  .section-measure-map,
  .preview-location-map,
  .section-photo-draft-pin-map,
  #sectionOutlineMap,
  #sectionMeasureMap,
  #sectionPhotoDraftPinMap,
  #deficiencyDraftPinMap,
  #previewLocationMap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .customer-list-map,
  .property-list-map,
  .project-detail-map,
  .section-outline-map,
  #sectionOutlineMap {
    height: clamp(280px, 48vh, 430px) !important;
    min-height: 280px !important;
  }

  .section-measure-map,
  #sectionMeasureMap {
    height: clamp(320px, 55vh, 520px) !important;
    min-height: 320px !important;
  }

  .section-photo-draft-pin-map,
  #sectionPhotoDraftPinMap,
  #deficiencyDraftPinMap {
    height: 240px !important;
    min-height: 240px !important;
  }

  [style*="width:calc(100% - 830px)"],
  [style*="width: calc(100% - 830px)"],
  [style*="min-width:520px"],
  [style*="max-width:430px"],
  [style*="margin-left:-500px"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .section-quick-nav {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    width: 100% !important;
  }

  .section-quick-nav-card {
    width: 100% !important;
  }

  .upload-grid,
  .section-report-upload-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-report-upload-grid > *,
  .upload-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  .bottom-tabs {
    left: 0;
    right: 0;
    max-width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bottom-tabs .tab {
    flex: 0 0 auto;
    min-width: 116px;
  }

  dialog {
    width: min(100vw - 16px, 760px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .dialog-panel,
  .dialog-panel.wide,
  .photo-dialog,
  .camera-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto;
  }

  .photo-preview-stage,
  .photo-preview-meta,
  .preview-stage-scroll,
  .preview-stage-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .quick-chat-panel {
    right: 8px !important;
    bottom: 8px !important;
    width: min(420px, calc(100vw - 16px)) !important;
    max-height: min(78vh, 620px) !important;
  }

  .quick-chat-launcher {
    right: 8px !important;
    bottom: 8px !important;
  }

  .production-calendar-sidebar {
    position: static;
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    overflow-x: auto;
  }

  .calendar-day {
    min-height: 128px;
    padding: 7px 6px;
  }
}

@media (max-width: 640px) {
  .login-screen {
    position: fixed;
    padding: 12px;
  }

  .login-panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .login-panel-shell {
    grid-template-columns: 1fr !important;
  }

  .login-brand-panel {
    min-height: 320px;
    padding: 24px 18px;
  }

  .login-form-panel {
    padding: 24px 18px;
  }

  .app-header {
    max-height: 34vh;
  }

  .header-brand {
    max-width: calc(100vw - 150px);
  }

  .header-logo {
    width: min(120px, 34vw);
  }

  .app-header .top-link,
  .app-header .header-chart-link {
    min-width: 88px;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.66rem;
  }

  .sidebar .nav-link {
    min-width: 98px;
    min-height: 38px;
    font-size: 0.76rem;
  }

  .sidebar-user {
    flex-basis: min(250px, 78vw);
  }

  .workspace {
    padding: 6px;
  }

  .record-card {
    padding: 10px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3,
  .record-card h3 {
    font-size: 1rem;
  }

  .grid-list,
  .employee-grid,
  .folder-grid,
  .project-details-grid,
  .project-details-two,
  .crew-builder-grid,
  .crew-laborer-grid,
  .deficiency-form-grid,
  .preview-deficiency-fields {
    grid-template-columns: 1fr !important;
  }

  .employee-card,
  .contact-card,
  .client-contact-grid .contact-card,
  .folder,
  .folder-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  .calendar-grid,
  .production-calendar-grid {
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    min-width: 760px;
  }

  .calendar-day {
    min-height: 118px;
  }

  table,
  #customerList table,
  #recentPropertyList table,
  .file-library-table-wrap table {
    min-width: 680px !important;
  }

  .customer-list-map,
  .property-list-map,
  .project-detail-map,
  .section-outline-map,
  #sectionOutlineMap {
    height: 300px !important;
    min-height: 300px !important;
  }

  .section-measure-map,
  #sectionMeasureMap {
    height: 360px !important;
    min-height: 360px !important;
  }

  .section-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section-quick-nav button {
    width: 100% !important;
  }

  .bottom-tabs {
    padding: 6px;
  }

  .bottom-tabs .tab {
    min-width: 104px;
    font-size: 0.72rem;
  }

  dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
}

/* Executive financial home refresh */
#homeView.active {
  padding: 14px !important;
  border: 1px solid rgba(136, 182, 194, 0.74);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(33, 195, 203, 0.14), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(216, 164, 62, 0.11), transparent 23%),
    linear-gradient(145deg, #f9fcfd 0%, #eef7f9 54%, #f7fbfc 100%);
  background-size: 30px 30px, 30px 30px, auto, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 36px rgba(21, 44, 55, 0.13);
  color: var(--stronghold-ink);
}

#homeView .section-heading {
  padding: 13px 14px;
  border: 1px solid rgba(136, 182, 194, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 24px rgba(24, 60, 72, 0.08);
}

#homeView .section-heading h2,
#homeView .section-heading .eyebrow {
  color: var(--stronghold-ink);
}

#homeView .section-heading .eyebrow {
  color: var(--stronghold-teal-dark);
}

#homeView .home-heading-actions button {
  border-color: rgba(118, 220, 230, 0.5) !important;
  background: linear-gradient(180deg, rgba(21, 156, 165, 0.95) 0%, rgba(12, 92, 111, 0.95) 100%) !important;
  color: #ffffff !important;
}

#homeView .home-heading-actions button.ghost {
  border-color: rgba(216, 164, 62, 0.5) !important;
  background: rgba(216, 164, 62, 0.14) !important;
  color: #f7d990 !important;
}

#homeView .home-command-center .record-card,
#homeView .home-ops-grid .record-card,
#homeView .home-metric-card {
  border: 1px solid rgba(136, 182, 194, 0.58) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(239, 247, 249, 0.94) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 12px 24px rgba(24, 60, 72, 0.1) !important;
  color: var(--stronghold-ink) !important;
}

#homeView .home-command-center h3,
#homeView .home-ops-grid h3,
#homeView .home-metric-card strong,
#homeView .home-metric-card .kpi-label,
#homeView .home-hero-card .kpi-label,
#homeView .home-priority-card .kpi-label,
#homeView .home-watch-card .kpi-label {
  color: var(--stronghold-ink) !important;
}

#homeView .home-command-copy,
#homeView .home-hero-card p,
#homeView .home-metric-card small,
#homeView .home-announcement-label,
#homeView .home-watch-card p {
  color: var(--stronghold-muted) !important;
}

#homeView .home-announcement-label textarea {
  border-color: rgba(136, 182, 194, 0.58);
  background: rgba(255, 255, 255, 0.82);
  color: var(--stronghold-ink);
}

#homeView .home-work-item {
  border-color: rgba(136, 182, 194, 0.58) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: var(--stronghold-ink) !important;
}

#homeView .home-work-item:hover {
  border-color: rgba(118, 220, 230, 0.62) !important;
  background: rgba(232, 248, 250, 0.96) !important;
}

#homeView .home-work-item strong,
#homeView .home-work-item b {
  color: var(--stronghold-ink) !important;
}

#homeView .home-work-item small,
#homeView .home-work-item em {
  color: var(--stronghold-muted) !important;
}

#homeView .home-work-item b {
  background: rgba(21, 156, 165, 0.12);
}

#homeView .home-empty-state {
  border-color: rgba(136, 182, 194, 0.64);
  background: rgba(255, 255, 255, 0.62);
  color: var(--stronghold-muted);
}

#homeView .home-finance-shell {
  border-color: rgba(92, 145, 158, 0.62);
  background:
    linear-gradient(90deg, rgba(118, 220, 230, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(118, 220, 230, 0.06) 1px, transparent 1px),
    radial-gradient(circle at top right, rgba(33, 195, 203, 0.24), transparent 34%),
    linear-gradient(135deg, #0f2b35 0%, #173f4b 56%, #0c222b 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 0 16px 34px rgba(24, 60, 72, 0.22);
}

@media (max-width: 1320px) {
  .home-finance-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-finance-analysis-grid,
  .home-finance-drill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #homeView.active {
    padding: 10px !important;
  }

  .home-finance-head {
    display: grid;
  }

  .home-finance-badge {
    min-width: 0;
  }

  .home-finance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-finance-analysis-grid,
  .home-finance-drill-grid {
    grid-template-columns: 1fr;
  }

  .home-finance-panel {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  #homeView.active {
    padding: 8px !important;
  }

  #homeView .section-heading {
    align-items: stretch;
  }

  .home-finance-shell {
    padding: 11px;
  }

  .home-finance-kpi-grid,
  .home-finance-mini-metrics {
    grid-template-columns: 1fr;
  }

  .home-finance-row {
    grid-template-columns: minmax(0, 1fr);
  }

.home-finance-row b {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .project-detail-substep-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #projectDialog .project-detail-step-card {
    min-height: 260px;
    padding: 10px;
  }
}

#backBtn.ghost.small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  font-size: 0.85rem !important;
}

#backBtn[hidden] {
  display: none !important;
}

.workspace-topbar {
  margin-bottom: 0 !important;
}

.workspace > .view.active {
  padding-top: 0 !important;
}

.workspace > .view.active > :first-child,
.workspace > .view.active > :first-child > :first-child {
  margin-top: 0 !important;
}

.workspace > .view.active > .section-heading:first-child,
.workspace > .view.active > .toolbar:first-child,
.workspace > .view.active > :first-child > .section-heading:first-child,
.workspace > .view.active > :first-child > .toolbar:first-child {
  min-height: 44px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.workspace > .view.active > .section-heading:first-child + *,
.workspace > .view.active > .toolbar:first-child + *,
.workspace > .view.active > :first-child > .section-heading:first-child + *,
.workspace > .view.active > :first-child > .toolbar:first-child + * {
  margin-top: 0 !important;
}

/* Keep header navigation fixed in one top row at every viewport width. */
body:not(.login-active) .app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 104px !important;
  max-height: none !important;
  padding: 9px 22px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

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

body:not(.login-active) .app-header .header-brand {
  order: 0 !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  margin-left: -10px !important;
  transform: none !important;
}

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

body:not(.login-active) .app-header .header-brand-name {
  font-size: clamp(1.658rem, 2.369vw, 2.369rem) !important;
  transform: none !important;
  text-align: center !important;
}

body:not(.login-active) .app-header .login-card {
  order: 3 !important;
  flex: 0 0 420px !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
}

body:not(.login-active) .app-header .header-links,
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 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
}

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

body:not(.login-active) .app-header .header-workflow-links {
  order: 4 !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  margin-left: 0 !important;
}

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

body:not(.login-active) .app-header .header-divider,
body:not(.login-active) .app-header .header-chart-divider {
  display: block !important;
  flex: 0 0 1px !important;
  width: 1px !important;
  min-width: 1px !important;
  align-self: stretch !important;
}

body:not(.login-active) .app-header > .header-divider {
  order: 2 !important;
  margin-left: -55px !important;
  background: transparent !important;
  opacity: 0 !important;
}

body:not(.login-active) .app-header .header-chart-divider {
  height: 68px !important;
  align-self: center !important;
}

body:not(.login-active) .app-header .search-box {
  flex: 0 0 auto !important;
  width: 420px !important;
  max-width: 420px !important;
  min-width: 420px !important;
}

body:not(.login-active) .app-header .header-logo-shell {
  order: 1 !important;
  position: absolute !important;
  left: -34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  flex: 0 0 0 !important;
  width: 280px !important;
  min-width: 0 !important;
  max-width: 280px !important;
  height: 92px !important;
  justify-content: center !important;
  margin-left: 0 !important;
  pointer-events: auto !important;
}

body:not(.login-active) .app-header .header-logo-shell a {
  width: 280px !important;
  height: 92px !important;
  justify-content: center !important;
}

body:not(.login-active) .app-header .header-logo {
  width: 280px !important;
  height: 92px !important;
  max-height: 92px !important;
  margin-top: 0 !important;
  object-fit: contain !important;
}

body:not(.login-active) .app-header .header-utility-links {
  order: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

body:not(.login-active) .app-header .header-workflow-links {
  order: 4 !important;
}


.app-header .header-chart-link.service,
body:not(.login-active) .app-header .header-chart-link.service {
  --header-button-accent: #77b7a7;
  --header-button-glow: rgba(119, 183, 167, 0.72);
  --header-button-border: rgba(119, 183, 167, 0.82);
  --header-button-hover: rgba(119, 183, 167, 0.18);
}

.app-header .header-chart-link.pipeline,
body:not(.login-active) .app-header .header-chart-link.pipeline {
  --header-button-accent: #d6a95b;
  --header-button-glow: rgba(214, 169, 91, 0.72);
  --header-button-border: rgba(214, 169, 91, 0.82);
  --header-button-hover: rgba(214, 169, 91, 0.18);
}

.app-header .header-chart-link.service-opportunities,
body:not(.login-active) .app-header .header-chart-link.service-opportunities {
  --header-button-accent: #66d3e1;
  --header-button-glow: rgba(102, 211, 225, 0.72);
  --header-button-border: rgba(102, 211, 225, 0.82);
  --header-button-hover: rgba(102, 211, 225, 0.18);
}

.app-header .header-chart-link.approved,
body:not(.login-active) .app-header .header-chart-link.approved {
  --header-button-accent: #7fcf8b;
  --header-button-glow: rgba(127, 207, 139, 0.72);
  --header-button-border: rgba(127, 207, 139, 0.82);
  --header-button-hover: rgba(127, 207, 139, 0.18);
}

.app-header .header-chart-links .header-chart-link:first-child,
body:not(.login-active) .app-header .header-chart-links .header-chart-link:first-child {
  --header-button-accent: #6ca6f0;
  --header-button-glow: rgba(108, 166, 240, 0.72);
  --header-button-border: rgba(108, 166, 240, 0.82);
  --header-button-hover: rgba(108, 166, 240, 0.18);
}

/* Header glass button spec: dark crystal body, internal icon plaque, color rail, and bottom glow. */
body:not(.login-active) .app-header .header-workflow-links {
  gap: 11px !important;
}

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

body:not(.login-active) .app-header .header-chart-divider {
  width: 1px !important;
  height: 62px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10, 45, 55, 0.2) 12%, rgba(21, 156, 165, 0.72) 50%, rgba(10, 45, 55, 0.2) 88%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(21, 156, 165, 0.28) !important;
}

body:not(.login-active) .app-header .header-chart-link {
  --header-glass-accent: var(--header-button-accent, #20b7c3);
  --header-glass-glow: var(--header-button-glow, rgba(32, 183, 195, 0.58));
  --header-glass-edge: var(--header-button-border, rgba(32, 183, 195, 0.82));
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 8px 10px 8px 12px !important;
  display: grid !important;
  grid-template-columns: 35px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  column-gap: 9px !important;
  color: #f8fdff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.09) 18%, rgba(255, 255, 255, 0.02) 39%),
    linear-gradient(180deg, rgba(28, 59, 70, 0.92) 0%, rgba(13, 38, 47, 0.95) 100%) !important;
  box-shadow:
    0 14px 30px rgba(5, 22, 29, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 4px 0 0 var(--header-glass-accent),
    inset 0 -3px 0 rgba(255, 255, 255, 0.08) !important;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  text-align: left !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28) !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
  transform: translateY(0) !important;
}

body:not(.login-active) .app-header .header-chart-link::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 22% -18%, rgba(255, 255, 255, 0.58), transparent 31%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 54%) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-chart-link::after {
  content: "" !important;
  position: absolute !important;
  left: 42px !important;
  right: 12px !important;
  bottom: 6px !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--header-glass-accent) !important;
  box-shadow:
    0 0 13px var(--header-glass-glow),
    0 0 24px color-mix(in srgb, var(--header-glass-accent) 35%, transparent) !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-nav-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 33px !important;
  height: 33px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--header-glass-accent) 82%, #ffffff 18%) 0%, var(--header-glass-accent) 100%) !important;
  box-shadow:
    0 0 18px var(--header-glass-glow),
    0 8px 18px rgba(3, 20, 26, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 0 rgba(2, 19, 25, 0.18) !important;
}

body:not(.login-active) .app-header .header-nav-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px 4px auto 4px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.38) !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-nav-icon svg {
  position: relative !important;
  z-index: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

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

body:not(.login-active) .app-header .header-nav-text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 88px !important;
  color: #f8fdff !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: 0.055em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body:not(.login-active) .app-header .header-chart-link:hover,
body:not(.login-active) .app-header .header-chart-link.active {
  color: #ffffff !important;
  border-color: var(--header-glass-edge) !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.04) 39%),
    linear-gradient(180deg, rgba(35, 73, 84, 0.96) 0%, rgba(12, 43, 52, 0.98) 100%) !important;
  box-shadow:
    0 18px 34px rgba(5, 22, 29, 0.32),
    0 0 22px var(--header-glass-glow),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 4px 0 0 var(--header-glass-accent),
    inset 0 -3px 0 rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header .header-chart-link:hover .header-nav-icon,
body:not(.login-active) .app-header .header-chart-link.active .header-nav-icon {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 22px var(--header-glass-glow),
    0 10px 20px rgba(3, 20, 26, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(2, 19, 25, 0.18) !important;
}

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

body:not(.login-active) .app-header .header-user-card {
  --header-glass-accent: #31c85f;
  --header-glass-glow: rgba(49, 200, 95, 0.42);
  position: relative !important;
  isolation: isolate !important;
  width: 128px !important;
  height: 60px !important;
  min-width: 128px !important;
  transition: width 0.18s ease, transform 0.18s ease !important;
}

body:not(.login-active) .app-header .header-user-card.expanded {
  width: 268px !important;
  min-width: 268px !important;
}

body:not(.login-active) .app-header .header-user-toggle {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 60px !important;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: 32px 1fr 14px !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.09) 20%, rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, rgba(26, 63, 70, 0.94) 0%, rgba(12, 40, 45, 0.96) 100%) !important;
  box-shadow:
    0 14px 30px rgba(5, 22, 29, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 5px 0 var(--header-glass-accent),
    inset 0 -3px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
  cursor: pointer !important;
}

body:not(.login-active) .app-header .header-user-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 20% -20%, rgba(255, 255, 255, 0.56), transparent 30%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 54%) !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-user-card.expanded .header-user-toggle {
  grid-template-columns: 32px 64px 14px !important;
  padding-right: 144px !important;
}

body:not(.login-active) .app-header .header-user-toggle:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 18px 34px rgba(5, 22, 29, 0.3),
    0 0 22px var(--header-glass-glow),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 5px 0 var(--header-glass-accent),
    inset 0 -3px 0 rgba(255, 255, 255, 0.09) !important;
}

body:not(.login-active) .app-header .header-user-icon {
  width: 31px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(3, 20, 26, 0.32)) !important;
}

body:not(.login-active) .app-header .header-user-icon svg {
  width: 23px !important;
  height: 23px !important;
  fill: currentColor !important;
}

body:not(.login-active) .app-header .header-user-status {
  justify-self: start !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body:not(.login-active) .app-header .header-user-arrow {
  color: #b8f4c9 !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  transition: transform 0.16s ease !important;
}

body:not(.login-active) .app-header .header-user-card.expanded .header-user-arrow {
  transform: rotate(180deg) !important;
}

body:not(.login-active) .app-header .header-user-details {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  width: 126px !important;
  display: grid !important;
  grid-template-rows: 18px 22px !important;
  gap: 4px !important;
  pointer-events: auto !important;
}

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

body:not(.login-active) .app-header .header-user-copy,
body:not(.login-active) .app-header .header-user-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(3, 20, 26, 0.38) !important;
}

body:not(.login-active) .app-header .header-user-details #editProfileBtn,
body:not(.login-active) .app-header .header-user-details #signOutBtn {
  width: 100% !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 13px rgba(10, 40, 48, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

body:not(.login-active) .app-header .header-user-details #editProfileBtn {
  background: linear-gradient(180deg, rgba(21, 156, 165, 0.94) 0%, rgba(13, 88, 102, 0.96) 100%) !important;
}

body:not(.login-active) .app-header .header-user-details #signOutBtn {
  background: linear-gradient(180deg, rgba(207, 74, 70, 0.94) 0%, rgba(161, 42, 42, 0.96) 100%) !important;
  box-shadow: 0 6px 13px rgba(82, 17, 17, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.chat-launcher-root {
  top: 116px !important;
  right: 22px !important;
  bottom: auto !important;
}

.sidebar-user {
  gap: 8px !important;
}

.sidebar-user-toggle {
  width: 100%;
  min-height: 44px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  border: 1px solid rgba(18, 182, 188, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.sidebar-user-toggle:hover {
  border-color: rgba(18, 182, 188, 0.68);
  background: rgba(255, 255, 255, 0.14);
}

.sidebar-user-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #102a2f;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fcff 0%, #d9eef2 100%);
  box-shadow: inset 0 3px 0 #1a9ca6, 0 8px 16px rgba(0, 0, 0, 0.18);
}

.sidebar-user-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.sidebar-user-status {
  justify-self: start;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sidebar-user-arrow {
  display: grid;
  place-items: center;
  color: #9ee9ef;
  font-size: 0.76rem;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.sidebar-user.expanded .sidebar-user-arrow {
  transform: rotate(180deg);
}

.sidebar-user:not(.expanded) .sidebar-user-status {
  color: transparent;
}

.sidebar-user-details {
  display: grid;
  gap: 8px;
}

.sidebar-user-details[hidden] {
  display: none !important;
}

.sidebar-user-copy {
  color: #ffffff !important;
  font-size: 0.8rem !important;
}

.sidebar-user-name {
  color: #ffffff !important;
}

.sidebar-user #signOutBtn {
  width: 100%;
}

/* Consolidated glass control system. This is the active button theme. */
:root {
  --control-glass-ink: #f8fdff;
  --control-glass-body: rgba(13, 38, 47, 0.94);
  --control-glass-body-top: rgba(31, 68, 79, 0.92);
  --control-glass-accent: #20b7c3;
  --control-glass-glow: rgba(32, 183, 195, 0.46);
  --control-glass-border: rgba(255, 255, 255, 0.34);
}

body:not(.login-active) .app-header {
  position: sticky !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  color: #17344b !important;
  border-bottom: 1px solid rgba(80, 115, 140, 0.22) !important;
  background:
    linear-gradient(90deg, rgba(47, 111, 165, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47, 111, 165, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f6fafc 100%) !important;
  background-size: 20px 20px, 20px 20px, auto !important;
  box-shadow: 0 12px 30px rgba(16, 30, 44, 0.1) !important;
}

body:not(.login-active) .app-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg, rgba(47, 111, 165, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47, 111, 165, 0.055) 1px, transparent 1px) !important;
  background-size: 100px 100px, 100px 100px !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header > * {
  position: relative !important;
  z-index: 1 !important;
}

body .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(.close-x):not(.header-icon-button):not(.header-chart-link):not(.nav-link):not(.production-nav):not(.top-link):not(.sold-financial-project-link):not(.section-report-page-tab),
body .app-shell .button-link,
body .app-shell .primary-action,
body .app-shell .nav-link,
body .app-shell .top-link:not(.header-chart-link),
body .app-shell .tab,
body .app-shell .ghost,
body .app-shell .storage-stat-button,
body .app-shell .project-files-button,
body .app-shell .project-detail-substep,
body .app-shell .project-wizard-pill,
body .app-shell .progress-step,
body .app-shell .chat-launcher-tab,
body .app-shell .chat-launcher-item,
body .app-shell .inline-link-button,
body .app-shell .production-calendar-create,
body .app-shell .file-library-project-chip,
body .app-shell .folder.ghost,
body .app-shell .section-quick-nav-card,
body .app-shell .section-quick-nav-next,
body .login-submit,
body 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(.close-x) {
  --button-glass-accent: var(--control-glass-accent);
  --button-glass-glow: var(--control-glass-glow);
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: var(--control-glass-ink) !important;
  border: 1px solid var(--control-glass-border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.09) 20%, rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, var(--control-glass-body-top) 0%, var(--control-glass-body) 100%) !important;
  box-shadow:
    0 12px 24px rgba(5, 22, 29, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 3px 0 0 var(--button-glass-accent),
    inset 0 -2px 0 rgba(255, 255, 255, 0.08) !important;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: 0.025em !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(16px) saturate(1.32) !important;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease !important;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 13px;
  color: var(--white);
  background: var(--brand-strong);
  text-decoration: none;
  font-weight: 800;
}

.sync-conflict-card {
  width: min(760px, 100%);
}

.sync-conflict-card .record-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sync-conflict-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.sync-conflict-summary {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(18, 72, 92, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9fb 100%);
}

.sync-conflict-summary strong {
  color: #102a34;
}

.sync-conflict-summary small {
  color: #415b68;
}

.status-pill.risk {
  color: #7b1e1e;
  border-color: rgba(190, 58, 58, 0.3);
  background: #fff0ef;
}

.status-pill.success {
  color: #126138;
  border-color: rgba(42, 150, 87, 0.3);
  background: #eefaf2;
}

@media (max-width: 760px) {
  .sync-conflict-columns {
    grid-template-columns: 1fr;
  }

  .sync-conflict-card .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .sync-conflict-card .row-actions > * {
    width: 100%;
  }
}

body .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(.close-x):not(.header-icon-button):not(.header-chart-link):not(.nav-link):not(.production-nav):not(.top-link):not(.sold-financial-project-link):not(.section-report-page-tab):hover,
body .app-shell .button-link:hover,
body .app-shell .primary-action:hover,
body .app-shell .nav-link:hover,
body .app-shell .top-link:not(.header-chart-link):hover,
body .app-shell .tab:hover,
body .app-shell .ghost:hover,
body .app-shell .storage-stat-button:hover,
body .app-shell .project-files-button:hover,
body .app-shell .project-detail-substep:hover,
body .app-shell .project-wizard-pill:hover,
body .app-shell .progress-step:hover,
body .app-shell .chat-launcher-tab:hover,
body .app-shell .chat-launcher-item:hover,
body .app-shell .inline-link-button:hover,
body .app-shell .production-calendar-create:hover,
body .app-shell .file-library-project-chip:hover,
body .app-shell .folder.ghost:hover,
body .app-shell .section-quick-nav-card:hover,
body .app-shell .section-quick-nav-next:hover,
body .login-submit:hover,
body 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(.close-x):hover {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--button-glass-accent) 62%, #ffffff 38%) !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.13) 20%, rgba(255, 255, 255, 0.04) 42%),
    linear-gradient(180deg, rgba(38, 78, 90, 0.96) 0%, rgba(14, 43, 52, 0.98) 100%) !important;
  box-shadow:
    0 16px 30px rgba(5, 22, 29, 0.26),
    0 0 18px var(--button-glass-glow),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 3px 0 0 var(--button-glass-accent),
    inset 0 -2px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

body .app-shell .ghost,
body dialog .ghost {
  --button-glass-accent: #91bfd1;
  --button-glass-glow: rgba(145, 191, 209, 0.32);
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, rgba(29, 61, 72, 0.82) 0%, rgba(15, 42, 51, 0.9) 100%) !important;
}

body .app-shell .danger,
body .app-shell .delete-btn,
body .app-shell .employee-delete-btn,
body .app-shell .file-media-delete-btn,
body .app-shell .section-delete-btn,
body .app-shell .preview-delete-btn,
body .app-shell .text-annotation-delete,
body dialog .danger,
body dialog .delete-btn,
body dialog .preview-delete-btn {
  --button-glass-accent: #e35b55 !important;
  --button-glass-glow: rgba(227, 91, 85, 0.48) !important;
  border-color: rgba(255, 171, 166, 0.48) !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, rgba(101, 39, 44, 0.94) 0%, rgba(64, 24, 30, 0.98) 100%) !important;
}

body .app-shell .glass-success,
body .app-shell .primary-action,
body .app-shell .quick-opportunity-btn,
body .app-shell [data-open-project-wizard],
body .app-shell [data-save-project-phase],
body .app-shell [data-progress-project],
body .app-shell [data-save-inspection],
body .app-shell [data-submit-inspection],
body dialog .glass-success,
body .login-submit {
  --button-glass-accent: #37c663 !important;
  --button-glass-glow: rgba(55, 198, 99, 0.46) !important;
}

body .app-shell .tab.active,
body .app-shell .nav-link.active,
body .app-shell .project-detail-substep.active,
body .app-shell .project-wizard-pill.active,
body .app-shell .progress-step.active-step,
body .app-shell .file-library-project-chip.active,
body .app-shell .selected-folder,
body .app-shell .section-quick-nav-card.active {
  --button-glass-accent: #d6a95b !important;
  --button-glass-glow: rgba(214, 169, 91, 0.5) !important;
  border-color: rgba(246, 215, 155, 0.58) !important;
  box-shadow:
    0 14px 28px rgba(5, 22, 29, 0.24),
    0 0 18px rgba(214, 169, 91, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 3px 0 0 var(--button-glass-accent),
    inset 0 -2px 0 rgba(255, 255, 255, 0.1) !important;
}

body .app-shell .progress-step.done {
  --button-glass-accent: #37c663 !important;
  --button-glass-glow: rgba(55, 198, 99, 0.4) !important;
}

body .app-shell button:disabled,
body dialog button:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow:
    0 8px 16px rgba(5, 22, 29, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 3px 0 0 rgba(145, 191, 209, 0.44) !important;
}

body:not(.login-active) .app-header .top-link:not(.header-chart-link) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.header-icon-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 3;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  background: #c74444;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 14px rgba(199, 68, 68, 0.38);
}

.header-icon-badge[hidden],
.header-icon-button[hidden] {
  display: none !important;
}

.section-quick-nav-card {
  width: 100px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 7px 8px !important;
  align-content: start !important;
  text-align: left !important;
}

.section-quick-nav-card strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  line-height: 1.05 !important;
}

.section-quick-nav-card span {
  display: block !important;
  margin-top: 3px !important;
  color: #cfe8ef !important;
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
}

.section-quick-nav-next {
  width: 42px !important;
  height: 60px !important;
  min-height: 60px !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
}

.section-add-folder-item-btn {
  grid-column: 1 / 3;
  margin-top: -70px;
}

.close-x {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 171, 166, 0.5) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(154, 56, 60, 0.96) 0%, rgba(93, 31, 38, 0.98) 100%) !important;
  box-shadow:
    0 8px 18px rgba(93, 31, 38, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  touch-action: manipulation !important;
}

@media (max-width: 700px), (pointer: coarse) {
  .close-x,
  .photo-dialog .close-x {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #filePreviewDialog .photo-dialog .close-x {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    top: 5px !important;
    right: 5px !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }
}

/* Contrast guardrails for glass controls that contain nested labels. */
body .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(.close-x):not(.home-work-item):not(.home-finance-row):not(.sold-financial-project-link):not(.section-report-page-tab) span,
body .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(.close-x):not(.home-work-item):not(.home-finance-row):not(.sold-financial-project-link):not(.section-report-page-tab) strong,
body .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(.close-x):not(.home-work-item):not(.home-finance-row):not(.sold-financial-project-link):not(.section-report-page-tab) small,
body .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(.close-x):not(.home-work-item):not(.home-finance-row):not(.sold-financial-project-link):not(.section-report-page-tab) b,
body .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(.close-x):not(.home-work-item):not(.home-finance-row):not(.sold-financial-project-link):not(.section-report-page-tab) em,
body .app-shell .nav-link *,
body .app-shell .top-link:not(.header-chart-link) *,
body .app-shell .tab *,
body .app-shell .ghost *,
body dialog button:not(.close-x) * {
  color: inherit !important;
  text-shadow: inherit !important;
}

#homeView .home-heading-actions button {
  color: #ffffff !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.3) !important;
}

#homeView .home-heading-actions button.ghost {
  --button-glass-accent: #d6a95b !important;
  --button-glass-glow: rgba(214, 169, 91, 0.52) !important;
  color: #ffffff !important;
  border-color: rgba(246, 215, 155, 0.58) !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, rgba(72, 58, 31, 0.96) 0%, rgba(41, 34, 23, 0.98) 100%) !important;
  box-shadow:
    0 14px 28px rgba(5, 22, 29, 0.24),
    0 0 18px rgba(214, 169, 91, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 3px 0 0 #d6a95b,
    inset 0 -2px 0 rgba(255, 255, 255, 0.1) !important;
}

#homeView .home-heading-actions button.ghost:hover {
  color: #ffffff !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.04) 42%),
    linear-gradient(180deg, rgba(90, 69, 33, 0.98) 0%, rgba(50, 39, 24, 1) 100%) !important;
}

/* Final header icon reset: chat and notifications must render as icons only. */
body:not(.login-active) .app-header #headerNotificationsButton,
body:not(.login-active) .app-header #headerChatButton {
  all: unset !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 60px !important;
  min-width: 34px !important;
  min-height: 60px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  transform: none !important;
}

body:not(.login-active) .app-header #headerNotificationsButton::before,
body:not(.login-active) .app-header #headerNotificationsButton::after,
body:not(.login-active) .app-header #headerChatButton::before,
body:not(.login-active) .app-header #headerChatButton::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.login-active) .app-header #headerNotificationsButton {
  --header-icon-glow: rgba(117, 72, 0, 0.34);
  color: #754800 !important;
}

body:not(.login-active) .app-header #headerChatButton {
  --header-icon-glow: rgba(0, 82, 92, 0.34);
  color: #00525c !important;
}

body:not(.login-active) .app-header #headerNotificationsButton:hover,
body:not(.login-active) .app-header #headerNotificationsButton.is-open {
  color: #4f3100 !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header #headerChatButton:hover,
body:not(.login-active) .app-header #headerChatButton.is-open {
  color: #003f47 !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header #headerNotificationsButton.has-alert,
body:not(.login-active) .app-header #headerChatButton.has-alert {
  color: #b5352f !important;
}

body:not(.login-active) .app-header #headerNotificationsButton .header-icon-wrap,
body:not(.login-active) .app-header #headerChatButton .header-icon-wrap {
  all: unset !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.login-active) .app-header #headerNotificationsButton .header-icon-wrap::before,
body:not(.login-active) .app-header #headerNotificationsButton .header-icon-wrap::after,
body:not(.login-active) .app-header #headerChatButton .header-icon-wrap::before,
body:not(.login-active) .app-header #headerChatButton .header-icon-wrap::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header #headerNotificationsButton svg,
body:not(.login-active) .app-header #headerChatButton svg {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  fill: currentColor !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

body:not(.login-active) .app-header #headerNotificationsButton:hover svg,
body:not(.login-active) .app-header #headerNotificationsButton.is-open svg,
body:not(.login-active) .app-header #headerChatButton:hover svg,
body:not(.login-active) .app-header #headerChatButton.is-open svg,
body:not(.login-active) .app-header #headerNotificationsButton.has-alert svg,
body:not(.login-active) .app-header #headerChatButton.has-alert svg {
  filter: drop-shadow(0 0 7px var(--header-icon-glow)) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

/* Header refinements: home icon, signed-in glass control, and calendar clearance. */
body:not(.login-active) .app-header #headerHomeButton {
  all: unset !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 60px !important;
  min-width: 34px !important;
  min-height: 60px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #0b5d66 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body:not(.login-active) .app-header #headerHomeButton::before,
body:not(.login-active) .app-header #headerHomeButton::after,
body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap::before,
body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap {
  all: unset !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
}

body:not(.login-active) .app-header #headerHomeButton svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  fill: none !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

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

body:not(.login-active) .app-header #headerHomeButton:hover,
body:not(.login-active) .app-header #headerHomeButton.active {
  color: #073e45 !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header #headerHomeButton:hover svg,
body:not(.login-active) .app-header #headerHomeButton.active svg {
  filter: drop-shadow(0 0 7px rgba(0, 82, 92, 0.34)) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
  align-self: center !important;
  box-sizing: border-box !important;
  flex: 0 1 150px !important;
  width: auto !important;
  min-width: 34px !important;
  max-width: 150px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 10px 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  color: #145a45 !important;
  border: 1px solid rgba(58, 182, 75, 0.42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(238, 252, 242, 0.98) 0%, rgba(223, 249, 231, 0.98) 100%) !important;
  box-shadow: 0 0 0 1px rgba(58, 182, 75, 0.08), 0 0 18px rgba(58, 182, 75, 0.2) !important;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator[hidden] {
  display: none !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator::before {
  left: 10px !important;
  width: 8px !important;
  height: 8px !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
  color: #0f4b39 !important;
  border-color: rgba(58, 182, 75, 0.56) !important;
  background: linear-gradient(180deg, rgba(244, 254, 246, 1) 0%, rgba(227, 250, 234, 1) 100%) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header .header-user-card {
  --header-glass-accent: #31c85f !important;
  --header-glass-glow: rgba(49, 200, 95, 0.5) !important;
  width: 154px !important;
  min-width: 154px !important;
  height: 60px !important;
  min-height: 60px !important;
}

body:not(.login-active) .app-header .header-user-card.expanded {
  width: 286px !important;
  min-width: 286px !important;
}

body:not(.login-active) .app-header .header-user-toggle {
  overflow: hidden !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 10px 8px 12px !important;
  grid-template-columns: 35px minmax(0, 1fr) 14px !important;
  column-gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.09) 18%, rgba(255, 255, 255, 0.02) 39%),
    linear-gradient(180deg, rgba(28, 59, 70, 0.92) 0%, rgba(13, 38, 47, 0.95) 100%) !important;
  box-shadow:
    0 14px 30px rgba(5, 22, 29, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 4px 0 0 var(--header-glass-accent),
    inset 0 -3px 0 rgba(255, 255, 255, 0.08) !important;
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
}

body:not(.login-active) .app-header .header-user-toggle::after {
  content: "" !important;
  position: absolute !important;
  left: 48px !important;
  right: 28px !important;
  bottom: 6px !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--header-glass-accent) !important;
  box-shadow: 0 0 13px var(--header-glass-glow), 0 0 24px rgba(49, 200, 95, 0.24) !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-user-card.expanded .header-user-toggle {
  grid-template-columns: 35px 76px 14px !important;
  padding-right: 150px !important;
}

body:not(.login-active) .app-header .header-user-icon {
  position: relative !important;
  width: 33px !important;
  height: 33px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(96, 229, 128, 0.96) 0%, var(--header-glass-accent) 100%) !important;
  box-shadow:
    0 0 18px var(--header-glass-glow),
    0 8px 18px rgba(3, 20, 26, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 0 rgba(2, 19, 25, 0.18) !important;
}

body:not(.login-active) .app-header .header-user-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px 4px auto 4px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.38) !important;
}

body:not(.login-active) .app-header .header-user-status {
  max-width: 74px !important;
  color: #f8fdff !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: 0.055em !important;
  text-align: left !important;
}

body:not(.login-active) .app-header .header-user-arrow {
  color: #c7ffd6 !important;
}

body:not(.login-active) .app-header .header-user-details {
  top: 8px !important;
  right: 8px !important;
  width: 132px !important;
}

/* Signed-in control should read as a header icon, not a large action button. */
body:not(.login-active) .app-header .header-user-card,
body:not(.login-active) .app-header .header-user-card.expanded {
  position: relative !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 60px !important;
  min-height: 60px !important;
  display: grid !important;
  place-items: center !important;
  transition: none !important;
}

body:not(.login-active) .app-header .header-user-toggle,
body:not(.login-active) .app-header .header-user-card.expanded .header-user-toggle {
  all: unset !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 60px !important;
  min-width: 34px !important;
  min-height: 60px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #197546 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

body:not(.login-active) .app-header .header-user-toggle::before,
body:not(.login-active) .app-header .header-user-toggle::after {
  content: none !important;
  display: none !important;
}

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

body:not(.login-active) .app-header .header-user-icon {
  all: unset !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body:not(.login-active) .app-header .header-user-icon::before,
body:not(.login-active) .app-header .header-user-icon::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header .header-user-icon svg {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  fill: currentColor !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

body:not(.login-active) .app-header .header-user-toggle:hover,
body:not(.login-active) .app-header .header-user-card.expanded .header-user-toggle {
  color: #0f5d35 !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header .header-user-toggle:hover svg,
body:not(.login-active) .app-header .header-user-card.expanded .header-user-toggle svg {
  filter: drop-shadow(0 0 7px rgba(25, 117, 70, 0.36)) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)) !important;
}

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: 3000 !important;
  width: 168px !important;
  min-height: 108px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: auto 26px 26px !important;
  gap: 8px !important;
  border: 1px solid rgba(136, 182, 194, 0.68) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 250, 0.98)) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  box-shadow: 0 16px 32px rgba(5, 22, 29, 0.18) !important;
}

body:not(.login-active) .app-header .header-user-copy,
body:not(.login-active) .app-header .header-user-name {
  color: var(--stronghold-ink) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body:not(.login-active) .app-header .header-user-details #editProfileBtn,
body:not(.login-active) .app-header .header-user-details #signOutBtn {
  min-height: 26px !important;
  height: 26px !important;
}

body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle,
body:not(.login-active) .app-header .header-user-card.expanded button#headerUserToggle.header-user-toggle {
  width: 34px !important;
  height: 60px !important;
  min-width: 34px !important;
  min-height: 60px !important;
  max-width: 34px !important;
  max-height: 60px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #197546 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:hover,
body:not(.login-active) .app-header .header-user-card.expanded button#headerUserToggle.header-user-toggle {
  color: #0f5d35 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header lock and mobile usability cleanup. Keep this block last so older
   mobile rules cannot wrap or reshuffle the header controls. */
body:not(.login-active) .app-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

body:not(.login-active) .app-header .header-brand,
body:not(.login-active) .app-header .login-card,
body:not(.login-active) .app-header .header-workflow-links,
body:not(.login-active) .app-header .header-utility-links,
body:not(.login-active) .app-header .header-logo-shell {
  flex-shrink: 0 !important;
}

body:not(.login-active) .app-header .header-workflow-links {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

body:not(.login-active) .app-header .header-chart-links,
body:not(.login-active) .app-header .header-stage-links {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

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

body:not(.login-active) .app-header .header-icon-badge {
  top: 7px !important;
  right: -2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-width: 2px !important;
  font-size: 0.62rem !important;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:not(.login-active) .app-header {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(142px, 190px) minmax(0, 1fr) !important;
    grid-template-rows: 46px 40px 64px !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    left: auto !important;
    top: auto !important;
    width: 180px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    height: 46px !important;
    transform: none !important;
    justify-content: flex-start !important;
  }

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

  body:not(.login-active) .app-header .login-card,
  body:not(.login-active) .app-header .search-box {
    grid-column: 1 / 3 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.login-active) .app-header .login-card {
    display: grid !important;
    align-self: stretch !important;
    gap: 0 !important;
  }

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

  body:not(.login-active) .app-header .search-box input {
    min-height: 40px !important;
    height: 40px !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
    align-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  body:not(.login-active) .app-header .header-chart-links,
  body:not(.login-active) .app-header .header-stage-links {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    justify-self: end !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    max-width: 132px !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    position: static !important;
    top: auto !important;
    z-index: 900 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 7px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background:
      linear-gradient(90deg, rgba(21, 156, 165, 0.08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(21, 156, 165, 0.07) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 249, 0.98)) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(136, 182, 194, 0.72) !important;
    box-shadow: 0 12px 24px rgba(13, 42, 51, 0.12) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar-module-label,
  .sidebar-spacer,
  .sidebar-user,
  .sidebar-notifications {
    display: none !important;
  }

  .sidebar .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 172px !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .sidebar > .nav-link[data-open-project-wizard] {
    min-width: 148px !important;
  }

  .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding: 8px 8px 18px !important;
    overflow-x: hidden !important;
  }

  .workspace > .view.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .workspace-topbar {
    margin-bottom: 8px !important;
  }

  .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .section-heading h1,
  .section-heading h2,
  .section-heading h3 {
    font-size: clamp(1.25rem, 7vw, 1.65rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .home-heading-actions,
  .toolbar,
  .tabs,
  .production-toggle,
  .bottom-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .section-heading .home-heading-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .section-heading .home-heading-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .home-heading-actions button,
  .toolbar button,
  .tabs > *,
  .production-toggle > *,
  .bottom-tabs > * {
    flex: 0 0 auto !important;
  }

  .record-card,
  .kpi-card,
  .home-focus-card,
  .home-finance-shell,
  .home-finance-kpi,
  .home-finance-panel,
  .home-finance-drilldown,
  .dashboard-card,
  .form-card,
  .property-card,
  .project-overview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .home-live-grid,
  .home-primary-production-grid,
  .home-focus-grid,
  .home-metric-grid,
  .home-finance-kpi-grid,
  .home-finance-panel-grid,
  .home-finance-drilldown-grid,
  .quick-summary-wrap,
  .project-overview-layout,
  .clients-page-layout,
  .file-library-layout,
  .crew-layout,
  .property-layout,
  .project-form-grid,
  .wizard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  .table-wrap,
  .file-library-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table,
  .file-library-table-wrap table {
    width: max-content !important;
    min-width: 640px !important;
  }

  th,
  td {
    padding: 7px 8px !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }

  .home-production-card .table-wrap {
    max-height: 250px !important;
  }

  .home-production-card table {
    min-width: 620px !important;
  }

  .property-leaflet-map,
  .property-list-map,
  .customer-list-map,
  .project-detail-map,
  .section-outline-map,
  .section-measure-map,
  #sectionOutlineMap,
  .production-calendar-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .property-leaflet-map,
  .property-list-map,
  .customer-list-map,
  .project-detail-map,
  .section-outline-map,
  .section-measure-map,
  #sectionOutlineMap {
    height: min(360px, 58vh) !important;
  }

  dialog,
  .modal-card,
  .prompt-card,
  .quick-chat-panel {
    width: min(94vw, 420px) !important;
    max-width: 94vw !important;
    max-height: 84vh !important;
    overflow: auto !important;
  }

  input,
  select,
  textarea {
    max-width: 100% !important;
    font-size: 16px !important;
  }
}

@media (max-width: 430px) {
  body:not(.login-active) .app-header .login-card,
  body:not(.login-active) .app-header .search-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.login-active) .app-header {
    grid-template-columns: minmax(128px, 170px) minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

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

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    max-width: 112px !important;
  }

  table,
  .file-library-table-wrap table {
    min-width: 580px !important;
  }

  .home-production-card table {
    min-width: 560px !important;
  }
}

/* Cross-page polish pass: keep wide operational layouts inside the app frame. */
@media (min-width: 901px) {
  body:not(.login-active) .workspace,
  body:not(.login-active) .workspace > .view.active {
    max-width: calc(100vw - 214px) !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body:not(.login-active) .workspace > .view.active > *,
  body:not(.login-active) .workspace > .view.active .section-heading,
  body:not(.login-active) .workspace > .view.active .toolbar,
  body:not(.login-active) .workspace > .view.active .record-card,
  body:not(.login-active) .workspace > .view.active .table-wrap,
  body:not(.login-active) .workspace > .view.active .form-card,
  body:not(.login-active) .workspace > .view.active .dashboard-card {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .clients-page-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(320px, min(34vw, 500px)) !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .clients-list-shell,
  .properties-list-shell,
  #customerList,
  #recentPropertyList,
  #customerList .table-wrap,
  #recentPropertyList .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .clients-map-shell,
  .properties-map-shell {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .customer-list-map,
  .property-list-map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(340px, 34vw, 450px) !important;
    min-height: 340px !important;
  }

  #customerList table,
  #recentPropertyList table {
    width: max-content !important;
    min-width: 760px !important;
  }

  .file-library-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .file-library-list-shell,
  .file-library-content-shell,
  .file-library-tree-shell,
  .file-library-table-wrap,
  .file-library-layout .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .file-library-table-wrap,
  #customerList .table-wrap,
  #recentPropertyList .table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .file-library-layout .table-wrap table,
  .file-library-table-wrap table {
    width: max-content !important;
    min-width: 760px !important;
  }

}

@media (min-width: 901px) and (max-width: 1500px) {
  .clients-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  }

  .clients-map-divider {
    display: none !important;
  }

  .clients-map-shell,
  .properties-map-shell {
    max-width: 420px !important;
  }

  .customer-list-map,
  .property-list-map {
    height: 390px !important;
  }
}

@media (max-width: 640px) {
  #homeView .home-production-card {
    min-height: 0 !important;
  }

  #homeView .home-production-card .table-wrap {
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
  }

  #homeView .home-production-card table,
  #homeView .home-production-card thead,
  #homeView .home-production-card tbody,
  #homeView .home-production-card tr,
  #homeView .home-production-card td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #homeView .home-production-card thead {
    display: none !important;
  }

  #homeView .home-production-card tbody {
    display: grid !important;
    gap: 8px !important;
  }

  #homeView .home-production-card tr {
    padding: 9px 10px !important;
    border: 1px solid rgba(136, 182, 194, 0.6) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 8px 18px rgba(16, 42, 52, 0.08) !important;
  }

  #homeView .home-production-card td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: baseline !important;
    min-height: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
    color: var(--stronghold-ink) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  #homeView .home-production-card td::before {
    content: attr(data-label);
    color: var(--stronghold-teal-dark);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  #homeView .home-production-card td[colspan] {
    display: block !important;
    color: var(--stronghold-muted) !important;
  }

  #homeView .home-production-card td[colspan]::before {
    content: none;
  }

  #homeView .home-production-card td:first-child,
  #homeView .home-production-card td:nth-child(2) {
    font-weight: 900 !important;
  }
}

/* Role-aware home base */
.home-base-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(136, 182, 194, 0.72);
  border-left: 6px solid var(--stronghold-teal);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(235, 248, 250, 0.96) 100%);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 14px 28px rgba(16, 42, 52, 0.1);
}

.home-base-hero h2 {
  margin: 3px 0 4px;
  color: var(--stronghold-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.04;
}

.home-base-hero strong {
  display: block;
  color: var(--stronghold-ink-soft);
  font-size: 1rem;
}

.home-base-hero p {
  max-width: 760px;
  margin: 6px 0;
  color: var(--stronghold-muted);
}

.home-base-hero small {
  display: inline-flex;
  width: fit-content;
  margin-top: 3px;
  padding: 4px 8px;
  border: 1px solid rgba(21, 156, 165, 0.28);
  border-radius: 8px;
  color: var(--stronghold-teal-dark);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-base-hero.executive {
  border-left-color: var(--stronghold-gold);
}

.home-base-hero.field {
  border-left-color: var(--stronghold-green);
}

.home-base-hero.estimator {
  border-left-color: var(--stronghold-gold);
}

.home-base-hero.service {
  border-left-color: var(--stronghold-blue);
}

.home-base-actions,
.home-tool-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.home-base-actions button {
  min-width: 154px;
}

.home-role-selector {
  display: inline-grid;
  width: min(260px, 100%);
  margin-top: 10px;
  gap: 5px;
  color: var(--stronghold-teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-role-selector select {
  height: 36px;
  border: 1px solid rgba(21, 156, 165, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--stronghold-ink);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.home-role-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.home-role-metric {
  display: grid;
  align-content: start;
  min-height: 108px;
  padding: 13px;
  border: 1px solid rgba(136, 182, 194, 0.62);
  border-top: 4px solid var(--stronghold-teal);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f8fa 100%);
  box-shadow: 0 10px 24px rgba(16, 42, 52, 0.08);
}

.home-role-metric span {
  color: var(--stronghold-teal-dark);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-role-metric strong {
  margin: 7px 0 4px;
  color: var(--stronghold-ink);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1;
}

.home-role-metric small {
  color: var(--stronghold-muted);
  font-size: 0.74rem;
}

.home-role-metric.blue { border-top-color: var(--stronghold-blue); }
.home-role-metric.gold { border-top-color: var(--stronghold-gold); }
.home-role-metric.red { border-top-color: var(--stronghold-red); }
.home-role-metric.teal { border-top-color: var(--stronghold-teal); }

.home-role-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: 14px;
  align-items: start;
}

.home-role-layout.executive {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-role-layout.field {
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, 0.75fr);
}

.home-role-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 220px;
  padding: 14px;
}

.home-role-panel.wide {
  grid-row: span 2;
}

.home-role-panel h3 {
  margin: 0;
  color: var(--stronghold-ink);
}

.home-role-list {
  display: grid;
  gap: 8px;
}

.home-role-project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid rgba(136, 182, 194, 0.6) !important;
  border-left: 4px solid var(--stronghold-teal) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--stronghold-ink) !important;
  box-shadow: none !important;
  text-align: left;
}

.home-role-project-card:hover {
  border-color: rgba(21, 156, 165, 0.72) !important;
  background: rgba(232, 248, 250, 0.98) !important;
}

.home-role-project-card.compact {
  min-height: 60px;
}

.home-role-card-main,
.home-role-card-side {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-role-card-main strong {
  overflow: hidden;
  color: var(--stronghold-ink);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-role-card-main small,
.home-role-card-side small {
  overflow: hidden;
  color: var(--stronghold-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-role-card-side {
  justify-items: end;
}

.home-role-card-side em,
.home-role-card-side b {
  width: fit-content;
  border-radius: 8px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.home-role-card-side em {
  padding: 4px 7px;
  background: rgba(21, 156, 165, 0.12);
  color: var(--stronghold-teal-dark);
}

.home-role-card-side b {
  color: var(--stronghold-ink);
}

.home-attention-list {
  display: grid;
  gap: 8px;
}

.home-task-list {
  display: grid;
  gap: 8px;
}

.home-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(136, 182, 194, 0.62);
  border-left: 4px solid var(--stronghold-blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.home-task-card.warn {
  border-left-color: var(--stronghold-gold);
}

.home-task-card.risk {
  border-left-color: var(--stronghold-red);
}

.home-task-main,
.home-task-side {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.home-task-main span,
.home-task-side em {
  color: var(--stronghold-teal-dark);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-task-main strong {
  overflow: hidden;
  color: var(--stronghold-ink);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-task-main small,
.home-task-side small {
  color: var(--stronghold-muted);
  font-size: 0.7rem;
}

.home-task-side {
  justify-items: end;
}

.home-task-side button {
  min-width: 62px;
  height: 27px;
  padding: 3px 8px !important;
}

.home-attention-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(136, 182, 194, 0.58) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--stronghold-ink) !important;
  box-shadow: none !important;
  text-align: left;
}

.home-attention-item strong,
.home-attention-item small {
  display: block;
}

.home-attention-item strong {
  color: var(--stronghold-ink);
  font-size: 0.84rem;
}

.home-attention-item small {
  color: var(--stronghold-muted);
  font-size: 0.72rem;
}

.home-attention-item b {
  display: inline-grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: rgba(21, 156, 165, 0.12);
  color: var(--stronghold-teal-dark);
}

.home-attention-item.warn b {
  background: rgba(216, 164, 62, 0.18);
  color: #8c6211;
}

.home-attention-item.risk b {
  background: rgba(207, 62, 56, 0.14);
  color: #a3312c;
}

.home-tool-grid {
  justify-content: stretch;
}

.home-tool-grid button {
  flex: 1 1 150px;
}

.task-nav-link {
  border-color: rgba(38, 166, 91, 0.5) !important;
  background: linear-gradient(180deg, rgba(235, 255, 241, 0.98), rgba(216, 246, 225, 0.94)) !important;
  color: #0d5a30 !important;
}

.task-dialog-panel {
  width: min(620px, calc(100vw - 32px));
}

.task-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.task-dialog-grid .span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .home-role-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-role-layout,
  .home-role-layout.executive,
  .home-role-layout.field {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-role-panel.wide {
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  #homeFeed {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #homeFeed .home-base-hero.field {
    order: 1;
  }

  #homeFeed .home-role-layout.field {
    display: contents;
  }

  #homeFeed .home-field-assigned-jobs {
    order: 2;
  }

  #homeFeed .home-role-metric-grid {
    order: 3;
  }

  #homeFeed .home-role-layout.field > .home-role-panel:not(.home-field-assigned-jobs) {
    order: 4;
  }

  .home-base-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .home-base-actions {
    justify-content: stretch;
  }

  .home-base-actions button {
    flex: 1 1 140px;
    min-width: 0;
  }

  .home-role-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-role-project-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-role-card-side {
    justify-items: start;
  }

  .home-task-card,
  .task-dialog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-dialog-grid .span-2 {
    grid-column: auto;
  }

  .home-role-card-main strong,
  .home-role-card-main small,
  .home-role-card-side small {
    white-space: normal;
  }
}

/* Mobile production and service calendars use an agenda layout instead of a clipped month grid. */
@media (max-width: 700px) {
  #productionChartView .production-calendar-main,
  #serviceChartView .record-card,
  #serviceChart {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #productionChartView .calendar-controls,
  #serviceChartView .calendar-controls {
    display: grid !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }

  #productionChartView .production-calendar-toolbar-left,
  #serviceChartView .production-calendar-toolbar-left {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #productionChartView .production-calendar-toolbar h3,
  #productionChartView .calendar-controls h3,
  #serviceChartView .calendar-controls h3 {
    min-width: 0 !important;
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }

  #productionChartView .production-calendar-month-nav,
  #serviceChartView .production-calendar-month-nav {
    gap: 4px !important;
  }

  #productionChartView .production-calendar-month-nav .ghost,
  #productionChartView .production-calendar-today,
  #serviceChartView .production-calendar-month-nav .ghost,
  #serviceChartView .production-calendar-today {
    min-width: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
  }

  #productionChartView .production-calendar-view-chip {
    width: fit-content !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 0.72rem !important;
  }

  #productionChartView .calendar-grid,
  #productionChartView .production-calendar-grid,
  #serviceChartView .calendar-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #productionChartView .calendar-head,
  #serviceChartView .calendar-head {
    display: none !important;
  }

  #productionChartView .calendar-day,
  #productionChartView .production-calendar-grid .calendar-day,
  #serviceChartView .calendar-day {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 6px 10px !important;
    min-height: 58px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(136, 182, 194, 0.64) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(21, 156, 165, 0.03) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 250, 251, 0.96) 100%) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
    overflow: hidden !important;
    box-shadow: 0 8px 18px rgba(16, 42, 52, 0.06) !important;
  }

  #productionChartView .calendar-day.muted,
  #serviceChartView .calendar-day.muted {
    display: none !important;
  }

  #productionChartView .calendar-day-top,
  #productionChartView .production-calendar-grid .calendar-day-top,
  #serviceChartView .calendar-day-top {
    grid-row: 1 / span 3 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  #productionChartView .calendar-day-number,
  #productionChartView .production-calendar-grid .calendar-day-number,
  #serviceChartView .calendar-day-number {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(21, 156, 165, 0.1) !important;
    color: var(--stronghold-ink) !important;
    font-size: 0.95rem !important;
  }

  #productionChartView .calendar-day.is-today .calendar-day-number,
  #serviceChartView .calendar-day.is-today .calendar-day-number {
    color: #fff !important;
    background: linear-gradient(180deg, #3f89ed 0%, #2f6fd0 100%) !important;
  }

  #productionChartView .calendar-day-weekday,
  #serviceChartView .calendar-day-weekday {
    display: block !important;
    color: var(--stronghold-muted) !important;
    font-size: 0.58rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  #productionChartView .calendar-add-hint,
  #productionChartView .production-calendar-grid .calendar-add-hint,
  #serviceChartView .calendar-add-hint {
    position: static !important;
    grid-column: 2 !important;
    grid-row: auto !important;
    align-self: start !important;
    width: fit-content !important;
    padding: 3px 7px !important;
    border: 1px dashed rgba(21, 156, 165, 0.38) !important;
    border-radius: 8px !important;
    color: var(--stronghold-teal-dark) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    font-size: 0.62rem !important;
    opacity: 1 !important;
  }

  #serviceChartView .calendar-add-hint {
    display: none !important;
  }

  #productionChartView .calendar-entry-stack,
  #serviceChartView .calendar-entry-stack,
  #productionChartView .calendar-bar-stack,
  #productionChartView .production-calendar-grid .calendar-bar-stack,
  #serviceChartView .calendar-bar-stack {
    position: static !important;
    grid-column: 2 !important;
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
  }

  #productionChartView .calendar-date-entry,
  #productionChartView .calendar-date-entry-more,
  #serviceChartView .calendar-date-entry,
  #serviceChartView .calendar-date-entry-more {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #productionChartView .calendar-span-bar,
  #productionChartView .production-calendar-grid .calendar-span-bar,
  #serviceChartView .calendar-span-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 30px !important;
    padding: 6px 8px !important;
    border-left-width: 4px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  #productionChartView .calendar-span-bar small,
  #productionChartView .production-calendar-grid .calendar-span-bar small,
  #serviceChartView .calendar-span-bar small {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(16, 42, 52, 0.72) !important;
    font-size: 0.62rem !important;
  }

  #serviceChartView .calendar-grid.is-empty-service-calendar {
    display: none !important;
  }

  #serviceChartView .service-calendar-empty-state {
    display: grid !important;
    gap: 6px !important;
    min-height: 132px !important;
    align-content: center !important;
    padding: 18px !important;
    border: 1px solid rgba(136, 182, 194, 0.68) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(90deg, rgba(21, 156, 165, 0.04) 1px, transparent 1px),
      linear-gradient(180deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 250, 0.98)) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
    color: var(--stronghold-ink) !important;
    box-shadow: 0 8px 20px rgba(16, 42, 52, 0.07) !important;
  }

  #serviceChartView .service-calendar-empty-state strong {
    font-size: 1rem !important;
  }

  #serviceChartView .service-calendar-empty-state span {
    color: var(--stronghold-muted) !important;
    line-height: 1.35 !important;
  }
}

/* Project workflow polish: completed, current, and selected states are now distinct. */
#projectDetail .progress-track {
  grid-template-columns: repeat(auto-fit, minmax(136px, 176px)) !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 10px !important;
  max-width: 1180px !important;
}

body .app-shell #projectDetail .progress-step {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 66px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(136, 182, 194, 0.74) !important;
  border-left: 4px solid rgba(96, 118, 130, 0.38) !important;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f2f8fa 100%) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  color: var(--stronghold-ink) !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow: 0 7px 16px rgba(16, 42, 52, 0.07) !important;
  transform: none !important;
}

#projectDetail .progress-step-title {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.08;
}

#projectDetail .progress-step-state {
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid rgba(96, 118, 130, 0.22);
  border-radius: 7px;
  color: var(--stronghold-muted);
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body .app-shell #projectDetail .progress-step.active-step:not(.done) {
  border-color: rgba(136, 182, 194, 0.88) !important;
  border-left-color: var(--stronghold-teal) !important;
  background:
    linear-gradient(90deg, rgba(21, 156, 165, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #eef9fb 100%) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  color: var(--stronghold-ink) !important;
  box-shadow: 0 8px 18px rgba(16, 42, 52, 0.08) !important;
}

#projectDetail .progress-step.active-step:not(.done) .progress-step-state {
  border-color: rgba(21, 156, 165, 0.28);
  color: var(--stronghold-teal-dark);
  background: rgba(21, 156, 165, 0.09);
}

body .app-shell #projectDetail .progress-step.done {
  border-color: rgba(42, 168, 74, 0.42) !important;
  border-left-color: var(--stronghold-green) !important;
  background:
    linear-gradient(90deg, rgba(42, 168, 74, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(42, 168, 74, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #f7fff8 0%, #e4f7e8 100%) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  color: #123929 !important;
  box-shadow: 0 8px 18px rgba(42, 168, 74, 0.12) !important;
}

#projectDetail .progress-step.done .progress-step-state {
  border-color: rgba(42, 168, 74, 0.28);
  color: #17632d;
  background: rgba(42, 168, 74, 0.11);
}

body .app-shell #projectDetail .progress-step.viewed-step {
  border-color: rgba(216, 164, 62, 0.82) !important;
  outline: 3px solid rgba(216, 164, 62, 0.38) !important;
  outline-offset: 2px !important;
  box-shadow:
    0 12px 24px rgba(16, 42, 52, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 18px rgba(216, 164, 62, 0.22) !important;
  transform: translateY(-1px) !important;
}

#projectDetail .progress-step.viewed-step .progress-step-state {
  border-color: rgba(216, 164, 62, 0.38);
  color: #8b641a;
  background: rgba(255, 246, 222, 0.92);
}

#projectDetail .project-detail-summary-card {
  position: relative;
  border-top: 3px solid rgba(21, 156, 165, 0.48) !important;
}

#projectDetail .project-detail-summary-card::before,
#projectDetail .project-phase-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 86px;
  height: 3px;
  border-radius: 8px 0 8px 0;
  background: linear-gradient(90deg, var(--stronghold-teal), var(--stronghold-gold));
  pointer-events: none;
}

#projectDetail .project-phase-card {
  position: relative;
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  justify-self: start !important;
  padding: 0 !important;
  overflow: hidden;
  border-left: 5px solid rgba(216, 164, 62, 0.78) !important;
}

#projectDetail .project-phase-card-head {
  display: grid;
  gap: 2px;
  padding: 13px 15px 11px !important;
  border-bottom: 1px solid rgba(136, 182, 194, 0.52);
  background:
    linear-gradient(90deg, rgba(216, 164, 62, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 156, 165, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 250, 0.98));
  background-size: 22px 22px, 22px 22px, auto;
}

#projectDetail .project-phase-card-head span {
  color: var(--stronghold-gold);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#projectDetail .project-phase-card-head h3 {
  margin: 0;
  color: var(--stronghold-ink) !important;
  font-size: 1.1rem;
}

#projectDetail .project-phase-card > .proposal-phase-panel,
#projectDetail .project-phase-card > .estimate-completed-panel {
  padding: 12px !important;
}

#projectDetail .project-phase-card .proposal-phase-head {
  width: fit-content;
  min-width: min(100%, 560px);
  max-width: min(100%, 860px);
}

#projectDetail .project-phase-card .proposal-upload-grid,
#projectDetail .project-phase-card .proposal-file-summary {
  max-width: 100%;
}

@media (min-width: 901px) {
  .workspace > .view.active > .section-heading {
    width: fit-content !important;
    min-width: min(100%, 620px) !important;
    max-width: min(100%, 980px) !important;
  }

  #projectDetail > .section-heading {
    width: min(100%, 980px) !important;
  }

  #projectDetail .project-phase-card .proposal-upload-lane:only-child,
  #projectDetail .project-phase-card .proposal-file-summary:has(details:only-child) {
    max-width: 520px;
  }
}

@media (max-width: 700px) {
  #projectDetail .progress-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .app-shell #projectDetail .progress-step {
    min-height: 60px !important;
    padding: 8px !important;
  }

  #projectDetail .progress-step-title {
    font-size: 0.7rem;
  }

  #projectDetail .project-phase-card .proposal-phase-head {
    width: 100%;
    min-width: 0;
  }
}

/* Final header collision guard: the compact text links stay in one clean desktop row. */
body:not(.login-active) .app-header .login-card {
  overflow: visible !important;
}

body:not(.login-active) .app-header .header-links {
  flex-wrap: nowrap !important;
  align-content: center !important;
  justify-content: flex-start !important;
  row-gap: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body:not(.login-active) .app-header .header-links .top-link:not(.header-chart-link) {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 7px !important;
  font-size: 0.62rem !important;
}

@media (min-width: 901px) {
  body:not(.login-active) .app-header .login-card {
    flex-basis: 450px !important;
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
  }

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

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

/* Stronghold field ledger theme reset.
   This block intentionally comes last so the older glass/grid experiments cannot
   bleed through the current visual direction. */
:root {
  --ledger-bg: #eef5f2;
  --ledger-bg-2: #f8fbfa;
  --ledger-surface: #ffffff;
  --ledger-surface-soft: #f4f8f6;
  --ledger-ink: #182d29;
  --ledger-muted: #61756f;
  --ledger-line: #c3d4ce;
  --ledger-line-strong: #8eb0a6;
  --ledger-pine: #163f37;
  --ledger-pine-2: #0f312b;
  --ledger-teal: #0f8b8d;
  --ledger-teal-soft: #dff3f2;
  --ledger-brass: #ba8a25;
  --ledger-blue: #2f6db3;
  --ledger-red: #c94a42;
  --ledger-shadow: 0 16px 34px rgba(24, 45, 41, 0.11);
  --ledger-shadow-soft: 0 8px 18px rgba(24, 45, 41, 0.08);
}

body:not(.login-active) {
  color: var(--ledger-ink) !important;
  background:
    linear-gradient(135deg, rgba(15, 139, 141, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, var(--ledger-bg-2) 0%, var(--ledger-bg) 100%) !important;
  background-size: 18px 18px, auto !important;
}

body:not(.login-active) .app-header {
  border-bottom: 4px solid var(--ledger-pine) !important;
  background:
    linear-gradient(90deg, rgba(22, 63, 55, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(22, 63, 55, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f4faf8 100%) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  box-shadow: 0 10px 28px rgba(24, 45, 41, 0.12) !important;
}

body:not(.login-active) .app-header .header-links .top-link:not(.header-chart-link) {
  color: var(--ledger-pine) !important;
  border: 1px solid rgba(22, 63, 55, 0.18) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body:not(.login-active) .app-header .header-links .top-link:not(.header-chart-link):hover,
body:not(.login-active) .app-header .header-links .top-link:not(.header-chart-link).active {
  color: #ffffff !important;
  border-color: var(--ledger-pine) !important;
  background: var(--ledger-pine) !important;
}

body:not(.login-active) .app-header .header-chart-link {
  --header-glass-accent: var(--header-button-accent, var(--ledger-teal));
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(22, 63, 55, 0.2) !important;
  border-left: 6px solid var(--header-glass-accent) !important;
  border-radius: 7px !important;
  color: var(--ledger-ink) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef6f3 100%) !important;
  box-shadow: 0 9px 18px rgba(24, 45, 41, 0.12) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

body:not(.login-active) .app-header .header-chart-link::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 10px 6px 44px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--header-glass-accent) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

body:not(.login-active) .app-header .header-chart-link::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header .header-chart-link:hover,
body:not(.login-active) .app-header .header-chart-link.active {
  color: var(--ledger-ink) !important;
  border-color: rgba(22, 63, 55, 0.34) !important;
  border-left-color: var(--header-glass-accent) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e6f3ef 100%) !important;
  box-shadow: 0 13px 24px rgba(24, 45, 41, 0.16) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header .header-nav-icon {
  width: 31px !important;
  height: 31px !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--header-glass-accent) !important;
  box-shadow: none !important;
}

body:not(.login-active) .app-header .header-nav-icon::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header .header-nav-text {
  color: var(--ledger-ink) !important;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.67rem !important;
  letter-spacing: 0.035em !important;
  text-shadow: none !important;
}

body:not(.login-active) .app-header .header-chart-divider {
  background: linear-gradient(180deg, transparent 0%, rgba(22, 63, 55, 0.32) 50%, transparent 100%) !important;
  box-shadow: none !important;
}

body:not(.login-active) .app-header #headerHomeButton,
body:not(.login-active) .app-header #headerNotificationsButton,
body:not(.login-active) .app-header #headerChatButton,
body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  color: var(--ledger-pine) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 7px !important;
}

body:not(.login-active) .app-header #headerHomeButton:hover,
body:not(.login-active) .app-header #headerNotificationsButton:hover,
body:not(.login-active) .app-header #headerChatButton:hover,
body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:hover,
body:not(.login-active) .app-header #headerHomeButton.active,
body:not(.login-active) .app-header #headerChatButton.is-open {
  color: var(--ledger-teal) !important;
  background: rgba(15, 139, 141, 0.08) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header #headerNotificationsButton svg,
body:not(.login-active) .app-header #headerChatButton svg,
body:not(.login-active) .app-header #headerHomeButton svg,
body:not(.login-active) .app-header .header-user-icon svg {
  filter: none !important;
}

body:not(.login-active) .app-header #headerNotificationsButton.has-alert,
body:not(.login-active) .app-header #headerChatButton.has-alert {
  color: var(--ledger-red) !important;
}

body:not(.login-active) .app-header .header-icon-badge {
  top: 5px !important;
  right: -1px !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: var(--ledger-red) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
  min-height: 34px !important;
  height: 34px !important;
  color: var(--ledger-pine) !important;
  border: 1px solid rgba(30, 136, 83, 0.28) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f6ef 100%) !important;
  box-shadow: 0 7px 16px rgba(30, 136, 83, 0.14) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator::before {
  background: #31b86a !important;
  box-shadow: 0 0 10px rgba(49, 184, 106, 0.7) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
  color: #ffffff !important;
  border-color: var(--ledger-pine) !important;
  background: var(--ledger-pine) !important;
}

.sidebar {
  color: #f4fbf8 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, var(--ledger-pine) 0%, var(--ledger-pine-2) 100%) !important;
}

.sidebar .nav-link,
.sidebar .production-nav {
  color: #e7f2ee !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.sidebar .production-nav:hover,
.sidebar .production-nav.active {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(90deg, var(--ledger-teal) 0%, rgba(15, 139, 141, 0.54) 100%) !important;
}

.workspace > .view.active > .section-heading,
.workspace > .view.active > .toolbar,
.record-card,
.kpi-card,
.contact-card,
.employee-card,
.crew-summary-card,
.property-folder-card,
.section-link-card,
.file-library-tree-card,
.file-library-summary-card,
.project-details-card,
.production-calendar-sidecard,
.production-calendar-main,
.production-board-column,
.dialog-panel,
fieldset,
.form-card,
.dashboard-card,
.storage-stats-card,
.live-feed-page-card {
  color: var(--ledger-ink) !important;
  border: 1px solid var(--ledger-line) !important;
  border-radius: 7px !important;
  background: var(--ledger-surface) !important;
  background-image: none !important;
  box-shadow: var(--ledger-shadow-soft) !important;
}

.workspace > .view.active > .section-heading {
  border-left: 7px solid var(--ledger-teal) !important;
  background: linear-gradient(90deg, #ffffff 0%, #f2faf7 100%) !important;
}

.section-heading h2,
.record-card h3,
.project-details-card h3,
.production-calendar-toolbar h3,
.production-board-toolbar h3,
.home-hero-title,
.home-focus-card h3 {
  color: var(--ledger-ink) !important;
  text-shadow: none !important;
}

.eyebrow,
.section-heading .eyebrow,
.kpi-label,
.record-card .eyebrow,
.home-announcement-label {
  color: var(--ledger-teal) !important;
  letter-spacing: 0.08em !important;
}

.record-card p,
.record-card small,
.helper,
.empty,
.muted,
.home-command-copy,
.home-hero-card p,
.home-metric-card small {
  color: var(--ledger-muted) !important;
}

body .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(.close-x):not(.header-icon-button):not(.header-chart-link):not(.sold-financial-project-link):not(.section-report-page-tab),
body .app-shell .button-link,
body .app-shell .primary-action,
body .app-shell .tab,
body .app-shell .ghost,
body 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(.close-x) {
  color: var(--ledger-pine) !important;
  border: 1px solid rgba(22, 63, 55, 0.28) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef6f3 100%) !important;
  box-shadow: 0 6px 13px rgba(24, 45, 41, 0.08) !important;
  text-shadow: none !important;
}

body .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(.close-x):not(.header-icon-button):not(.header-chart-link):not(.sold-financial-project-link):not(.section-report-page-tab):hover,
body .app-shell .button-link:hover,
body .app-shell .primary-action:hover,
body .app-shell .tab:hover,
body .app-shell .ghost:hover,
body 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(.close-x):hover {
  color: #ffffff !important;
  border-color: var(--ledger-pine) !important;
  background: var(--ledger-pine) !important;
  transform: translateY(-1px) !important;
}

body .app-shell button.danger,
body .app-shell .delete-btn,
body .app-shell .employee-delete-btn,
body .app-shell .section-delete-btn,
body .app-shell .file-media-delete-btn,
body dialog button.danger {
  color: #ffffff !important;
  border-color: #a8322d !important;
  background: linear-gradient(180deg, #da5a51 0%, var(--ledger-red) 100%) !important;
}

input,
select,
textarea {
  color: var(--ledger-ink) !important;
  border-color: var(--ledger-line) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(24, 45, 41, 0.04) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ledger-teal) !important;
  box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.14) !important;
}

table th {
  color: #ffffff !important;
  background: var(--ledger-pine) !important;
}

table td {
  color: var(--ledger-ink) !important;
}

tbody tr:nth-child(even) td {
  background: #f7fbf9 !important;
}

.progress-step.active-step,
.project-detail-substep.active,
.project-wizard-pill.active,
.section-quick-nav-card.active {
  color: var(--ledger-ink) !important;
  border-color: var(--ledger-brass) !important;
  background: linear-gradient(180deg, #fff8e7 0%, #f8edcf 100%) !important;
  box-shadow: 0 8px 16px rgba(186, 138, 37, 0.14) !important;
}

.chat-launcher-panel {
  color: var(--ledger-ink) !important;
  border: 1px solid var(--ledger-line-strong) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 42px rgba(24, 45, 41, 0.22) !important;
}

.chat-launcher-head {
  color: #ffffff !important;
  background: var(--ledger-pine) !important;
}

.chat-launcher-tab {
  color: var(--ledger-pine) !important;
  border-color: var(--ledger-line) !important;
  background: #f4f8f6 !important;
}

.chat-launcher-tab.active {
  color: #ffffff !important;
  border-color: var(--ledger-teal) !important;
  background: var(--ledger-teal) !important;
}

.chat-launcher-item {
  color: var(--ledger-ink) !important;
  border: 1px solid var(--ledger-line) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.chat-launcher-item:hover {
  border-color: var(--ledger-teal) !important;
  background: var(--ledger-teal-soft) !important;
}

.chat-launcher-root .chat-launcher-panel {
  width: min(390px, calc(100vw - 24px)) !important;
  max-height: min(78vh, 620px) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.chat-launcher-root .chat-launcher-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  min-height: 58px !important;
}

.chat-launcher-root .chat-launcher-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-launcher-root .chat-launcher-head strong {
  color: #fff !important;
  font-size: 0.98rem !important;
  line-height: 1.1 !important;
}

.chat-launcher-root .chat-launcher-head small {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.chat-launcher-root .chat-launcher-close {
  position: static !important;
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.chat-launcher-root .chat-launcher-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 8px !important;
  border-bottom: 1px solid var(--ledger-line) !important;
  background: #f7faf9 !important;
}

.chat-launcher-root .chat-launcher-tab {
  min-height: 36px !important;
  border-radius: 7px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ledger-muted) !important;
}

.chat-launcher-root .chat-launcher-tab.active {
  color: #fff !important;
  background: var(--ledger-teal) !important;
}

.chat-launcher-root .chat-launcher-body {
  padding: 10px !important;
  background: #fff !important;
}

.chat-launcher-root .chat-launcher-list {
  gap: 6px !important;
  max-height: min(56vh, 430px) !important;
  padding-right: 3px !important;
}

.chat-launcher-root .chat-launcher-item {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}

.chat-person-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #fff;
  background: var(--ledger-pine);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.role-avatar {
  background: #607d8b;
}

.chat-person-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-person-copy strong,
.chat-conversation-head strong {
  min-width: 0;
  color: var(--ledger-ink) !important;
  font-size: 0.88rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-person-copy small {
  min-width: 0;
  color: var(--ledger-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-conversation-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.chat-person-badge,
.chat-conversation-unread {
  justify-self: end;
}

.chat-online-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #24a148;
  box-shadow: 0 0 0 3px rgba(36, 161, 72, 0.14);
}

.chat-launcher-root .chat-thread-panel {
  padding: 10px !important;
  gap: 8px !important;
}

.chat-launcher-root .chat-launcher-subhead {
  padding: 0 !important;
}

.chat-launcher-root .chat-thread-messages {
  min-height: 260px !important;
  max-height: min(50vh, 390px) !important;
  padding: 8px !important;
  border: 1px solid var(--ledger-line) !important;
  border-radius: 8px !important;
  background: #f7faf9 !important;
}

.chat-launcher-root .chat-thread-message {
  max-width: min(84%, 280px) !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

.chat-launcher-root .chat-thread-message.outgoing {
  background: #dff3ef !important;
  border-color: #b7ddd5 !important;
}

.chat-launcher-root .chat-thread-compose {
  gap: 6px !important;
}

.chat-launcher-root .chat-thread-compose textarea {
  min-height: 58px !important;
  max-height: 120px !important;
}

.chat-launcher-root .chat-thread-actions {
  align-items: center !important;
}

.chat-launcher-root .chat-launcher-panel {
  background: #ffffff !important;
}

.chat-launcher-root .chat-launcher-head {
  background: #2f3f48 !important;
}

.chat-launcher-root .chat-launcher-tabs {
  background: #f6f7f8 !important;
}

.chat-launcher-root .chat-launcher-item {
  border-color: #d8dee3 !important;
  background: #ffffff !important;
}

.chat-launcher-root .chat-launcher-item:hover {
  border-color: #b7c2c9 !important;
  background: #f4f6f7 !important;
}

.chat-person-avatar {
  background: #6c7880 !important;
}

.role-avatar {
  background: #7a8388 !important;
}

.chat-launcher-root .chat-thread-messages {
  background: #f7f8f9 !important;
}

.chat-launcher-root .chat-thread-message.outgoing {
  background: #eef1f3 !important;
  border-color: #d6dde2 !important;
}

.chat-launcher-root .chat-thread-message.incoming {
  background: #ffffff !important;
  border-color: #d8dee3 !important;
}

@media (max-width: 640px) {
  .chat-launcher-root {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
  }

  .chat-launcher-root .chat-launcher-panel {
    width: 100% !important;
    max-height: min(82vh, 680px) !important;
  }
}

@media (max-width: 900px) {
  body:not(.login-active) .app-header {
    border-bottom-width: 3px !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(22, 63, 55, 0.12) !important;
    border-radius: 8px !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex-basis: 146px !important;
    width: 146px !important;
    min-width: 146px !important;
  }
}

/* Server conflicts page: decision-first conflict review. */
#syncConflictsView {
  display: none;
  gap: 14px;
}

#syncConflictsView.active {
  display: grid;
}

#syncConflictList {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
  justify-items: stretch;
  max-width: 1120px;
  width: 100%;
  overflow: visible;
}

.sync-conflict-overview {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(320px, 1.3fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--ledger-line) !important;
  border-left: 7px solid var(--ledger-brass) !important;
  border-radius: 7px;
  padding: 14px;
  color: var(--ledger-ink);
  background: linear-gradient(90deg, #ffffff 0%, #fff8e8 100%);
  box-shadow: var(--ledger-shadow-soft);
}

.sync-conflict-overview h3 {
  margin: 2px 0 4px;
  color: var(--ledger-ink);
  font-size: 1.35rem;
}

.sync-conflict-overview span {
  color: var(--ledger-muted);
  font-size: 0.84rem;
}

.sync-conflict-overview > button {
  align-self: center;
  justify-self: end;
  min-height: 32px;
}

.sync-conflict-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.sync-conflict-guide span {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(22, 63, 55, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ledger-ink);
  font-size: 0.78rem;
}

.sync-conflict-guide b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--ledger-brass);
}

.sync-conflict-card {
  width: min(100%, 1080px) !important;
  display: grid;
  gap: 12px;
  padding: 16px !important;
  border-left: 7px solid var(--ledger-red) !important;
}

.sync-conflict-card:has(.status-pill.success) {
  border-left-color: #2f9f63 !important;
}

.sync-conflict-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.sync-conflict-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  color: #fff;
  background: var(--ledger-pine);
  font-weight: 900;
  box-shadow: 0 7px 15px rgba(24, 45, 41, 0.16);
}

.sync-conflict-title {
  display: grid;
  gap: 3px;
}

.sync-conflict-title h3 {
  margin: 0;
  color: var(--ledger-ink);
  font-size: 1.08rem;
}

.sync-conflict-title p {
  color: var(--ledger-muted);
  line-height: 1.35;
}

.sync-conflict-explainer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(186, 138, 37, 0.28);
  border-radius: 7px;
  background: #fffaf0;
}

.sync-conflict-explainer strong {
  color: var(--ledger-brass);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.sync-conflict-explainer span,
.sync-conflict-explainer small {
  color: var(--ledger-muted);
  line-height: 1.35;
}

.sync-conflict-detail-list {
  display: grid;
  gap: 7px;
}

.sync-conflict-detail-item {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(136, 182, 194, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.sync-conflict-detail-item strong {
  color: var(--ledger-ink);
  font-size: 0.84rem;
}

.sync-conflict-delta-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.sync-conflict-delta {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--ledger-line);
  border-radius: 7px;
  background: #f8fbfa;
}

.sync-conflict-delta small {
  color: var(--ledger-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.62rem;
}

.sync-conflict-delta b {
  color: var(--ledger-ink);
  font-size: 0.9rem;
}

.sync-conflict-delta.positive {
  border-color: rgba(47, 159, 99, 0.34);
  background: #effaf4;
}

.sync-conflict-delta.negative {
  border-color: rgba(201, 74, 66, 0.34);
  background: #fff3f2;
}

.sync-conflict-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.sync-conflict-summary {
  display: grid;
  gap: 11px;
  min-height: 180px;
  border: 1px solid var(--ledger-line) !important;
  border-radius: 7px !important;
  padding: 12px !important;
  background: #ffffff !important;
}

.sync-conflict-summary-server {
  border-top: 5px solid var(--ledger-blue) !important;
}

.sync-conflict-summary-offline {
  border-top: 5px solid var(--ledger-brass) !important;
}

.sync-conflict-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sync-conflict-summary-title span {
  color: var(--ledger-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-conflict-summary-title strong {
  color: var(--ledger-ink);
  font-size: 0.86rem;
}

.sync-conflict-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.sync-conflict-stat {
  display: grid;
  gap: 2px;
  place-items: center;
  min-height: 54px;
  border: 1px solid rgba(22, 63, 55, 0.12);
  border-radius: 7px;
  background: var(--ledger-surface-soft);
}

.sync-conflict-stat b {
  color: var(--ledger-pine);
  font-size: 1.05rem;
}

.sync-conflict-stat small {
  color: var(--ledger-muted);
  font-size: 0.62rem;
}

.sync-conflict-latest {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f7fbf9;
}

.sync-conflict-latest span {
  color: var(--ledger-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sync-conflict-latest strong {
  color: var(--ledger-ink);
}

.sync-conflict-latest small {
  color: var(--ledger-muted);
  line-height: 1.35;
}

.sync-conflict-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sync-conflict-timeline span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 3px solid var(--ledger-teal);
  background: #f7fbf9;
}

.sync-conflict-timeline small {
  color: var(--ledger-muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sync-conflict-timeline strong {
  color: var(--ledger-ink);
  font-size: 0.82rem;
}

.sync-conflict-action-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: center;
  padding-top: 2px;
}

.sync-conflict-action-copy {
  display: grid;
  gap: 3px;
}

.sync-conflict-action-copy strong {
  color: var(--ledger-ink);
}

.sync-conflict-action-copy span {
  color: var(--ledger-muted);
  line-height: 1.35;
}

.sync-conflict-actions {
  justify-content: end;
  gap: 8px;
}

.sync-conflict-empty {
  max-width: 760px;
  padding: 20px;
  border: 1px dashed var(--ledger-line-strong);
  border-radius: 7px;
  background: #ffffff;
}

.sync-conflict-resolved-title {
  margin-top: 4px;
  color: var(--ledger-pine);
}

@media (max-width: 860px) {
  .sync-conflict-overview,
  .sync-conflict-action-panel,
  .sync-conflict-explainer {
    grid-template-columns: 1fr;
  }

  .sync-conflict-guide,
  .sync-conflict-delta-strip,
  .sync-conflict-columns,
  .sync-conflict-timeline {
    grid-template-columns: 1fr !important;
  }

  .sync-conflict-card-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .sync-conflict-card-head .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .sync-conflict-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sync-conflict-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .sync-conflict-actions > * {
    width: 100%;
  }
}

/* Employee directory: organized cards with searchable roster controls. */
#employeesView {
  --employee-card-width: 318px;
}

.employee-directory-panel {
  display: grid;
  gap: 10px;
  width: min(100%, 1180px);
  margin: 0 0 14px;
}

.employee-filter-bar {
  display: grid !important;
  grid-template-columns: max-content minmax(250px, 360px) max-content;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  width: 100%;
}

.employee-directory-search {
  display: grid;
  gap: 5px;
  color: var(--ledger-ink);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employee-directory-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(17, 93, 89, 0.28);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--ledger-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  text-transform: none;
  letter-spacing: 0;
}

.employee-directory-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-directory-summary span {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(17, 93, 89, 0.16);
  border-radius: 7px;
  padding: 4px 9px;
  color: var(--ledger-ink);
  background: rgba(255, 255, 255, 0.78);
}

.employee-directory-summary b {
  font-size: 0.92rem;
}

.employee-directory-summary small {
  color: var(--ledger-muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employee-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--employee-card-width), var(--employee-card-width))) !important;
  gap: 14px !important;
  align-items: stretch;
}

.employee-card {
  position: relative;
  width: var(--employee-card-width) !important;
  min-width: var(--employee-card-width) !important;
  height: auto !important;
  min-height: 350px !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px !important;
  align-content: stretch !important;
  padding: 13px !important;
  overflow: hidden !important;
  cursor: pointer;
}

.employee-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ledger-teal), rgba(186, 138, 37, 0.74));
}

.employee-card-header {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.employee-card-top {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

.employee-card-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  border: 1px solid rgba(17, 93, 89, 0.22);
  border-radius: 7px;
  background: #f7fbfa;
}

.employee-card-avatar .employee-avatar,
.employee-card-avatar .employee-avatar-fallback {
  border-radius: 6px !important;
}

.employee-card-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.employee-card-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.employee-card h3 {
  margin: 0 !important;
  color: var(--ledger-ink);
  font-size: 1.04rem;
  line-height: 1.08;
}

.employee-status-chip {
  min-width: 54px;
  border: 1px solid rgba(17, 93, 89, 0.22);
  border-radius: 999px;
  padding: 3px 6px;
  color: #115d59;
  background: #eaf8f5;
  font-size: 0.6rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.employee-status-chip.prior {
  color: #7a4a0b;
  background: #fff2d8;
  border-color: rgba(186, 138, 37, 0.42);
}

.employee-card-stats,
.employee-card-stats:first-of-type {
  display: block;
  transform: none !important;
  margin: 0 !important;
  color: var(--ledger-muted);
  font-size: 0.64rem;
  line-height: 1.22;
}

.employee-card-roles {
  transform: none !important;
  gap: 4px !important;
  padding: 0 !important;
}

.employee-card-roles .pill {
  border-color: rgba(15, 139, 141, 0.24);
  color: #12514f;
  background: #eaf8fa;
  font-size: 0.56rem !important;
  line-height: 1.1 !important;
  padding: 3px 6px !important;
}

.employee-card-contact,
.employee-card-employment {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.employee-card-contact span,
.employee-card-employment span {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  border-bottom: 1px solid rgba(17, 93, 89, 0.08);
  padding-bottom: 4px;
}

.employee-card-contact small,
.employee-card-employment small {
  color: var(--ledger-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employee-card-contact strong,
.employee-card-employment strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ledger-ink);
  font-size: 0.76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-card .meta {
  margin: 0 !important;
}

.employee-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
  align-self: end;
  margin-top: auto !important;
}

.employee-card-actions-left,
.employee-card-actions-right {
  display: contents !important;
}

.employee-card button.small,
.employee-card [data-message-employee],
.employee-card .employee-note-btn,
.employee-eval-btn,
.employee-delete-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
}

.employee-eval-btn {
  color: #fff !important;
  border-color: #2f6fd8 !important;
  background: linear-gradient(180deg, #4d91ff 0%, #2f6fd8 100%) !important;
}

.employee-delete-btn {
  color: #fff !important;
  border-color: #bd3f39 !important;
  background: linear-gradient(180deg, #cf5952 0%, #a9322e 100%) !important;
}

.employee-empty-state {
  grid-column: 1 / -1;
  width: min(100%, 720px);
}

@media (max-width: 980px) {
  .employee-filter-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #employeeTypeTabs {
    margin-left: 0 !important;
  }

  .employee-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  }

  .employee-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  #employeesView {
    --employee-card-width: 100%;
  }

  .employee-card-header {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .employee-card-avatar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  .employee-card-actions {
    grid-template-columns: 1fr;
  }
}

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

body:not(.login-active) .app-shell .deficiency-photo-delete,
html body:not(.login-active) .app-shell .deficiency-photo-delete {
  position: absolute !important;
  left: 6px !important;
  bottom: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Employee cards: compact by default, official detail sections on expansion. */
#employeesView {
  --employee-card-width: 248px;
}

.employee-card {
  min-height: 96px !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  padding: 12px !important;
}

.employee-card.is-expanded {
  grid-column: span 2;
  width: calc((var(--employee-card-width) * 2) + 14px) !important;
  min-height: 0 !important;
  gap: 12px !important;
  padding: 14px !important;
}

.employee-card-header {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
}

.employee-card-avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
}

.employee-card-avatar .employee-avatar,
.employee-card-avatar .employee-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  will-change: object-position, transform;
}

.employee-card h3 {
  font-size: 0.98rem !important;
}

.employee-card-job-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #4b6172;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-card-expanded {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.employee-card.is-expanded .employee-card-contact,
.employee-card.is-expanded .employee-card-employment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-card.is-expanded .employee-card-contact span,
.employee-card.is-expanded .employee-card-employment span {
  grid-template-columns: 78px minmax(0, 1fr);
}

.employee-card-official-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.employee-official-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(17, 93, 89, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
}

.employee-review-panel {
  border-color: rgba(186, 138, 37, 0.32);
  background: linear-gradient(180deg, #ffffff 0%, #fff9ea 100%);
}

.employee-official-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(17, 93, 89, 0.12);
  padding-bottom: 7px;
}

.employee-official-panel-head strong {
  color: #17344b;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-official-panel-head small {
  color: #5d7285;
  font-size: 0.66rem;
  font-weight: 900;
}

.employee-official-list {
  display: grid;
  gap: 7px;
}

.employee-official-entry {
  display: grid;
  gap: 4px;
  border-left: 3px solid rgba(17, 93, 89, 0.45);
  padding-left: 8px;
}

.employee-review-panel .employee-official-entry {
  border-left-color: rgba(186, 138, 37, 0.72);
}

.employee-official-entry p {
  max-height: 3.9em;
  margin: 0;
  overflow: hidden;
  color: #17344b;
  font-size: 0.76rem;
  line-height: 1.3;
}

.employee-official-entry small {
  color: #667780;
  font-size: 0.63rem;
  font-weight: 800;
}

.employee-card.is-expanded .employee-card-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .employee-card.is-expanded {
    grid-column: span 1;
    width: 100% !important;
  }

  .employee-card-official-grid,
  .employee-card.is-expanded .employee-card-contact,
  .employee-card.is-expanded .employee-card-employment {
    grid-template-columns: 1fr;
  }

  .employee-card.is-expanded .employee-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Header workflow buttons: give labels enough room to fit cleanly. */
body:not(.login-active) .app-header .header-chart-link {
  flex-basis: 164px !important;
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  grid-template-columns: 35px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  padding: 8px 9px 9px 11px !important;
}

body:not(.login-active) .app-header .header-nav-text {
  max-width: 100px !important;
  font-size: 0.68rem !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body:not(.login-active) .app-header .header-chart-link::before {
  inset: auto 10px 7px 45px !important;
}

body:not(.login-active) .app-header .header-chart-divider {
  height: 66px !important;
}

@media (min-width: 901px) {
  body:not(.login-active) .app-header .login-card,
  body:not(.login-active) .app-header .search-box {
    flex-basis: 420px !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
  }

  body:not(.login-active) .app-header .header-links {
    flex: 0 0 420px !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    overflow: visible !important;
  }

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

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

@media (max-width: 900px) {
  body:not(.login-active) .app-header .header-chart-link {
    flex-basis: 164px !important;
    width: 164px !important;
    min-width: 164px !important;
    max-width: 164px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}

/* Header online presence: badge above icon cluster, with icons kept in place. */
body:not(.login-active) .app-header .header-utility-links {
  position: relative !important;
}

@media (min-width: 901px) {
  body:not(.login-active) .app-header .header-workflow-links {
    transform: translateY(20px) !important;
  }
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
  position: absolute !important;
  left: 50% !important;
  top: -20px !important;
  z-index: 5 !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  min-width: 118px !important;
  max-width: 220px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 10px 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0d4c36 !important;
  border: 1px solid rgba(34, 159, 88, 0.42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(231, 249, 238, 0.96) 100%) !important;
  box-shadow: 0 6px 14px rgba(17, 93, 70, 0.13), 0 0 15px rgba(45, 190, 102, 0.2) !important;
  font-size: 0.55rem !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator::before {
  left: 10px !important;
  width: 7px !important;
  height: 7px !important;
  background: #2ac263 !important;
  box-shadow: 0 0 10px rgba(42, 194, 99, 0.82) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
  color: #ffffff !important;
  border-color: rgba(22, 63, 55, 0.88) !important;
  background: var(--ledger-pine) !important;
  transform: translateX(-50%) !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator[hidden] {
  display: none !important;
}

@media (min-width: 901px) and (max-width: 1600px) {
  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    position: fixed !important;
    top: 0 !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    min-width: 104px !important;
    max-width: 120px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 8px 0 20px !important;
    font-size: 0.48rem !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
    transform: none !important;
  }
}

/* True final cascade lock: this stays last so older one-off adjustments cannot
   reintroduce grid paper, clipped logos, or unstable header sizing. */
body:not(.login-active),
body:not(.login-active)::before,
body:not(.login-active)::after {
  background-image:
    radial-gradient(circle at 12% 4%, rgba(15, 119, 120, 0.1), transparent 25%),
    radial-gradient(circle at 88% 0%, rgba(184, 132, 31, 0.07), transparent 24%),
    linear-gradient(180deg, var(--flow-bg-warm) 0%, var(--flow-bg) 100%) !important;
  background-size: auto !important;
}

body:not(.login-active)::before,
body:not(.login-active)::after {
  content: none !important;
  display: none !important;
}

body:not(.login-active) .app-header {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-height: 112px !important;
  height: 112px !important;
  max-height: 112px !important;
  padding: 9px 14px 9px 0 !important;
  overflow: visible !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 248, 0.96)) !important;
}

body:not(.login-active) .app-header .header-brand {
  flex: 0 0 214px !important;
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  margin: 0 !important;
}

body:not(.login-active) .app-header .header-logo-shell {
  position: absolute !important;
  left: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body:not(.login-active) .app-header .header-logo-shell a {
  width: 200px !important;
  height: 86px !important;
  justify-content: center !important;
}

body:not(.login-active) .app-header .header-logo {
  width: 196px !important;
  height: 82px !important;
  max-height: 82px !important;
  object-fit: contain !important;
}

body:not(.login-active) .app-header .login-card {
  flex: 0 0 398px !important;
  width: 398px !important;
  min-width: 398px !important;
  max-width: 398px !important;
}

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

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

body:not(.login-active) .app-header .header-chart-link {
  width: 134px !important;
  min-width: 134px !important;
  max-width: 134px !important;
  height: 58px !important;
  min-height: 58px !important;
}

body:not(.login-active) .app-header .header-nav-text {
  font-size: 0.66rem !important;
}

body:not(.login-active) .app-header .header-utility-links {
  margin-left: 6px !important;
  position: relative !important;
  z-index: 5 !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
  position: absolute !important;
  top: 62px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  padding: 0 9px 0 22px !important;
  font-size: 0.58rem !important;
}

body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
  transform: translateX(-50%) !important;
}

@media (min-width: 901px) and (max-width: 1420px) {
  body:not(.login-active) .app-header .header-brand {
    flex-basis: 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    height: 76px !important;
  }

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

  body:not(.login-active) .app-header .login-card {
    flex-basis: 328px !important;
    width: 328px !important;
    min-width: 328px !important;
    max-width: 328px !important;
  }

  body:not(.login-active) .app-header .search-box,
  body:not(.login-active) .app-header .search-box input {
    width: 328px !important;
    max-width: 328px !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 54px !important;
    min-height: 54px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 7px !important;
  }

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

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.56rem !important;
  }
}

@media (max-width: 900px) {
  body:not(.login-active) .app-header {
    display: grid !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 7px 8px !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 174px !important;
    min-width: 0 !important;
    max-width: 174px !important;
    height: 50px !important;
  }

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

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

/* Absolute final header layout lock: keep top links, workflow buttons, and icons
   in separate lanes after every older header override. */
@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    display: grid !important;
    grid-template-columns: 214px 398px minmax(850px, 1fr) max-content !important;
    grid-template-rows: 30px 72px !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: center !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 6px 14px 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body:not(.login-active) .app-header .header-brand {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  body:not(.login-active) .app-header .login-card {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    grid-template-rows: 28px 44px !important;
    align-content: center !important;
    row-gap: 8px !important;
    flex: 0 0 398px !important;
    width: 398px !important;
    min-width: 398px !important;
    max-width: 398px !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-links {
    grid-row: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  body:not(.login-active) .app-header .header-links .top-link:not(.header-chart-link) {
    flex: 0 0 auto !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body:not(.login-active) .app-header .search-box,
  body:not(.login-active) .app-header .search-box input {
    grid-row: 2 !important;
    width: 398px !important;
    min-width: 398px !important;
    max-width: 398px !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 160px !important;
    transform: none !important;
    min-width: max-content !important;
    max-width: none !important;
    position: relative !important;
    z-index: 10 !important;
  }

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

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 164px !important;
    width: 164px !important;
    min-width: 164px !important;
    max-width: 164px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-nav-text {
    max-width: none !important;
    min-width: 0 !important;
    font-size: 0.67rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
  }

  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: 0.62rem !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin-left: 12px !important;
    transform: none !important;
    min-width: max-content !important;
    position: relative !important;
    z-index: 12 !important;
  }
}

@media (min-width: 901px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    grid-template-columns: 190px 328px minmax(720px, 1fr) max-content !important;
    column-gap: 12px !important;
  }

  body:not(.login-active) .app-header .login-card,
  body:not(.login-active) .app-header .search-box,
  body:not(.login-active) .app-header .search-box input {
    width: 328px !important;
    min-width: 328px !important;
    max-width: 328px !important;
  }

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

  body:not(.login-active) .app-header .header-chart-link {
    flex-basis: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* Actual final header collision lock, after the duplicated legacy lock above. */
@media (min-width: 901px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    grid-template-columns: 190px 328px minmax(720px, 1fr) max-content !important;
    column-gap: 12px !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 0 !important;
    transform: translateY(6px) !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.62rem !important;
    line-height: 1.02 !important;
  }

  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: 0.56rem !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* Final logged-in surface cleanup.
   The login screen keeps its blueprint/grid artwork; CRM work pages do not. */
body:not(.login-active) {
  background:
    radial-gradient(circle at 14% 0%, rgba(21, 156, 165, 0.08), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(216, 164, 62, 0.055), transparent 24%),
    linear-gradient(180deg, #f8fbfb 0%, #eef5f4 100%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

body:not(.login-active)::before,
body:not(.login-active)::after,
body:not(.login-active) .app-header::before,
body:not(.login-active) .app-header::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

body:not(.login-active) .app-shell,
body:not(.login-active) .main-area,
body:not(.login-active) .workspace,
body:not(.login-active) .view,
body:not(.login-active) .content-shell {
  background-image: none !important;
  background-size: auto !important;
}

body:not(.login-active) .section-heading,
body:not(.login-active) .toolbar,
body:not(.login-active) .record-card,
body:not(.login-active) .kpi-card,
body:not(.login-active) .contact-card,
body:not(.login-active) .employee-card,
body:not(.login-active) .crew-summary-card,
body:not(.login-active) .property-folder-card,
body:not(.login-active) .section-link-card,
body:not(.login-active) .file-library-tree-card,
body:not(.login-active) .file-library-summary-card,
body:not(.login-active) .project-details-card,
body:not(.login-active) .production-calendar-sidecard,
body:not(.login-active) .production-calendar-main,
body:not(.login-active) .production-board-column,
body:not(.login-active) .dialog-panel,
body:not(.login-active) .form-card,
body:not(.login-active) .dashboard-card,
body:not(.login-active) .table-wrap,
body:not(.login-active) .home-base-hero,
body:not(.login-active) .home-role-panel,
body:not(.login-active) .home-role-metric,
body:not(.login-active) .home-role-project-card,
body:not(.login-active) .home-attention-item,
body:not(.login-active) .home-dashboard-panel,
body:not(.login-active) .project-phase-card,
body:not(.login-active) .project-phase-card-head,
body:not(.login-active) .sync-conflict-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 249, 0.96) 100%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

body:not(.login-active) #homeView.active,
body:not(.login-active) .home-base-dashboard {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(21, 156, 165, 0.08), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(216, 164, 62, 0.055), transparent 22%),
    linear-gradient(145deg, #f9fcfc 0%, #eef7f6 54%, #f8fbfb 100%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

#projectDialog #projectForm.dialog-panel {
  min-height: min(800px, calc(100vh - 28px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
}

#projectDialog .project-form-grid {
  height: 100%;
  min-height: min(560px, calc(100vh - 240px));
}

#projectDialog .project-form-grid > fieldset:not([hidden]) {
  min-height: min(560px, calc(100vh - 240px));
  padding: 16px;
  gap: 12px;
}

#projectDialog .project-form-grid > fieldset[data-project-step="2"]:not([hidden]) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#projectDialog .project-wizard-progress {
  gap: 10px;
  margin-bottom: 2px;
}

#projectDialog .project-wizard-pill {
  min-height: 32px;
  padding: 7px 14px;
}

#projectDialog .project-wizard-step-label {
  margin-bottom: 4px;
}

#projectDialog .project-details-grid {
  height: 100%;
  min-height: 0;
}

#projectDialog .project-detail-step-card {
  min-height: min(440px, calc(100vh - 350px));
  padding: 18px;
  gap: 12px;
}

#projectDialog .project-detail-step-card h3 {
  margin-bottom: 2px;
  font-size: 1.12rem;
}

#projectDialog .project-details-sections-card .project-section-detail-panel,
#projectDialog .project-details-file-card .project-file-selection-list {
  min-height: 270px;
}

#projectDialog .project-details-notes-card textarea {
  min-height: 132px;
}

#projectDialog fieldset[data-project-step="0"] .context-panel,
#projectDialog fieldset[data-project-step="1"] .context-panel {
  min-height: 300px;
}

#projectDialog menu {
  align-self: end;
}

body dialog .project-client-combo-list button,
body .app-shell .project-client-combo-list button {
  display: block !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  color: #17344b !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(80, 115, 140, 0.14) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  transform: none !important;
  backdrop-filter: none !important;
}

body dialog .project-client-combo-list button::before,
body dialog .project-client-combo-list button::after,
body .app-shell .project-client-combo-list button::before,
body .app-shell .project-client-combo-list button::after {
  display: none !important;
  content: none !important;
}

body dialog .project-client-combo-list button:hover,
body .app-shell .project-client-combo-list button:hover {
  color: #0c5056 !important;
  border-color: rgba(21, 156, 165, 0.18) !important;
  background: #eef8f8 !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    overflow-y: visible !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 248, 0.97)) !important;
    background-size: auto !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    overflow: visible !important;
    padding-bottom: 16px !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-width: 116px !important;
    max-width: 172px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 8px 0 20px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    z-index: 40 !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator::before {
    left: 8px !important;
    width: 6px !important;
    height: 6px !important;
  }

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator:hover {
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 901px) and (max-width: 1600px) {
  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 901px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    grid-template-columns: 190px 328px minmax(720px, 1fr) max-content !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    margin-left: 0 !important;
    transform: translateY(6px) !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.62rem !important;
    line-height: 1.02 !important;
  }

  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: 0.56rem !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px) {
  body:not(.login-active) .app-header {
    grid-template-columns: 190px 328px minmax(620px, 1fr) max-content !important;
  }

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

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

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 7px !important;
  }

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

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.54rem !important;
  }

  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: 0.49rem !important;
  }
}

body:not(.login-active) .home-finance-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(21, 156, 165, 0.2), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(216, 164, 62, 0.15), transparent 24%),
    linear-gradient(135deg, #07151d 0%, #102a34 58%, #071117 100%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 901px) {
  body:not(.login-active) #customersView .clients-page-layout {
    display: grid !important;
    grid-template-columns: minmax(680px, 760px) 1px minmax(460px, 800px) !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.login-active) #customersView .clients-list-shell,
  body:not(.login-active) #customersView #customerList .table-wrap {
    width: 760px !important;
    max-width: 760px !important;
    min-width: 0 !important;
  }

  body:not(.login-active) #customersView #customerList table {
    width: 760px !important;
    min-width: 760px !important;
  }

  body:not(.login-active) #customersView .clients-map-shell {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 800px !important;
    min-width: 0 !important;
  }

  body:not(.login-active) #customersView .clients-map-action-rail {
    width: 118px !important;
    min-width: 0 !important;
  }

  body:not(.login-active) #customersView .customer-list-map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(340px, 34vw, 450px) !important;
  }
}

/* Mobile command lock.
   Desktop pages use hand-tuned vertical offsets; phones need normal document flow
   so the next card appears right below the Back button instead of hundreds of
   pixels lower. Keep this at the true end of the file. */
@media (max-width: 900px) {
  html,
  body,
  body:not(.login-active),
  body:not(.login-active) .app-shell,
  body:not(.login-active) .workspace,
  body:not(.login-active) .workspace > .view.active {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:not(.login-active) .app-header {
    width: 100vw !important;
    min-height: 150px !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px 8px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(118px, 150px) minmax(0, 1fr) !important;
    grid-template-rows: 40px 38px 50px !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: center !important;
    overflow: visible !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 248, 0.98)) !important;
  }

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

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 148px !important;
    min-width: 0 !important;
    max-width: 148px !important;
    height: 40px !important;
    justify-content: flex-start !important;
    transform: none !important;
  }

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

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 220px !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

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

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

  body:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator {
    display: none !important;
  }

  body:not(.login-active) .app-header .login-card,
  body:not(.login-active) .app-header .search-box {
    grid-column: 1 / 3 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  body:not(.login-active) .app-header .search-box input {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
    align-self: stretch !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
  }

  body:not(.login-active) .app-header .header-chart-links,
  body:not(.login-active) .app-header .header-stage-links {
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px 8px !important;
  }

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

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.56rem !important;
    line-height: 1.02 !important;
    letter-spacing: 0.055em !important;
  }

  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    font-size: 0.5rem !important;
  }

  body:not(.login-active) .app-shell {
    display: block !important;
    min-height: auto !important;
  }

  body:not(.login-active) .sidebar {
    position: static !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(12, 63, 56, 0.22) !important;
    background: linear-gradient(180deg, #0d3f39 0%, #0a312c 100%) !important;
    background-image: linear-gradient(180deg, #0d3f39 0%, #0a312c 100%) !important;
    box-shadow: 0 10px 20px rgba(8, 31, 36, 0.14) !important;
  }

  body:not(.login-active) .sidebar-module-label,
  body:not(.login-active) .sidebar-spacer,
  body:not(.login-active) .sidebar-user,
  body:not(.login-active) .sidebar-notifications {
    display: none !important;
  }

  body:not(.login-active) .sidebar .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 124px !important;
    max-width: 172px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  body:not(.login-active) .sidebar > .nav-link[data-open-project-wizard] {
    min-width: 150px !important;
  }

  body:not(.login-active) .workspace {
    padding: 8px 8px 18px !important;
  }

  #homeView.active,
  #customersView.active,
  #recentPropertiesView.active,
  #fileLibraryView.active,
  #completedWorkView.active,
  #declinedBidsView.active,
  #deletedItemsView.active,
  #settingsView.active,
  #changeLogView.active,
  #crewsView.active,
  #productionChartView.active,
  #productionChartView.active:not(.production-board-view-active),
  #productionChartView.active.production-board-view-active,
  #serviceChartView.active,
  #pipelineView.active,
  #serviceOpportunitiesView.active,
  #inProgressView.active,
  #financialAnalysisView.active,
  #employeesView.active,
  #noteLogView.active,
  #serverConflictsView.active {
    margin-top: 0 !important;
    transform: none !important;
  }

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

  body:not(.login-active) .workspace-topbar {
    margin: 0 0 8px !important;
  }

  body:not(.login-active) .workspace > .view.active > .section-heading:first-child,
  body:not(.login-active) .workspace > .view.active > .toolbar:first-child,
  body:not(.login-active) .workspace > .view.active > :first-child > .section-heading:first-child,
  body:not(.login-active) .workspace > .view.active > :first-child > .toolbar:first-child {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  body:not(.login-active) .section-heading {
    min-height: 0 !important;
    padding: 11px 12px !important;
  }

  body:not(.login-active) .home-live-grid,
  body:not(.login-active) .home-primary-production-grid,
  body:not(.login-active) .home-focus-grid,
  body:not(.login-active) .home-metric-grid,
  body:not(.login-active) .home-role-metric-grid,
  body:not(.login-active) .home-role-layout,
  body:not(.login-active) .home-role-layout.executive,
  body:not(.login-active) .home-role-layout.field,
  body:not(.login-active) .home-finance-kpi-grid,
  body:not(.login-active) .home-finance-analysis-grid,
  body:not(.login-active) .home-finance-drill-grid,
  body:not(.login-active) .clients-page-layout,
  body:not(.login-active) .file-library-layout,
  body:not(.login-active) .crew-layout,
  body:not(.login-active) .property-layout,
  body:not(.login-active) .project-overview-layout,
  body:not(.login-active) .project-detail-layout,
  body:not(.login-active) .project-details-grid,
  body:not(.login-active) .project-phase-grid,
  body:not(.login-active) .employee-directory-layout,
  body:not(.login-active) .dashboard-grid,
  body:not(.login-active) .kpi-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body:not(.login-active) .clients-map-divider,
  body:not(.login-active) .file-library-divider,
  body:not(.login-active) .crew-layout-divider {
    display: none !important;
  }

  body:not(.login-active) #customersView .clients-map-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body:not(.login-active) #customersView .clients-map-action-rail {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  body:not(.login-active) .kpi-breakdown,
  body:not(.login-active) .kpi-breakdown.horizontal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  body:not(.login-active) .kpi-breakdown-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body:not(.login-active) .production-calendar-shell,
  body:not(.login-active) .service-calendar-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body:not(.login-active) .production-calendar-sidebar,
  body:not(.login-active) .service-calendar-sidebar {
    display: grid !important;
    order: 2 !important;
    gap: 10px !important;
  }

  body:not(.login-active) #productionChartView .production-calendar-sidebar,
  body:not(.login-active) #serviceChartView.service-calendar-view-active .service-calendar-sidebar {
    display: contents !important;
  }

  body:not(.login-active) #productionChartView .production-calendar-create,
  body:not(.login-active) #serviceChartView.service-calendar-view-active .service-calendar-create {
    order: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body:not(.login-active) .production-calendar-main,
  body:not(.login-active) .service-calendar-main {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body:not(.login-active) #productionChartView .production-calendar-sidecard,
  body:not(.login-active) #serviceChartView.service-calendar-view-active .production-calendar-sidecard {
    order: 2 !important;
  }

  body:not(.login-active) #productionChartView .production-executive-strip,
  body:not(.login-active) #serviceChartView .production-executive-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body:not(.login-active) #productionChartView .production-exec-card,
  body:not(.login-active) #serviceChartView .production-exec-card {
    min-height: 54px !important;
    padding: 7px !important;
  }

  body:not(.login-active) table,
  body:not(.login-active) .file-library-table-wrap table {
    min-width: 620px !important;
  }
}

@media (max-width: 430px) {
  body:not(.login-active) .app-header {
    grid-template-columns: minmax(112px, 140px) minmax(0, 1fr) !important;
    padding-inline: 7px !important;
  }

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

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

  body:not(.login-active) .app-header .header-chart-link {
    flex-basis: 126px !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
  }

  body:not(.login-active) .sidebar .nav-link {
    min-width: 118px !important;
  }
}

body:not(.login-active) dialog#projectDialog .project-client-combo-list button[data-project-customer-option],
body:not(.login-active) .app-shell dialog#projectDialog .project-client-combo-list button[data-project-customer-option] {
  display: block !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  color: #17344b !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(80, 115, 140, 0.14) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  transform: none !important;
  backdrop-filter: none !important;
}

body:not(.login-active) dialog#projectDialog .project-client-combo-list button[data-project-customer-option]::before,
body:not(.login-active) dialog#projectDialog .project-client-combo-list button[data-project-customer-option]::after,
body:not(.login-active) .app-shell dialog#projectDialog .project-client-combo-list button[data-project-customer-option]::before,
body:not(.login-active) .app-shell dialog#projectDialog .project-client-combo-list button[data-project-customer-option]::after {
  display: none !important;
  content: none !important;
}

/* Final desktop header proportional fit.
   Keep the original left-logo/search/workflow composition and scale the same
   pieces down together so window size changes do not rearrange the header. */
@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 300px;
    --header-search-width: 420px;
    --header-action-width: 150px;
    --header-action-height: 60px;
    --header-action-icon: 33px;
    --header-action-icon-svg: 20px;
    --header-action-font: 0.68rem;
    --header-admin-font: 0.66rem;
    --header-gap: 12px;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !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: 100vw !important;
    min-height: 104px !important;
    height: 104px !important;
    max-height: 104px !important;
    padding: 8px clamp(10px, 1.15vw, 22px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

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

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: var(--header-logo-width) !important;
    min-width: 0 !important;
    max-width: var(--header-logo-width) !important;
    height: 92px !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !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: 92px !important;
    max-height: 92px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body:not(.login-active) .app-header .login-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: var(--header-search-width) !important;
    min-width: 0 !important;
    max-width: var(--header-search-width) !important;
    display: grid !important;
    gap: 8px !important;
    transform: none !important;
  }

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

  body:not(.login-active) .app-header .header-links .top-link {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 7px !important;
    font-size: var(--header-admin-font) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

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

  body:not(.login-active) .app-header .search-box input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--header-gap) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !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 0 auto !important;
    align-items: center !important;
    gap: calc(var(--header-gap) * 0.72) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-chart-divider {
    display: block !important;
    flex: 0 0 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    height: calc(var(--header-action-height) + 2px) !important;
    align-self: center !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;
    padding: 8px 10px 8px 12px !important;
    grid-template-columns: var(--header-action-icon) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    overflow: hidden !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-icon svg {
    width: var(--header-action-icon-svg) !important;
    height: var(--header-action-icon-svg) !important;
  }

  body:not(.login-active) .app-header .header-nav-text,
  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    display: block !important;
    max-width: 100% !important;
    color: #f8fdff !important;
    font-size: var(--header-action-font) !important;
    line-height: 1.03 !important;
    letter-spacing: 0.055em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: calc(var(--header-gap) * 0.72) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    transform: none !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;
  }

  body:not(.login-active) .app-header .header-icon-wrap,
  body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  body:not(.login-active) .app-header .header-user-icon {
    width: 30px !important;
    height: 30px !important;
  }

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

  body:not(.login-active) .chat-launcher-root {
    top: 116px !important;
  }
}
/* Actual final command theme and header fit lock.
   This intentionally lives at EOF so older layout experiments cannot win. */
@media (min-width: 901px) {
  html 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: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

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

  html 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;
  }

  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;
    height: 88px !important;
    max-height: 88px !important;
  }

  html 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;
  }

  html body:not(.login-active) .app-header .header-links .top-link,
  html body:not(.login-active) .app-header .header-presence-indicator {
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    border: 1px solid 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(25, 72, 86, 0.96) 0%, rgba(9, 42, 55, 0.98) 100%) !important;
    color: #f8fcff !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;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.58) !important;
  }

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

  html body:not(.login-active) .app-header .header-chart-links,
  html 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;
    overflow: visible !important;
  }

  html 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;
  }

  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;
    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;
    color: #f8fcff !important;
    background:
      linear-gradient(116deg, rgba(255, 255, 255, 0) 0 64%, rgba(255, 255, 255, 0.13) 64.4% 73%, rgba(255, 255, 255, 0.02) 73.4% 100%),
      radial-gradient(circle at 22% 0%, rgba(41, 217, 229, 0.22), transparent 42%),
      linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--header-button-accent, #29d9e5) 62%, #ffffff 12%) !important;
    border-radius: 8px !important;
    box-shadow:
      inset 3px 0 0 var(--header-button-accent, #29d9e5),
      inset 0 1px 0 rgba(255, 255, 255, 0.23),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24),
      0 11px 18px rgba(7, 31, 44, 0.20),
      0 0 0 1px rgba(4, 22, 32, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.66) !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 {
    width: 100% !important;
    max-width: 100% !important;
    color: #f8fcff !important;
    font-size: var(--header-action-font) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.045em !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72) !important;
  }

  html 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;
  }

  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: 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) {
  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;
  }
}

@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: 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;
  }

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

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

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

/* Final command theme lock.
   Keep this after the legacy header sizing reset so the new glass-command
   treatment remains consistent across desktop, tablet, and mobile. */
html body:not(.login-active) {
  background:
    radial-gradient(circle at 82% 2%, rgba(41, 217, 229, 0.11), transparent 28%),
    radial-gradient(circle at 6% 22%, rgba(214, 169, 91, 0.08), transparent 26%),
    linear-gradient(135deg, #f8fbfc 0%, #edf5f7 46%, #f6fafb 100%) !important;
  background-size: auto !important;
}

html body:not(.login-active) .app-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 249, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(121, 171, 184, 0.48) !important;
  box-shadow: 0 14px 28px rgba(7, 31, 44, 0.13) !important;
}

html body:not(.login-active) .app-header .header-links .top-link,
html body:not(.login-active) .app-header .header-presence-indicator {
  min-height: 27px !important;
  height: 27px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(21, 156, 165, 0.46) !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(25, 72, 86, 0.96) 0%, rgba(9, 42, 55, 0.98) 100%) !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;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.58) !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 {
  position: relative !important;
  isolation: isolate !important;
  color: #f8fcff !important;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0) 0 64%, rgba(255, 255, 255, 0.13) 64.4% 73%, rgba(255, 255, 255, 0.02) 73.4% 100%),
    radial-gradient(circle at 22% 0%, rgba(41, 217, 229, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--header-button-accent, #29d9e5) 62%, #ffffff 12%) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 3px 0 0 var(--header-button-accent, #29d9e5),
    inset 0 1px 0 rgba(255, 255, 255, 0.23),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 11px 18px rgba(7, 31, 44, 0.20),
    0 0 0 1px rgba(4, 22, 32, 0.12) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.66) !important;
  backdrop-filter: saturate(1.12) blur(8px) !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 {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(116deg, transparent 0 66%, rgba(255, 255, 255, 0.13) 66.4% 75%, transparent 75.4% 100%) !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 {
  background: var(--header-button-accent, #29d9e5) !important;
  box-shadow: 0 0 12px var(--header-button-glow, rgba(41, 217, 229, 0.42)) !important;
}

html 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(--header-button-accent, #29d9e5) 74%, #ffffff 14%) 0%, color-mix(in srgb, var(--header-button-accent, #29d9e5) 62%, #092c37 38%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--header-button-accent, #29d9e5) 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;
}

html body:not(.login-active) .app-header .header-nav-icon svg,
html body:not(.login-active) .app-header .header-icon-button svg,
html body:not(.login-active) .app-header #headerHomeButton svg,
html body:not(.login-active) .app-header .header-user-icon svg {
  color: #e9fcff !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !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 {
  color: #f8fcff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72) !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 {
  position: relative !important;
  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(22, 69, 84, 0.97) 0%, rgba(7, 34, 48, 0.99) 100%) !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.18) !important;
  color: #e9fcff !important;
}

html body:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button,
html body:not(.login-active) .app-header button#headerChatButton.header-icon-button {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

html body:not(.login-active) .app-header .header-icon-badge {
  top: 3px !important;
  right: -3px !important;
  border: 2px solid rgba(248, 252, 255, 0.98) !important;
  background: #e0574f !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(224, 87, 79, 0.18), 0 5px 12px rgba(7, 31, 44, 0.22) !important;
}

html body:not(.login-active) .nav-link,
html body:not(.login-active) .tab {
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0) 0 64%, rgba(255, 255, 255, 0.11) 64.4% 73%, rgba(255, 255, 255, 0.02) 73.4% 100%),
    linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%) !important;
  color: #f8fcff !important;
  border-color: rgba(41, 217, 229, 0.50) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent, #29d9e5),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 9px 16px rgba(7, 31, 44, 0.18) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62) !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) .table-wrap,
html body:not(.login-active) .dialog-panel,
html body:not(.login-active) .project-dialog-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 248, 250, 0.95) 100%) !important;
  border-color: rgba(121, 171, 184, 0.44) !important;
  color: #102a34 !important;
}

@media (max-width: 760px) {
  html body:not(.login-active) .app-header .header-links .top-link {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 0.61rem !important;
  }

  html body:not(.login-active) .app-header .header-workflow-links {
    scrollbar-width: thin !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 {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 8px !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(.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(.close-x) {
    min-height: 38px !important;
    padding: 9px 12px !important;
  }
}

/* Absolute final command theme lock.
   This must sit after the header fit guards so the premium glass theme cannot
   be flattened back into the older light-button treatment. */
body:not(.login-active) {
  background:
    radial-gradient(circle at 74% 4%, rgba(41, 217, 229, 0.10), transparent 30%),
    linear-gradient(135deg, #f8fbfc 0%, #edf5f7 46%, #f6fafb 100%) !important;
  background-size: auto !important;
}

body:not(.login-active) .app-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,250,0.98) 100%) !important;
  border-bottom: 1px solid rgba(121, 171, 184, 0.46) !important;
  box-shadow: 0 12px 26px rgba(7, 31, 44, 0.12) !important;
}

body:not(.login-active) .app-header .header-chart-link {
  --glass-accent: var(--header-button-accent, var(--command-cyan));
  --glass-glow: var(--header-button-glow, rgba(41, 217, 229, 0.42));
  position: relative !important;
  color: #f8fcff !important;
  background:
    linear-gradient(116deg, rgba(255,255,255,0) 0 64%, rgba(255,255,255,0.12) 64.3% 72%, rgba(255,255,255,0.02) 72.4% 100%),
    radial-gradient(circle at 22% 0%, rgba(41, 217, 229, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%) !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.22),
    0 10px 18px rgba(7, 31, 44, 0.18),
    0 0 0 1px rgba(4, 22, 32, 0.12) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.62) !important;
}

body:not(.login-active) .app-header .header-chart-link:hover,
body:not(.login-active) .app-header .header-chart-link.active {
  border-color: color-mix(in srgb, var(--glass-accent) 76%, #ffffff 22%) !important;
  box-shadow:
    inset 3px 0 0 var(--glass-accent),
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 13px 24px rgba(7, 31, 44, 0.22),
    0 0 18px var(--glass-glow) !important;
  transform: translateY(-1px) !important;
}

body:not(.login-active) .app-header .header-chart-link::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(116deg, transparent 0 66%, rgba(255,255,255,0.12) 66.4% 75%, transparent 75.4% 100%) !important;
}

body:not(.login-active) .app-header .header-chart-link::after {
  content: "" !important;
  position: absolute !important;
  left: 48px !important;
  right: 10px !important;
  bottom: 6px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--glass-accent) !important;
  box-shadow: 0 0 12px var(--glass-glow) !important;
}

body:not(.login-active) .app-header .header-nav-icon {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.38), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass-accent) 76%, #ffffff 12%) 0%, color-mix(in srgb, var(--glass-accent) 64%, #092c37 36%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--glass-accent) 72%, #ffffff 18%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 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.7) !important;
}

body:not(.login-active) .app-header .header-icon-button,
body:not(.login-active) .app-header #headerHomeButton,
body:not(.login-active) .app-header button#headerUserToggle.header-user-toggle {
  color: #e9fcff !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.26), transparent 34%),
    linear-gradient(180deg, rgba(21, 72, 85, 0.96), rgba(7, 34, 48, 0.98)) !important;
  border: 1px solid rgba(41, 217, 229, 0.54) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 16px rgba(7, 31, 44, 0.18) !important;
}

body:not(.login-active) .app-header .header-icon-button svg,
body:not(.login-active) .app-header #headerHomeButton svg,
body:not(.login-active) .app-header .header-user-icon svg {
  color: #e9fcff !important;
  fill: #e9fcff !important;
}

body:not(.login-active) .app-header .header-links .top-link {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(237,247,249,0.96)) !important;
  color: var(--command-ink) !important;
  border-color: rgba(121, 171, 184, 0.56) !important;
  box-shadow: 0 5px 12px rgba(7, 31, 44, 0.07) !important;
  text-shadow: none !important;
}

body .app-shell .leaflet-container.mobile-map-scroll-guard > .mobile-map-activation-overlay {
  border: 0 !important;
  background: rgba(10, 35, 42, 0.04) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

body .app-shell .leaflet-container.mobile-map-scroll-guard > .mobile-map-activation-overlay::before,
body .app-shell .leaflet-container.mobile-map-scroll-guard > .mobile-map-activation-overlay::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px), (pointer: coarse) {
  #filePreviewDialog.is-photo-markup-dialog {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-dialog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-preview-stage,
  #filePreviewDialog .photo-dialog.is-markup-editing .preview-stage-scroll {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-preview-stage {
    border-radius: 10px !important;
    background: #10181d !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-stage-scroll {
    padding: 46px 6px 8px !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-stage-surface {
    max-width: none !important;
    margin-inline: auto !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #previewCanvas,
  #filePreviewDialog .photo-dialog.is-markup-editing .preview-canvas-overlay {
    touch-action: none !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-stage-toolbar {
    top: 7px !important;
    left: 7px !important;
    right: 42px !important;
    align-items: center !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-zoom-controls {
    gap: 5px !important;
    padding: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(9, 20, 26, 0.76) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-zoom-btn,
  #filePreviewDialog .photo-dialog.is-markup-editing .preview-edit-btn {
    min-width: 34px !important;
    width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .preview-zoom-readout {
    min-width: 62px !important;
    width: 62px !important;
    font-size: 0.76rem !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-preview-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(22, 72, 86, 0.18) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef7f6 100%) !important;
    box-shadow: 0 -8px 22px rgba(10, 35, 42, 0.16) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #fileEditPanel {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-editor-tools {
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) 52px 46px 46px !important;
    gap: 7px !important;
    align-items: end !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-editor-tools label {
    min-width: 0 !important;
    gap: 3px !important;
    color: #17344b !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-editor-tools label:nth-of-type(3) {
    grid-column: 1 / -1 !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #photoTool,
  #filePreviewDialog .photo-dialog.is-markup-editing #photoColor,
  #filePreviewDialog .photo-dialog.is-markup-editing #photoLineWidth {
    width: 100% !important;
    min-width: 0 !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #photoTool {
    min-height: 40px !important;
    height: 40px !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #photoColor {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #photoLineWidth {
    min-height: 34px !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #photoUndoBtn,
  #filePreviewDialog .photo-dialog.is-markup-editing #photoRedoBtn {
    min-width: 48px !important;
    width: 48px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #cancelPhotoMarkupBtn {
    grid-column: 1 / 3 !important;
    min-height: 42px !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .photo-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #saveFileEditBtn {
    min-height: 44px !important;
    height: 44px !important;
    padding-inline: 12px !important;
    font-size: 0.76rem !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #deletePreviewItemBtn {
    display: none !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing .close-x {
    min-width: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
    top: 5px !important;
    right: 5px !important;
  }
}

@media (max-width: 420px) {
  #filePreviewDialog .photo-dialog.is-markup-editing .photo-editor-tools {
    grid-template-columns: minmax(104px, 1fr) 48px 42px 42px !important;
    gap: 6px !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #cancelPhotoMarkupBtn,
  #filePreviewDialog .photo-dialog.is-markup-editing #saveFileEditBtn {
    font-size: 0.7rem !important;
  }

  #filePreviewDialog .photo-dialog.is-markup-editing #deletePreviewItemBtn {
    display: none !important;
  }
}

body:not(.login-active) .sold-financial-table a.sold-financial-project-link,
body:not(.login-active) .sold-financial-table a.sold-financial-project-link:hover,
body:not(.login-active) .sold-financial-table a.sold-financial-project-link:focus-visible {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #0b6f78 !important;
  cursor: pointer !important;
  display: inline !important;
  font-family: inherit !important;
  height: auto !important;
  isolation: auto !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  transform: none !important;
}

body:not(.login-active) .sold-financial-table a.sold-financial-project-link strong {
  color: #0b5662 !important;
  display: inline !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

body:not(.login-active) .sold-financial-table a.sold-financial-project-link span {
  color: #415b68 !important;
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

body:not(.login-active) .sold-financial-table a.sold-financial-project-link:hover strong,
body:not(.login-active) .sold-financial-table a.sold-financial-project-link:focus-visible strong {
  color: #004d56 !important;
  text-decoration: underline !important;
}

/* End-of-file override for the section photo workflow. Keep this after the
   header/mobile patches so older broad selectors cannot reopen hidden panels. */
body:not(.login-active) .section-photo-initial-pin-panel[hidden],
body:not(.login-active) .section-photo-locator-standby[hidden] {
  display: none !important;
}

body:not(.login-active) .section-report-upload-control .file-drop-zone input[type="file"] {
  font-size: 0 !important;
}

body:not(.login-active) .section-report-upload-control .file-drop-zone input[type="file"]::file-selector-button {
  min-width: 128px !important;
  margin-right: 0 !important;
  font-size: 0.84rem !important;
}

body:not(.login-active) .section-report-title-field,
body:not(.login-active) .section-report-description-field,
body:not(.login-active) .section-report-upload-control,
body:not(.login-active) .section-photo-locator-wrap {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

body:not(.login-active) .section-add-folder-item-btn {
  grid-column: auto !important;
  min-width: 190px !important;
  min-height: 42px !important;
  width: auto !important;
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body:not(.login-active) .section-folder-command-card,
  body:not(.login-active) .section-report-upload-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.login-active) .section-add-folder-item-btn {
    width: 100% !important;
  }
}

/* Final section upload workflow pass. These rules intentionally sit at the end
   because several older mobile/layout patches used broad selectors. */
body:not(.login-active) .section-folder-command-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  border-left: 4px solid #159ca5 !important;
}

body:not(.login-active) .section-report-page-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 10px 0 12px !important;
  max-width: 100% !important;
  padding: 0 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

body:not(.login-active) .section-report-page-tab {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 142px !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 1px solid #bfd4dd !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #143345 !important;
  text-align: left !important;
  box-shadow: 0 5px 12px rgba(17, 46, 61, 0.05) !important;
  transform: none !important;
  white-space: nowrap !important;
}

body:not(.login-active) .section-report-page-tab strong {
  color: #123142 !important;
  font-size: 0.78rem !important;
  line-height: 1.05 !important;
}

body:not(.login-active) .section-report-page-tab span {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 42px !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #edf5f7 !important;
  color: #58717e !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
}

body:not(.login-active) .section-report-page-tab .section-report-file-count.is-empty {
  border: 1px solid rgba(176, 127, 0, 0.35) !important;
  background: #fff2bf !important;
  color: #7a5400 !important;
}

body:not(.login-active) .section-report-page-tab .section-report-file-count.has-files {
  border: 1px solid rgba(20, 133, 78, 0.32) !important;
  background: #dff6e8 !important;
  color: #11653b !important;
}

body:not(.login-active) .section-report-page-tab.active,
body:not(.login-active) .section-report-page-tab:hover {
  border-color: rgba(21, 156, 165, 0.62) !important;
  background: #eaf8f9 !important;
  color: #0f5e64 !important;
}

body:not(.login-active) .section-report-page-tab.active {
  box-shadow: inset 0 -3px 0 #159ca5, 0 5px 12px rgba(17, 46, 61, 0.05) !important;
}

body:not(.login-active) .section-photo-capture-workspace {
  display: grid !important;
  gap: 12px !important;
  color: #17344b !important;
}

body:not(.login-active) .section-report-upload-grid {
  display: grid !important;
  grid-template-columns: minmax(240px, 300px) minmax(240px, 300px) minmax(300px, 520px) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

body:not(.login-active) .section-report-upload-grid.section-report-upload-grid-dialog-flow {
  grid-template-columns: minmax(240px, 320px) !important;
}

body:not(.login-active) .section-report-form-panel,
body:not(.login-active) .section-report-upload-control,
body:not(.login-active) .section-photo-locator-wrap {
  min-width: 0 !important;
  min-height: 246px !important;
  padding: 12px !important;
  border: 1px solid #c9d8df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(17, 46, 61, 0.06) !important;
}

body:not(.login-active) .section-report-form-panel {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

body:not(.login-active) .section-report-form-panel[hidden],
body:not(.login-active) .section-photo-locator-wrap[hidden],
body:not(.login-active) .section-add-folder-item-btn[hidden],
body:not(.login-active) .section-photo-details-next[hidden],
body:not(.login-active) .section-photo-initial-pin-panel[hidden],
body:not(.login-active) .section-photo-locator-standby[hidden] {
  display: none !important;
}

body:not(.login-active) .section-report-title-field,
body:not(.login-active) .section-report-description-field,
body:not(.login-active) .section-report-upload-control,
body:not(.login-active) .section-photo-locator-wrap {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

body:not(.login-active) .section-report-form-panel textarea {
  min-height: 118px !important;
}

body:not(.login-active) .section-photo-locator-wrap {
  display: grid !important;
  align-content: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body:not(.login-active) .section-photo-locator-wrap[hidden],
body:not(.login-active) .section-photo-initial-pin-panel[hidden],
body:not(.login-active) .section-photo-locator-standby[hidden] {
  display: none !important;
}

body:not(.login-active) .section-report-upload-control .file-drop-zone input[type="file"] {
  font-size: 0 !important;
}

body:not(.login-active) .section-report-upload-control .file-drop-zone input[type="file"]::file-selector-button {
  min-width: 128px !important;
  margin-right: 0 !important;
  font-size: 0.84rem !important;
}

body:not(.login-active) .section-photo-draft-pin-map,
body:not(.login-active) #sectionPhotoDraftPinMap {
  width: 100% !important;
  height: 222px !important;
  min-height: 222px !important;
  max-width: 100% !important;
}

body:not(.login-active) .section-upload-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 2px !important;
}

body:not(.login-active) .section-add-folder-item-btn {
  grid-column: auto !important;
  min-width: 190px !important;
  min-height: 42px !important;
  width: auto !important;
  margin-top: 0 !important;
}

body:not(.login-active) .section-photo-details-next {
  grid-column: auto !important;
  width: fit-content !important;
  min-width: 190px !important;
  min-height: 42px !important;
  margin-top: 0 !important;
}

body:not(.login-active) .section-add-folder-item-btn[hidden],
body:not(.login-active) .section-photo-details-next[hidden],
body:not(.login-active) .section-photo-details-reopen[hidden] {
  display: none !important;
}

.section-photo-flow-dialog {
  width: min(540px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.section-photo-map-dialog {
  width: min(780px, calc(100vw - 24px)) !important;
}

.section-photo-flow-dialog::backdrop {
  background: rgba(7, 20, 27, 0.52) !important;
  backdrop-filter: blur(2px) !important;
}

body:not(.login-active) .section-photo-flow-panel {
  display: grid !important;
  gap: 12px !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
}

body:not(.login-active) .section-photo-flow-panel input,
body:not(.login-active) .section-photo-flow-panel textarea {
  width: 100% !important;
  margin-top: 5px !important;
  font-size: 16px !important;
}

body:not(.login-active) .section-photo-flow-panel textarea {
  min-height: 118px !important;
}

body:not(.login-active) .section-photo-map-dialog .section-photo-initial-pin-panel {
  padding: 0 !important;
}

body:not(.login-active) .section-photo-map-dialog .section-photo-draft-pin-map,
body:not(.login-active) .section-photo-map-dialog #sectionPhotoDraftPinMap {
  height: 420px !important;
  min-height: 420px !important;
}

body:not(.login-active) .section-add-folder-item-btn:disabled {
  cursor: not-allowed !important;
  filter: grayscale(0.5) !important;
  opacity: 0.58 !important;
  transform: none !important;
}

body:not(.login-active) .section-page {
  padding-bottom: 78px !important;
}

body:not(.login-active) .section-upload-brief.section-page-banner {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 21vw, 292px) !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 48px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(168px, 15vw, 210px) !important;
  padding: clamp(20px, 2.35vw, 34px) clamp(22px, 3.3vw, 46px) clamp(18px, 2.25vw, 32px) clamp(62px, 5.2vw, 86px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(45, 247, 255, 0.95) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0) 0 63%, rgba(255, 255, 255, 0.12) 63.3% 70%, rgba(255, 255, 255, 0.035) 70.4% 100%),
    linear-gradient(116deg, rgba(255, 255, 255, 0) 0 78%, rgba(124, 210, 231, 0.13) 78.4% 83%, rgba(255, 255, 255, 0) 83.4% 100%),
    radial-gradient(circle at 48% 112%, rgba(39, 212, 226, 0.42) 0, rgba(39, 212, 226, 0.12) 22%, rgba(39, 212, 226, 0) 42%),
    radial-gradient(circle at 76% 102%, rgba(3, 232, 255, 0.55) 0, rgba(3, 232, 255, 0.14) 13%, rgba(3, 232, 255, 0) 32%),
    linear-gradient(95deg, rgba(4, 118, 126, 0.96) 0%, rgba(5, 54, 74, 0.98) 34%, rgba(4, 28, 50, 0.99) 100%) !important;
  box-shadow:
    0 26px 34px rgba(5, 28, 42, 0.28),
    0 12px 18px rgba(0, 201, 219, 0.12),
    inset 0 0 0 2px rgba(0, 214, 230, 0.58),
    inset 0 0 0 5px rgba(2, 25, 37, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not(.login-active) .section-upload-brief.section-page-banner::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(28px, 4vw, 52px) !important;
  top: 27% !important;
  width: 5px !important;
  height: 46% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7bffff 0%, #05c8d5 62%, #0f96a3 100%) !important;
  box-shadow: 0 0 18px rgba(34, 232, 245, 0.86) !important;
  z-index: 2 !important;
}

body:not(.login-active) .section-upload-brief.section-page-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 22%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260'%3E%3Cpath fill='%23011322' opacity='.78' d='M0 260h1200V156l-86-34-54 24-63-87-74 114-47-34-48 50-80-111-96 133-61-70-64 76-88-136-92 116-42-40-78 81-57-51-92 73H0z'/%3E%3Cpath fill='%2327e6ef' opacity='.28' d='M149 206l79-63 57 51 78-81 42 40 92-116 88 136 64-76 61 70 96-133 80 111 48-50 47 34 74-114 63 87 54-24 86 34v43l-84-28-63 30-48-49-69 83-61-69-48 32-82-93-72 98-64-71-56 61-96-126-88 108-47-35-87 70-55-46-95 65H149z'/%3E%3Cpath fill='%23ffffff' opacity='.16' d='M497 37l-38 47 22-7 24 24 20-22 29 36 31 58 64-76 61 70 96-133 17 24-55 37 46-7-64 86-37-39-55 54-58-88-50 66-29-56-25 11-31-37z'/%3E%3C/svg%3E") no-repeat center 112% / min(72%, 860px) auto,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 4px) !important;
  opacity: 0.28 !important;
  mix-blend-mode: screen !important;
}

body:not(.login-active) .section-page-banner-copy {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  gap: clamp(12px, 1.5vw, 18px) !important;
  align-content: center !important;
  min-width: 0 !important;
}

body:not(.login-active) .section-upload-brief.section-page-banner .section-page-banner-copy strong {
  color: #f8fbff !important;
  font-size: clamp(2.35rem, 4.3vw, 4.2rem) !important;
  font-weight: 950 !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.22),
    0 4px 0 rgba(9, 25, 34, 0.74),
    0 10px 18px rgba(0, 0, 0, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.login-active) .section-upload-brief.section-page-banner .section-page-banner-copy span {
  color: #5beaf4 !important;
  font-size: clamp(1.05rem, 2vw, 1.78rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-shadow:
    0 2px 0 rgba(3, 24, 34, 0.9),
    0 0 15px rgba(24, 220, 235, 0.48) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.login-active) .section-page-banner-logo {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: clamp(150px, 18.5vw, 260px) !important;
  max-width: 100% !important;
  justify-self: end !important;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.42)) drop-shadow(0 0 10px rgba(56, 232, 244, 0.38)) !important;
}

body:not(.login-active) .section-photo-capture-workspace .section-upload-footer {
  display: none !important;
}

@media (max-width: 760px) {
  body:not(.login-active) .section-upload-brief.section-page-banner {
    grid-template-columns: 1fr !important;
    min-height: 118px !important;
    padding: 18px 14px 16px 46px !important;
    border-radius: 14px !important;
  }

  body:not(.login-active) .section-upload-brief.section-page-banner::before {
    left: 22px !important;
    top: 24px !important;
    width: 4px !important;
    height: 58px !important;
  }

  body:not(.login-active) .section-upload-brief.section-page-banner::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 24%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260'%3E%3Cpath fill='%23011322' opacity='.78' d='M0 260h1200V156l-86-34-54 24-63-87-74 114-47-34-48 50-80-111-96 133-61-70-64 76-88-136-92 116-42-40-78 81-57-51-92 73H0z'/%3E%3Cpath fill='%2327e6ef' opacity='.28' d='M149 206l79-63 57 51 78-81 42 40 92-116 88 136 64-76 61 70 96-133 80 111 48-50 47 34 74-114 63 87 54-24 86 34v43l-84-28-63 30-48-49-69 83-61-69-48 32-82-93-72 98-64-71-56 61-96-126-88 108-47-35-87 70-55-46-95 65H149z'/%3E%3Cpath fill='%23ffffff' opacity='.16' d='M497 37l-38 47 22-7 24 24 20-22 29 36 31 58 64-76 61 70 96-133 17 24-55 37 46-7-64 86-37-39-55 54-58-88-50 66-29-56-25 11-31-37z'/%3E%3C/svg%3E") no-repeat right -62px bottom -10px / 330px auto,
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 4px) !important;
    opacity: 0.22 !important;
  }

  body:not(.login-active) .section-upload-brief.section-page-banner .section-page-banner-copy strong {
    font-size: clamp(1.48rem, 7.5vw, 1.88rem) !important;
    white-space: nowrap !important;
  }

  body:not(.login-active) .section-upload-brief.section-page-banner .section-page-banner-copy span {
    font-size: clamp(0.88rem, 4.4vw, 1.05rem) !important;
  }

  body:not(.login-active) .section-page-banner-logo {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 92px !important;
    opacity: 0.34 !important;
  }
}

@media (max-width: 1180px) {
  body:not(.login-active) .section-report-upload-grid {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) !important;
  }

  body:not(.login-active) .section-photo-locator-wrap {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body:not(.login-active) .section-folder-command-card,
  body:not(.login-active) .section-report-upload-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.login-active) .section-report-form-panel,
  body:not(.login-active) .section-report-upload-control,
  body:not(.login-active) .section-photo-locator-wrap {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body:not(.login-active) .section-photo-draft-pin-map,
  body:not(.login-active) #sectionPhotoDraftPinMap {
    height: 240px !important;
    min-height: 240px !important;
  }

  body:not(.login-active) .section-upload-footer {
    display: grid !important;
  }

  body:not(.login-active) .section-add-folder-item-btn {
    width: 100% !important;
  }

  body:not(.login-active) .section-photo-flow-dialog {
    width: min(100vw - 16px, 540px) !important;
  }

  body:not(.login-active) .section-photo-map-dialog .section-photo-draft-pin-map,
  body:not(.login-active) .section-photo-map-dialog #sectionPhotoDraftPinMap {
    height: 330px !important;
    min-height: 330px !important;
  }
}

/* Final login logo sizing: the Bighorn mark is taller than the header DLC logo,
   so it gets its own responsive limits instead of the old wide-logo rules. */
.login-footer-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: clamp(132px, 20vh, 198px) !important;
  padding-top: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.login-footer-logo.login-footer-logo-bighorn {
  display: block !important;
  width: min(310px, 82%) !important;
  max-width: 310px !important;
  height: auto !important;
  max-height: 196px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translateY(-73px) scale(1.584) !important;
  transform-origin: center top !important;
  filter: drop-shadow(0 12px 18px rgba(9, 24, 34, 0.18)) !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  .login-footer-logo-wrap {
    min-height: clamp(108px, 18vh, 166px) !important;
  }

  .login-footer-logo.login-footer-logo-bighorn {
    width: min(250px, 72vw) !important;
    max-width: 250px !important;
    max-height: 166px !important;
    transform: translateY(-82px) scale(1.584) !important;
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  .login-footer-logo-wrap {
    min-height: 88px !important;
  }

  .login-footer-logo.login-footer-logo-bighorn {
    width: min(190px, 58vw) !important;
    max-width: 190px !important;
    max-height: 126px !important;
    transform: translateY(-82px) scale(1.584) !important;
  }
}

@media (min-width: 1601px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 300px;
    --header-search-width: 420px;
    --header-action-width: 150px;
    --header-action-height: 60px;
    --header-action-icon: 33px;
    --header-action-icon-svg: 20px;
    --header-action-font: 0.68rem;
    --header-admin-font: 0.66rem;
    --header-gap: 12px;
  }
}

@media (min-width: 1421px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 260px;
    --header-search-width: 360px;
    --header-action-width: 140px;
    --header-action-height: 56px;
    --header-action-icon: 31px;
    --header-action-icon-svg: 18px;
    --header-action-font: 0.62rem;
    --header-admin-font: 0.61rem;
    --header-gap: 10px;
  }
}

@media (min-width: 1181px) and (max-width: 1420px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 220px;
    --header-search-width: 320px;
    --header-action-width: 124px;
    --header-action-height: 52px;
    --header-action-icon: 28px;
    --header-action-icon-svg: 16px;
    --header-action-font: 0.55rem;
    --header-admin-font: 0.57rem;
    --header-gap: 8px;
  }

  body:not(.login-active) .app-header .header-chart-link {
    padding: 6px 7px !important;
    column-gap: 6px !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 180px;
    --header-search-width: 280px;
    --header-action-width: 105px;
    --header-action-height: 48px;
    --header-action-icon: 24px;
    --header-action-icon-svg: 14px;
    --header-action-font: 0.48rem;
    --header-admin-font: 0.52rem;
    --header-gap: 6px;
    min-height: 94px !important;
    height: 94px !important;
    max-height: 94px !important;
    padding-inline: 8px !important;
  }

  body:not(.login-active) .app-header .header-logo-shell,
  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-chart-link {
    padding: 5px 5px !important;
    column-gap: 4px !important;
  }

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

body:not(.login-active) dialog#projectDialog .project-client-combo-list button[data-project-customer-option]:hover,
body:not(.login-active) .app-shell dialog#projectDialog .project-client-combo-list button[data-project-customer-option]:hover {
  color: #0c5056 !important;
  border-color: rgba(21, 156, 165, 0.18) !important;
  background: #eef8f8 !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Section page map/details lock.
   Keep the map and section detail summary in predictable lanes on desktop.
   Mobile gets a separate override below so the map fits the viewport instead
   of creating a sideways scroll trap. */
.section-hero-layout.section-hero-layout-stable {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.section-map-panel.section-map-panel-stable {
  display: grid !important;
  grid-template-columns: 650px !important;
  grid-template-areas:
    "section-map-title"
    "section-map-area"
    "section-map-hint"
    "section-map-details" !important;
  column-gap: 0 !important;
  row-gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.section-map-panel.section-map-panel-stable > h3 {
  grid-area: section-map-title !important;
  margin: 0 !important;
}

.section-map-panel.section-map-panel-stable #sectionOutlineMap {
  grid-area: section-map-area !important;
  width: 650px !important;
  min-width: 650px !important;
  max-width: 650px !important;
}

.section-map-panel.section-map-panel-stable .section-map-picker-hint {
  grid-area: section-map-hint !important;
  width: 650px !important;
  min-width: 650px !important;
  max-width: 650px !important;
  margin: -2px 0 0 !important;
  color: #3c5a66 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.section-map-panel.section-map-panel-stable .section-map-lower {
  display: contents !important;
}

.section-map-panel.section-map-panel-stable .section-outline-detail-lane {
  grid-area: section-map-details !important;
  width: 650px !important;
  min-width: 650px !important;
  max-width: 650px !important;
}

.section-map-panel.section-map-panel-stable .section-outline-summary {
  margin-top: 0 !important;
}

.section-map-panel.section-map-panel-stable .section-outline-actions {
  justify-content: flex-end !important;
  margin-top: 10px !important;
}

.section-outline-click-target {
  cursor: pointer;
}

.section-map-panel.section-map-panel-stable .section-quick-nav {
  grid-area: section-map-nav !important;
  display: grid !important;
  grid-template-columns: repeat(4, 100px) !important;
  gap: 10px !important;
  align-content: start !important;
  align-self: start !important;
  justify-self: start !important;
  width: 430px !important;
  min-width: 430px !important;
  max-width: 430px !important;
  margin: 0 !important;
}

.section-map-panel.section-map-panel-stable .section-quick-nav-card {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.section-map-panel.section-map-panel-stable .section-quick-nav-next {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .section-map-panel.section-map-panel-stable {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .section-map-panel.section-map-panel-stable #sectionOutlineMap,
  .section-map-panel.section-map-panel-stable .section-map-picker-hint,
  .section-map-panel.section-map-panel-stable .section-outline-detail-lane {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .section-map-panel.section-map-panel-stable #sectionOutlineMap .mobile-map-activation-label {
    display: none !important;
  }
}

/* Scheduled inspection/prebid workflow */
#projectDialog .opportunity-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

#projectDialog .opportunity-type-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 15px;
  border: 1px solid rgba(20, 86, 89, 0.22);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #edf7f6);
  box-shadow: 0 14px 26px rgba(7, 37, 45, 0.08);
  cursor: pointer;
}

#projectDialog .opportunity-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#projectDialog .opportunity-type-card span {
  color: #102f3a;
  font-family: var(--display-font, inherit);
  font-size: 1rem;
  letter-spacing: 0;
}

#projectDialog .opportunity-type-card small {
  color: #496575;
  line-height: 1.35;
}

#projectDialog .opportunity-type-card.selected {
  border-color: #0da6ad;
  background: linear-gradient(145deg, #e8fbfb, #ffffff);
  box-shadow: 0 0 0 3px rgba(13, 166, 173, 0.15), 0 16px 32px rgba(7, 37, 45, 0.12);
}

#projectDialog .scheduled-project-quick-fields {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(20, 86, 89, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

#projectDialog .project-multi-property-select {
  display: grid;
  gap: 12px;
}

#projectDialog .project-multi-property-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(20, 86, 89, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

#projectDialog .project-multi-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

#projectDialog .project-multi-property-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(20, 86, 89, 0.2);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #edf7f6);
  box-shadow: 0 10px 20px rgba(7, 37, 45, 0.07);
}

#projectDialog .project-multi-property-card span,
#projectDialog .project-multi-property-card small {
  grid-column: 2;
}

#projectDialog .project-multi-property-card span {
  color: #102f3a;
  font-weight: 800;
}

#projectDialog .project-multi-property-card small {
  color: #496575;
  line-height: 1.3;
}

.scheduled-ticket-shell {
  display: grid;
  gap: 14px;
}

.scheduled-ticket-summary {
  max-width: 360px;
}

.scheduled-project-detail-card {
  display: grid;
  gap: 18px;
}

.scheduled-property-switcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.scheduled-property-switcher button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid rgba(20, 86, 89, 0.25);
  background: linear-gradient(145deg, #f9ffff, #dbeff0);
  color: #12313b;
}

.scheduled-property-switcher button.active {
  border-color: #0da6ad;
  background: linear-gradient(145deg, #0c5964, #071927);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(13, 166, 173, 0.18);
}

.scheduled-property-switcher button span {
  font-size: 0.8rem;
  opacity: 0.82;
}

.scheduled-project-overview {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 0.55fr);
  gap: 16px;
  align-items: stretch;
}

.scheduled-project-overview.has-documents {
  grid-template-columns: minmax(300px, 0.9fr) minmax(260px, 0.7fr) minmax(260px, 0.7fr);
}

.scheduled-project-notes,
.scheduled-project-documents,
.scheduled-project-assignment {
  padding: 14px;
  border: 1px solid rgba(20, 86, 89, 0.18);
  border-radius: 8px;
  background: #f8fcfb;
}

.scheduled-project-notes strong,
.scheduled-project-documents strong,
.scheduled-project-assignment strong {
  display: block;
  color: #10323b;
  margin-bottom: 8px;
}

.scheduled-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.scheduled-card-head strong {
  margin-bottom: 0;
}

.scheduled-card-head small {
  display: block;
  color: #526a77;
  font-size: 0.76rem;
  margin-top: 2px;
}

.scheduled-project-assignment {
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, rgba(247, 252, 251, 0.96), rgba(236, 247, 246, 0.96));
}

.scheduled-project-assignment-condensed {
  padding: 12px;
  gap: 9px;
}

.scheduled-assignment-summary-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(20, 86, 89, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.scheduled-assignment-kicker {
  display: block;
  margin-bottom: 3px;
  color: #0e7c83;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scheduled-assignment-summary-card strong {
  margin-bottom: 0;
  color: #102f3a;
  line-height: 1.2;
}

.scheduled-assignment-summary-card small {
  display: block;
  margin-top: 3px;
  color: #526a77;
  line-height: 1.3;
}

.scheduled-assignment-editor {
  border: 1px solid rgba(20, 86, 89, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.scheduled-assignment-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  color: #123743;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.scheduled-assignment-editor summary::-webkit-details-marker {
  display: none;
}

.scheduled-assignment-editor summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #123743;
  color: #ffffff;
  font-weight: 900;
  flex: 0 0 auto;
}

.scheduled-assignment-editor[open] summary::after {
  content: "-";
}

.scheduled-assignment-editor summary small {
  color: #526a77;
  font-size: 0.72rem;
  font-weight: 700;
}

.scheduled-assignment-edit-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.scheduled-assignment-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scheduled-assignment-edit-footer .helper {
  margin: 0;
}

.scheduled-assignment-picker {
  display: grid;
  gap: 6px;
  color: #173844;
  font-weight: 800;
}

.scheduled-assignment-picker select {
  min-height: 132px;
  border: 1px solid rgba(20, 86, 89, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #173844;
  padding: 8px;
}

.scheduled-assignment-picker option {
  padding: 6px 8px;
}

.scheduled-assignee-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.scheduled-assignee-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #0f5f65;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.scheduled-project-notes p {
  margin: 0;
  color: #385363;
  line-height: 1.45;
}

.scheduled-project-documents .folder-items {
  margin-top: 8px;
}

.scheduled-note-composer {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 86, 89, 0.16);
}

.scheduled-note-composer textarea {
  min-height: 88px;
  resize: vertical;
}

.prebid-section-summary {
  background: #fbfcfc;
}

.prebid-section-completion-callout,
.prebid-ticket-completion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(214, 61, 46, 0.26);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 246, 244, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: 0 12px 26px rgba(92, 31, 22, 0.08);
}

.prebid-section-completion-callout.is-complete,
.prebid-ticket-completion.is-ready {
  border-color: rgba(21, 128, 61, 0.32);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: 0 12px 26px rgba(19, 92, 52, 0.08);
}

.prebid-section-completion-callout strong,
.prebid-ticket-completion strong {
  display: block;
  margin: 0 0 3px;
  color: #10323b;
}

.prebid-section-completion-callout span,
.prebid-ticket-completion small {
  display: block;
  color: #526a77;
  line-height: 1.35;
}

.prebid-complete-section-button,
.prebid-ticket-completion button {
  flex: 0 0 auto;
  min-width: 166px;
}

.prebid-complete-section-button:disabled,
.prebid-ticket-completion button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  filter: grayscale(0.2);
}

.scheduled-section-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.scheduled-section-map-head h3 {
  margin: 0;
}

.scheduled-section-map-head .helper {
  margin: 4px 0 0;
}

.scheduled-section-map-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(20, 86, 89, 0.22);
  border-radius: 8px;
  background: #f0faf8;
  color: #0f5f65;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.scheduled-section-map {
  min-height: 430px;
  border: 1px solid rgba(20, 86, 89, 0.22);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(7, 37, 45, 0.1);
}

.scheduled-section-map-note {
  position: absolute;
  inset: 0;
  z-index: 1000;
  background: rgba(247, 252, 252, 0.86);
}

.scheduled-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 12px;
}

.scheduled-section-card {
  display: grid !important;
  justify-items: start;
  gap: 6px;
  min-height: 96px;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  text-align: left;
}

.scheduled-section-card strong,
.scheduled-section-card span,
.scheduled-section-card small {
  color: inherit;
}

@media (max-width: 760px) {
  #projectDialog .opportunity-type-grid,
  #projectDialog .project-multi-property-grid,
  .scheduled-project-overview,
  .scheduled-project-overview.has-documents {
    grid-template-columns: 1fr;
  }

  .scheduled-section-grid {
    grid-template-columns: 1fr;
  }

  .scheduled-section-map-head {
    align-items: start;
    flex-direction: column;
  }

  .scheduled-section-map {
    min-height: 330px;
  }

  .prebid-section-completion-callout,
  .prebid-ticket-completion {
    align-items: stretch;
    flex-direction: column;
  }

  .prebid-complete-section-button,
  .prebid-ticket-completion button {
    width: 100%;
  }

  .scheduled-assignment-summary-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .scheduled-assignee-list {
    justify-content: flex-start;
  }

  .scheduled-assignment-editor summary {
    align-items: flex-start;
  }

  .scheduled-assignment-editor summary small {
    display: block;
    margin-top: 2px;
  }

  .scheduled-assignment-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .scheduled-assignment-edit-footer button {
    width: 100%;
  }
}

.subcontractor-heading {
  align-items: flex-end;
}

.subcontractor-dashboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.subcontractor-stat {
  min-height: 74px;
  border: 1px solid rgba(11, 77, 82, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(229, 245, 244, 0.9));
  box-shadow: 0 12px 24px rgba(13, 46, 61, 0.08);
}

.subcontractor-stat span,
.subcontractor-card small {
  display: block;
  color: #486373;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subcontractor-stat strong {
  display: block;
  margin-top: 6px;
  color: #0a3840;
  font-size: 1.8rem;
  line-height: 1;
}

.subcontractor-controls {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.subcontractor-registry-shell {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.subcontractor-registry-rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(18, 72, 88, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(12, 38, 52, 0.07);
}

.subcontractor-search-label {
  font-weight: 900;
  color: #12313e;
}

.subcontractor-search-label input {
  margin-top: 6px;
}

.subcontractor-trade-filter {
  display: grid;
  gap: 7px;
}

.subcontractor-trade-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(10, 74, 79, 0.22);
  border-radius: 8px;
  color: #0d454a;
  background: #f7fbfb;
  box-shadow: none;
  text-align: left;
}

.subcontractor-trade-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subcontractor-trade-chip b {
  display: inline-grid;
  min-width: 24px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #0d454a;
  background: rgba(11, 93, 97, 0.1);
  font-size: 0.72rem;
}

.subcontractor-trade-chip.active {
  color: #ffffff;
  border-color: #0b5d61;
  background: linear-gradient(135deg, #0b5d61, #168b90);
}

.subcontractor-trade-chip.active b {
  color: #0b343a;
  background: #d7b56d;
}

.subcontractor-registry-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.subcontractor-registry-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(18, 72, 88, 0.16);
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
}

.subcontractor-registry-head div {
  display: grid;
  gap: 2px;
}

.subcontractor-registry-head strong {
  color: #102f3a;
  font-size: 1rem;
}

.subcontractor-registry-head span,
.subcontractor-registry-head small {
  color: #486373;
  font-size: 0.76rem;
  font-weight: 800;
}

.subcontractor-trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.subcontractor-trade-section {
  overflow: hidden;
  border: 1px solid rgba(18, 72, 88, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(12, 38, 52, 0.09);
}

.subcontractor-trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b3b42, #0d676b);
}

.subcontractor-trade-head h3 {
  margin: 0;
  font-size: 1rem;
}

.subcontractor-trade-head span {
  display: inline-grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #0b343a;
  background: #d7b56d;
  font-weight: 900;
}

.subcontractor-card-list {
  display: grid;
  gap: 10px;
  padding: 0;
}

.subcontractor-card {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(17, 82, 91, 0.14);
  border-left: 4px solid #0e8a91;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.subcontractor-card.preferred {
  border-left-color: #d7a83e;
  background: linear-gradient(90deg, rgba(255, 247, 224, 0.86), #ffffff 44%);
}

.subcontractor-card-top,
.subcontractor-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.subcontractor-card h4 {
  margin: 2px 0 0;
  color: #102f3a;
  font-size: 1.05rem;
}

.subcontractor-title-block {
  min-width: 0;
}

.subcontractor-badge-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.subcontractor-status,
.subcontractor-preferred-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.subcontractor-status.active {
  color: #0e4b31;
  background: #d9f3e4;
}

.subcontractor-status.inactive {
  color: #53616d;
  background: #e8edf0;
}

.subcontractor-status.danger {
  color: #8a1f1f;
  background: #ffe1df;
}

.subcontractor-preferred-chip {
  color: #6d4a05;
  background: #fff0bf;
}

.subcontractor-card-meta {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.35fr 1.45fr 0.72fr;
  gap: 8px;
}

.subcontractor-card-meta span {
  min-width: 0;
  border: 1px solid rgba(18, 72, 88, 0.1);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(248, 251, 252, 0.84);
}

.subcontractor-card-meta strong {
  display: block;
  overflow-wrap: anywhere;
  color: #102f3a;
  font-size: 0.9rem;
}

.subcontractor-notes {
  display: grid;
  gap: 3px;
  margin: 0;
  border: 1px solid rgba(18, 72, 88, 0.1);
  border-radius: 7px;
  padding: 8px 9px;
  color: #315062;
  font-size: 0.88rem;
  line-height: 1.35;
  background: #fbfdfd;
}

.subcontractor-notes strong {
  color: #486373;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subcontractor-notes p {
  margin: 0;
}

.subcontractor-empty {
  min-height: 82px;
  display: grid;
  place-items: center;
}

.subcontractor-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.subcontractor-form-wide {
  grid-column: 1 / -1;
}

.subcontractor-preferred-row {
  align-self: center;
  margin-top: 14px;
}

.inbox-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(360px, 1.14fr);
  gap: 14px;
  align-items: stretch;
}

.inbox-list-pane,
.inbox-reading-pane {
  min-width: 0;
  border: 1px solid rgba(136, 182, 194, 0.62);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 42, 52, 0.08);
  overflow: hidden;
}

.inbox-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(136, 182, 194, 0.35);
  background: linear-gradient(180deg, #f8fbfc 0%, #edf6f8 100%);
}

.inbox-list-head strong,
.inbox-pane-head h3 {
  display: block;
  margin: 0;
  color: #102a34;
}

.inbox-list-head small,
.inbox-list-head span,
.inbox-pane-head small {
  color: #607682;
  font-size: 0.78rem;
}

.inbox-message-list {
  display: grid;
  max-height: min(66vh, 720px);
  overflow-y: auto;
}

.inbox-row {
  display: grid;
  grid-template-columns: 9px auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid rgba(136, 182, 194, 0.26);
  border-radius: 0 !important;
  background: #ffffff;
  color: #102a34;
  text-align: left;
  box-shadow: none !important;
}

.inbox-row:hover,
.inbox-row.active {
  background: #eef8fa;
}

.inbox-row.unread {
  background: #f7fcff;
}

.inbox-row-marker {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: transparent;
}

.inbox-row.unread .inbox-row-marker {
  background: #159ca5;
  box-shadow: 0 0 0 3px rgba(21, 156, 165, 0.12);
}

.inbox-row-kind,
.inbox-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  color: #0b6f78;
  background: rgba(21, 156, 165, 0.1);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.inbox-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.inbox-row-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.inbox-row-line strong,
.inbox-row-subject,
.inbox-row-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-line strong {
  font-size: 0.9rem;
}

.inbox-row-line time {
  flex: 0 0 auto;
  color: #607682;
  font-size: 0.68rem;
  font-weight: 700;
}

.inbox-row-subject {
  color: #17344b;
  font-size: 0.82rem;
  font-weight: 850;
}

.inbox-row-preview {
  color: #607682;
  font-size: 0.78rem;
}

.inbox-reading-pane {
  display: grid;
  align-content: start;
  min-height: 420px;
}

.inbox-reading-pane.empty {
  place-items: center;
}

.inbox-pane-head {
  display: grid;
  gap: 6px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(136, 182, 194, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
}

.inbox-message-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(136, 182, 194, 0.22);
}

.inbox-message-meta div {
  min-width: 0;
}

.inbox-message-meta dt {
  color: #607682;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.inbox-message-meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #102a34;
  font-size: 0.86rem;
  font-weight: 750;
}

.inbox-message-preview {
  display: grid;
  gap: 10px;
  padding: 18px;
  color: #284d5c;
  line-height: 1.42;
}

.inbox-message-preview p {
  margin: 0;
}

.inbox-chat-line {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid rgba(136, 182, 194, 0.35);
  border-radius: 8px;
  background: #f6fafb;
}

.inbox-chat-line.sent {
  justify-self: end;
  background: #eaf7f0;
}

.inbox-chat-line strong {
  display: block;
  color: #102a34;
  font-size: 0.78rem;
}

.inbox-chat-line small {
  display: block;
  margin-top: 4px;
  color: #607682;
  font-size: 0.68rem;
}

.inbox-pane-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(136, 182, 194, 0.22);
}

.work-progress-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pay-app-upload-button {
  display: grid;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
}

.pay-app-file-input {
  width: min(100%, 220px);
  min-height: 36px;
  padding: 6px;
  border: 1px solid rgba(80, 115, 140, 0.22);
  border-radius: 7px;
  background: #ffffff;
  color: #17344b;
  font-size: 16px;
}

.daily-progress-card {
  padding: 0 !important;
  overflow: hidden;
}

.daily-progress-form {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.daily-progress-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.32fr);
  gap: 12px;
}

.daily-progress-summary > div,
.daily-progress-sections {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(136, 182, 194, 0.42);
  border-radius: 8px;
  background: #f8fbfc;
}

.daily-progress-summary span,
.daily-progress-section-head small {
  display: block;
  color: #607682;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-progress-summary strong {
  display: block;
  margin-top: 3px;
  color: #102a34;
  font-size: 1rem;
}

.daily-progress-summary small {
  display: block;
  margin-top: 3px;
  color: #607682;
}

.daily-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.daily-progress-capture-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(21, 156, 165, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(236, 250, 251, 0.96), rgba(215, 235, 239, 0.92));
}

.daily-progress-capture-copy,
.daily-progress-capture-actions,
.daily-progress-capture-queue {
  min-width: 0;
}

.daily-progress-capture-copy {
  display: grid;
  align-content: center;
  gap: 4px;
}

.daily-progress-capture-kicker {
  color: #087988;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.daily-progress-capture-copy strong {
  color: #102a34;
  font-size: 1.32rem;
  line-height: 1.05;
}

.daily-progress-capture-copy small {
  max-width: 58ch;
  color: #4d6470;
  font-weight: 750;
  line-height: 1.35;
}

.daily-progress-capture-actions {
  display: grid;
  gap: 8px;
  align-content: center;
}

.daily-progress-hidden-file {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.daily-progress-capture-queue {
  grid-column: 1 / -1;
}

.daily-progress-file-queue {
  margin-top: 6px;
  max-height: 168px;
  overflow: auto;
}

.daily-progress-wide {
  grid-column: 1 / -1;
}

.daily-progress-grid textarea {
  min-height: 132px;
}

.daily-progress-grid .file-input-stack {
  margin-top: 2px;
}

.daily-log-attachment-list,
.daily-log-viewer-attachment-list {
  display: grid;
  gap: 6px;
}

.daily-log-viewer-upload-entry {
  align-items: center;
}

.daily-log-viewer-upload-entry .row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.daily-progress-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.daily-progress-section-head strong {
  color: #102a34;
}

.daily-progress-section-map {
  width: 100%;
  min-height: 520px;
  height: min(68vh, 640px);
  margin-top: 10px;
}

.daily-progress-sections-button {
  width: fit-content;
}

.daily-progress-sections-dialog {
  max-width: min(1080px, calc(100vw - 32px));
}

.daily-progress-section-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.daily-progress-selected-sections {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(39, 196, 111, 0.24);
  border-radius: 8px;
  background: #f4fbf7;
  color: #17344b;
  font-size: 0.82rem;
  font-weight: 800;
}

.daily-progress-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.home-crew-list {
  display: grid;
  gap: 10px;
}

.home-crew-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(136, 182, 194, 0.42);
  border-radius: 8px;
  background: #f8fbfc;
}

.home-crew-card strong {
  display: block;
  color: #102a34;
  font-size: 0.95rem;
}

.home-crew-card small {
  color: #607682;
  font-size: 0.76rem;
}

.home-crew-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-crew-members span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #0b6f78;
  background: rgba(21, 156, 165, 0.1);
  font-size: 0.72rem;
  font-weight: 800;
}

.home-crew-jobs {
  display: grid;
  gap: 6px;
}

.home-crew-jobs button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid rgba(21, 156, 165, 0.22);
  border-radius: 7px;
  background: #ffffff;
  color: #17344b;
  text-align: left;
  box-shadow: none;
}

.home-crew-jobs button strong {
  font-size: 0.82rem;
}

.home-crew-jobs button span,
.home-crew-no-jobs {
  color: #607682;
  font-size: 0.74rem;
  font-weight: 800;
}

@media (max-width: 760px) {
  .inbox-shell {
    grid-template-columns: 1fr;
  }

  .inbox-message-list {
    max-height: none;
  }

  .inbox-message-meta {
    grid-template-columns: 1fr;
  }

  .work-progress-action-grid,
  .daily-progress-summary,
  .daily-progress-grid,
  .daily-progress-capture-panel {
    grid-template-columns: 1fr;
  }

  .daily-progress-actions {
    flex-direction: column-reverse;
  }

  .subcontractor-dashboard,
  .subcontractor-controls,
  .subcontractor-registry-shell,
  .subcontractor-form-grid {
    grid-template-columns: 1fr;
  }

  .subcontractor-registry-rail {
    position: static;
  }

  .subcontractor-trade-filter {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .subcontractor-trade-grid {
    grid-template-columns: 1fr;
  }

  .subcontractor-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .subcontractor-card-top,
  .subcontractor-registry-head {
    display: grid;
  }

  .subcontractor-badge-stack {
    justify-content: flex-start;
  }

  .subcontractor-card-meta {
    grid-template-columns: 1fr;
  }
}

/* Production calendar final layout guard.
   Keep the month view below the header and inside the page frame. */
#productionChartView.active:not(.production-board-view-active) {
  margin-top: 0 !important;
  padding-top: 8px !important;
  transform: none !important;
}

#productionChartView:not(.production-board-view-active) .production-calendar-shell {
  grid-template-columns: clamp(176px, 14vw, 220px) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#productionChartView:not(.production-board-view-active) .production-calendar-main,
#productionChartView:not(.production-board-view-active) #productionChart {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#productionChartView:not(.production-board-view-active) .calendar-grid.production-calendar-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

#productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day {
  min-width: 0 !important;
  padding-inline: clamp(3px, 0.42vw, 6px) !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
  #productionChartView:not(.production-board-view-active) .production-calendar-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 190px) repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
}

@media (max-width: 640px) {
  body.login-active {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }

  .login-screen {
    min-height: 100dvh;
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
    place-items: center;
    overflow: hidden;
  }

  .login-panel {
    display: grid;
    width: min(100%, 390px);
    max-height: 100%;
    overflow: visible;
  }

  .login-panel-shell {
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: calc(100dvh - 20px);
    border-radius: 12px;
  }

  .login-brand-panel {
    min-height: 0;
    gap: 2px;
    padding: 52px 14px 28px;
    text-align: center;
  }

  .login-brand-panel::after {
    background:
      linear-gradient(180deg, rgba(8, 24, 39, 0.14) 0%, rgba(8, 24, 39, 0.3) 100%),
      url("./login-stronghold-blueprint.png") no-repeat right -68px bottom -390px / min(150%, 640px);
  }

  .login-brand-panel .eyebrow,
  .login-brand-copy,
  .login-brand-points {
    display: none;
  }

  .login-brand-title {
    width: 100%;
    justify-items: center;
  }

  .login-brand-name {
    font-size: clamp(2rem, 12vw, 2.7rem);
    line-height: 0.95;
  }

  .login-brand-subtitle {
    max-width: 17rem;
    font-size: 0.58rem;
    line-height: 1.15;
    transform: translateY(-6px);
  }

  .login-form-panel {
    align-content: start;
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }

  .login-form-head {
    gap: 2px;
    text-align: center;
  }

  .login-form-head .eyebrow,
  .login-form-head h2,
  .login-form-head .helper,
  .login-fields,
  .login-fields label + label,
  .login-submit {
    transform: none;
  }

  .login-form-head .eyebrow {
    font-size: 0.68rem;
  }

  .login-form-head h2 {
    font-size: 1.22rem;
    line-height: 1.1;
  }

  .login-form-head .helper {
    margin: 0 auto;
    max-width: 19rem;
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .login-fields {
    gap: 8px;
  }

  .login-fields label {
    gap: 4px;
    font-size: 0.76rem;
  }

  .login-fields input {
    min-height: 38px;
    padding: 0 11px;
    font-size: 0.9rem;
  }

  .login-submit {
    min-height: 40px;
    font-size: 0.84rem;
  }

  .login-submit:hover {
    transform: none;
  }

  .login-footer-logo-wrap {
    padding-top: 0;
  }

  .login-footer-logo {
    width: min(210px, 72vw);
    max-height: 58px;
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  .login-brand-panel {
    padding-block: 36px 18px;
  }

  .login-brand-title {
    transform: none;
  }

  .login-brand-name {
    font-size: clamp(1.55rem, 10vw, 2.1rem);
  }

  .login-brand-subtitle {
    display: none;
  }

  .login-form-panel {
    gap: 7px;
    padding: 10px 12px;
  }

  .login-form-head .helper {
    display: none;
  }

  .login-fields input {
    min-height: 34px;
  }

  .login-submit {
    min-height: 36px;
  }

  .login-footer-logo {
    max-height: 44px;
  }
}

/* Final mobile production calendar guard.
   This sits after the desktop layout guard so phones keep the agenda layout. */
@media (max-width: 700px) {
  #productionChartView.active:not(.production-board-view-active) {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding: 8px 10px 18px !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-sidebar {
    display: none !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-main,
  #productionChartView:not(.production-board-view-active) #productionChart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-toolbar,
  #productionChartView:not(.production-board-view-active) .calendar-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-toolbar-left,
  #productionChartView:not(.production-board-view-active) .production-calendar-toolbar-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav h3,
  #productionChartView:not(.production-board-view-active) .calendar-controls h3 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-today,
  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav .ghost,
  #productionChartView:not(.production-board-view-active) [data-production-mode] {
    min-height: 38px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-mode-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #productionChartView:not(.production-board-view-active) .production-executive-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-grid.production-calendar-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-head {
    display: none !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    overflow: visible !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day.muted {
    display: none !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-day-top {
    grid-row: 1 / span 4 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    margin: 0 !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-bar-stack,
  #productionChartView:not(.production-board-view-active) .calendar-entry-stack {
    position: static !important;
    grid-column: 2 !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-add-hint {
    grid-column: 2 !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-date-entry,
  #productionChartView:not(.production-board-view-active) .calendar-date-entry-more,
  #productionChartView:not(.production-board-view-active) .calendar-span-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-span-copy,
  #productionChartView:not(.production-board-view-active) .calendar-span-project,
  #productionChartView:not(.production-board-view-active) .calendar-span-crew,
  #productionChartView:not(.production-board-view-active) .calendar-span-bar small {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 700px) {
  #productionChartView:not(.production-board-view-active) .production-calendar-toolbar-left {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav {
    display: contents !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav [data-calendar-shift="-1"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-month-nav [data-calendar-shift="1"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-toolbar-left h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-today {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

/* Phones should keep the production calendar as a compact month grid, not an agenda list. */
@media (max-width: 700px) {
  #productionChartView:not(.production-board-view-active) .production-calendar-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-main,
  #productionChartView:not(.production-board-view-active) #productionChart {
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-grid.production-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid #d7e4ec !important;
    border-radius: 8px !important;
    background: #d7e4ec !important;
    box-shadow: 0 10px 22px rgba(18, 41, 61, 0.06) !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-head {
    display: flex !important;
    min-height: 24px !important;
    padding: 0 !important;
    color: #597383 !important;
    background: #edf5f9 !important;
    font-size: 0.55rem !important;
    letter-spacing: 0 !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day,
  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day.muted {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: clamp(64px, 17vw, 86px) !important;
    padding: 4px 3px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day {
    background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%) !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day.calendar-weekend {
    background: linear-gradient(180deg, #f6fafc 0%, #eef5f8 100%) !important;
  }

  #productionChartView:not(.production-board-view-active) .production-calendar-grid .calendar-day.muted {
    background: linear-gradient(180deg, #dce7ee 0%, #cfdae2 100%) !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-day-top {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 0 2px !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-day-number {
    min-width: 19px !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 5px !important;
    font-size: 0.64rem !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-day-weekday,
  #productionChartView:not(.production-board-view-active) .calendar-add-hint {
    display: none !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-entry-stack {
    position: static !important;
    display: grid !important;
    grid-column: auto !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-bar-stack {
    position: absolute !important;
    right: auto !important;
    bottom: 3px !important;
    left: 3px !important;
    display: grid !important;
    grid-column: auto !important;
    gap: 2px !important;
    width: calc(100% + 6px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-date-entry,
  #productionChartView:not(.production-board-view-active) .calendar-date-entry-more {
    min-height: 16px !important;
    width: 100% !important;
    padding: 2px 3px !important;
    border-radius: 4px !important;
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-span-bar {
    width: var(--span-width, 100%) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 13px !important;
    padding: 0 3px !important;
    border-left-width: 2px !important;
    border-radius: 4px !important;
    font-size: 0.5rem !important;
    line-height: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-span-copy,
  #productionChartView:not(.production-board-view-active) .calendar-span-project,
  #productionChartView:not(.production-board-view-active) .calendar-span-crew {
    display: inline !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-span-bar small {
    display: none !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-span-bar.is-label-hidden {
    min-height: 10px !important;
    padding: 0 !important;
    border-left-width: 0 !important;
  }
}

/* Desktop header fit guard: keep large workflow buttons and icon controls from colliding. */
@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    display: grid !important;
    grid-template-columns:
      minmax(188px, 0.7fr)
      minmax(250px, 1.05fr)
      minmax(388px, 1.2fr)
      minmax(146px, auto) !important;
    gap: clamp(7px, 0.7vw, 14px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 96px !important;
    height: auto !important;
    padding: 8px clamp(10px, 1.5vw, 22px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  body:not(.login-active) .app-header .header-brand {
    position: relative !important;
    order: 0 !important;
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    margin-left: 0 !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 230px) !important;
    min-width: 0 !important;
    max-width: 230px !important;
    height: 76px !important;
    justify-self: start !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body:not(.login-active) .app-header .header-logo-shell a {
    width: 100% !important;
    height: 76px !important;
    justify-content: flex-start !important;
  }

  body:not(.login-active) .app-header .header-logo {
    width: 100% !important;
    height: 76px !important;
    max-height: 76px !important;
  }

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

  body:not(.login-active) .app-header .login-card {
    order: 0 !important;
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    gap: 7px !important;
  }

  body:not(.login-active) .app-header .header-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-date-entry.is-safety-report {
    min-height: 18px !important;
    height: 18px !important;
    padding: 2px 5px !important;
    border-color: rgba(161, 111, 0, 0.7) !important;
    background: #f5c84b !important;
    color: #4d3300 !important;
  }

  #productionChartView:not(.production-board-view-active) .calendar-date-entry.is-safety-report span {
    font-size: 0.58rem !important;
  }

  body:not(.login-active) .app-header .header-links .top-link {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    font-size: clamp(0.56rem, 0.58vw, 0.66rem) !important;
    white-space: nowrap !important;
  }

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

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

  body:not(.login-active) .app-header .header-workflow-links {
    order: 0 !important;
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: initial !important;
    gap: clamp(5px, 0.55vw, 9px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body:not(.login-active) .app-header .header-chart-links,
  body:not(.login-active) .app-header .header-stage-links {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: clamp(4px, 0.45vw, 7px) !important;
    overflow: hidden !important;
  }

  body:not(.login-active) .app-header .header-chart-links {
    flex-basis: 40% !important;
  }

  body:not(.login-active) .app-header .header-stage-links {
    flex-basis: 60% !important;
  }

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

  body:not(.login-active) .app-header .header-chart-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 7px clamp(5px, 0.55vw, 9px) !important;
    grid-template-columns: clamp(27px, 2.2vw, 33px) minmax(0, 1fr) !important;
    column-gap: clamp(5px, 0.5vw, 8px) !important;
  }

  body:not(.login-active) .app-header .header-nav-icon {
    width: clamp(27px, 2.2vw, 32px) !important;
    height: clamp(27px, 2.2vw, 32px) !important;
  }

  body:not(.login-active) .app-header .header-nav-icon svg {
    width: clamp(16px, 1.45vw, 20px) !important;
    height: clamp(16px, 1.45vw, 20px) !important;
  }

  body:not(.login-active) .app-header .header-nav-text {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(0.54rem, 0.56vw, 0.66rem) !important;
    line-height: 1.02 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    order: 0 !important;
    grid-column: 4 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: initial !important;
    gap: clamp(4px, 0.45vw, 7px) !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 {
    width: clamp(30px, 2.5vw, 34px) !important;
    min-width: clamp(30px, 2.5vw, 34px) !important;
    max-width: clamp(30px, 2.5vw, 34px) !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body:not(.login-active) .app-header .header-icon-wrap,
  body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  body:not(.login-active) .app-header .header-user-icon {
    width: clamp(25px, 2vw, 30px) !important;
    height: clamp(25px, 2vw, 30px) !important;
  }

  body:not(.login-active) .app-header #headerNotificationsButton svg,
  body:not(.login-active) .app-header #headerChatButton svg,
  body:not(.login-active) .app-header #headerHomeButton svg,
  body:not(.login-active) .app-header .header-user-icon svg {
    width: clamp(23px, 1.9vw, 27px) !important;
    height: clamp(23px, 1.9vw, 27px) !important;
  }

  body:not(.login-active) .chat-launcher-root {
    top: 104px !important;
  }
}

@media (min-width: 901px) and (max-width: 1380px) {
  body:not(.login-active) .app-header {
    grid-template-columns:
      minmax(154px, 0.55fr)
      minmax(222px, 0.86fr)
      minmax(360px, 1.45fr)
      minmax(134px, auto) !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    max-width: 180px !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

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

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

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.54rem !important;
    line-height: 1 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.login-active) .app-header {
    grid-template-columns:
      minmax(118px, 0.45fr)
      minmax(196px, 0.78fr)
      minmax(320px, 1.7fr)
      minmax(124px, auto) !important;
    gap: 6px !important;
    min-height: 86px !important;
    padding-inline: 8px !important;
  }

  body:not(.login-active) .app-header .header-logo-shell {
    max-width: 138px !important;
    height: 60px !important;
  }

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

  body:not(.login-active) .app-header .header-links .top-link {
    max-width: 58px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.login-active) .app-header .search-box input {
    min-height: 31px !important;
    height: 31px !important;
    padding-inline: 10px !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 5px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }

  body:not(.login-active) .app-header .header-nav-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
  }

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

  body:not(.login-active) .app-header .header-nav-text {
    font-size: 0.47rem !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 {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  body:not(.login-active) .app-header .header-icon-wrap,
  body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  body:not(.login-active) .app-header .header-user-icon {
    width: 24px !important;
    height: 24px !important;
  }

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

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  align-items: start;
}

.fleet-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 9px 10px;
  cursor: pointer;
}

.compact-fleet-card {
  min-height: 112px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.compact-fleet-card:hover,
.compact-fleet-card:focus-visible {
  border-color: rgba(31, 127, 143, 0.38);
  box-shadow: 0 10px 22px rgba(22, 58, 70, 0.1);
  transform: translateY(-1px);
  outline: 0;
}

.fleet-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.fleet-vehicle-thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(31, 127, 143, 0.2);
  border-radius: 7px;
  color: #1f6170;
  background: linear-gradient(180deg, #f1f8fa 0%, #e4f0f3 100%);
  font-size: 1rem;
  font-weight: 900;
}

.fleet-vehicle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fleet-card-head h3 {
  margin: 1px 0 2px;
  font-size: 0.9rem;
  line-height: 1.15;
}

.fleet-status-pill {
  align-self: start;
  padding: 3px 6px;
  border: 1px solid rgba(31, 127, 143, 0.2);
  border-radius: 999px;
  color: #1f6170;
  background: #f1f8fa;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.fleet-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.fleet-card-head p,
.fleet-note {
  margin: 0;
  color: #5f7786;
  font-size: 0.72rem;
}

.fleet-meta-grid,
.fleet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fleet-meta-grid span {
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 6px;
  border: 1px solid #dce8ec;
  border-radius: 7px;
  background: #f8fbfc;
  color: #1f3c4e;
  font-size: 0.76rem;
}

.fleet-meta-grid strong {
  color: #6a8291;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fleet-compact-meta {
  display: grid;
  gap: 5px;
}

.fleet-compact-meta span {
  display: grid;
  gap: 1px;
  color: #1c3b4a;
  font-size: 0.74rem;
  line-height: 1.18;
}

.fleet-compact-meta strong {
  color: #6a8291;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fleet-form-wide {
  grid-column: 1 / -1;
}

.fleet-details {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #dce8ec;
}

.fleet-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fleet-history {
  display: grid;
  gap: 6px;
}

.fleet-vehicle-dialog-details {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dce8ec;
}

.fleet-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fleet-dialog-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.fleet-history h4 {
  margin: 0;
  color: #183747;
  font-size: 0.82rem;
}

.fleet-history-row {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid #dbe8ec;
  border-radius: 7px;
  background: #ffffff;
}

.fleet-history-row span,
.fleet-history-row p {
  margin: 0;
  color: #1c3b4a;
  font-size: 0.78rem;
}

.fleet-history-row small {
  color: #6b8291;
}

@media (max-width: 700px) {
  .fleet-grid,
  .fleet-form-grid,
  .fleet-meta-grid,
  .fleet-dialog-history-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  #homeFeed {
    display: flex !important;
    flex-direction: column !important;
  }

  #homeFeed .home-base-hero {
    order: 0 !important;
  }

  #homeFeed .home-role-layout.field {
    display: contents !important;
  }

  #homeFeed .home-field-assigned-jobs {
    order: 1 !important;
  }

  #homeFeed .home-field-todo-list {
    order: 2 !important;
  }

  #homeFeed .home-role-metric-grid {
    order: 3 !important;
  }

  #homeFeed .home-role-layout.field > .home-role-panel:not(.home-field-assigned-jobs):not(.home-field-todo-list) {
    order: 4 !important;
  }
}

body .app-shell .chat-launcher-root .chat-launcher-item,
body .app-shell .chat-launcher-root .chat-launcher-item:focus,
body .app-shell .chat-launcher-root .chat-launcher-item:active {
  --button-glass-accent: transparent !important;
  --button-glass-glow: transparent !important;
  color: #26343b !important;
  border: 1px solid #d8dee3 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

body .app-shell .chat-launcher-root .chat-launcher-item:hover {
  color: #26343b !important;
  border-color: #b7c2c9 !important;
  background: #f4f6f7 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

body .app-shell .chat-launcher-root .chat-person-avatar,
body .app-shell .chat-launcher-root .role-avatar {
  color: #ffffff !important;
  background: #6c7880 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .app-shell .chat-launcher-root .chat-person-copy strong,
body .app-shell .chat-launcher-root .chat-conversation-head strong {
  color: #243039 !important;
  text-shadow: none !important;
}

body .app-shell .chat-launcher-root .chat-person-copy small {
  color: #687982 !important;
  text-shadow: none !important;
}

body .app-shell .chat-launcher-root .chat-person-badge,
body .app-shell .chat-launcher-root .chat-conversation-unread {
  color: #34424a !important;
  border-color: #d0d8de !important;
  background: #eef1f3 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* True-final desktop header lock.
   This sits at the end so old header experiments cannot move the logo/search
   relationship or truncate the workflow labels. */
@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 300px;
    --header-search-width: 420px;
    --header-action-width: 150px;
    --header-action-height: 60px;
    --header-action-icon: 33px;
    --header-action-icon-svg: 20px;
    --header-action-font: 0.68rem;
    --header-admin-font: 0.66rem;
    --header-gap: 12px;
    position: sticky !important;
    top: 0 !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: 100vw !important;
    min-height: 104px !important;
    height: 104px !important;
    max-height: 104px !important;
    padding: 8px clamp(10px, 1.15vw, 22px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

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

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: var(--header-logo-width) !important;
    min-width: 0 !important;
    max-width: var(--header-logo-width) !important;
    height: 92px !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !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: 92px !important;
    max-height: 92px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body:not(.login-active) .app-header .login-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: var(--header-search-width) !important;
    min-width: 0 !important;
    max-width: var(--header-search-width) !important;
    display: grid !important;
    gap: 8px !important;
    transform: none !important;
  }

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

  body:not(.login-active) .app-header .header-links .top-link {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 7px !important;
    font-size: var(--header-admin-font) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

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

  body:not(.login-active) .app-header .search-box input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
  }

  body:not(.login-active) .app-header .header-workflow-links {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--header-gap) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !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 0 auto !important;
    align-items: center !important;
    gap: calc(var(--header-gap) * 0.72) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-chart-divider {
    display: block !important;
    flex: 0 0 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    height: calc(var(--header-action-height) + 2px) !important;
    align-self: center !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;
    padding: 8px 10px 8px 12px !important;
    grid-template-columns: var(--header-action-icon) minmax(0, 1fr) !important;
    column-gap: 8px !important;
    overflow: hidden !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-icon svg {
    width: var(--header-action-icon-svg) !important;
    height: var(--header-action-icon-svg) !important;
  }

  body:not(.login-active) .app-header .header-nav-text,
  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    display: block !important;
    max-width: 100% !important;
    color: #f8fdff !important;
    font-size: var(--header-action-font) !important;
    line-height: 1.03 !important;
    letter-spacing: 0.055em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: calc(var(--header-gap) * 0.72) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    transform: none !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;
  }

  body:not(.login-active) .app-header .header-icon-wrap,
  body:not(.login-active) .app-header #headerHomeButton .header-icon-wrap,
  body:not(.login-active) .app-header .header-user-icon {
    width: 30px !important;
    height: 30px !important;
  }

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

  body:not(.login-active) .chat-launcher-root {
    top: 116px !important;
  }
}

@media (min-width: 1601px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 300px;
    --header-search-width: 420px;
    --header-action-width: 150px;
    --header-action-height: 60px;
    --header-action-icon: 33px;
    --header-action-icon-svg: 20px;
    --header-action-font: 0.68rem;
    --header-admin-font: 0.66rem;
    --header-gap: 12px;
  }
}

@media (min-width: 1421px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 260px;
    --header-search-width: 360px;
    --header-action-width: 140px;
    --header-action-height: 56px;
    --header-action-icon: 31px;
    --header-action-icon-svg: 18px;
    --header-action-font: 0.62rem;
    --header-admin-font: 0.61rem;
    --header-gap: 10px;
  }
}

@media (min-width: 1181px) and (max-width: 1420px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 220px;
    --header-search-width: 320px;
    --header-action-width: 124px;
    --header-action-height: 52px;
    --header-action-icon: 28px;
    --header-action-icon-svg: 16px;
    --header-action-font: 0.55rem;
    --header-admin-font: 0.57rem;
    --header-gap: 8px;
  }

  body:not(.login-active) .app-header .header-chart-link {
    padding: 6px 7px !important;
    column-gap: 6px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1180px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 180px;
    --header-search-width: 280px;
    --header-action-width: 105px;
    --header-action-height: 48px;
    --header-action-icon: 24px;
    --header-action-icon-svg: 14px;
    --header-action-font: 0.48rem;
    --header-admin-font: 0.52rem;
    --header-gap: 6px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 160px;
    --header-search-width: 230px;
    --header-action-width: 88px;
    --header-action-height: 48px;
    --header-action-icon: 22px;
    --header-action-icon-svg: 13px;
    --header-action-font: 0.42rem;
    --header-admin-font: 0.48rem;
    --header-gap: 5px;
    min-height: 94px !important;
    height: 94px !important;
    max-height: 94px !important;
    padding-inline: 8px !important;
  }

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

  body:not(.login-active) .app-header .header-chart-link {
    padding: 5px 4px !important;
    column-gap: 3px !important;
  }

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

@media (min-width: 1481px) and (max-width: 1600px) {
  body:not(.login-active) .app-header {
    --header-action-width: 128px;
    --header-action-font: 0.58rem;
  }
}

@media (min-width: 1321px) and (max-width: 1480px) {
  body:not(.login-active) .app-header {
    --header-action-width: 108px;
    --header-action-font: 0.51rem;
  }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  body:not(.login-active) .app-header {
    --header-action-width: 94px;
    --header-action-font: 0.45rem;
  }
}

@media (min-width: 1101px) and (max-width: 1180px) {
  body:not(.login-active) .app-header {
    --header-action-width: 94px;
    --header-action-font: 0.45rem;
  }
}

@media (min-width: 901px) and (max-width: 1480px) {
  body:not(.login-active) .app-header .header-chart-link {
    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: 4px 5px !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;
    min-width: 0 !important;
    text-align: center !important;
    line-height: 0.98 !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Header final reset: keep a stable desktop row and scroll only when needed. */
@media (min-width: 901px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 210px !important;
    --header-search-width: 320px !important;
    --header-action-width: 112px !important;
    --header-action-height: 54px !important;
    --header-action-icon: 27px !important;
    --header-action-icon-svg: 16px !important;
    --header-action-font: 0.50rem !important;
    --header-gap: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !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: 100vw !important;
    max-width: 100vw !important;
    min-height: 104px !important;
    height: 104px !important;
    max-height: 104px !important;
    padding: 8px 12px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

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

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

  body:not(.login-active) .app-header .header-logo-shell {
    position: static !important;
    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;
    height: 88px !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    pointer-events: auto !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;
    object-fit: contain !important;
    object-position: center center !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;
    align-self: center !important;
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    transform: none !important;
  }

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

  body:not(.login-active) .app-header .header-links .top-link {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 7px !important;
    color: #f8fcff !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(25, 72, 86, 0.96) 0%, rgba(9, 42, 55, 0.98) 100%) !important;
    border: 1px solid rgba(41, 217, 229, 0.42) !important;
    border-radius: 8px !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;
    font-size: 0.64rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.58) !important;
  }

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

  body:not(.login-active) .app-header .search-box input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !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;
    justify-content: flex-start !important;
    gap: calc(var(--header-gap) * 0.7) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !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: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body:not(.login-active) .app-header .header-chart-divider {
    display: block !important;
    flex: 0 0 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    height: calc(var(--header-action-height) + 2px) !important;
    align-self: center !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;
    padding: 4px 5px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    row-gap: 2px !important;
    overflow: hidden !important;
    color: #f8fcff !important;
    background:
      linear-gradient(116deg, rgba(255, 255, 255, 0) 0 64%, rgba(255, 255, 255, 0.13) 64.4% 73%, rgba(255, 255, 255, 0.02) 73.4% 100%),
      radial-gradient(circle at 22% 0%, rgba(41, 217, 229, 0.22), transparent 42%),
      linear-gradient(180deg, rgba(31, 75, 90, 0.98) 0%, rgba(10, 42, 55, 0.99) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--header-button-accent, #29d9e5) 62%, #ffffff 12%) !important;
    border-radius: 8px !important;
    box-shadow:
      inset 3px 0 0 var(--header-button-accent, #29d9e5),
      inset 0 1px 0 rgba(255, 255, 255, 0.23),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24),
      0 11px 18px rgba(7, 31, 44, 0.20),
      0 0 0 1px rgba(4, 22, 32, 0.12) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.66) !important;
    text-transform: uppercase !important;
    backdrop-filter: saturate(1.12) blur(8px) !important;
  }

  body:not(.login-active) .app-header .header-chart-link::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(116deg, transparent 0 66%, rgba(255, 255, 255, 0.13) 66.4% 75%, transparent 75.4% 100%) !important;
  }

  body:not(.login-active) .app-header .header-chart-link::after {
    left: 48px !important;
    right: 10px !important;
    bottom: 6px !important;
  }

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

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

  body:not(.login-active) .app-header .header-nav-text,
  body:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    color: #f8fcff !important;
    font-size: var(--header-action-font) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72) !important;
  }

  body:not(.login-active) .app-header .header-utility-links {
    order: 3 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    transform: none !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: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body:not(.login-active) .chat-launcher-root {
    top: 116px !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 190px !important;
    --header-search-width: 295px !important;
    --header-action-width: 104px !important;
    --header-action-height: 52px !important;
    --header-action-icon: 25px !important;
    --header-action-icon-svg: 15px !important;
    --header-action-font: 0.46rem !important;
    --header-gap: 7px !important;
  }

  body:not(.login-active) .app-header .header-links .top-link {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 5px !important;
    font-size: 0.57rem !important;
  }

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

@media (min-width: 901px) and (max-width: 1280px) {
  body:not(.login-active) .app-header {
    --header-logo-width: 170px !important;
    --header-search-width: 260px !important;
    --header-action-width: 92px !important;
    --header-action-height: 50px !important;
    --header-action-icon: 22px !important;
    --header-action-icon-svg: 13px !important;
    --header-action-font: 0.40rem !important;
    --header-gap: 5px !important;
    padding-inline: 8px !important;
  }

  body:not(.login-active) .app-header .header-chart-link {
    padding-inline: 4px !important;
  }

  body:not(.login-active) .app-header .header-chart-divider {
    display: none !important;
  }
}
/* Admin upload recovery */
.upload-recovery-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.upload-recovery-metric {
  border: 1px solid rgba(0, 114, 122, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(216, 234, 235, 0.72));
  box-shadow: 0 12px 28px rgba(0, 37, 43, 0.08);
}

.upload-recovery-metric small,
.upload-recovery-panel .eyebrow {
  display: block;
  color: #00727a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.upload-recovery-metric strong {
  display: block;
  margin-top: 6px;
  color: #081f27;
  font-size: 28px;
  line-height: 1;
}

.upload-recovery-metric span {
  display: block;
  margin-top: 8px;
  color: #415861;
  font-size: 12px;
}

.upload-recovery-metric.success {
  border-color: rgba(39, 156, 87, 0.32);
}

.upload-recovery-metric.warning {
  border-color: rgba(205, 151, 32, 0.45);
  box-shadow: 0 12px 28px rgba(205, 151, 32, 0.12);
}

.upload-recovery-metric.danger {
  border-color: rgba(196, 58, 58, 0.45);
  box-shadow: 0 12px 28px rgba(196, 58, 58, 0.12);
}

.upload-recovery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.upload-recovery-layout.secondary {
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.upload-recovery-panel {
  padding: 16px;
}

.upload-recovery-panel.important {
  border-left: 5px solid #00a9b7;
}

.upload-recovery-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.upload-recovery-panel-head h3 {
  margin: 2px 0 0;
  color: #102c36;
}

.upload-recovery-panel-head > span {
  min-width: 42px;
  border-radius: 8px;
  padding: 6px 10px;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(145deg, #00727a, #05303c);
  font-weight: 900;
}

.upload-recovery-list,
.upload-recovery-audit {
  display: grid;
  gap: 9px;
  max-height: 540px;
  overflow: auto;
  padding-right: 4px;
}

.upload-recovery-list.compact {
  max-height: 390px;
}

.upload-recovery-file {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(0, 114, 122, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.upload-recovery-file.missing {
  border-color: rgba(196, 58, 58, 0.38);
  background: rgba(255, 242, 241, 0.78);
}

.upload-recovery-file-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(145deg, #008c98, #061f29);
  font-size: 12px;
  font-weight: 900;
}

.upload-recovery-file-main {
  min-width: 0;
}

.upload-recovery-file-main strong,
.upload-recovery-file-main span,
.upload-recovery-file-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-recovery-file-main strong {
  color: #102c36;
}

.upload-recovery-file-main span,
.upload-recovery-file-main small {
  color: #52656d;
  font-size: 12px;
}

.upload-recovery-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.upload-recovery-audit > div {
  border: 1px solid rgba(0, 114, 122, 0.14);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.72);
}

.upload-recovery-audit strong,
.upload-recovery-audit small {
  display: block;
}

.upload-recovery-audit strong {
  color: #102c36;
}

.upload-recovery-audit small {
  margin-top: 3px;
  color: #52656d;
}

@media (max-width: 900px) {
  .upload-recovery-dashboard,
  .upload-recovery-layout,
  .upload-recovery-layout.secondary {
    grid-template-columns: 1fr;
  }

  .upload-recovery-file {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .upload-recovery-file-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* 2026-06 cleanup pass: mobile app shell and control readability.
   This sits at EOF on purpose so older theme experiments cannot leak through. */
@media (max-width: 900px) {
  html body:not(.login-active) .app-header {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "logo tools utilities"
      "search search search"
      "workflow workflow workflow" !important;
    gap: 7px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 7px 7px 8px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  html body:not(.login-active) .app-header .header-logo-shell {
    grid-area: logo !important;
    position: static !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    transform: none !important;
    justify-self: start !important;
    align-self: center !important;
  }

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

  html body:not(.login-active) .app-header .header-tools-menu {
    grid-area: tools !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
  }

  html body:not(.login-active) .app-header .login-card {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

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

  html body:not(.login-active) .app-header .header-utility-links {
    grid-area: utilities !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !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: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !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;
    height: 28px !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: 20px !important;
    height: 20px !important;
  }

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

  html body:not(.login-active) .app-header .header-workflow-links {
    grid-area: workflow !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 0 2px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body:not(.login-active) .app-header .header-chart-links,
  html body:not(.login-active) .app-header .header-stage-links {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html body:not(.login-active) .app-header .header-chart-divider {
    display: 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 {
    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    scroll-snap-align: start !important;
    padding: 5px 6px !important;
  }

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

  html body:not(.login-active) .app-header .header-nav-icon svg {
    width: 14px !important;
    height: 14px !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: 0.48rem !important;
    line-height: 0.96 !important;
    letter-spacing: 0.03em !important;
  }

  html body:not(.login-active) .app-shell {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  html body:not(.login-active) .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, rgba(5, 31, 34, 0.98), rgba(3, 20, 22, 0.98)) !important;
    border-bottom: 1px solid rgba(41, 217, 229, 0.28) !important;
  }

  html body:not(.login-active) .sidebar .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 13px !important;
    scroll-snap-align: start !important;
    font-size: 0.70rem !important;
    white-space: nowrap !important;
  }

  html body:not(.login-active) .sidebar > .nav-link[data-open-project-wizard="true"],
  html body:not(.login-active) .sidebar .task-nav-link {
    min-width: 142px !important;
  }

  html body:not(.login-active) .sidebar-module-label,
  html body:not(.login-active) .sidebar-spacer,
  html body:not(.login-active) .sidebar-user,
  html body:not(.login-active) .sidebar-notifications {
    display: none !important;
  }

  html body:not(.login-active) .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px 7px 18px !important;
    overflow-x: clip !important;
  }

  html body:not(.login-active) .workspace-topbar {
    margin-bottom: 8px !important;
  }
}

@media (min-width: 901px) {
  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 {
    min-width: var(--header-action-width) !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: clamp(0.48rem, 0.42rem + 0.16vw, 0.66rem) !important;
  }
}

@media (min-width: 1281px) and (max-width: 1500px) {
  html body:not(.login-active) .app-header {
    --header-action-width: 118px !important;
    --header-action-font: 0.55rem !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 {
    padding-inline: 7px !important;
  }
}

@media (max-width: 900px) {
  html body:not(.login-active) .table-wrap,
  html body:not(.login-active) #customerList .table-wrap,
  html body:not(.login-active) #recentPropertyList .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  html body:not(.login-active) #customerList table,
  html body:not(.login-active) #recentPropertyList table {
    min-width: 620px !important;
    width: 620px !important;
  }

  html body:not(.login-active) #customersView .clients-page-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.login-active) #customersView .clients-map-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.login-active) #customersView .clients-map-action-rail {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.login-active) #customersView .customer-list-map {
    width: 100% !important;
    max-width: 100% !important;
    height: 280px !important;
  }
}