/*
 * NIXAN AI GiS Costa Del Sol
 * Load after app.css. Brand tokens and typography are taken from the final
 * petrol theme at https://nixan.ai/experience.css?v=20261105-orb-readable-2.
 * This is a GIS adaptation: layout, geometry, layer palette and interactions
 * remain in app.css/app.js. See ../branding_observations.md for provenance.
 */
:root {
  --night: #070c10;
  --petrol: #102329;
  --text: #e8eeed;
  --muted: #a4b3b6;
  --accent: #78b8b4;
  --ice: #b9d8df;
  --warm: #a99789;
  --ink: var(--text);
  --line: #b9d8df33;
  --teal: var(--accent);
  --teal-dark: #b9d8df;
  --teal-soft: #78b8b41a;
  --paper: #0c1b20;
  --bg: var(--night);
  --shadow: 0 8px 32px #00000050;
  --nixan-control: #102329;
  --nixan-hover: #18373d;
  --nixan-glass: #0c1b20f5;
  --nixan-error: #ffbcaa;
  --nixan-warning: #f0d8ae;
  color-scheme: dark;
}

html, body {
  background: var(--night);
  color: var(--text);
}

body {
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

a { color: var(--ice); }
a:hover { color: #f0ffff; }
::selection { background: #78b8b455; color: #f0ffff; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--ice);
}

.app-header {
  background: linear-gradient(115deg, #070c10, #102329);
  color: var(--text);
  border-bottom-color: #b9d8df33;
  box-shadow: inset 0 1px 0 #e8eeed08;
}

.brand { min-width: 0; flex-shrink: 0; }
.brand > div { min-width: 0; }
.brand-logo-frame {
  display: block;
  position: relative;
  overflow: hidden;
  width: 104px;
  aspect-ratio: 1127 / 374;
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  position: absolute;
  width: 128.4827%;
  height: 290.3743%;
  left: -14.2857%;
  top: -98.6631%;
  max-width: none;
  object-fit: fill;
  /* Crop only the PNG's transparent padding; the source stays unmodified. */
  /* The official site's orb logo uses this same white silhouette treatment. */
  filter: brightness(0) invert(1);
}
.brand-name {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 650;
  white-space: nowrap;
}
.brand-subtitle {
  color: var(--ice);
  font-size: 10px;
  letter-spacing: .35px;
  white-space: nowrap;
}
.header-context, .connection-status { color: var(--muted); }
.connection-status { min-width: 0; }
.connection-status.error { color: var(--nixan-error); }
.status-dot { background: var(--accent); box-shadow: 0 0 9px #78b8b444; }

.sidebar {
  background: linear-gradient(180deg, #0c1b20, #070c10);
  border-color: var(--line);
  scrollbar-color: #406269 transparent;
}
.eyebrow, .opacity-label output { color: var(--accent); }
.intro h1, .field-label, .layer-fieldset legend,
.layer-copy strong, .section-heading h2 { color: var(--text); }
.intro p, .field-help, .search-status,
.layer-copy small, .imagery-status,
.opacity-label, .stat-grid span, .coverage-note,
.sidebar-footnote, .cat-import-card > p, .cat-instructions-text {
  color: var(--muted);
}

.preset-button {
  color: var(--ice);
  background: var(--nixan-control);
  border-color: var(--line);
}
.preset-button:hover { background: var(--nixan-hover); border-color: #78b8b488; }
.preset-button.active {
  color: var(--text);
  background: #78b8b422;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 #b9d8df16;
}

.search-box {
  background: var(--nixan-control);
  border-color: #b9d8df55;
  box-shadow: inset 0 1px 0 #b9d8df0a;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #78b8b426;
}
.search-box svg { color: var(--muted); }
.search-box input { color: var(--text); caret-color: var(--ice); }
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box button {
  background: #78b8b415;
  color: var(--ice);
  border-color: var(--line);
}
.search-box button:hover { background: #78b8b42b; }
.search-results { scrollbar-color: #406269 transparent; }
.search-result {
  background: var(--nixan-control);
  color: var(--text);
  border-color: var(--line);
}
.search-result:hover { background: var(--nixan-hover); }
.search-result strong { color: var(--ice); }
.search-result span { color: var(--muted); }
.search-result small { color: var(--accent); }
.filters-toggle { color: var(--ice); background: transparent; }
.municipality-field select,
.municipality-field select option {
  color: var(--text);
  background: var(--nixan-control);
  border-color: #b9d8df55;
  color-scheme: dark;
}
.layer-row { border-color: #b9d8df22; }
.layer-row input[type=checkbox], input[type=range] { accent-color: var(--accent); }

/* These swatches retain the existing GIS layer colors, independent of branding. */
.layer-swatch.parcels { color: var(--parcel); }
.layer-swatch.buildings { color: var(--building); }
.layer-swatch.parts { color: var(--part); }
.layer-swatch.pools { color: var(--pool); }
.imagery-row {
  background: #78b8b412;
  border-color: #78b8b455;
  box-shadow: inset 0 1px 0 #b9d8df0a;
}
.imagery-icon { color: var(--accent); }
.switch { background: #455e64; }
.switch:before { background: var(--text); box-shadow: 0 1px 3px #0006; }
.imagery-row input:checked + .switch { background: var(--accent); }
.imagery-row input:checked + .switch:before { background: var(--night); }
.imagery-row input:focus-visible + .switch { outline-color: var(--ice); }
.imagery-status.error { color: var(--nixan-error); }

.coverage-card, .cat-import-card {
  background: #102329b8;
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #b9d8df0a;
}
.text-button, .coverage-card summary { color: var(--ice); }
.text-button:hover, .coverage-card summary:hover { color: #f0ffff; }
.stat-grid strong { color: var(--text); }
.coverage-note, .municipality-coverage-row { border-color: var(--line); }
.municipality-coverage-row strong { color: var(--text); }
.municipality-coverage-row span { color: var(--muted); }
.source-badge { color: var(--ice); background: #78b8b422; }
.cat-import-card input[type=file] {
  color: var(--muted);
  background: var(--night);
  border-color: var(--line);
}
.cat-import-card input[type=file]::file-selector-button {
  color: var(--ice);
  background: var(--nixan-hover);
}
.cat-import-card input[type=file]::file-selector-button:hover { background: #24444b; }
.cat-import-status { color: var(--accent); }
.cat-import-status.error { color: var(--nixan-error); }

.map-section { background: var(--night); }
#map {
  background-color: #0c1b20;
  background-image: linear-gradient(#b9d8df0d 1px, transparent 1px),
    linear-gradient(90deg, #b9d8df0d 1px, transparent 1px);
}
.leaflet-container { font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.map-location, .map-button {
  color: var(--text);
  background: var(--nixan-glass);
  border-color: #b9d8df44;
  box-shadow: 0 3px 15px #0005, inset 0 1px 0 #e8eeed0d;
}
.map-button:hover { color: var(--ice); background: #18373df5; }
.map-location-dot { background: var(--accent); }
.map-message {
  color: var(--ice);
  background: var(--nixan-glass);
  border-color: #b9d8df44;
  box-shadow: 0 3px 15px #0004;
}
.map-message.warning {
  color: var(--nixan-warning);
  background: #2d251af7;
  border-color: #a9978988;
}
.map-message.error {
  color: var(--nixan-error);
  background: #30201df7;
  border-color: #ffbcaa66;
}
.loading-indicator { border-color: #b9d8df44; border-top-color: var(--accent); }
.map-legend {
  color: var(--text);
  background: #070c10ed;
  box-shadow: 0 3px 15px #0005, inset 0 0 0 1px #b9d8df33;
}
.leaflet-control-attribution {
  background: #070c10f2 !important;
  color: var(--muted) !important;
}
.leaflet-control-attribution a { color: var(--ice) !important; }
.leaflet-control-attribution a:hover { color: #f0ffff !important; }
.leaflet-control-zoom { box-shadow: 0 3px 15px #0006 !important; }
.leaflet-control-zoom a {
  background: #102329f5 !important;
  color: var(--text) !important;
  border-color: #b9d8df33 !important;
}
.leaflet-control-zoom a:hover { background: #18373d !important; color: #f0ffff !important; }
.leaflet-control-zoom a.leaflet-disabled { color: #80999f !important; background: #0c1b20 !important; }
.leaflet-control-scale-line {
  background: #070c10ed !important;
  border-color: var(--ice) !important;
  color: var(--text) !important;
  text-shadow: none;
}
.leaflet-tooltip {
  background: #102329fa !important;
  border-color: #b9d8df66 !important;
  color: var(--text) !important;
  box-shadow: 0 3px 15px #0006 !important;
}
.leaflet-tooltip-top:before { border-top-color: #102329fa; }
.leaflet-tooltip-bottom:before { border-bottom-color: #102329fa; }
.leaflet-tooltip-left:before { border-left-color: #102329fa; }
.leaflet-tooltip-right:before { border-right-color: #102329fa; }

.detail-panel {
  color: var(--text);
  background: var(--nixan-glass);
  border-color: #b9d8df44;
  box-shadow: 0 12px 48px #0009, inset 0 1px 0 #e8eeed0d;
}
.detail-header, .detail-tabs, .property-field { border-color: var(--line); }
.detail-header h2 { color: var(--text); }
.detail-subtitle { color: var(--muted); }
.icon-button {
  color: var(--ice);
  background: var(--nixan-control);
  border-color: var(--line);
}
.icon-button:hover { color: #f0ffff; background: var(--nixan-hover); }
.detail-tabs { background: #070c1040; }
.detail-tabs button { color: var(--muted); background: transparent; }
.detail-tabs button:hover { color: var(--text); background: #78b8b412; }
.detail-tabs button[aria-selected=true] {
  color: var(--ice);
  background: #78b8b412;
  border-bottom-color: var(--accent);
}
.tab-badge { color: var(--ice); background: #78b8b422; }
.detail-body { scrollbar-color: #406269 transparent; }
.detail-loading { color: var(--accent); }
.inline-error {
  color: var(--nixan-error);
  background: #30201d;
  border-color: #ffbcaa55;
}
.property-field dt { color: var(--muted); }
.property-field dd { color: var(--text); }
.composition-item { background: #102329; box-shadow: inset 0 0 0 1px #b9d8df16; }
.composition-item strong { color: var(--ice); }
.composition-item span { color: var(--muted); }
.information-note {
  color: var(--muted);
  background: #102329;
  box-shadow: inset 0 0 0 1px #b9d8df16;
}
.primary-button {
  color: var(--night);
  background: var(--accent);
  border-color: var(--accent);
}
.primary-button:hover { color: var(--night); background: var(--ice); border-color: var(--ice); }
.secondary-button { color: var(--ice); background: #78b8b415; border-color: #78b8b455; }
.secondary-button:hover { color: var(--text); background: #78b8b429; border-color: #78b8b488; }
.unit-card { color: var(--text); background: #102329; border-color: var(--line); }
.unit-card:hover, .unit-card.selected { color: var(--text); background: #18373d; border-color: var(--accent); }
.unit-card strong { color: var(--ice); }
.unit-card span { color: var(--muted); }
.unit-card small { color: var(--accent); }
.empty-state { color: var(--muted); }
.empty-state strong { color: var(--ice); }
.unit-detail { border-top-color: var(--accent); }
.unit-detail h3, .construction-heading { color: var(--text); }
.unit-detail .unit-reference { color: var(--ice); }
.construction-table { color: var(--text); }
.construction-table th {
  color: var(--ice);
  background: #183137;
  border-color: #b9d8df44;
}
.construction-table td {
  color: var(--text);
  background: #102329;
  border-color: var(--line);
}
.construction-table tbody tr:nth-child(even) td { background: #0c1b20; }
.construction-card { background: #102329; border-color: var(--line); }
.construction-card h3 { color: var(--ice); }
.construction-card p { color: var(--muted); }
.addresses-list li { color: var(--text); border-color: var(--line); }
.addresses-list .address-index { color: var(--accent); }
.detail-footer { background: #070c10d9; border-color: var(--line); }
.detail-footer a { color: var(--ice); }
.detail-footer a:hover { color: #f0ffff; }
.export-link { color: var(--ice); }
.toast { color: var(--text); background: #102329fa; box-shadow: var(--shadow), inset 0 0 0 1px #b9d8df44; }
.skip-link, .noscript { color: var(--text); background: var(--petrol); }

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .map-location, .map-button, .detail-panel, .map-legend {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 760px) {
  .brand { gap: 8px; }
  .brand-logo-frame { width: 84px; }
  .brand-name { font-size: 14px; letter-spacing: 1.6px; }
  .brand-subtitle { font-size: 9px; letter-spacing: .2px; }
  .sidebar { border-bottom-color: var(--line); box-shadow: 0 4px 15px #0003; }
  .filters-toggle { color: var(--ice); background: transparent; }
  .detail-panel { background: #0c1b20fa; box-shadow: 0 -10px 50px #0009; }
}

@media (prefers-reduced-transparency: reduce) {
  .map-location, .map-button, .map-message, .detail-panel, .map-legend,
  .coverage-card, .cat-import-card, .toast {
    background-color: var(--petrol);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}