/*
  Mapa Inwestycji Gminy Psary
  v0.8.14 — PREMIUM MOCKUP MATCH
  Dedicated visual override based on the approved mockup.
  It intentionally does not alter application data/auth/map logic.
*/

:root {
  --mm-gap: 12px;
  --mm-edge: 12px;
  --mm-top: 74px;
  --mm-left: 326px;
  --mm-detail: 366px;
  --mm-radius: 22px;
  --mm-radius-sm: 16px;
  --mm-border: rgba(42, 73, 105, .11);
  --mm-border-strong: rgba(28, 105, 180, .22);
  --mm-text: #17314c;
  --mm-muted: #73859a;
  --mm-blue: #1175c9;
  --mm-blue-dark: #0b66b4;
  --mm-green: #61bc35;
  --mm-bg: rgba(255,255,255,.965);
  --mm-soft: rgba(248,251,254,.96);
  --mm-shadow: 0 16px 42px rgba(18, 42, 67, .10);
  --mm-shadow-soft: 0 8px 24px rgba(18, 42, 67, .07);
}

html, body { overflow: hidden !important; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  color: var(--mm-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== global branded scrollbars ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a96df rgba(223,232,240,.45);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track {
  background: rgba(224,232,240,.34);
  border-radius: 999px;
  margin-block: 9px;
  margin-inline: 5px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #258ed8 0%, #4caed8 42%, #62c65a 100%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.64);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1178c7 0%, #35a5d1 42%, #50b945 100%);
}

/* ===== shell / header ===== */
#workspace.workspace {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#topbar.topbar {
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.965) !important;
  box-shadow: 0 8px 28px rgba(18,42,67,.075) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  z-index: 60 !important;
}
.brand.brand-system {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: max-content !important;
}
.brand-logo {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.brand-logo-gmina { height: 37px !important; }
.brand-logo-zgk { height: 36px !important; }
.brand-divider {
  width: 1px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #dbe5ee !important;
}
.topnav {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.topnav-link {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: #52677d !important;
  background: transparent !important;
}
.topnav-link.active {
  color: var(--mm-blue-dark) !important;
  background: #f6faff !important;
  box-shadow: inset 0 -2px 0 var(--mm-blue) !important;
}
.topbar-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.version-pill, .top-search-shortcut, .sync-pill { display: none !important; }
.sidebar-toggle,
.login-button {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  border: 1px solid var(--mm-border) !important;
  background: rgba(255,255,255,.98) !important;
  color: #25415f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 15px rgba(18,42,67,.045) !important;
}
.login-button { color: var(--mm-blue-dark) !important; }
.user-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  background: #edf7ff !important;
  color: #2285cf !important;
  font-size: 0 !important;
}
.user-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2285cf;
}

/* ===== left catalogue panel ===== */
.public-sidebar {
  position: absolute !important;
  z-index: 31 !important;
  top: var(--mm-top) !important;
  left: var(--mm-edge) !important;
  bottom: var(--mm-edge) !important;
  width: var(--mm-left) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.955) !important;
  box-shadow: var(--mm-shadow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body:not(.sidebar-open) .public-sidebar {
  transform: translateX(calc(-100% - 30px)) !important;
}
.category-nav { display: none !important; }
.sidebar-hero {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 14px 11px !important;
  border-radius: 20px !important;
  border: 1px solid var(--mm-border) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}
.sidebar-hero::before, .sidebar-hero::after { display: none !important; }
.sidebar-hero h1 {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  letter-spacing: -.035em !important;
  color: var(--mm-text) !important;
  white-space: normal !important;
  overflow: visible !important;
}
.sidebar-hero p {
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.42 !important;
  color: var(--mm-muted) !important;
}
.list-section {
  flex: 1 1 auto !important;
  min-height: 300px !important;
  max-height: none !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0,1fr) !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 13px 12px 12px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid var(--mm-border) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
}
.list-heading {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 !important;
}
.list-heading h2 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: var(--mm-text) !important;
}
.sort-filter-button {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mm-border) !important;
  background: #f7fafc !important;
  color: #52677d !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
