/* ═══════════════════════════════════════════════════════════════
   mobile.css — Mobile View (Wave 1)
   EVERY rule is scoped under html.mv (or targets #mv-* chrome that
   only exists when mobile view is active). Inert on desktop.
   ═══════════════════════════════════════════════════════════════ */

/* Atelier-faithful chrome tokens (mirrors css/dashboard-atelier.css) */
:root{
  --mv-bg:#e8e0ce; --mv-surface:#fefcf7; --mv-parchment:#faf3e3;
  --mv-ink:#0c0906; --mv-ink2:#28211a; --mv-muted:#5c5040;
  --mv-line:#9a8e6e; --mv-line-soft:#b8ac8a;
  --mv-gold:#a67c08; --mv-gold2:#c99a28; --mv-gold3:#ddb84e;
  --mv-gold-pale:#ecdfa0; --mv-gold-hair:rgba(166,124,8,.28); --mv-gold-deep:#7a5808;
  --mv-cta:linear-gradient(135deg,#c99228 0%,#edd068 30%,#b88010 65%,#e8cc60 100%);
  --mv-vellum:#f4e9cc; --mv-crimson:#861616; --mv-green:#1e6b3e; --mv-blue:#1e4a78; --mv-violet:#52387a;
}

/* chrome hidden until mobile view is on */
#mv-topbar,#mv-botnav,#mv-drawer,#mv-scrim{display:none}

/* ── desktop layer suppressed in mobile view ── */
html.mv{zoom:1 !important}
html.mv #zoom-fab,
html.mv .app-sidebar,
html.mv .bottom-nav,
html.mv .fab-bar{display:none !important}
html.mv .app-main-col{width:100% !important;margin:0 !important;max-width:none !important}
html.mv .app-body{padding-top:54px !important;padding-bottom:70px !important}

/* ════ top app-bar ════ */
html.mv #mv-topbar{
  display:flex;align-items:center;gap:12px;
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:54px;padding:0 12px;padding-top:env(safe-area-inset-top);box-sizing:content-box;
  background:var(--mv-bg);border-bottom:2px solid var(--mv-ink);box-shadow:0 2px 0 0 var(--mv-gold-hair);
  font-family:'Assistant',sans-serif;
}
html.mv #mv-topbar .mv-ic{
  width:40px;height:40px;flex:0 0 40px;border:1px solid var(--mv-gold-hair);border-radius:0;
  background:var(--mv-surface);color:var(--mv-gold-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
html.mv #mv-topbar .mv-ic:active{background:var(--mv-gold2);color:var(--mv-ink)}
html.mv #mv-topbar .mv-ic svg{width:20px;height:20px}
html.mv .mv-brand{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
html.mv .mv-brand img{height:22px;width:auto}
html.mv .mv-pro{font-size:.5rem;font-weight:800;color:var(--mv-gold-deep);letter-spacing:.4em}

/* ════ bottom nav ════ */
html.mv #mv-botnav{
  display:flex;align-items:flex-end;justify-content:space-around;
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  height:62px;padding:0 6px calc(6px + env(safe-area-inset-bottom));
  background:var(--mv-bg);border-top:2px solid var(--mv-ink);box-shadow:0 -2px 0 0 var(--mv-gold-hair);
  font-family:'Assistant',sans-serif;
}
html.mv .mv-bn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 0;border:0;background:none;cursor:pointer;color:var(--mv-muted);font-family:inherit;
}
html.mv .mv-bn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.mv .mv-bn span{font-size:.62rem;font-weight:800}
html.mv .mv-bn.on{color:var(--mv-gold-deep)}
html.mv .mv-fab{flex:0 0 auto;margin:0 4px}
html.mv .mv-fab .mv-fab-blk{
  width:52px;height:52px;margin-top:-20px;background:var(--mv-cta);color:var(--mv-ink);
  display:flex;align-items:center;justify-content:center;border:2px solid var(--mv-bg);
  box-shadow:0 4px 14px rgba(122,88,8,.4);
}
html.mv .mv-fab .mv-fab-blk svg{width:26px;height:26px;stroke-width:2.6}

