/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color);
}

/*
1. GLOBAL STYLES & VARIABLES
2. APP FRAME & LAYOUT
3. TOP BAR (HEADER)
4. SIDEBAR ARCHITECTURE (OVERLAYS)
5. LEFT SIDEBAR (LOCATIONS)
6. RIGHT SIDEBAR (LAYERS)
7. BUTTONS & INTERACTIVE ELEMENTS
8. BASEMAP SWITCHER
9. GEOMODELS BRANDING
10. UTILITIES & ANIMATIONS
*/

/* ==========================================================================
   ==========================================================================
   1. GLOBAL STYLES & VARIABLES
   ==========================================================================
   ========================================================================== */

:root {
  --popup-bg: rgba(255, 255, 255, .95);
  --popup-text: #1f2a37;
  --popup-title: #111827;
  --popup-muted: #6b7280;
  --popup-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

body { 
  margin: 0; 
  padding: 0; 
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
  background: #1a1a1a; 
  height: 100dvh; 
  width: 100vw; 
  overflow: hidden; 
}

/* Icons: Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Icons: SVG */
.af-svgicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.af-svgicon svg {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  display: block;
  fill: currentColor;
}

/* ==========================================================================
   ==========================================================================
   2. APP FRAME & LAYOUT
   ==========================================================================
   ========================================================================== */

.appframe { 
  height: 100dvh; 
  width: 100vw; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
}

.appframe main { 
  flex: 1; 
  min-height: 0; 
  position: relative; 
  overflow: hidden; 
}

#map { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
}

/* ==========================================================================
   ==========================================================================
   3. TOP BAR (HEADER)
   ==========================================================================
   ========================================================================== */

header.af-topbar { 
  flex: none; 
  height: 53px; 
  position: sticky; 
  top: 0; 
  z-index: 50; 
  background: rgba(255, 255, 255, 0.95);
}

header.af-topbar > .af-topbar-inner {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
}

@media (min-width: 640px) {
  header.af-topbar > .af-topbar-inner { padding: 0 16px; }
}

/* Title Area */
.af-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.af-titlewrap { min-width: 0; line-height: 1.1; }

