/* ============================================================
   verİstanbul — shared map-page design system
   Standardises typography, colours, sizes and Leaflet chrome
   across /mahalleistanbul, /sanayistanbul and /Secim so that
   every page matches the main landing page (index.html).

   Loaded LAST on each page. Page-specific rules are scoped by a
   body class (.vi-mahalle / .vi-sanayi / .vi-secim). Data-driven
   map colours (clusters, party ramps, heat gradient) are NOT
   touched here — only the surrounding UI chrome.
   ============================================================ */

:root {
  /* Brand */
  --vi-blue:        #2563eb;
  --vi-blue-hover:  #1d4ed8;
  --vi-blue-light:  #93c5fd;
  --vi-blue-tint:   #eff6ff;
  --vi-blue-border: #bfdbfe;
  --vi-purple:      #6b21a8;

  /* Neutrals */
  --vi-bg:          #f9fafb;
  --vi-panel:       #ffffff;
  --vi-border:      #e5e7eb;
  --vi-border-soft: #f3f4f6;
  --vi-ink:         #111111;
  --vi-ink2:        #222222;
  --vi-muted:       #666666;
  --vi-faint:       #aaaaaa;

  /* Type */
  --vi-serif: 'Georgia', 'Times New Roman', serif;
  --vi-sans:  'Segoe UI', Arial, Helvetica, sans-serif;

  /* Sizing */
  --vi-sidebar: 320px;
  --vi-radius:  8px;
}

/* ============================================================
   1. SHARED LEAFLET CHROME  (identical on all three pages)
   ============================================================ */

.leaflet-container {
  font-family: var(--vi-sans);
  color: var(--vi-ink2);
}

/* Zoom control — consistent light look everywhere */
.leaflet-bar a,
.leaflet-control-zoom a {
  background: var(--vi-panel);
  color: var(--vi-ink2);
  border-bottom-color: var(--vi-border);
  transition: background .15s, color .15s;
}
.leaflet-bar a:hover,
.leaflet-control-zoom a:hover {
  background: var(--vi-blue-tint);
  color: var(--vi-blue);
}
.leaflet-bar {
  border: 1px solid var(--vi-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}

/* Tooltips */
.leaflet-tooltip {
  font-family: var(--vi-sans);
  font-size: 12px;
  color: var(--vi-ink2);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--vi-border);
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  padding: 6px 10px;
}
.leaflet-tooltip-top:before  { border-top-color:    var(--vi-border); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--vi-border); }
.leaflet-tooltip-left:before  { border-left-color:  var(--vi-border); }
.leaflet-tooltip-right:before { border-right-color: var(--vi-border); }

/* Popups */
.leaflet-popup-content-wrapper {
  font-family: var(--vi-sans);
  color: var(--vi-ink2);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .14);
}
.leaflet-popup-content { font-family: var(--vi-sans); }
.leaflet-popup-content b { color: var(--vi-ink); }
.leaflet-popup-tip { border: 1px solid var(--vi-border); }

/* Attribution — quiet */
.leaflet-control-attribution {
  font-family: var(--vi-sans);
  font-size: 10px;
  color: var(--vi-faint);
  background: rgba(255, 255, 255, .8);
}
.leaflet-control-attribution a { color: var(--vi-muted); }

/* Legend base (Leaflet .info.legend used on Secim, + generic) */
.info.legend,
.legend {
  font-family: var(--vi-sans);
  font-size: 12px;
  color: var(--vi-muted);
  background: var(--vi-panel);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  padding: 10px 12px;
  line-height: 20px;
}
.info.legend strong,
.legend strong {
  color: var(--vi-ink);
  font-weight: 600;
}

/* ============================================================
   2. MAHALLE  (.vi-mahalle)  — dark sidebar -> light
   ============================================================ */

.vi-mahalle #sp {
  background: var(--vi-panel);
  color: var(--vi-ink2);
  border-right: 1px solid var(--vi-border);
  width: var(--vi-sidebar);
}
.vi-mahalle .ph {
  background: var(--vi-panel);
  border-bottom: 1px solid var(--vi-border);
}
.vi-mahalle .pt {                       /* panel title -> serif, dark */
  font-family: var(--vi-serif);
  font-size: 1.15rem;
  font-weight: normal;
  line-height: 1.35;
  color: var(--vi-ink);
}
.vi-mahalle .pl { color: var(--vi-blue); }
.vi-mahalle .badge {
  background: var(--vi-border-soft);
  border: 1px solid var(--vi-border);
  color: var(--vi-muted);
}
.vi-mahalle .leaflet-control-zoom {     /* top-left, clear of the sidebar */
  margin-left: 330px !important;
  margin-top: 10px !important;
}

/* ============================================================
   3. SANAYI  (.vi-sanayi)  — warm/IBM-Plex theme -> site theme
   Re-map the page's CSS variables at body scope (they inherit
   into every descendant, overriding the page's :root values).
   ============================================================ */

body.vi-sanayi {
  --w:      var(--vi-sidebar);
  --bg:     var(--vi-bg);
  --panel:  var(--vi-panel);
  --border: var(--vi-border);
  --ink:    var(--vi-ink);
  --ink2:   var(--vi-muted);
  --ink3:   var(--vi-faint);
  --black:  var(--vi-muted);
  --blue:   var(--vi-blue);
  --red:    var(--vi-blue);            /* UI accent -> brand blue */
  font-family: var(--vi-sans);
}

