/* ==========================================================================
   SITE CHROME — header, footer, mobile nav, sticky bars
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-6); }

.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; flex-shrink: 0; }
.logo .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--color-primary-700); display: grid; place-items: center; }
.logo .mark svg { width: 17px; height: 17px; stroke: #fff; fill: none; }

.header-search {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 6px 6px 16px;
  background: var(--color-bg-sunken);
}
.header-search input { border: 0; background: transparent; flex: 1; font-size: var(--fs-small); outline: none; }
.header-search svg { width: 16px; height: 16px; stroke: var(--color-muted); flex-shrink: 0; }
.header-search .divider-v { width: 1px; height: 20px; background: var(--color-border); margin: 0 8px; }
.header-search button.go { background: var(--color-primary-700); color: var(--color-muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.header-search button.go svg { stroke: currentColor; }
.header-search button.go.has-query { color: #fff; }
.site-header .header-actions > .show-mobile { display: none !important; }

.main-nav { display: flex; align-items: center; gap: var(--space-5); font-size: var(--fs-small); font-weight: 600; }
.main-nav a:hover { color: var(--color-primary-700); }
.main-nav .dropdown-caret { width: 12px; height: 12px; margin-left: 2px; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.icon-btn:hover { background: var(--color-bg-sunken); }
.icon-btn svg { width: 19px; height: 19px; stroke: var(--color-ink-soft); fill: none; }

.mobile-menu-btn { display: none; width: 40px; height: 40px; place-items: center; }
.mobile-menu-btn svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-search { display: none; }
}
@media (max-width: 768px) {
  .site-header .header-actions > .show-mobile { display: grid !important; }
  .mobile-menu-btn { display: grid; }
  .header-actions .btn-secondary.hide-mobile { display: none; }
}

/* Mobile search row (shown below header on small screens on pages that need it) */
.mobile-search-row { display: none; padding: 10px var(--container-pad); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
@media (max-width: 768px) { .mobile-search-row.is-active { display: block; } }

/* Mobile slide-in menu */
.mobile-menu { position: fixed; inset: 0; z-index: 1100; display: none; }
.mobile-menu.is-open { display: block; }
.mobile-menu__overlay { position: absolute; inset: 0; background: var(--color-overlay); }
.mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: var(--color-surface); padding: var(--space-5); overflow-y: auto; padding-top: calc(var(--space-5) + env(safe-area-inset-top)); }
.mobile-menu__panel a, .mobile-menu__panel button.mm-link { display: block; padding: 13px 4px; font-weight: 600; border-bottom: 1px solid var(--color-border-soft); width: 100%; text-align: left; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary-900); color: rgba(255,255,255,0.82); padding-block: var(--space-16) var(--space-8); }
.site-footer > .container { padding-right: calc(var(--container-pad) + var(--space-4)); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-col h5 { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.footer-brand p { font-size: var(--fs-small); margin-top: var(--space-3); max-width: 260px; color: rgba(255,255,255,0.65); }
.footer-social { display: flex; gap: 10px; margin-top: var(--space-5); }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: grid; place-items: center; }
.footer-social svg { width: 15px; height: 15px; stroke: #fff; fill: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--fs-caption); color: rgba(255,255,255,0.55); flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 1025px) { .footer-grid--no-legal { grid-template-columns: 1.4fr repeat(3, 1fr); } } /* v1.6.121: footer without the Legal column */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } .site-footer > .container { padding-right: var(--container-pad); } }

/* ---------- Sticky mobile action bar (listing detail) ---------- */
.mobile-action-bar { display: none; }
@media (max-width: 768px) {
  .mobile-action-bar {
    display: flex; position: sticky; bottom: 0; z-index: 90; background: var(--color-surface);
    border-top: 1px solid var(--color-border); padding: 10px var(--container-pad);
    padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px;
  }
  .mobile-action-bar .btn { flex: 1; }
}

/* ---------- Dashboard shell ---------- */
.dash-shell {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: var(--space-8);
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dash-shell > * { min-width: 0; }
.dash-shell > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.dash-sidebar { position: sticky; top: calc(var(--header-h) + var(--space-6)); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); }
.dash-sidebar__profile { display: flex; align-items: center; gap: 10px; padding: 4px 8px var(--space-4); border-bottom: 1px solid var(--color-border-soft); margin-bottom: var(--space-3); }
.dash-sidebar__profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dash-nav a, .dash-nav button.dash-link { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink-soft); width: 100%; text-align: left; }
.dash-nav .dash-link--disabled { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; color: var(--color-muted); width: 100%; text-align: left; cursor: default; opacity: .62; }
.dash-nav .dash-link--disabled svg { width: 17px; height: 17px; stroke: var(--color-muted); fill: none; flex-shrink: 0; }
.dash-nav .dash-link__label { min-width: 0; }
.dash-nav .dash-nav-badge { margin-left: auto; flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-pill); font-size: 10px; line-height: 1.4; font-weight: 700; letter-spacing: .02em; color: var(--color-muted); background: var(--color-bg-sunken); white-space: nowrap; }
.dash-nav a svg, .dash-nav button.dash-link svg { width: 17px; height: 17px; stroke: var(--color-muted); fill: none; flex-shrink: 0; }
.dash-nav a:hover { background: var(--color-bg-sunken); }
.dash-nav a.is-active { background: var(--color-primary-50); color: var(--color-primary-700); }
.dash-nav a.is-active svg { stroke: var(--color-primary-700); }
.dash-nav .dash-nav-group { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); }

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
  .dash-nav { display: flex; overflow-x: auto; gap: 4px; }
  .dash-nav a { white-space: nowrap; }
  .dash-sidebar__profile { display: none; }
}

