/* Persistent shell, shared components and compact professional layouts. */

* { box-sizing: border-box; }
body { margin: 0; color: var(--sp-navy); background: var(--sp-bg); }
button, input, textarea, select { font: inherit; }
button { min-height: var(--sp-control-height); border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #2b73b9; outline-offset: 2px; }
.hidden { display: none !important; }
.full-width { width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--sp-green); font-weight: 850; }
.mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: var(--sp-green); }
.user { display: flex; align-items: center; gap: 10px; }
.user strong, .user small { display: block; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--sp-green); background: var(--sp-green-soft); font-weight: 800; }
.logout { color: var(--sp-muted); background: transparent; }
.auth { display: grid; min-height: 100vh; padding: 20px; place-items: center; }
.auth form { width: min(460px, 100%); padding: 32px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); background: var(--sp-surface); box-shadow: 0 20px 50px #0001; }
.auth > section { width: min(460px, 100%); padding: 32px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); background: var(--sp-surface); box-shadow: 0 20px 50px #0001; }
.auth > section form { width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth > section > .text-button { margin-top: 14px; }
.mfa-qr { display: grid; width: 190px; height: 190px; margin: 16px auto; place-items: center; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); background: #fff; }
.mfa-qr img { display: block; max-width: 100%; max-height: 100%; }
.mfa-secret { display: block; overflow-wrap: anywhere; padding: 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); background: #f8faf9; font-size: 13px; letter-spacing: .06em; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; padding-left: 28px; }
.recovery-code-list li { padding: 7px 5px; font-family: ui-monospace, monospace; font-size: 13px; }
.auth h1 { margin: 25px 0 8px; font-size: 36px; letter-spacing: -.06em; }
.auth p { color: var(--sp-muted); font-size: 14px; line-height: 1.5; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--sp-muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--sp-line); }
.auth-provider-actions { display: grid; gap: 9px; }
.auth-provider-actions button { display: flex; justify-content: center; align-items: center; gap: 9px; }
.auth-provider-actions button span { font-weight: 800; }