/* ════ drawer + scrim ════ */
html.mv #mv-scrim{
  display:block;position:fixed;inset:0;z-index:9100;background:rgba(12,9,6,.5);
  opacity:0;visibility:hidden;transition:.25s;
}
html.mv #mv-scrim.open{opacity:1;visibility:visible}
html.mv #mv-drawer{
  display:flex;flex-direction:column;
  position:fixed;top:0;right:0;bottom:0;width:84%;max-width:318px;z-index:9200;
  background:var(--mv-bg);border-left:2px solid var(--mv-ink);box-shadow:-8px 0 40px rgba(12,9,6,.4);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  font-family:'Assistant',sans-serif;
}
html.mv #mv-drawer.open{transform:translateX(0)}
html.mv .mv-dr-head{padding:calc(18px + env(safe-area-inset-top)) 18px 16px;background:var(--mv-ink);color:var(--mv-parchment);border-bottom:2px solid var(--mv-gold2)}
html.mv .mv-dr-wm{font-size:1.24rem;font-weight:800}
html.mv .mv-dr-wm b{color:var(--mv-gold3)}
html.mv .mv-dr-who{font-size:.78rem;font-weight:700;color:var(--mv-gold-pale);opacity:.75;margin-top:4px}
html.mv .mv-dr-body{flex:1;overflow-y:auto;padding:8px 10px}

/* cloned sidebar rows, restyled for the drawer */
html.mv .mv-dr-body .sb-gl{font-size:.6rem;font-weight:800;color:var(--mv-muted);letter-spacing:.14em;padding:14px 10px 5px}
html.mv .mv-dr-body .sb-item,
html.mv .mv-dr-body .sb-cta{
  display:flex;align-items:center;gap:13px;width:auto;
  padding:12px 12px;margin:2px 0;cursor:pointer;color:var(--mv-ink2);
  background:none;border:0;border-radius:0;font-family:'Assistant',sans-serif;
}
html.mv .mv-dr-body .sb-item:active{background:var(--mv-surface)}
html.mv .mv-dr-body .sb-cta{
  background:var(--mv-cta);color:var(--mv-ink);font-weight:800;justify-content:center;margin:4px 0 8px;padding:14px
}
html.mv .mv-dr-body .sb-item .sb-lbl,
html.mv .mv-dr-body .sb-item .sb-ic{display:inline-flex;align-items:center}
html.mv .mv-dr-body .sb-item .sb-lbl{font-size:.94rem;font-weight:800}
html.mv .mv-dr-body .sb-item .sb-ic svg{width:19px;height:19px}
html.mv .mv-dr-foot{padding:12px;border-top:1.5px solid var(--mv-line-soft)}
html.mv .mv-switch{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px;border:1.5px solid var(--mv-gold);background:var(--mv-gold-pale);color:var(--mv-gold-deep);
  font-family:'Assistant',sans-serif;font-weight:800;font-size:.94rem;cursor:pointer;
}
html.mv .mv-switch:active{background:var(--mv-gold2);color:var(--mv-ink)}
html.mv .mv-switch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ════ page reflow — dashboard editorial grid → single column ════ */
html.mv.dash-atelier #page-dash .da-grid{
  display:flex !important;flex-direction:column !important;
  height:auto !important;min-height:0 !important;gap:10px !important;
}
html.mv.dash-atelier #page-dash .dash-scroll{padding:8px 10px 12px !important;height:auto !important}
html.mv.dash-atelier #page-dash .da-frm{min-height:0 !important}

/* ════ hide leftover desktop top chrome (replaced by #mv-topbar) ════ */
html.mv #tablet-logo-btn{display:none !important}
html.mv.dash-atelier #page-dash .dash-topbar{display:none !important}

/* ════ desktop → mobile entry button (small screens only, not in mv) ════ */
#mv-enter{display:none}
#mv-enter.show{
  display:flex;align-items:center;gap:7px;position:fixed;left:14px;bottom:14px;z-index:9000;
  padding:9px 13px;border:1.5px solid var(--mv-gold);cursor:pointer;
  background:var(--mv-gold-pale);color:var(--mv-gold-deep);
  font-family:'Assistant',sans-serif;font-weight:800;font-size:.82rem;box-shadow:0 6px 18px rgba(122,88,8,.22);
}
html.mv #mv-enter{display:none !important}
#mv-enter svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ════ dedicated mobile dashboard (#mv-dash, built by mobile-dash.js) ════ */
/* hide the desktop editorial grid + search; the data engine keeps updating the
   (now-hidden) KPI elements, which #mv-dash mirrors. */