.list-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 9.5px !important;
  color: #8292a2 !important;
}
.text-button {
  color: var(--mm-blue-dark) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
}
.investment-list {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1px 3px 1px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
.investment-list::-webkit-scrollbar-track { margin-block: 7px !important; }

.investment-card {
  position: relative !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0,1fr) 31px 10px !important;
  grid-template-rows: auto !important;
  column-gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 10px 9px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(37,75,110,.09) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 8px 22px rgba(20,45,72,.055) !important;
}
.investment-card:hover {
  transform: none !important;
  border-color: rgba(26,118,198,.18) !important;
  box-shadow: 0 10px 24px rgba(20,45,72,.075) !important;
}
.investment-card.active {
  border-color: #9fd1f4 !important;
  background: linear-gradient(180deg, #f8fcff 0%, #f1f9ff 100%) !important;
  box-shadow: 0 8px 22px rgba(17,117,201,.09) !important;
}
.investment-dot {
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--category-accent) 16%, white) !important;
}
.investment-copy {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 3px !important;
  overflow: hidden !important;
}
.investment-copy strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 11.4px !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
  letter-spacing: -.018em !important;
  color: #19324d !important;
  text-wrap: pretty !important;
}
.investment-copy small {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 8.6px !important;
  line-height: 1.25 !important;
  color: #7b8c9d !important;
}
.investment-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 1px 0 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.demo-chip,
.investment-meta-row em,
.investment-status em {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 7.7px !important;
  line-height: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.demo-chip { flex: 0 0 auto !important; }
.investment-meta-row em { flex: 0 1 auto !important; }
.investment-brand-slot {
  width: 31px !important;
  min-width: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.executor-brand.investment-brand-mini {
  display: block !important;
  width: auto !important;
  max-width: 29px !important;
  max-height: 15px !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}
.executor-brand.brand-gmina.investment-brand-mini { max-width: 23px !important; }
.investment-chevron {
  width: 10px !important;
  min-width: 10px !important;
  color: #7f94aa !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* ===== filters ===== */
.advanced-filters {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--mm-border) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
}
.advanced-filters:not(.mobile-open) { display: none !important; }
.advanced-filters.mobile-open { display: block !important; }
.advanced-filters-head { margin: 0 0 10px !important; }
.advanced-filters-title strong { font-size: 12px !important; }
.advanced-filters-title span { font-size: 9px !important; }
.close-filters-button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}
.advanced-filters .filter-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  max-height: none !important;
  overflow: visible !important;
}
.advanced-filters label { font-size: 9px !important; color: #6e8093 !important; }
.advanced-filters select,
.advanced-filters input {
  min-height: 34px !important;
  border-radius: 11px !important;
  border: 1px solid #dbe5ee !important;
  background: #fff !important;
  font-size: 10px !important;
}

/* ===== map toolbar ===== */
.map-top-controls {
  position: absolute !important;
  z-index: 20 !important;
  top: var(--mm-top) !important;
  left: calc(var(--mm-edge) + var(--mm-left) + var(--mm-gap)) !important;
  right: var(--mm-edge) !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.955) !important;
  box-shadow: 0 10px 30px rgba(18,42,67,.08) !important;
  backdrop-filter: blur(13px) !important;
  -webkit-backdrop-filter: blur(13px) !important;
}
.map-search {
  flex: 1 1 300px !important;
  min-width: 230px !important;
  max-width: 345px !important;
}
.map-search input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px 0 40px !important;
  border-radius: 13px !important;
  border: 1px solid #dce6ef !important;
  background: rgba(255,255,255,.97) !important;
  color: #344d68 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.map-search-icon { left: 14px !important; color: #6f8499 !important; }
