/* ============================================================
   weGAS Intelligence — mobile shell + responsive polish
   Loaded LAST so its rules win source-order ties.
   - sidebar -> slide-in drawer on small screens
   - persistent "return to weGAS.co.za" exit affordance
   - grid collapse + chrome trim for phones / small tablets
   ============================================================ */

/* ---- in-app "return to the main site" exit (all viewports) ---- */
.site-exit {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-bottom: 8px;
  padding: 11px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #06292A; text-decoration: none;
  background: rgba(6,41,42,0.08);
  border: 1.5px solid transparent;
  white-space: nowrap; cursor: pointer; text-align: left;
  transition: background .18s, border-color .18s, transform .15s;
}
.site-exit:hover { background: rgba(6,41,42,0.16); transform: translateX(-2px); }
/* "Intro" re-opens the cover (stays in the demo) — tint it to read as inward, not an exit */
.cover-return { color: #8a1d72; background: rgba(238,62,201,0.10); }
.cover-return:hover { background: rgba(238,62,201,0.18); transform: translateX(2px); }
.site-exit svg { width: 16px; height: 16px; flex-shrink: 0; }
.app.collapsed .site-exit { justify-content: center; }
.app.collapsed .site-exit .site-exit-label { display: none; }

/* in-app wordmarks act as "home" — signal they're clickable */
.topbar-logo { cursor: pointer; }

/* hamburger + backdrop are desktop-hidden by default */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

/* ---- landing cover: the logo is now a link back to the site ---- */
.launch-logo { display: block; text-decoration: none; cursor: pointer; transition: opacity .15s; }
.launch-logo:hover { opacity: 0.72; }

/* ===========================================================
   DRAWER + responsive — phones & small tablets (<= 820px)
   =========================================================== */
@media (max-width: 820px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }

  /* sidebar -> slide-in drawer (overrides the earlier display:none) */
  .sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 268px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 60;
    box-shadow: 0 22px 70px -18px rgba(0, 0, 0, .45);
  }
  .app.nav-open .sidebar { transform: translateX(0); }

  /* the drawer ignores the desktop "collapsed" width entirely */
  .app.collapsed .sidebar { width: 268px; max-width: 84vw; }
  .app.collapsed .nav-label,
  .app.collapsed .collapse-label,
  .app.collapsed .site-exit-label { display: inline; }
  .app.collapsed .nav-item,
  .app.collapsed .sidebar-brand,
  .app.collapsed .site-exit { justify-content: flex-start; padding-left: 14px; padding-right: 14px; }

  /* collapse is a desktop affordance; the drawer closes on tap instead */
  .sidebar-collapse { display: none; }

  /* dim backdrop behind the drawer */
  .nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(6, 12, 12, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease; z-index: 55;
  }
  .app.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* hamburger sits at the start of each page's topbar */
  .nav-toggle {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex-shrink: 0; margin-right: 2px;
    border: 1px solid var(--line-light); border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
    transition: background .15s;
  }
  .nav-toggle:hover { background: rgba(10, 10, 10, 0.05); }
  .topbar.dark .nav-toggle { border-color: var(--dark-line); }
  .topbar.dark .nav-toggle:hover { background: rgba(255, 255, 255, 0.06); }
  .nav-toggle svg { width: 19px; height: 19px; }

  /* trim chrome for small screens */
  .topbar { height: 60px; padding: 0 14px; gap: 12px; }
  .search { display: none; }
  .user-chip .uname { display: none; }
  .dash { padding: 22px 16px 48px; }
}

/* ===========================================================
   tight phones (<= 560px)
   =========================================================== */
@media (max-width: 560px) {
  .cols-4, .cols-5 { grid-template-columns: 1fr; }
  .detail-stats, .cb-stats { grid-template-columns: 1fr; }
  .topbar-logo { width: 104px; }
  .dash-head { flex-wrap: wrap; gap: 14px; }
}