/* =============================================================================
   style.css — Bivariate Urban Access Dashboard
   Palette adapted from the bivariate-climate-map (Yusnelkis Milanés Guisado)
   ========================================================================== */

/* ── Custom properties ───────────────────────────────────────────────────── */
:root {
  --bg:        #f2f0eb;
  --bg-white:  #ffffff;
  --text:      #2a2a2a;
  --teal:      #028090;
  --mint:      #02C39A;
  --navy:      #0A3D62;
  --amber:     #D97B0C;
  --border:    #e0ddd6;
  --sidebar-w: 220px;
  --header-h:  60px;
  --footer-h:  28px;
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:'DM Serif Display', Georgia, serif;
  --radius:    4px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size:   13px;
  line-height: 1.5;
  color:       var(--text);
  background:  var(--bg);
  height:      100dvh;   /* dynamic viewport height — avoids mobile bar issue */
  overflow:    hidden;
  display:     flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  height:        var(--header-h);
  background:    var(--bg-white);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 1.25rem;
  flex-shrink:   0;
  gap:           0.75rem;
}

.header-inner { flex: 1; min-width: 0; }

header h1 {
  font-family: var(--font-serif);
  font-size:   1rem;
  font-weight: 400;
  color:       var(--navy);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.subtitle {
  font-size: 11px;
  color:     #888;
  margin-top: 1px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* ── Main layout ─────────────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width:          var(--sidebar-w);
  background:     var(--bg-white);
  border-right:   1px solid var(--border);
  padding:        1rem;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  overflow-y:     auto;
  flex-shrink:    0;
}

.sidebar-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          #777;
}

select {
  width:       100%;
  padding:     6px 8px;
  border:      1px solid var(--border);
  border-radius: var(--radius);
  font-size:   13px;
  font-family: var(--font-ui);
  background:  var(--bg-white);
  color:       var(--text);
  cursor:      pointer;
  appearance:  auto;
  transition:  border-color 0.15s;
}

select:focus {
  outline:      none;
  border-color: var(--teal);
  box-shadow:   0 0 0 2px rgba(2,128,144,0.15);
}

hr {
  border:     none;
  border-top: 1px solid var(--border);
}

/* ── City info block ─────────────────────────────────────────────────────── */
.city-info {
  font-size:  13px;
  line-height: 1.7;
  color:      #444;
  min-height: 80px;
}

.city-info strong { color: var(--navy); }

.rank-label {
  font-size: 11px;
  color: #999;
  margin-left: 2px;
}

/* ── Rank legend ─────────────────────────────────────────────────────────── */
.rank-legend {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.5rem 0.6rem;
  font-size:     12px;
  line-height:   1.9;
}

.dot           { font-size: 15px; vertical-align: middle; }
.dot-teal      { color: var(--teal); }
.dot-slate     { color: #5A7080; }
.dot-muted     { color: #9EB3BC; }

/* ── Sidebar footer ──────────────────────────────────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  font-size:  10px;
  color:      #aaa;
  line-height: 1.6;
}

.sidebar-footer a { color: #aaa; }
.sidebar-footer a:hover { color: var(--teal); }

/* ── Content area ────────────────────────────────────────────────────────── */
.content {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
}

/* ── Tab navigation ──────────────────────────────────────────────────────── */
.tabs {
  display:       flex;
  background:    var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding:       0 1rem;
  flex-shrink:   0;
}

.tab-btn {
  padding:       0.55rem 1rem;
  border:        none;
  border-bottom: 2px solid transparent;
  background:    none;
  cursor:        pointer;
  font-size:     13px;
  font-family:   var(--font-ui);
  color:         #666;
  white-space:   nowrap;
  transition:    color 0.15s, border-color 0.15s;
}

.tab-btn:hover  { color: var(--teal); }

.tab-btn.active {
  color:              var(--teal);
  border-bottom-color: var(--teal);
  font-weight:        500;
}

/* ── Tab panels ──────────────────────────────────────────────────────────── */
.tab-panels {
  flex:     1;
  overflow: hidden;
  min-height: 0;
}

.tab-panel {
  display:  none;
  height:   100%;
  width:    100%;
}

.tab-panel.active { display: flex; }

/* ── Plot container ──────────────────────────────────────────────────────── */
.plot-container {
  flex:    1;
  width:   100%;
  height:  100%;
  padding: 0.25rem;
  min-height: 0;
}

/* Ensure Plotly fills its container */
.plot-container .js-plotly-plot,
.plot-container .plotly,
.plot-container .plot-container {
  height: 100% !important;
}

/* ── Map container ───────────────────────────────────────────────────────── */
.map-container {
  flex:   1;
  width:  100%;
  height: 100%;
}

/* ── Page footer ─────────────────────────────────────────────────────────── */
.page-footer {
  height:        var(--footer-h);
  background:    var(--bg-white);
  border-top:    1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 1.25rem;
  font-size:     10px;
  color:         #aaa;
  flex-shrink:   0;
  overflow:      hidden;
}

/* ── Bivariate legend (Leaflet control) ──────────────────────────────────── */
.biv-legend-control {
  background:    rgba(255, 255, 255, 0.97);
  padding:       9px 11px;
  border-radius: 6px;
  box-shadow:    0 1px 6px rgba(0, 0, 0, 0.22);
  font-family:   var(--font-ui, sans-serif);
  font-size:     11px;
  min-width:     110px;
  user-select:   none;
}

.biv-legend-title {
  font-weight:   600;
  margin-bottom: 6px;
  color:         var(--navy, #0A3D62);
}

.biv-legend-body {
  display:     flex;
  gap:         5px;
  align-items: flex-end;
}

.biv-ylabel {
  writing-mode: vertical-rl;
  transform:    rotate(180deg);
  font-size:    9px;
  color:        #666;
  line-height:  1;
  align-self:   center;
}

.biv-xlabel {
  font-size:  9px;
  color:      #666;
  margin-top: 3px;
}

.biv-row {
  display:       flex;
  gap:           3px;
  margin-bottom: 3px;
}

.biv-cell {
  width:         28px;
  height:        28px;
  border-radius: 3px;
  cursor:        pointer;
  transition:    box-shadow 0.12s;
}

.biv-cell:hover         { box-shadow: 0 0 0 2px #333; }
.biv-cell.selected      { box-shadow: 0 0 0 2.5px #111; }

.biv-reset {
  margin-top:    7px;
  width:         100%;
  font-size:     10px;
  padding:       3px 4px;
  cursor:        pointer;
  border:        1px solid #ccc;
  border-radius: 3px;
  background:    #f5f5f5;
  font-family:   var(--font-ui, sans-serif);
  transition:    background 0.1s;
}

.biv-reset:hover { background: #e8e8e8; }

/* ── Loading overlay ─────────────────────────────────────────────────────── */
#loading {
  position:       fixed;
  inset:          0;
  background:     rgba(242, 240, 235, 0.9);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-family:    var(--font-serif);
  font-size:      1.1rem;
  color:          var(--navy);
  z-index:        9999;
  transition:     opacity 0.3s;
}

#loading.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --header-h:  52px;
  }

  .sidebar { display: none; }

  header h1    { font-size: 0.9rem; }
  .subtitle    { display: none; }

  .tab-btn {
    font-size: 12px;
    padding:   0.45rem 0.55rem;
  }

  select { font-size: 16px; min-height: 44px; }

  .biv-cell { width: 24px; height: 24px; }
}