/* Shared surface tokens keep map controls, native inputs and photo archives consistent. */
:root {
  color-scheme:light;
  --accent-solid:#0047ab;
  --accent-solid-hover:#003984;
  --overlay:rgba(255,255,255,.95);
  --card-hover:#f8faff;
  --map-filter:grayscale(1) contrast(.92) brightness(1.03);
  --warning-surface:#fff7df;
  --warning-border:#ddc684;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --accent:#8eb6ff;
  --accent-hover:#b9d1ff;
  --accent-solid:#175cce;
  --accent-solid-hover:#104caf;
  --accent-soft:#202f49;
  --accent-border:#415f8e;
  --ink:#f0f2f6;
  --muted:#b1b9c7;
  --paper:#15191f;
  --surface:#20262f;
  --border:#343c49;
  --border-strong:#667183;
  --overlay:rgba(27,33,42,.96);
  --card-hover:#1c2430;
  --shadow:0 8px 28px #00000045;
  --map-filter:grayscale(1) invert(1) brightness(.95) contrast(.82);
  --warning-surface:#382f1b;
  --warning-border:#746139;
}
html { background:var(--paper); }
.header-actions { display:flex; align-items:center; flex-shrink:0; gap:8px; margin-left:auto; }
.header-actions .export-button { margin-left:0; justify-content:center; border-radius:8px; }
.theme-picker { position:relative; display:flex; align-items:center; flex-shrink:0; color:var(--muted); }
.theme-picker > svg { position:absolute; left:12px; width:20px; height:20px; pointer-events:none; }
.theme-picker select { min-height:44px; width:130px; padding:8px 10px 8px 38px; border:1px solid var(--border); border-radius:8px; background:var(--paper); color:var(--ink); font-size:var(--text-secondary); cursor:pointer; }
.theme-picker:hover select { background:var(--surface); }
.theme-picker:focus-within { border-radius:8px; outline:3px solid var(--accent); outline-offset:3px; }
.theme-picker select:focus-visible { outline:none; }
.theme-picker option { background:var(--paper); color:var(--ink); }
.brand-mark, .primary-button, #toast,
.status-chip[data-status="all"][aria-pressed="true"],
.directory-tools .filters-toggle[data-active="true"], .filter-count { background:var(--accent-solid); color:#fff; }
.status-chip[data-status="all"][aria-pressed="true"], .filters-toggle[data-active="true"] { border-color:var(--accent-solid); }
.primary-button:hover, .directory-tools .filters-toggle[data-active="true"]:hover { background:var(--accent-solid-hover); }
.filter-count { border-color:var(--paper); }
.badge { background:color-mix(in srgb,var(--status-color) 12%,var(--paper)); }
.project-card .badge { background:none; }
.leaflet-tile-pane { filter:var(--map-filter); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip,
.leaflet-tooltip.project-tooltip { background:var(--paper); color:var(--ink); }
.leaflet-tooltip-top.project-tooltip:before { border-top-color:var(--paper); }
.leaflet-tooltip-bottom.project-tooltip:before { border-bottom-color:var(--paper); }
.leaflet-tooltip-left.project-tooltip:before { border-left-color:var(--paper); }
.leaflet-tooltip-right.project-tooltip:before { border-right-color:var(--paper); }
.leaflet-container { font-family:var(--font-interface); }
.leaflet-container a { color:var(--accent); }
.map-error { background:var(--warning-surface); border-color:var(--warning-border); }
:root[data-theme="dark"] .tenant-status.open { color:#8acba5; }
:root[data-theme="dark"] .tenant-status.withdrawn { color:#e5a48d; }
:root[data-theme="dark"] dialog { box-shadow:0 30px 90px #00000080; }
:root[data-theme="dark"] dialog::backdrop { background:#00000099; }
:root[data-theme="dark"] .image-viewer::backdrop { background:#000000d9; }
@media(max-width:1150px) {
  .masthead { gap:24px; }
  .theme-picker { width:44px; height:44px; border:1px solid var(--border); border-radius:8px; }
  .theme-picker > svg { left:50%; top:50%; transform:translate(-50%,-50%); }
  .theme-picker select { position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; }
  .theme-picker:hover { background:var(--surface); }
}
@media(max-width:800px) {
  .masthead { gap:12px; }
  .header-actions { margin-left:0; gap:6px; }
  .header-actions .export-button { width:44px; height:44px; padding:0; gap:0; flex-shrink:0; }
  .header-actions .export-button .icon { width:20px; height:20px; display:block; }
}
@media(max-width:400px) {
  .masthead { gap:8px; }
  .header-actions { gap:4px; }
  .masthead nav button { font-size:.75rem; }
}
@media(max-width:360px) { .header-actions { margin-left:auto; } }