/* Fonts: drop IBM Plex Mono/Sans for the site stack */
.vi-sanayi .s-eyebrow,
.vi-sanayi .block-title,
.vi-sanayi .reset-btn,
.vi-sanayi .slider-year,
.vi-sanayi .slider-count,
.vi-sanayi .slider-ticks span,
.vi-sanayi .metric-btn,
.vi-sanayi .metric-btn .mb-val,
.vi-sanayi .mc-label,
.vi-sanayi .pc-scope,
.vi-sanayi .pc-name,
.vi-sanayi .pc-stat-lbl,
.vi-sanayi .pc-nace-title,
.vi-sanayi .nace-rank,
.vi-sanayi .nace-count,
.vi-sanayi .leg-title,
.vi-sanayi .mah-label,
.vi-sanayi .ld-title,
.vi-sanayi .ld-status,
.vi-sanayi select,
.vi-sanayi input {
  font-family: var(--vi-sans);
}
.vi-sanayi .s-head h1,
.vi-sanayi .s-title {                    /* main sidebar title -> serif, dark */
  font-family: var(--vi-serif);
  font-weight: normal;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--vi-ink);
}

/* Zoom control: top-left, clear of the sidebar (matches other pages) */
.vi-sanayi .leaflet-control-zoom {
  margin-left: 330px !important;
  margin-right: 0 !important;
  margin-top: 10px !important;
}

/* Loading splash -> light + brand blue (was dark with orange bar) */
.vi-sanayi #loading   { background: var(--vi-bg); }
.vi-sanayi .ld-title  { color: var(--vi-muted); }
.vi-sanayi .ld-status { color: var(--vi-faint); }
.vi-sanayi .ld-bar    { background: var(--vi-border); }
.vi-sanayi .ld-fill   { background: var(--vi-blue); }

/* Header strip -> light */
.vi-sanayi .s-head {
  background: var(--vi-panel);
  border-bottom: 1px solid var(--vi-border);
}
.vi-sanayi .s-eyebrow    { color: var(--vi-blue); }
.vi-sanayi .s-head h1    { color: var(--vi-ink); }
.vi-sanayi .s-head h1 em { color: var(--vi-blue); }
.vi-sanayi .s-sub        { color: var(--vi-muted); }

/* Warm hardcoded surfaces -> neutral */
.vi-sanayi .block-title   { background: var(--vi-bg); }
.vi-sanayi .sr-item       { border-bottom-color: var(--vi-border-soft); }
.vi-sanayi .nace-bar-wrap { background: var(--vi-border-soft); }
.vi-sanayi .mc-group      { background: rgba(255, 255, 255, .97); }

/* Selected / active states -> brand blue */
.vi-sanayi .metric-btn.on,
.vi-sanayi .play-btn.playing,
.vi-sanayi .play-btn:hover {
  background: var(--vi-blue);
  color: #fff;
  border-color: var(--vi-blue);
}

/* Sector filter chip -> blue tint (was red tint) */
.vi-sanayi #sector-badge {
  background: var(--vi-blue-tint);
  border-color: var(--vi-blue-border);
  color: var(--vi-blue);
}
.vi-sanayi #sector-badge button { color: var(--vi-blue); }

/* Popup card header -> light */
.vi-sanayi .pc-head {
  background: var(--vi-panel);
  border-bottom: 1px solid var(--vi-border);
}
.vi-sanayi .pc-name { color: var(--vi-ink); }
.vi-sanayi .pc-sub  { color: var(--vi-muted); }
.vi-sanayi .pc-scope { color: #fff; }
.vi-sanayi .pc-close {
  background: var(--vi-border-soft);
  color: var(--vi-muted);
}
.vi-sanayi .pc-close:hover { background: var(--vi-border); }

/* Legend box */
.vi-sanayi #legend {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--vi-border);
}
.vi-sanayi .leg-title { color: var(--vi-ink); }

/* ============================================================
   4. SECIM  (.vi-secim)  — Inter/Google-blue -> site theme
   ============================================================ */

body.vi-secim { font-family: var(--vi-sans); }

.vi-secim #sidebar {
  width: var(--vi-sidebar);
  background: var(--vi-panel);
  border-right: 1px solid var(--vi-border);
}
.vi-secim #map { left: var(--vi-sidebar); }

.vi-secim .logo-placeholder { color: var(--vi-purple); }

.vi-secim h2 {                          /* title -> serif, dark (no underline) */
  font-family: var(--vi-serif);
  font-weight: normal;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--vi-ink);
  border-bottom: none;
  padding-bottom: 0;
}
.vi-secim label { color: var(--vi-muted); }

.vi-secim select {
  border: 1px solid var(--vi-border);
  color: var(--vi-ink2);
}
.vi-secim select:focus {
  border-color: var(--vi-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.vi-secim .info-box {
  background: var(--vi-bg);
  border: 1px solid var(--vi-border);
  color: var(--vi-muted);
}
.vi-secim .info-box span { color: var(--vi-blue); }

.vi-secim .custom-tooltip {
  font-family: var(--vi-sans);
  font-weight: 600;
}

/* ============================================================
   5. RESPONSIVE — collapse the sidebar offset on narrow screens
   ============================================================ */
@media (max-width: 640px) {
  .vi-secim #map { left: 0; }
}