/* page-map.css — Xarita sahifasi (docs/DESIGN-shadcn-ui.md §7: P1 egasi).
 * shadcn dashboard-01 ruhida: xarita inset ichida to'liq egallanadi, ustida suzuvchi kartalar (bg-card/95, backdrop-blur,
 * border, shadow-md, rounded-lg). Chapda: filtr kartasi + legenda (`.map-left`); o'ngda: inventar ro'yxati yoki hujayra tahlili
 * (`.map-panel`, bittasi ochiq). Barcha ranglar tokenlardan — light va dark ikkalasida ishlaydi.
 * `.map-*`, `.mc-*`, `.site-panel/.sp-*`, `.sli*`, `.drill-*`, `.legend*`, `.list-reopen`, maplibre popup/kontrollar, `.cell-id`.
 */

.map-wrap {
  position: relative; width: 100%; height: 100%;
  /* `hidden` emas — `.map-panel`ning yopiq holatdagi `translateX(...)` (chapga/o'ngga suzib chiqish)
     geometriyasi haqiqiy elementdan tashqarida bo'lsa ham `overflow:hidden` konteynerining
     scroll-lanadigan maydonini kengaytiradi; panel ochilganda fokus shu "arvoh" maydonga
     ko'chib, brauzer #m-wrap'ni gorizontal skroll qilib yuboradi — natijada chap filtr
     kartasi (`.map-left`) ko'rinishdan chiqib ketadi (haqiqiy foydalanuvchi hodisasi,
     h3 katakcha/inventar nuqtasini bosganda). `clip` xuddi shu vizual kesishni beradi,
     lekin scroll konteyneri UMUMAN yaratmaydi — bu butun xato sinfini yo'q qiladi. */
  overflow: clip;
  --map-gap: 14px;
  --map-panel-w: 0px;              /* o'ng panel egallagan eni (bo'shliq bilan): MapLibre pastki o'ng kontrollarini surish uchun */
}
.map-wrap[data-panel="list"] { --map-panel-w: 352px; }
.map-wrap[data-panel="drill"] { --map-panel-w: 388px; }
#map { position: absolute; inset: 0; }

/* --- Heatmap yuklanish progressi: tepada ingichka animatsion chiziq (map-page.js `heatProgress()`) ---
 * Faqat sezilarli sekinlikda ko'rinadi (150ms kechikish); brend signal rangida, avval haqiqiy
 * yuklab olish foizi (Content-Length asosida), so'ng render bosqichida noaniq tolqin animatsiyasi. */
.heat-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6;
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
  overflow: hidden; pointer-events: none;
}
.heat-progress-bar {
  height: 100%; width: 0%; background: var(--brand-signal); border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px color-mix(in oklab, var(--brand-signal) 70%, transparent);
  transition: width 0.15s ease-out;
}
.heat-progress.indeterminate .heat-progress-bar {
  width: 30% !important; transition: none; animation: heat-progress-sweep 1.1s ease-in-out infinite;
}
@keyframes heat-progress-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(367%); }
}
@media (prefers-reduced-motion: reduce) {
  .heat-progress.indeterminate .heat-progress-bar { animation: none; width: 60% !important; opacity: 0.7; }
}

/* --- Suzuvchi karta: bg-card/95 backdrop-blur border shadow-md rounded-lg --- */
.map-card {
  background-color: color-mix(in oklab, var(--card) 95%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  color: var(--card-foreground);
}

/* ============================== Chap ustun: filtrlar + banner + legenda ============================== */
.map-left {
  position: absolute; top: var(--map-gap); left: var(--map-gap); bottom: var(--map-gap); z-index: 5; width: 280px;
  display: flex; flex-direction: column; gap: 12px; pointer-events: none;   /* bo'sh joy xaritani sichqoncha bilan surishga xalaqit bermasin */
}
.map-left > * { pointer-events: auto; }

.map-controls {
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 1rem; overflow-x: hidden; overflow-y: auto;
}
.map-controls * { box-sizing: border-box; }

.mc-block { display: flex; flex-direction: column; gap: 6px; }
.mc-label, .mc-field > label {
  font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--muted-foreground-strong); letter-spacing: 0.01em;
}
.mc-input { width: 100%; }
#m-month { font-weight: 500; }

