/* ============================================================
   dashboard.css — MapX logged-in home (maps.html) redesign.
   Reshells the existing My Maps page into the design/dashboard.dc.html
   layout: left sidebar + centered main (hero + quick actions + the
   existing saved-maps grid, restyled). Colors = css/tokens.css values.
   The page's existing render/search/sort/upload/map-view logic is
   untouched — this only restyles + reparents the shell.
   v1 (2026-07-06): sidebar + hero + quick actions + card restyle.
   Deferred (TODO): Your templates / Uploaded assets / Popular /
   Marketplace picks sections (need data). Sidebar collapse = Phase 3.
   ============================================================ */

/* suppress the legacy injected chrome — the new sidebar replaces the
   dashboard.js seller-nav and the global #mapx-topbar (login state stays
   via the #account-slot inside .ds-top). dashboard.css is maps.html-only. */
#seller-nav, #mapx-topbar { display:none !important; }
body { margin:0 !important; padding:0 !important; }
/* free.css offsets #app 220px for the (now-hidden) seller-nav — undo it */
body.has-seller-nav #app.dash { margin-left:0 !important; }

/* layout shell — turn #app into sidebar + scrolling main */
#app.dash { display:flex; height:100vh; overflow:hidden; background:#f7f8f7;
  font-family:'Montserrat',system-ui,-apple-system,sans-serif; color:#212b26; }

/* ---- sidebar ---- */
.dash-side { width:236px; flex:0 0 236px; background:#fff; border-right:1px solid #e6e9e7;
  display:flex; flex-direction:column; padding:14px 12px; box-sizing:border-box; overflow-y:auto; }