/* Consistent application shell and estate context. */
.top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding-inline: clamp(14px, 2.2vw, 32px); border-bottom: 1px solid var(--sp-line); background: var(--sp-surface); }
.layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.layout > aside { padding: 16px 12px; border-right: 1px solid var(--sp-line); background: #fbfdfb; }
.main { width: 100%; max-width: calc(var(--sp-content-max) + 2 * clamp(16px, 2.5vw, 36px)); margin-inline: auto; padding: 24px clamp(16px, 2.5vw, 36px) 48px; }
.switch { position: relative; }
.estate { width: 100%; min-height: 54px; padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: #fff; text-align: left; }
.estate strong, .estate small, .pop strong, .pop small { display: block; }
.estate small, .pop small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.pop { position: absolute; z-index: 1000; top: 60px; width: 100%; padding: 6px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: #fff; box-shadow: 0 14px 30px #1720391c; }
.pop button { width: 100%; padding: 9px; border-radius: var(--sp-radius-sm); background: #fff; text-align: left; }
.pop button:hover { background: var(--sp-green-soft); }
.nav { display: grid; gap: 2px; margin-top: 16px; }
.nav button { min-height: 38px; padding: 8px 11px; border-radius: var(--sp-radius-sm); color: #657486; background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.nav button span { display: inline-block; width: 22px; }
.nav button.active { color: var(--sp-green); background: var(--sp-green-soft); }
.view { display: block; }
.organisation-estates { display: grid; gap: 8px; }
.organisation-estate { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; box-shadow: none; }
.organisation-estate h3 { margin: 3px 0 2px; font-size: 14px; }
.organisation-estate p { margin: 0; color: var(--sp-muted); font-size: 11px; }

/* Shared page, card, metric and button patterns. */
.head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.head h1 { margin: 3px 0 4px; color: var(--sp-navy); font-size: clamp(23px, 2.1vw, 31px); letter-spacing: -.035em; }
.head p { max-width: 760px; margin: 0; color: var(--sp-muted); line-height: 1.45; }
.eyebrow { color: var(--sp-muted); font-size: 10px; letter-spacing: .1em; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.community-list { display: grid; gap: 14px; }
.community-post, .community-detail { padding: 18px; border: 1px solid var(--line, #dce3e8); border-radius: 12px; background: var(--surface, #fff); }
.community-post.is-pinned { border-inline-start: 4px solid var(--accent, #397a69); }
.community-title { font-weight: 700; text-align: left; }
.community-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted, #64748b); font-size: .88rem; }
.community-post > p { white-space: pre-wrap; }
.community-pin, .community-state { display: inline-block; margin-inline-start: 8px; padding: 3px 8px; border-radius: 999px; background: #edf4f1; color: #285d4f; font-size: .78rem; }
.community-body { margin-block: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.primary, .secondary, .neutral { min-height: 36px; padding: 8px 12px; border-radius: var(--sp-radius-sm); }
.primary { color: #fff; background: var(--sp-green); }
.secondary { color: var(--sp-green); background: var(--sp-green-soft); }
.neutral { color: var(--sp-navy-soft); background: #edf1ef; }
.panel { min-width: 0; padding: 16px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); box-shadow: var(--sp-shadow); }
.panel-spaced { margin-top: 12px; }
.form-panel { max-width: 900px; }
.detail-grid { margin-top: 16px; }
.detail-heading { margin-top: 18px !important; }
.section { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section h2, .panel h2 { color: var(--sp-navy); font-size: 14px; }
.section h2 { margin: 0; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr); gap: 12px; margin-top: 12px; }
.overview-map { padding: 12px; }
.overview-map #overviewMap { height: min(58vh, 640px); min-height: 440px; border-radius: var(--sp-radius-sm); background: #e8eeeb; }
.metric-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 76px; padding: 12px 14px; }
.metric-card .metric-label { grid-column: 1; font-size: 11px; }
.metric-card .metric { grid-row: 1 / span 2; grid-column: 2; margin: 0; color: var(--sp-navy); font-size: 24px; font-weight: 750; }
.metric-card .metric-foot { grid-column: 1; margin: 0; font-size: 10px; }

/* Lists, filter bars and empty states share the same usable content frame. */
.filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid var(--sp-line); border-bottom: 0; border-radius: var(--sp-radius) var(--sp-radius) 0 0; background: #fafcfb; }
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--sp-line); }
.tabs [role="tab"] { min-height: 34px; padding: 7px 11px; border-radius: var(--sp-radius-sm) var(--sp-radius-sm) 0 0; color: var(--sp-muted); background: transparent; }
.tabs [aria-selected="true"] { color: var(--sp-green); background: var(--sp-green-soft); box-shadow: inset 0 -2px var(--sp-green); }
.document-row, .issue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 2px; border-bottom: 1px solid #edf1ef; }
.document-row strong, .document-row small, .issue-row strong, .issue-row small { display: block; }
.document-row strong, .issue-row strong { font-size: 11px; }
.document-row small, .issue-row small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.record-hidden { display: none; }
.table-frame { min-height: 188px; }
.table-frame > .empty { min-height: 188px; }
.filter-bar .field { flex: 1 1 210px; margin: 0; }
.filter-bar label { font-size: 10px; }
.filter-bar input, .filter-bar select { min-height: 34px; padding: 7px 9px; }
.table-wrap { width: 100%; overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th, .table td { padding: 9px 8px; border-bottom: 1px solid #edf1ef; text-align: left; vertical-align: middle; }
.table th { position: sticky; top: 0; z-index: 1; color: #657486; background: #f8faf9; font-size: 9px; letter-spacing: .07em; }
.table tbody tr:hover { background: #f8fbf9; }
.table-sub { display: block; max-width: 240px; margin-top: 3px; overflow: hidden; color: var(--sp-muted); font-size: 10px; text-overflow: ellipsis; }
.text-button { min-height: auto; padding: 0; color: var(--sp-green); background: transparent; text-align: left; font-weight: 750; }
.empty { display: grid; min-height: 96px; place-items: center; padding: 20px; color: var(--sp-muted); font-size: 12px; text-align: center; }
.empty::before { content: ""; }
.quick { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin: 0; padding: 9px 10px; border: 0; border-bottom: 1px solid #edf1ef; border-radius: 0; }
.quick:last-child { border-bottom: 0; }
.quick strong, .quick span { line-height: 1.4; }
.activity { display: grid; gap: 0; }
.activity-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf1ef; }
.activity-row .icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: var(--sp-radius-sm); color: var(--sp-green); background: var(--sp-green-soft); }
.activity-row strong, .activity-row span { display: block; font-size: 11px; }
.activity-row span { margin-top: 2px; color: var(--sp-muted); }
.activity-row:last-child { border-bottom: 0; }
.overview-subsection { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sp-line); }
.attention-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid #edf1ef; color: var(--sp-navy); background: transparent; text-align: left; }
.attention-row:last-child { border-bottom: 0; }
.attention-row strong, .attention-row small { display: block; }
.attention-row strong { font-size: 11px; }
.attention-row small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.attention-row:hover strong { color: var(--sp-green); }
.overview-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.overview-link { min-height: 76px; padding: 14px; color: var(--sp-navy); text-align: left; cursor: pointer; }
.overview-link strong, .overview-link span { display: block; }
.overview-link strong { font-size: 12px; }
.overview-link span { margin-top: 6px; color: var(--sp-muted); font-size: 10px; line-height: 1.4; }
.overview-link:hover { border-color: var(--sp-green); }
.status { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 999px; background: #e9f3ed; color: #24624f; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.status.urgent, .status.overdue, .status.rejected { color: var(--sp-danger); background: #faece7; }
.status.important, .status.pending, .status.awaiting { color: var(--sp-warning); background: #fbf1df; }
.status.in_progress, .status.assigned { color: var(--sp-info); background: #e9f1fa; }

/* A map remains operational content, with its controls and detail in reach. */
.map-layout { grid-template-columns: minmax(0, 2.8fr) minmax(280px, .9fr); align-items: stretch; }
.map-layout > .map-panel { min-height: 650px; padding: 0; overflow: hidden; }
#workspaceMap { height: min(72vh, 820px) !important; min-height: 580px; background: #e8eeeb; }
#residentMap { height: min(72vh, 820px) !important; min-height: 580px; background: #e8eeeb; }
.settings-map { height: 360px; min-height: 280px; background: #e8eeeb; border-radius: 12px; overflow: hidden; }
.map-controls { max-height: min(72vh, 820px); overflow: auto; }
.map-controls h2, .feature-detail h2 { margin: 0 0 10px; font-size: 14px; }
.report-location-map { height: 280px; min-height: 220px; border-radius: var(--sp-radius-sm); background: #e8eeeb; }
.layer-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 4px; border-bottom: 1px solid var(--sp-line); cursor: pointer; }
.layer-row input { margin-top: 3px; accent-color: var(--sp-green); }
.layer-row strong, .layer-row small { display: block; }
.layer-row strong { font-size: 11px; }
.layer-row small { margin-top: 2px; color: var(--sp-muted); font-size: 10px; }
.feature-detail { font-size: 12px; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.details > div { min-width: 0; padding: 8px; border-radius: var(--sp-radius-sm); background: #f6f9f7; }
.details dt { color: var(--sp-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.details dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 11px; }
.workspace-detail h3, .feature-detail h3 { margin: 16px 0 8px; font-size: 13px; }
.asset-card { margin: 8px 0; padding: 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }

/* Forms and timeline. */
.field { display: grid; gap: 5px; margin: 10px 0; }
.field label { color: #526277; font-size: 11px; }
.field input, .field textarea, .field select { min-height: 36px; padding: 8px 10px; border-color: var(--sp-line); border-radius: var(--sp-radius-sm); background: #fff; }
.field textarea { min-height: 86px; }
.check-field { align-content: center; }
.check-field label { display: flex; align-items: center; gap: 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.timeline { display: grid; margin-bottom: 16px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 9px; padding-bottom: 14px; }
.timeline-item:not(:last-child)::before { position: absolute; top: 12px; bottom: -2px; left: 6px; width: 2px; background: var(--sp-line); content: ""; }
.timeline-dot { position: relative; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--sp-green); box-shadow: 0 0 0 1px var(--sp-green); }
.timeline-item p { margin: 5px 0; color: var(--sp-navy-soft); font-size: 12px; white-space: pre-wrap; }
.timeline-item small, .muted { color: var(--sp-muted); font-size: 10px; }
.metadata { max-height: 180px; overflow: auto; padding: 10px; border-radius: var(--sp-radius-sm); background: #f4f7f5; font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.divider { margin: 18px 0; border: 0; border-top: 1px solid var(--sp-line); }
.notice { font-size: 11px; }
.notice.error { color: var(--sp-danger); }
.notice.success { color: var(--sp-green); }

/* Estate-admin GIS import workflow. Dense by default; preview remains map-first. */
.gis-source-list { display: grid; gap: 10px; }
.gis-source-card { padding: 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: #fbfdfb; }
.gis-source-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gis-source-heading .check-field { margin: 0; }
.gis-source-heading label { display: flex; align-items: center; gap: 8px; }
.gis-source-heading strong, .gis-source-heading small { display: block; }
.gis-source-heading small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.gis-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0 26px; }
.gis-facts > div { min-width: 0; padding: 7px 8px; border-radius: var(--sp-radius-sm); background: #f1f6f3; }
.gis-facts dt, .gis-validation-grid span { color: var(--sp-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.gis-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 11px; }
.gis-config-form { margin: 8px 0 0 26px; padding-top: 8px; border-top: 1px solid var(--sp-line); }
.gis-config-form .field { margin: 7px 0; }
.gis-config-form input[type="color"] { width: 52px; min-height: 36px; padding: 3px; }
.gis-import-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 2px; border-bottom: 1px solid #edf1ef; background: transparent; text-align: left; }
.gis-import-row strong, .gis-import-row small { display: block; }
.gis-import-row small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.gis-import-row:hover { background: #f7faf8; }
.gis-validation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gis-validation-grid > div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); }
.gis-validation-grid strong { font-size: 13px; }
.gis-warning { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--sp-danger); border-radius: var(--sp-radius-sm); background: #faece7; color: #71352d; font-size: 11px; }
.gis-warning ul { margin: 6px 0 0; padding-left: 18px; }
.gis-technical { margin-top: 10px; color: var(--sp-muted); font-size: 10px; }
.gis-technical pre { max-height: 160px; overflow: auto; padding: 8px; background: #f4f7f5; white-space: pre-wrap; }
.preview-badge { color: #7a4b0b; background: #fff1cf; }
.gis-preview-shell { margin-top: 14px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; }
#gisPreviewMap { height: min(52vh, 520px); min-height: 320px; background: #e8eeeb; }
.gis-preview-map { height: min(52vh, 520px); min-height: 320px; background: #e8eeeb; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid > label { display: grid; gap: 5px; color: #526277; font-size: 11px; }
.form-grid input, .form-grid textarea, .form-grid select { min-height: 36px; padding: 8px 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); background: #fff; }
.form-grid .full { grid-column: 1 / -1; }
.gis-preview-copy { display: flex; align-items: center; gap: 16px; padding: 9px 12px; border-top: 1px solid var(--sp-line); font-size: 11px; }
.gis-preview-copy p { margin: 0; }
.colour-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--sp-line); vertical-align: -2px; }

@media (min-width: 1500px) {
  .grid.four { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-layout > .map-panel { min-height: 480px; }
  #workspaceMap { height: 58vh !important; min-height: 420px; }
  .map-controls { max-height: none; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gis-facts, .gis-validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .community-post, .community-detail { padding: 14px; }
  .layout { display: block; }
  .layout > aside { display: flex; gap: 8px; overflow: auto; padding: 8px 12px; }
  .estate { min-width: 170px; }
  .nav { display: flex; margin: 0; }
  .nav button { width: auto; min-width: 40px; padding: 8px; text-align: center; }
  .main { padding: 18px 12px 36px; }
  .head { display: block; }
  .head .actions { margin-top: 12px; }
  .grid.two, .map-layout { grid-template-columns: minmax(0, 1fr); }
  .overview-map #overviewMap { height: 48vh; min-height: 320px; }
  .overview-links { grid-template-columns: minmax(0, 1fr); }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details { grid-template-columns: 1fr; }
  .gis-facts, .gis-validation-grid { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .gis-config-form { margin-left: 0; }
  .gis-preview-copy { align-items: flex-start; flex-direction: column; gap: 6px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .map-layout > .map-panel { min-height: 360px; }
  #workspaceMap { height: 52vh !important; min-height: 340px; }
  #residentMap { height: 52vh !important; min-height: 300px; }
  .table { font-size: 10px; }
  .table th, .table td { padding: 8px 6px; }
}
.context-controls { display:flex; gap: .65rem; align-items:center; margin-left:auto; }
.context-controls label { display:flex; flex-direction:column; gap:.15rem; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.context-controls select { min-width:9rem; max-width:14rem; border:1px solid var(--line); border-radius:.35rem; background:var(--surface); color:var(--ink); padding:.35rem .5rem; font-size:.82rem; text-transform:none; letter-spacing:normal; }
.user small { display:block; }
@media (max-width: 900px) { .context-controls { order:3; width:100%; margin:0; } .top { flex-wrap:wrap; } }