#af-title, #af-subtitle {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#af-title{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;              /* was 14 */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#af-subtitle {
  margin-top: 3px; /* slightly tighter than 4px */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em; /* slightly wider for the pill-like look */
  color: rgba(15, 23, 42, 0.55);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 640px) { #af-title { font-size: 16px; } }

/* Topbar Actions Group */
.af-right { display: flex; align-items: center; gap: 8px; }
#af-actions { display: flex; align-items: center; gap: 8px; }

#af-actions > div {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* ==========================================================================
   ==========================================================================
   4. SIDEBAR ARCHITECTURE (OVERLAYS)
   ==========================================================================
   ========================================================================== */

.map-overlay {
  position: absolute; 
  top: 17px;
  bottom: auto;          /* important */
  max-height: calc(100% - 34px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px; 
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  overflow-y: auto; 
  z-index: 1;
  /* width removed (overridden by specific IDs or collapsed state) */
  transition: width 200ms ease, padding 200ms ease;
}

#left-sidebar, #right-sidebar { z-index: 10000; }
.map-overlay-left { left: 16px; }
.map-overlay-right { left: auto; right: 16px; }

/* Sidebar Headlines */
.sidebar-header h3 { 
  margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; 
  letter-spacing: 1.2px; color: #7f8c8d; border-bottom: 1px solid #eee; padding-bottom: 8px; 
}

.sidebar-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sidebar-header h3 { margin:0; }

/* Sidebar Collapsing Logic */
.map-overlay.collapsed { cursor: pointer; width: 55px; }
@media (hover: hover) and (pointer: fine) {.map-overlay.collapsed:hover { background: rgba(255,255,255,0.98); box-shadow: 0 10px 32px rgba(0,0,0,0.35); }}
.map-overlay.collapsed .sidebar-content { display: none; }
.map-overlay.collapsed .sidebar-header { justify-content: center; flex-direction: column; gap: 6px; }
.map-overlay.collapsed .sidebar-header h3 { display: none; }

.collapse-btn {
  -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
  color:#2c3e50; width:32px; height:32px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform 160ms ease, background 120ms ease, color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {.collapse-btn:hover { background: rgba(0,0,0,0.05); color:#d45a1a; }}
.map-overlay.collapsed .collapse-btn { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {.map-overlay.collapsed:hover .collapse-btn { background: rgba(0,0,0,0.06); color: #d45a1a; }}

/* Chevron Rotation */
.collapse-btn svg { transition: transform 160ms ease; }
#left-sidebar .collapse-btn svg { transform: rotate(90deg); }
#right-sidebar .collapse-btn svg { transform: rotate(-90deg); }
#left-sidebar.collapsed .collapse-btn svg { transform: rotate(-90deg); }
#right-sidebar.collapsed .collapse-btn svg { transform: rotate(90deg); }

/* Vertical Labels */
.sidebar-collapsed-label {
  display: none; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: #2c3e50;
  writing-mode: vertical-rl; transform: rotate(180deg); user-select: none; pointer-events: none;
}

.map-overlay.collapsed .sidebar-collapsed-label {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #111827; opacity: 0.95;
}
@media (hover: hover) and (pointer: fine) {.map-overlay.collapsed:hover .sidebar-collapsed-label { color: #d45a1a; }}

/* ==========================================================================
   ==========================================================================
   5. LEFT SIDEBAR (LOCATIONS)
   ==========================================================================
   ========================================================================== */

#left-sidebar:not(.collapsed) { width: 320px; }

#project-list .layer-item {
  margin: 10px 0; padding: 14px 12px 14px 16px; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px; background: rgba(255,255,255,0.95); position: relative;
  overflow: hidden; cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#project-list .layer-item::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 999px; background: rgba(212,90,26,0.75);
}

#project-list .layer-item label {
  display: block; font-size: 16px; line-height: 20px; font-weight: 800;
  letter-spacing: 0.01em; color: #111827; margin: 0;
}

#project-list .layer-item:hover {
  transform: translateY(-1px); border-color: rgba(212,90,26,0.45);
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

#project-list .layer-item:active { transform: translateY(0px); }

/* Only affects the 3D sidebar items that contain the span structure */
#project-list .layer-item label.hs-label{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.2em;
  align-items: start;
  white-space: normal;
}

#project-list .layer-item label.hs-label .hs-num{
  justify-self: start;              /* no right-align */
  font-variant-numeric: tabular-nums;
}

#project-list .layer-item label.hs-label .hs-title{
  min-width: 0;
  overflow-wrap: anywhere;
}

.hs-num{
  min-width: 2ch;   /* enough for “10.” without visual jump */
}

/* ==========================================================================
   ==========================================================================
   6. RIGHT SIDEBAR (LAYERS)
   ==========================================================================
   ========================================================================== */

#right-sidebar:not(.collapsed) { width: 280px; }

/* Layers */
.layer-item { margin: 8px 0; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: #2c3e50; }
#layer-list .layer-item { font-size: 14px; }

.layer-item label { flex-grow: 1; cursor: pointer; transition: color 0.2s; }
.layer-item label:hover { text-decoration: underline; }

.layer-item input, #layer-list input[type="checkbox"] { 
  margin-right: 12px; width: 16px; height: 16px; cursor: pointer; 
}
#layer-list input[type="checkbox"] { accent-color: #d45a1a; flex: 0 0 16px; }

/* Legends */
.legend-icon, .legend-shape, .legend-color {
  width: 16px; height: 16px; flex: 0 0 16px; margin-right: 10px; box-sizing: border-box;
}

.legend-color { border-radius: 3px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.1); }
.legend-diamond { background: #facf06; transform: rotate(45deg) scale(0.75); border: 1px solid rgba(0,0,0,0.4); }
.legend-circle { border-radius: 50%; border: 1px solid rgba(0,0,0,0.4); }
.legend-icon { object-fit: contain; }

/* ==========================================================================
   ==========================================================================
   7. BUTTONS & INTERACTIVE ELEMENTS
   ==========================================================================
   ========================================================================== */

/* App Frame Icon Buttons */
.af-iconbtn {
  height: 36px; width: 36px; border: 0; background: transparent; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #0f172a;
}
.af-iconbtn:hover { background: rgba(15, 23, 42, 0.06); }
.af-iconbtn:active { background: rgba(15, 23, 42, 0.10); transform: scale(0.98); }
.af-iconbtn:focus-visible { outline: 2px solid rgba(212, 90, 26, 0.45); outline-offset: 2px; }

/* Generic Icon Buttons */
.icon-btn {
  -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px; background: rgba(255, 255, 255, 0.9); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; color: #2c3e50;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.icon-btn:hover { transform: translateY(-1px); border-color: rgba(212, 90, 26, 0.55); color: #d45a1a; }
.icon-btn:active { transform: translateY(0px); }
.icon-btn:focus-visible { outline: 2px solid rgba(212, 90, 26, 0.45); outline-offset: 2px; }

/* Project Actions / Wide Buttons */
.project-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee;
}

.icon-btn.icon-btn-wide {
  width: 100%; height: 48px; display: flex; align-items: center; gap: 4px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.10);
  font-size: 13px; font-weight: 800; color: #111827;
}
.icon-btn.icon-btn-wide:hover { transform: translateY(-1px); border-color: rgba(212, 90, 26, 0.45); color: #111827; }

.icon-btn-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
.icon-btn-text { line-height: 1; white-space: nowrap; }

/* Pill Groups & Topbar Logic */
#af-actions .ui-pillgroup .af-iconbtn { width: 34px; height: 30px; border-radius: 10px; }
#af-actions .ui-pillgroup .ui-divider { width: 1px; height: 18px; background: rgba(15, 23, 42, 0.12); margin: 0 2px; }

#af-home, #af-fs { color: #0f172a; }
#af-home:hover { background: rgba(15, 23, 42, 0.06); }
#af-home:active { background: rgba(15, 23, 42, 0.10); transform: scale(0.98); }
#af-home:focus-visible { outline: 2px solid rgba(212, 90, 26, 0.45); outline-offset: 2px; }

#af-actions .af-iconbtn.active, #af-actions .af-iconbtn.btn-loading { background: #d45a1a !important; color: #ffffff !important; }
#af-actions .af-iconbtn.active .material-symbols-outlined, #af-actions .af-iconbtn.btn-loading .material-symbols-outlined { color: #ffffff !important; }

/* ==========================================================================
   ==========================================================================
   8. BASEMAP SWITCHER
   ==========================================================================
   ========================================================================== */

.basemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.basemap-grid-right { margin-top: 14px; margin-bottom: 0; }

.basemap-tile {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px; padding: 0; cursor: pointer; overflow: hidden;
  background-image: var(--thumb); background-size: cover; background-position: center;
  filter: grayscale(40%) brightness(0.75); opacity: 0.75;
  transition: transform 120ms ease, border-color 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.basemap-tile:hover { transform: translateY(-1px); filter: grayscale(10%) brightness(0.95); opacity: 1; }
.basemap-tile.active { border-color: #d45a1a; filter: none; opacity: 1; }

.basemap-label {
  position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: #fff; padding: 6px;
  border-radius: 8px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); pointer-events: none;
}

/* ==========================================================================
   ==========================================================================
   9. GEOMODELS BRANDING
   ==========================================================================
   ========================================================================== */

.map-branding { position: absolute; left: 8px; bottom: 8px; z-index: 8; pointer-events: auto; }

.map-branding-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px;
  border-radius: 10px; text-decoration: none; background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px) saturate(1.1); border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {.map-branding-link:hover { background: rgba(255, 255, 255, 0.8); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }}

.map-branding-label {
  margin: 0; padding: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.68); line-height: 1.15;
}
@media (hover: hover) and (pointer: fine) {.map-branding-link:hover .map-branding-label { color: rgba(0, 0, 0, 0.5); }}

.map-branding-logo {
  height: 18px; width: auto; display: block; transition: filter 180ms ease;
  filter: grayscale(1) brightness(10) contrast(0.9) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
@media (hover: hover) and (pointer: fine) {.map-branding-link:hover .map-branding-logo { filter: none; }}

/* ==========================================================================
   ==========================================================================
   10. UTILITIES & ANIMATIONS
   ==========================================================================
   ========================================================================== */

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

.spinner-small {
  width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite;
}

.btn-loading { pointer-events: none; opacity: 0.8; }

#af-actions .af-iconbtn.btn-loading .spinner-small {
  border-color: rgba(255, 255, 255, 0.35); border-top-color: #ffffff;
}