.ds-top { display:flex; align-items:center; padding:2px 8px 12px; }
.ds-logo { font-family:'Quicksand','Montserrat',sans-serif; font-weight:700; font-size:23px;
  color:#2d3251; letter-spacing:-.2px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.ds-logo em { font-style:normal; color:#468c7c; }
.ds-logo-mark { height:24px; width:auto; display:block; flex:none; }
.ds-create { display:flex; align-items:center; justify-content:center; gap:8px; height:40px;
  border:none; border-radius:8px; background:#5f8d74; color:#fff; font:inherit; font-size:13.5px;
  font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(18,32,26,.05), 0 2px 8px rgba(18,32,26,.05);
  margin-bottom:14px; }
.ds-create:hover { background:#0c6457; }
.ds-nav { display:flex; flex-direction:column; gap:1px; }
.ds-link { text-decoration:none; color:#212b26; display:flex; align-items:center; gap:10px; height:36px;
  padding:0 10px; border-radius:8px; font-size:13.5px; font-weight:500; }
.ds-link svg { flex:0 0 17px; }
.ds-link:hover { background:#f2f4f2; }
.ds-link.is-active { background:#e3f1ee; color:#0c6457; font-weight:600; }
.ds-div { height:1px; background:#e6e9e7; margin:10px 8px; }
.ds-spacer { flex:1; }
/* account avatar footer (moved out of .ds-top) — sits above Settings */
.ds-foot { padding:4px 10px; border-top:1px solid #e6e9e7; margin-top:4px; }
.ds-foot:empty { display:none; }
.ds-foot #account-slot { display:flex; align-items:center; }

/* ---- main column ---- */
.dash-main { flex:1; overflow-y:auto; min-width:0; }
.dash-wrap { max-width:1160px; margin:0 auto; padding:36px 40px 56px; box-sizing:border-box; }

/* hero */
.dash-hero { display:flex; flex-direction:column; align-items:center; gap:18px; padding:12px 0 30px; }
.dash-hero h1 { font-family:'Playfair Display',Georgia,serif; font-size:30px; font-weight:600; margin:0; color:#212b26; }
.dash-search { width:100%; max-width:660px; display:flex; align-items:center; gap:10px; height:46px;
  background:#fff; border:1px solid #e6e9e7; border-radius:10px; padding:0 16px; box-sizing:border-box;
  box-shadow:0 1px 2px rgba(18,32,26,.05), 0 2px 8px rgba(18,32,26,.05); transition:border-color .12s; }
.dash-search:focus-within { border-color:#5f8d74; }
.dash-search input { flex:1; border:none; outline:none; font:inherit; font-size:14px; color:#212b26; background:transparent; }
.dash-search input::placeholder { color:#9aa49e; }

/* quick actions */
.dash-quick { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; padding-bottom:30px; }
.dq { text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:9px; width:74px; cursor:pointer; }
.dq-ic { width:60px; height:60px; border-radius:999px; background:#e3f1ee; color:#0c6457; display:flex;
  align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(18,32,26,.05); transition:background .12s; }
.dq:hover .dq-ic { background:#d3e8e1; }
.dq-lbl { font-size:11.5px; font-weight:500; color:#212b26; text-align:center; line-height:1.3; }

/* section headers */
.dash-sec-h { display:flex; align-items:baseline; gap:12px; padding:8px 0 16px; }
.dash-sec-h .t { font-size:16px; font-weight:600; }
.dash-sec-h a { text-decoration:none; font-size:12.5px; font-weight:600; color:#0c6457; }

/* ---- reskin the existing My Maps toolbar as a light filter row ---- */
#app.dash #maps-toolbar { background:transparent; border:none; padding:0 0 6px; box-shadow:none; gap:10px; }
#app.dash #maps-toolbar input,
#app.dash #maps-toolbar select { border:1px solid #e6e9e7; border-radius:8px; background:#fff; }
#app.dash #maps-toolbar input:focus,
#app.dash #maps-toolbar select:focus { border-color:#5f8d74; outline:none; }
#app.dash #files-upload-btn { background:#5f8d74; border:none; border-radius:8px; color:#fff; font-weight:600; }
#app.dash #files-upload-btn:hover { background:#0c6457; }

/* ---- restyle the existing .map-card grid to the token look ---- */
/* cards live in a .maps-grid child of #maps-body (render appends it), so style
   THAT — keep #maps-body a plain block, don't double-grid it. */
#app.dash #maps-body { display:block; }
#app.dash .maps-grid { grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:18px; max-width:none; }
#app.dash .maps-grid + .maps-grid { margin-top:22px; }
/* card actions: Open (primary text) + compact icon buttons (copy / visibility / delete) */
#app.dash .map-actions { gap:6px; flex-wrap:nowrap; align-items:center; }
#app.dash .map-actions .map-open { flex:1 1 auto; }
#app.dash .map-actions .mc-ico { flex:0 0 auto; width:32px; height:32px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; font-size:14px; line-height:1; background:#fff;
  border:1px solid #e6e9e7; border-radius:8px; cursor:pointer; transition:border-color .12s, background .12s; }
#app.dash .map-actions .mc-ico:hover { border-color:#5f8d74; background:#f2f4f2; }
#app.dash .map-actions .map-del:hover { border-color:#e0b4ae; background:#f6ecea; }

/* Recently-edited: collapse the owned grid to 2 rows + a Show-all toggle,
   so the Team maps section surfaces without scrolling past 50+ cards */
#app.dash .map-card.mg-hidden { display:none !important; }
#app.dash .recents-more { display:inline-flex; align-items:center; gap:6px; margin:16px 0 4px; padding:8px 16px;
  background:#fff; border:1px solid #e6e9e7; border-radius:8px; color:#0c6457; font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; }
#app.dash .recents-more:hover { border-color:#5f8d74; background:#f2f4f2; }
#app.dash .map-card { background:#fff; border:1px solid #e6e9e7; border-radius:8px; overflow:hidden;
  box-shadow:0 1px 2px rgba(18,32,26,.05), 0 2px 8px rgba(18,32,26,.05); transition:box-shadow .12s; display:flex; flex-direction:column; }
#app.dash .map-card:hover { box-shadow:0 2px 6px rgba(18,32,26,.06), 0 8px 24px rgba(18,32,26,.08); }
#app.dash .map-thumb { display:block; position:relative; height:144px;
  background:repeating-linear-gradient(45deg, #eef4f1 0 10px, #f6faf8 10px 20px); }
#app.dash .map-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#app.dash .map-badge { position:absolute; top:10px; right:10px; font-size:10px; font-weight:600;
  letter-spacing:.3px; color:#0c6457; background:#e3f1ee; border-radius:999px; padding:2px 8px; }
#app.dash .map-body { padding:12px 14px; }

/* responsive: on phones the left sidebar splits into a slim fixed TOP header
   (logo + account) and a fixed BOTTOM tab bar that scrolls horizontally so every
   nav item stays reachable — the app-style layout from the mobile mockup. */
@media (max-width:760px) {
  #app.dash { flex-direction:column; height:100vh; overflow:hidden; }

  /* logo + account → slim fixed top header */
  .dash-side .ds-top {
    position:fixed; top:0; left:0; right:0; z-index:60; margin:0; height:52px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; background:#fff; border-bottom:1px solid #e6e9e7; box-sizing:border-box;
  }

  /* the sidebar itself → fixed bottom tab bar (horizontal scroll) */
  .dash-side {
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; width:auto;
    flex:0 0 auto; flex-direction:row; align-items:stretch; gap:2px;
    border-right:none; border-top:1px solid #e6e9e7;
    background:#fff; box-shadow:0 -1px 10px rgba(18,32,26,.05);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom));
  }
  .dash-side::-webkit-scrollbar { display:none; }

  .ds-create {
    flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    height:auto; width:auto; min-width:52px; padding:6px 10px; margin:0; border-radius:12px; font-size:9px;
  }
  .ds-create span { display:inline; }
  .ds-create svg { width:18px; height:18px; }

  .ds-nav { flex-direction:row; gap:2px; flex:0 0 auto; }
  .ds-div, .ds-spacer { display:none; }

  .ds-link {
    flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-width:60px; padding:6px 8px; border-radius:10px;
  }
  .ds-link span { display:inline; font-size:9px; font-weight:600; white-space:nowrap; line-height:1.1; }
  .ds-link svg { width:20px; height:20px; }
  .ds-link.is-active { background:var(--mx-brand-tint,#e3f1ee); color:var(--mx-brand-dark,#0c6457); }

  /* content clears the fixed top header + bottom bar; single scroll container */
  #app.dash .dash-main {
    height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-top:52px; padding-bottom:calc(76px + env(safe-area-inset-bottom)); box-sizing:border-box;
  }
  #app.dash #maps-main { height:auto; overflow:visible; padding:0; }
  .dash-wrap { padding:18px 16px 20px; }
  .dash-hero h1 { font-size:24px; }
}

/* ── mobile-only in-page search bar (Community / Orders & sales) ─────────── */
.mx-msearch { display: none; }
@media (max-width:760px) {
  .mx-msearch { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 0 16px;
    background: #fff; border: 1px solid var(--mx-border, #e6e9e7); border-radius: 10px; padding: 0 14px; box-sizing: border-box; }
  .mx-msearch svg { flex: 0 0 auto; color: #9aa49e; }
  .mx-msearch input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font: inherit; font-size: 14px; color: #212b26; }
  .mx-msearch input::placeholder { color: #9aa49e; }
}

/* ── Map-finder tab bar (.mf-tabs) — one shared strip linking every historic/geo/topo
   finder, dropped below the search bar on historic.html, geology-maps.html, oldmaps.html.
   Reuses each finder's :root vars (--acc/--acc-d/--acc-bg/--mut/--line). ── */
.mf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.mf-tab { padding: 8px 14px; border: 1.5px solid var(--line, #e6e9e7); border-radius: 999px;
  background: #fff; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--mut, #68736d); text-decoration: none; white-space: nowrap; }
.mf-tab:hover { border-color: var(--acc, #5f8d74); color: var(--acc-d, #0c6457); background: var(--acc-bg, #e3f1ee); }
.mf-tab.is-active { background: var(--acc-bg, #e3f1ee); color: var(--acc-d, #0c6457); border-color: var(--acc, #5f8d74); }