.category-chips {
  flex: 0 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 1px !important;
  scrollbar-width: none !important;
}
.category-chips::-webkit-scrollbar { display: none !important; }
.category-chip {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #dce6ef !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 4px 12px rgba(18,42,67,.035) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #52677d !important;
}
.category-chip:hover { transform: none !important; }
.category-chip.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #1381d6 0%, #0a69ba 100%) !important;
  box-shadow: 0 8px 18px rgba(17,117,201,.18) !important;
}
.category-chip .chip-symbol {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin-right: 6px !important;
  border-radius: 8px !important;
  border: 1px solid currentColor !important;
  background: #fff !important;
}
.category-chip.active .chip-symbol {
  color: #fff !important;
  border-color: rgba(255,255,255,.30) !important;
  background: rgba(255,255,255,.16) !important;
}
.chip-symbol svg { width: 14px !important; height: 14px !important; }

/* ===== map presentation ===== */
.map-stage { background: #e9eef2 !important; }
.map-scrim {
  background: linear-gradient(180deg, rgba(246,250,252,.16), rgba(246,250,252,.04)) !important;
  pointer-events: none !important;
}
.stage-slogan, .map-badges, .legend { display: none !important; }
.maplibregl-popup-content {
  min-width: 220px !important;
  padding: 13px !important;
  border-radius: 16px !important;
  border: 1px solid var(--mm-border) !important;
  box-shadow: 0 16px 36px rgba(18,42,67,.16) !important;
  background: rgba(255,255,255,.98) !important;
}
.maplibregl-popup-close-button {
  width: 28px !important;
  height: 28px !important;
  color: #668096 !important;
  font-size: 18px !important;
}
.maplibregl-popup-tip { border-top-color: #fff !important; }
.map-popup-title { font-size: 11.5px !important; line-height: 1.25 !important; }
.map-popup-meta { font-size: 9px !important; color: #74879a !important; }
.map-popup-button, .popup-details-button {
  min-height: 35px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: var(--mm-blue) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ===== right investment drawer ===== */
#detailPanel,
.detail-panel {
  position: absolute !important;
  z-index: 34 !important;
  top: var(--mm-top) !important;
  right: var(--mm-edge) !important;
  bottom: var(--mm-edge) !important;
  left: auto !important;
  width: var(--mm-detail) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 0 22px !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 23px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: var(--mm-shadow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  scrollbar-gutter: stable !important;
}
#detailPanel::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track { margin-block: 14px !important; }
#detailContent { min-height: 100% !important; padding-bottom: 18px !important; }
.detail-cover,
.detail-photo {
  height: 164px !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
}
.detail-cover-brand,
.detail-photo-brand {
  top: 13px !important;
  left: 13px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 5px 15px rgba(17,39,62,.08) !important;
}
.detail-cover-brand img,
.detail-photo-brand img { height: 27px !important; width: auto !important; max-width: 108px !important; }
.detail-body { padding: 15px 16px 14px !important; }
.detail-category-line {
  gap: 7px !important;
  margin-bottom: 9px !important;
  font-size: 10.5px !important;
  color: #6d8094 !important;
}
.detail-panel h2 {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.17 !important;
  font-weight: 760 !important;
  letter-spacing: -.03em !important;
  color: #17314c !important;
}
.detail-progress { margin: 0 0 10px !important; }
.detail-progress-head { font-size: 10.5px !important; }
.progress-track { height: 7px !important; border-radius: 999px !important; background: #e8eef3 !important; }
.progress-bar { border-radius: 999px !important; background: linear-gradient(90deg, #43ae32, #61c945) !important; }
.detail-facts {
  margin: 0 !important;
  border-top: 1px solid #e7eef4 !important;
}
.detail-facts > div {
  min-height: 40px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e7eef4 !important;
}
.detail-facts dt { font-size: 9.4px !important; color: #8192a3 !important; }
.detail-facts dd {
  max-width: 62% !important;
  font-size: 10.7px !important;
  font-weight: 700 !important;
  color: #1e3854 !important;
  text-align: right !important;
}
.detail-summary {
  margin: 12px 0 !important;
  font-size: 10.4px !important;
  line-height: 1.52 !important;
  color: #60758b !important;
}
.detail-primary-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 42px !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}
.detail-main-cta,
.btn.detail-main-cta {
  min-height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #137fd2 0%, #0b69b9 100%) !important;
  box-shadow: 0 8px 18px rgba(17,117,201,.16) !important;
}
.detail-icon-action {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe5ee !important;
  background: #fff !important;
  color: #4b6c88 !important;
}
.detail-more { padding-bottom: 8px !important; }
.detail-more-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.detail-more-grid > div {
  min-height: 64px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid #e1e9f0 !important;
  background: #fbfdff !important;
}
.detail-more-grid span { font-size: 8.5px !important; color: #8a9aaa !important; }
.detail-more-grid strong { font-size: 10px !important; line-height: 1.3 !important; color: #203953 !important; }
.detail-section { margin-top: 12px !important; }
.detail-section h4 { font-size: 11px !important; margin-bottom: 8px !important; }
.detail-actions .btn {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 11px !important;
}
.detail-executor-block { margin-top: 13px !important; padding-top: 12px !important; border-top: 1px solid #e4ecf2 !important; }

/* ===== admin / modal consistency ===== */
.admin-sidebar,
.about-modal,
.info-modal,
.login-modal {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.975) !important;
  box-shadow: 0 22px 58px rgba(17,39,62,.15) !important;
}
.admin-sidebar { scrollbar-gutter: stable !important; }
.admin-sidebar::-webkit-scrollbar-track { margin-block: 14px !important; }
.admin-section { border-radius: 18px !important; }
.admin-section-header h3 { letter-spacing: -.02em !important; }
.about-grid > div,
.feature-item,
.license-box,
.contact-card { border-radius: 14px !important; }

/* ===== responsive ===== */
@media (max-width: 1180px) {
  :root { --mm-left: 306px; --mm-detail: 344px; }
  .map-search { max-width: 300px !important; }
  .category-chip { padding: 0 10px !important; font-size: 10px !important; }
}
@media (max-width: 980px) {
  :root { --mm-top: 70px; }
  #topbar.topbar { left: 8px !important; right: 8px !important; top: 6px !important; }
  .topnav { display: none !important; }
  .public-sidebar {
    left: 8px !important;
    width: min(390px, calc(100vw - 16px)) !important;
    bottom: 74px !important;
  }
  .map-top-controls {
    left: 8px !important;
    right: 8px !important;
    top: var(--mm-top) !important;
  }
  #detailPanel, .detail-panel {
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 74px !important;
    width: auto !important;
    max-height: min(72dvh, 720px) !important;
  }
}
@media (max-width: 640px) {
  #topbar.topbar {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 10px !important;
    grid-template-columns: 1fr auto !important;
  }
  .brand-logo-gmina { height: 30px !important; }
  .brand-logo-zgk { height: 29px !important; }
  .brand-divider { height: 23px !important; }
  .sidebar-toggle span { display: none !important; }
  .sidebar-toggle { width: 40px !important; padding: 0 !important; }
  .login-button { padding: 0 10px !important; }
  .public-sidebar { top: 66px !important; width: min(94vw, 388px) !important; padding: 10px !important; }
  .map-top-controls {
    top: 66px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 8px !important;
  }
  .map-search { min-width: 0 !important; max-width: none !important; width: 100% !important; }
  .category-chips { width: 100% !important; }
  .list-section { min-height: 270px !important; }
  .advanced-filters .filter-grid { grid-template-columns: 1fr !important; }
  .detail-cover, .detail-photo { height: 132px !important; }
  .detail-more-grid { grid-template-columns: 1fr !important; }
}


/* ==========================================================
   v0.8.14 – UNIFORM ISLAND GRID + GRADIENT SCROLLBARS
   ========================================================== */
:root {
  --mm-island-gap: 10px;
  --mm-viewport-x: 10px;
  --mm-viewport-y: 8px;
  --mm-header-h: 56px;
  --mm-content-top: calc(var(--mm-viewport-y) + var(--mm-header-h) + var(--mm-island-gap));
  --mm-scrollbar-w: 5px;
  --mm-scrollbar-inset: 16px;
}

/* One spacing rhythm for every floating island/window */
#topbar.topbar {
  top: var(--mm-viewport-y) !important;
  left: var(--mm-viewport-x) !important;
  right: var(--mm-viewport-x) !important;
  height: var(--mm-header-h) !important;
  min-height: var(--mm-header-h) !important;
}
.public-sidebar {
  top: var(--mm-content-top) !important;
  left: var(--mm-viewport-x) !important;
  bottom: var(--mm-viewport-x) !important;
}
.map-top-controls {
  top: var(--mm-content-top) !important;
  left: calc(var(--mm-viewport-x) + var(--mm-left) + var(--mm-island-gap)) !important;
  right: var(--mm-viewport-x) !important;
}
#detailPanel,
.detail-panel {
  top: var(--mm-content-top) !important;
  right: var(--mm-viewport-x) !important;
  bottom: var(--mm-viewport-x) !important;
}
/* When the detail drawer is open, the map toolbar keeps exactly the same gap from it. */
body:has(#detailPanel[aria-hidden="false"]) .map-top-controls {
  right: calc(var(--mm-viewport-x) + var(--mm-detail) + var(--mm-island-gap)) !important;
}

/* All visible scrollbars: thinner, blue→green gradient and aligned with rounded containers. */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #3599d7 rgba(222,232,240,.24) !important; /* Firefox fallback */
}
*::-webkit-scrollbar {
  width: var(--mm-scrollbar-w) !important;
  height: var(--mm-scrollbar-w) !important;
}
*::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px !important;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  background-image: linear-gradient(180deg,
    #177fca 0%,
    #29a0d4 34%,
    #58b96d 68%,
    #70c941 100%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background-clip: border-box !important;
}
*::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg,
    #0d6fb9 0%,
    #198fc8 34%,
    #49aa5c 68%,
    #61bc35 100%) !important;
}

/* Outer window scrollbars – begin/end on the tangent of the rounded corner. */
.public-sidebar::-webkit-scrollbar-track,
#detailPanel::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.about-modal::-webkit-scrollbar-track,
.info-modal::-webkit-scrollbar-track,
.login-modal::-webkit-scrollbar-track {
  margin-block: var(--mm-scrollbar-inset) !important;
}

/* Inner list scrollbar follows the inner rounded list window. */
.investment-list::-webkit-scrollbar-track {
  margin-block: 12px !important;
}
.investment-list {
  padding-right: 1px !important;
  scrollbar-gutter: stable !important;
}

/* Forms / longer secondary panels use the same branded scrollbar. */
.advanced-filters::-webkit-scrollbar-track,
.user-accounts-list::-webkit-scrollbar-track,
.admin-investment-list::-webkit-scrollbar-track,
.news-list::-webkit-scrollbar-track {
  margin-block: 10px !important;
}

/* Keep scrollbar inside the rounded edge instead of visually floating outside it. */
.public-sidebar,
#detailPanel,
.detail-panel,
.admin-sidebar,
.about-modal,
.info-modal,
.login-modal,
.list-section,
.advanced-filters {
  scrollbar-gutter: stable !important;
}

@media (max-width: 980px) {
  :root {
    --mm-viewport-x: 8px;
    --mm-viewport-y: 6px;
    --mm-header-h: 56px;
    --mm-island-gap: 8px;
    --mm-scrollbar-inset: 14px;
  }
  .public-sidebar {
    top: var(--mm-content-top) !important;
    left: var(--mm-viewport-x) !important;
  }
  .map-top-controls {
    top: var(--mm-content-top) !important;
    left: var(--mm-viewport-x) !important;
    right: var(--mm-viewport-x) !important;
  }
  #detailPanel,
  .detail-panel {
    left: var(--mm-viewport-x) !important;
    right: var(--mm-viewport-x) !important;
    bottom: 74px !important;
  }
  body:has(#detailPanel[aria-hidden="false"]) .map-top-controls {
    right: var(--mm-viewport-x) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --mm-header-h: 54px;
    --mm-scrollbar-w: 4px;
  }
  .public-sidebar,
  .map-top-controls {
    top: var(--mm-content-top) !important;
  }
}