/* store_map.inline.css
   Styles moved from inline attributes in the page.
   Keep this loaded after store_map.css so it can override inline specifics.
*/

.sidebar {
  bottom: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  height: auto;
  padding: 10px 28px;
  text-decoration: none !important;
}

.topbar-center {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.period-chips .period-chip.active {
  border-radius: 6px;
}

.nav-link {
  padding: 10px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-container-el {
  width: 100%;
  height: 520px;
  min-height: 420px;
  border-radius: 8px;
  overflow: hidden;
}

/* table header alignment and widths previously inline */
.st-th.th-index { width: 25px; }
.st-th.th-change { text-align: right; width: 80px; }
.st-th.col-sales, .st-th.col-lastyear { text-align: right; }
.st-th.th-trend { text-align: center; width: 60px; }

/* mobile tab buttons */
.mobile-tables-tabs { display: none; gap:8px; margin-top: 12px; }
@media (max-width: 768px) {
  .mobile-tables-tabs { display: flex; }
}
.mtt-btn { padding: 8px 12px; border-radius: 6px; background: var(--surface-1); border:1px solid var(--border); cursor:pointer; }
.mtt-btn.active { background: var(--red); color: #fff; }

/* legend tweaks */
.map-legend { position: absolute; left: 16px; bottom: 16px; top: auto; right: auto; z-index: 1000; }
.map-legend .legend-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:middle; }

/* small utility */
.loading-overlay { padding: 12px; font-style: italic; color: #666; }
.error-msg { color: #b00020; font-weight: 600; padding: 8px 0; }