/* ---------- DXP listing map stacking ---------- */
#dxp-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
#dxp-map .leaflet-container {
  z-index: 0;
}

.dxp-suggest-wrap--header{display:flex;align-items:center;min-width:0;}
.dxp-suggest-wrap--header .dxp-location-suggestions{min-width:210px;right:auto;width:240px;}

/* Data-table wrapper owns overflow. Tables use their natural/content width and
   only create horizontal scrolling when the content genuinely cannot fit. */
.dash-shell .dtable-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.dash-shell .dtable-wrap .dtable {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.dash-shell .dtable-wrap .dtable th,
.dash-shell .dtable-wrap .dtable td {
  white-space: nowrap;
}

/* ==========================================================================
   v1.6.91 — header user avatar, "Where?" dropdown, mobile menu header/icons/logout
   ========================================================================== */
.header-search select { border: 0; background: transparent; font-size: var(--fs-small); color: var(--color-ink-soft); outline: none; cursor: pointer; max-width: 130px; min-width: 0; padding: 0 2px; }

/* circular user image with a default user icon underneath (the image removes itself if it cannot load) */
.user-avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: #c4c8c6; color: #fff; }
.user-avatar .user-avatar__icon { width: 100%; height: 100%; fill: currentColor; stroke: none; display: block; }
.user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.btn.header-user { padding: 5px 12px 5px 6px; gap: 8px; }
.header-user__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mobile menu */
.mobile-menu__panel .mobile-menu__head { gap: var(--space-3); }
.mobile-menu__panel .mobile-menu__user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; width: auto; padding: 0; border-bottom: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.mobile-menu__user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-menu__panel a.mm-item { display: flex; align-items: center; gap: 14px; }
.mm-icon { width: 20px; height: 20px; flex: none; color: var(--color-primary-700); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-menu__panel a.btn.mm-logout { display: flex; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; margin-top: var(--space-5); border: 1px solid var(--color-border); text-align: center; }
.mobile-menu__panel a.btn.mm-logout .mm-icon { width: 16px; height: 16px; color: currentColor; }