.mc-refresh { width: 100%; }
.mc-refresh svg { transition: transform var(--duration) var(--ease-out); }
.mc-refresh:hover:not(:disabled) svg { transform: rotate(60deg); }
.mc-refresh.is-loading svg { animation: spin 0.8s linear infinite; }
.mc-refresh:disabled { opacity: 0.7; }

/* Qo'shimcha sozlamalar (collapsible) */
.mc-adv-toggle {
  width: 100%; justify-content: flex-start; margin-top: -0.25rem; padding-inline: 0.5rem;
  color: var(--muted-foreground-strong); font-size: 0.8125rem;
}
.mc-adv-toggle:hover { color: var(--accent-foreground); }
.mc-adv-toggle > span:not(.icon) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.mc-adv-toggle .mc-caret { margin-left: auto; transition: transform var(--duration) var(--ease-out); }
.mc-adv-toggle[aria-expanded="true"] .mc-caret { transform: rotate(90deg); }

.mc-adv { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mc-adv[hidden] { display: none; }
.mc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-adv select, .mc-adv input[type="date"] { width: 100%; height: 2rem; padding-block: 0.125rem; font-size: 0.8125rem; }
.mc-adv input[type="date"] { padding-inline: 0.5rem; }
.mc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.mc-pair-dash { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.mc-metric { display: flex; width: 100%; }
.mc-metric .toggle-item { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; font-size: 0.8125rem; }

/* Holat qatori: "15 000 hujayra · 31 kun · res 8" */
.map-meta {
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 0.75rem; line-height: 1.35; color: var(--muted-foreground-strong); font-variant-numeric: tabular-nums;
}
.map-meta:empty { display: none; }
.map-meta.is-empty { color: var(--warning); }

/* Ma'lumot yo'q banneri (emptyBanner()) — xarita ustida o'qilishi uchun zich fon */
.map-banner {
  margin: 0; background-color: var(--card); box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* --- Legenda --- */
.legend {
  align-self: flex-start; margin-top: auto; min-width: 11rem; max-width: 100%; padding: 12px 14px;
  font-size: 0.75rem; color: var(--card-foreground);
}
.legend-title { margin-bottom: 8px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--foreground); }
.legend-rows { display: flex; flex-direction: column; gap: 4px; }
.legend-row { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground-strong); line-height: 1.2; }
.legend-swatch {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px;
  opacity: var(--heat-alpha, 0.7);                                           /* xaritadagi hujayra shaffofligi bilan bir xil */
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 18%, transparent);
}
.legend-range { font-variant-numeric: tabular-nums; }

/* ============================== O'ng suzuvchi paneller: inventar (site-panel) va hujayra tahlili (drill-panel) ============================== */
.map-panel {
  position: absolute; top: var(--map-gap); right: var(--map-gap); z-index: 6;
  max-height: calc(100% - 2 * var(--map-gap));                    /* kontentga qarab past bo'ladi (2 ta sayt — qisqa karta), ko'p bo'lsa ichida skroll */
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + 2 * var(--map-gap))); visibility: hidden;
  transition: transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
}
.map-panel.open { transform: none; visibility: visible; transition-delay: 0s; }
.drill-panel { width: 372px; }
.site-panel { width: 340px; }
@media (prefers-reduced-motion: reduce) { .map-panel { transition: none; } }

/* MapLibre pastki o'ng kontrollari (zoom + atribusiya) ochiq panel yonida turadi — panel ostida qolmaydi */
.map-wrap .maplibregl-ctrl-bottom-right { right: calc(var(--map-panel-w) + 4px); transition: right 0.28s var(--ease-out); }
.map-wrap .maplibregl-ctrl-bottom-left { left: 4px; }