html.mv.dash-atelier #page-dash .da-grid,
html.mv.dash-atelier #page-dash .dash-search-wrap{display:none !important}

#mv-dash{display:none}
html.mv #mv-dash{display:block;padding:14px 14px 22px;font-family:'Assistant',sans-serif}
#mv-dash .mvd-hero{display:flex;align-items:flex-end;justify-content:space-between;margin:2px 2px 10px}
#mv-dash .mvd-hello{font-size:1.5rem;font-weight:800;color:var(--mv-ink)}
#mv-dash .mvd-date{font-size:.82rem;font-weight:700;color:var(--mv-muted)}
#mv-dash .mvd-rule{height:2px;background:linear-gradient(90deg,var(--mv-gold2),transparent 60%);margin:0 2px 14px}
#mv-dash .mvd-alert{display:flex;align-items:center;gap:12px;background:var(--mv-surface);border:1.5px solid rgba(134,22,22,.4);padding:13px 15px;margin-bottom:14px;cursor:pointer}
#mv-dash .mvd-pin{width:32px;height:32px;flex:0 0 32px;background:var(--mv-crimson);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
#mv-dash .mvd-at{flex:1}
#mv-dash .mvd-at b{display:block;font-size:1rem;font-weight:800;color:var(--mv-crimson)}
#mv-dash .mvd-at small{font-size:.72rem;font-weight:700;color:var(--mv-muted)}
#mv-dash .mvd-ar{font-size:1.3rem;font-weight:800;color:var(--mv-crimson)}
#mv-dash .mvd-cta{display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;background:var(--mv-cta);border:0;color:var(--mv-ink);font-family:inherit;text-align:right;padding:16px 20px;margin-bottom:16px}
#mv-dash .mvd-plus{font-size:2.6rem;font-weight:800;line-height:.8}
#mv-dash .mvd-ctxt b{display:block;font-size:1.2rem;font-weight:800;line-height:1}
#mv-dash .mvd-ctxt small{display:block;font-size:.76rem;font-weight:700;color:var(--mv-gold-deep);margin-top:2px}
#mv-dash .mvd-sec{display:flex;align-items:center;gap:10px;margin:4px 2px 10px}
#mv-dash .mvd-sec span{font-size:.74rem;font-weight:800;color:var(--mv-muted);letter-spacing:.06em}
#mv-dash .mvd-sec i{flex:1;height:1px;background:var(--mv-line-soft)}
#mv-dash .mvd-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
#mv-dash .mvd-tile{position:relative;display:block;text-align:right;background:var(--mv-surface);border:1.5px solid var(--mv-line);box-shadow:inset 0 0 0 3px var(--mv-surface),inset 0 0 0 4px rgba(166,124,8,.22);padding:14px 15px;cursor:pointer;font-family:inherit}
#mv-dash .mvd-tile:active{background:var(--mv-vellum)}
#mv-dash .mvd-lbl{display:block;font-size:.9rem;font-weight:800;color:var(--mv-ink2)}
#mv-dash .mvd-num{display:block;font-size:2.4rem;font-weight:800;color:var(--mv-ink);line-height:.95;margin:5px 0 2px}
#mv-dash .mvd-sub{display:block;font-size:.7rem;font-weight:700;color:var(--mv-muted)}
#mv-dash .mvd-tile.gold .mvd-num{color:var(--mv-gold-deep)}
#mv-dash .mvd-tile.crimson .mvd-num{color:var(--mv-crimson)}
#mv-dash .mvd-tile.green .mvd-num{color:var(--mv-green)}
#mv-dash .mvd-tile.blue .mvd-num{color:var(--mv-blue)}
#mv-dash .mvd-tile.violet .mvd-num{color:var(--mv-violet)}

/* ════ never clip page width in mobile ════ */
html.mv .app-body{overflow-x:hidden !important}

/* ════ marketer portal — phone nav polish (NOT html.mv; #mk-top-nav exists only
   in the portal, so this can never touch the admin app). On phones the tile row
   becomes one clean horizontal swipe instead of wrapping to 2 cramped rows. ════ */
@media (max-width:768px){
  #mk-top-nav .mk-tiles{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 10px !important;
  }
  #mk-top-nav .mk-tiles::-webkit-scrollbar{display:none}
  #mk-top-nav .mk-tile{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:15px 15px !important;
    font-size:.9rem !important;
  }
}