/* ════════════════════════════════════════════════
   DASHBOARD  –  stat cards, map, charts, table
   + Leaflet / Chart.js vendor overrides
════════════════════════════════════════════════ */

/* ── Summary stat cards (4 × durum özeti) ────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.summary-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.summary-card:hover {
  border-color: var(--clr-border-2);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  transform: translateY(-2px);
}

.summary-card__header {
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.summary-card__title {
  font-size: 12px; font-weight: 700; color: var(--clr-text);
  display: flex; align-items: center; gap: 7px;
}
.summary-card__title i { font-size: 12px; }

.summary-card__badge {
  font-size: 10px; color: var(--clr-dim);
  background: var(--clr-raised); border: 1px solid var(--clr-border);
  padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}

.summary-card__body {
  padding: 11px 14px 13px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Status rows ──────────────────────────────── */
.summary-row {
  display: flex; align-items: center; gap: 8px;
}
.summary-row__dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.summary-row__label {
  font-size: 11px; color: var(--clr-sub);
  white-space: nowrap; width: 82px; flex-shrink: 0;
}
.summary-row__track {
  flex: 1; height: 5px;
  background: var(--clr-raised);
  border-radius: 5px; overflow: hidden;
}
.summary-row__fill {
  height: 100%; border-radius: 5px;
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
  min-width: 2px;
}
.summary-row__count {
  width: 26px; text-align: right;
  font-size: 12.5px; font-weight: 700; color: var(--clr-text);
  flex-shrink: 0;
}
.summary-row__pct {
  width: 38px; text-align: right;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}

[data-theme="light"] .summary-card:hover {
  box-shadow: 0 6px 24px rgba(15,23,42,.10);
}

/* ── Map + charts section ────────────────────── */
.map-charts-section {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--gap);
  height: 460px;    /* explicit height so inner flex chain has a reference */
  min-height: 460px; /* prevent flex parent from squashing */
}

/* Grid children stretch to row height by default (align-self:stretch).
   We add height:100% so the inner flex chain can resolve correctly. */
.map-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* keep border-radius clip; popup stays inside map tile */
}

.map-card__toolbar {
  padding: 6px 12px;
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  flex-shrink: 0;
}

/* Leaflet container fills remaining card height */
#map {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ── Donut chart column ───────────────────────── */
.charts-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;     /* fill grid row */
  min-height: 0;
}

.chart-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* position:relative required by Chart.js for responsive sizing */
.chart-card__body {
  flex: 1;
  padding: 8px 10px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.chart-card__body canvas {
  display: block;
  width: 100%  !important;
  height: 100% !important;
}

/* ── Table card ──────────────────────────────── */
.table-card { display: flex; flex-direction: column; }

.table-card__toolbar {
  padding: 9px 13px;
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.table-info { font-size: 11px; color: var(--clr-sub); margin-left: auto; }

.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 320px; }

table.data-table { width: 100%; border-collapse: collapse; }

.data-table thead { position: sticky; top: 0; z-index: 2; background: var(--clr-raised); }

.data-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--clr-dim);
  border-bottom: 1px solid var(--clr-border);
  white-space: nowrap; user-select: none;
}
.data-table th.th--sortable { cursor: pointer; transition: color .15s; }
.data-table th.th--sortable:hover { color: var(--clr-sub); }
.data-table th.sorted { color: var(--clr-blue); }

.sort-icon { margin-left: 4px; font-size: 9px; opacity: .45; }
.data-table th.sorted .sort-icon { opacity: 1; }

.data-table td {
  padding: 9px 12px;
  font-size: 12px; color: var(--clr-text);
  border-bottom: 1px solid rgba(30,45,69,.5);
  white-space: nowrap;
}

.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover    { background: var(--clr-raised); }
.data-table tbody tr.row--active { background: rgba(99,102,241,.10); }

.td--muted  { color: var(--clr-sub); }
.td--number { font-variant-numeric: tabular-nums; }

.table-card__footer {
  padding: 9px 13px;
  border-top: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.table-page-info { font-size: 11px; color: var(--clr-sub); }

/* ════════════════════════════════════════════════
   VENDOR OVERRIDES
════════════════════════════════════════════════ */

/* Leaflet popup – koyu kutu, içerik her zaman okunaklı */
.leaflet-popup-content-wrapper {
  background: #172032 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3) !important;
  color: #f1f5f9 !important;
  overflow: hidden !important;
}
.leaflet-popup-tip { background: #172032 !important; }
.leaflet-popup-content {
  margin: 0 !important;
  min-width: 260px !important;
  max-width: 340px !important;
  padding: 0 !important;
  font-family: 'Quicksand', sans-serif !important;
}
.leaflet-container a.leaflet-popup-close-button {
  color: rgba(255,255,255,.60) !important;
  font-size: 18px !important;
  top: 8px !important;
  right: 8px !important;
}

/* Leaflet controls */
.leaflet-bar a              { background: var(--clr-surface) !important; color: var(--clr-text) !important; border-color: var(--clr-border) !important; }
.leaflet-bar a:hover        { background: var(--clr-raised) !important; }
.leaflet-control-attribution{ background: rgba(7,9,15,.8) !important; color: var(--clr-dim) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--clr-blue) !important; }

/* Custom tooltip for GeoJSON layers */
.lf-tip {
  background: var(--clr-raised) !important;
  border: 1px solid var(--clr-border-2) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
  color: var(--clr-text) !important;
  font-size: 12px !important;
  font-family: 'Quicksand', sans-serif !important;
  padding: 5px 10px !important;
}
.lf-tip::before { display: none !important; }

/* Light theme overrides */
[data-theme="light"] .lf-tip {
  background: #ffffff !important;
  border-color: var(--clr-border) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.12) !important;
}
[data-theme="light"] .leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
}