.sp-head, .drill-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 16px 16px 12px;
}
.sp-title, .drill-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-title { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.sp-title h3, .drill-title h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; margin: 0; }
.sp-count { font-variant-numeric: tabular-nums; }
.sp-close, .drill-head .icon-btn { flex-shrink: 0; margin: -4px -6px 0 0; }
.cell-id {
  display: block; padding: 0; background: none; border-radius: 0; font-family: var(--font-mono); font-size: 0.6875rem;
  line-height: 1.3; color: var(--muted-foreground); word-break: break-all;
}

/* --- Inventar paneli: filtrlar --- */
.sp-filters { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; padding: 0 16px 14px; border-bottom: 1px solid var(--border); }
.sp-toggle { min-height: 1.5rem; font-size: 0.8125rem; }
.sp-types { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; color: var(--muted-foreground-strong); }
.sp-type { display: inline-flex; align-items: center; gap: 6px; }
.sp-filter-row { display: flex; gap: 8px; }
.sp-filter-row select { flex: 1 1 0; min-width: 0; width: 100%; height: 2rem; padding-block: 0.125rem; font-size: 0.8125rem; text-overflow: ellipsis; }

/* --- Inventar ro'yxati (kompakt kartalar) --- */
.sli-list { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; }
.sli {
  position: relative; display: flex; gap: 10px; align-items: center; flex-shrink: 0; padding: 8px 6px 8px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.sli:hover { background: var(--accent); }
.sli:has(.sli-hit:focus-visible) { border-color: var(--focus-border); box-shadow: var(--ring-glow); }
/* Butun karta ustidagi shaffof tugma: klaviatura/skrin-rider uchun haqiqiy <button> (ichida yulduzcha tugmasi bilan iç-ichma tugma bo'lmasin) */
.sli-hit { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; outline: none; }
.sli.sel { border-color: var(--foreground); background: var(--accent); }
.sli-thumb {
  width: 56px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border); background: var(--muted);
}
.sli-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.sli-thumb-empty svg { width: 1.125rem; height: 1.125rem; }
.sli-body { min-width: 0; flex: 1; }
.sli-name {
  color: var(--foreground); font-size: 0.8125rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.sli-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; color: var(--muted-foreground-strong); font-size: 0.75rem; line-height: 1.2; }
.sli-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sli-foot { display: flex; align-items: flex-start; gap: 4px 14px; flex-wrap: wrap; margin-top: 6px; }
.sli-stat { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; font-size: 0.6875rem; color: var(--muted-foreground-strong); }
.sli-stat b { font-size: 0.8125rem; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sli .star-btn { position: relative; z-index: 2; flex-shrink: 0; align-self: flex-start; }
.sli-price { color: var(--success); font-size: 0.75rem; font-weight: 600; }
.sli-link { font-size: 0.75rem; }

/* Sayt turi nuqtasi: xaritadagi marker rangi bilan bir xil (hexlayer.js siteTypeColors) */
.sli-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 15%, transparent); }
.sli-dot[data-type="billboard"] { background: var(--info); }
.sli-dot[data-type="dooh"] { background: var(--purple); }
.sli-dot[data-type="other"] { background: var(--warning); }

/* --- Xaritada "Inventarlar" tugmasi (ro'yxat yopiq bo'lganda) --- */
.btn.list-reopen {
  position: absolute; top: var(--map-gap); right: var(--map-gap); z-index: 5; height: 2.25rem; padding-inline: 0.875rem;
  background-color: color-mix(in oklab, var(--card) 95%, transparent); color: var(--foreground);
}
.btn.list-reopen:hover { background-color: var(--accent); color: var(--accent-foreground); }

/* ============================== Hujayra tahlili (drill) ============================== */
.drill-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; overflow-y: auto; }
.drill-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drill-kpis .kpi-card {
  padding: 0.875rem; row-gap: 0.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  container-type: normal;                                           /* tor panelda 2 ustun: konteyner-so'rov o'rniga aniq o'lcham */
}
.drill-kpis .kpi-label { font-size: 0.75rem; line-height: 1.25; }
.drill-kpis .kpi-value { font-size: 1.375rem; }
.drill-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); }
.drill-card h4 { margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--card-foreground); }
.drill-card .chart-sm { height: 176px; }
@media (max-height: 800px) { .drill-card .chart-sm { height: 140px; } .drill-sk-chart { height: 10rem; } }
.drill-foot { flex-shrink: 0; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.drill-foot .btn { width: 100%; }
.drill-sk-kpi { height: 4.75rem; border-radius: var(--radius-lg); }
.drill-sk-chart { height: 13rem; border-radius: var(--radius-lg); }
.drill-body .empty-note { margin: 0; }
.site-panel .empty-note { padding: 1.5rem 1rem; }

/* Sichqoncha ostidagi kartochka (hujayra qiymati / marker nomi): kichik popover, hodisalarni ushlamaydi */
.map-tip { z-index: 4; }
.map-tip .maplibregl-popup-content { padding: 6px 10px !important; pointer-events: none; font-size: 0.75rem; line-height: 1.35; }
.map-tip .maplibregl-popup-tip { display: none; }
.tip-label { font-size: 0.6875rem; color: var(--muted-foreground-strong); }
.tip-value { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); }
.tip-title { font-size: 0.75rem; font-weight: 600; color: var(--foreground); max-width: 220px; }
.tip-sub { font-size: 0.6875rem; color: var(--muted-foreground-strong); }

/* ============================== MapLibre: popup (tema bo'yicha) ============================== */
.site-popup { color: var(--popover-foreground); font-size: 0.8125rem; line-height: 1.4; max-width: 210px; display: flex; flex-direction: column; gap: 2px; }
.site-popup b { color: var(--foreground); font-weight: 600; padding-right: 14px; }
.site-popup-img { width: 100%; max-height: 100px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 6px; }
.site-popup a { display: inline-block; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; }
.maplibregl-popup-content {
  padding: 12px !important; background: var(--popover) !important; color: var(--popover-foreground) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--popover) !important; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--popover) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--popover) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--popover) !important; }
.maplibregl-popup-close-button {
  top: 6px; right: 6px; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: var(--radius-sm);
  color: var(--muted-foreground) !important; font-size: 1.125rem; line-height: 1;
}
.maplibregl-popup-close-button:hover { background: var(--accent) !important; color: var(--accent-foreground) !important; }
.maplibregl-popup-close-button:focus-visible { box-shadow: var(--ring-glow); outline: none; }

/* ============================== MapLibre: kontrollar (zoom / atribusiya) ============================== */
.maplibregl-ctrl-group:not(:empty) {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
}
.maplibregl-ctrl-group button { width: 2rem; height: 2rem; background-color: transparent; transition: background-color var(--duration-fast); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.maplibregl-ctrl-group button:hover:not(:disabled) { background-color: var(--accent); }
.maplibregl-ctrl-group button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-border); }
.maplibregl-ctrl-group button:disabled { opacity: 0.4; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { opacity: 0.85; }
:root.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: color-mix(in oklab, var(--card) 90%, transparent) !important; border-radius: var(--radius-md); }
.maplibregl-ctrl-attrib {
  background: color-mix(in oklab, var(--background) 80%, transparent) !important; color: var(--muted-foreground) !important;
  font-family: var(--font-sans); font-size: 0.6875rem; border-radius: var(--radius-sm) 0 0 0;
}
.maplibregl-ctrl-attrib a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
.maplibregl-ctrl-attrib a:hover { text-decoration-color: currentColor; }
.maplibregl-ctrl-attrib-button:focus-visible { box-shadow: var(--ring-glow); }
/* "i" tugmasi qora SVG fon rasmi — qorong'i temada card fonida ko'rinmay qolardi */
:root.dark .maplibregl-ctrl-attrib-button { filter: invert(1); }