/* ═══════════════════════════════════════════════════════════════════
   GURO MARKETS — APP SHELL  (v1.2.1)
   Single source of truth for the #topbar on every dashboard page
   (user, business, admin) plus admin content-grid hardening.
   Linked LAST in <head> so it wins over each page's inline copy of the
   shell CSS. To change the header site-wide, edit this file and bump
   ?v= on the <link> in every page.

   HEADER STANDARD
   • User / business pages : ☰  Logo  ·····  🔔  Avatar          (2 controls)
   • Admin pages           : ☰  Logo  ·····  ● Status  Avatar
       ≥ 640px  adds the "ADMIN CONSOLE" tag and the status label
       ≥ 1024px adds the "/ Page" breadcrumb
   • Never more than two right-hand controls. KYC status and Deposit live
     in the sidebar / page content, not the header.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Safety net (all app pages): never overlap, never overflow ── */
#topbar{gap:8px}
#topbar .tb-left{flex:1 1 auto;min-width:0}
#topbar .tb-right{flex:0 0 auto}
#topbar .logo{min-width:0;flex:0 1 auto}
#topbar .gm-logo{max-width:100%;object-fit:contain;object-position:left center}

@media(max-width:359px){                 /* 320px-class phones */
  #topbar{padding:0 10px}
  #topbar .tb-left{gap:4px}
  #topbar .gm-logo{height:22px!important}
}

/* ── 2. Admin header ─────────────────────────────────────────────── */
.admin-topbar .gm-logo-tag{
  display:none;                          /* shown from 640px */
  margin-left:10px;padding-left:10px;
  border-left:1px solid rgba(201,168,76,.35);
  font:700 10px/1 var(--fb,'Outfit',sans-serif);
  letter-spacing:2px;color:#C9A84C;text-transform:uppercase;white-space:nowrap;
}

/* Status pill — compact dot on phones, full label on larger screens */
.admin-topbar .tb-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:34px;height:34px;padding:0;flex-shrink:0;
  border-radius:var(--r8,8px);
  background:var(--gn08,rgba(0,230,118,.08));
  border:1px solid rgba(0,230,118,.25);
  color:var(--green,#00e676);
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;
}
.admin-topbar .tb-badge .dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--green,#00e676);
  animation:gmStatusPulse 2s ease-in-out infinite;
}
.admin-topbar .tb-badge-ico{font-size:12px;line-height:1;flex-shrink:0}
.admin-topbar .tb-badge-txt{display:none}
.admin-topbar .tb-badge--ai{
  background:var(--ca08,rgba(0,229,255,.08));
  border-color:var(--cybdr,rgba(0,229,255,.25));
  color:var(--cyan,#00e5ff);
}
.admin-topbar .tb-avatar{width:34px;height:34px}
@keyframes gmStatusPulse{0%,100%{opacity:1}50%{opacity:.35}}

@media(min-width:640px){
  .admin-topbar .gm-logo-tag{display:inline-block}
  .admin-topbar .tb-badge{width:auto;height:auto;min-height:26px;padding:5px 10px}
  .admin-topbar .tb-badge-txt{display:inline}
  .admin-topbar .admin-crumb{display:none}   /* not enough room yet */
}
@media(min-width:1024px){
  .admin-topbar .admin-crumb{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .admin-topbar .tb-badge .dot{animation:none}
}

/* ── 3. Admin content grids: stack until there is room, never blow out ──
   Grid/flex children default to min-width:auto, so a wide table or button
   row inside one forces the whole page sideways. min-width:0 lets the
   table's own overflow-x:auto wrapper do the scrolling instead.          */
.admin-topbar ~ #main .dash-2col>*,
.admin-topbar ~ #main .case-grid>*,
.admin-topbar ~ #main .stat-grid>*,
.admin-topbar ~ #main .module-grid>*{min-width:0}

@media(min-width:640px) and (max-width:1023px){   /* 230px sidebar leaves ~540px: one column */
  .admin-topbar ~ #main .dash-2col{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:639px){
  .admin-topbar ~ #main .btn-o{white-space:normal;text-align:center}
}
.admin-topbar ~ #main .case-actions>button{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}

/* ── 4. App footer (v1.2.2): legal links · risk warning · regulatory status ──
   Replaces the old faint 3-line "legal bar". Legible (WCAG AA), clears the
   fixed bottom nav on phones, and sits to the right of the fixed sidebar on
   desktop. Markup: see _templates/APP_LEGAL_BAR.html                        */
.app-legal-bar{
  background:var(--bg2,#0d0d12);
  border-top:1px solid var(--bdr3,rgba(255,255,255,.06));
  padding:22px 16px calc(24px + var(--botH,0px) + env(safe-area-inset-bottom,0px));
  margin-top:0;
}
#main:has(~ .app-legal-bar){padding-bottom:0}          /* no dead gap above the footer */
@media(min-width:640px){.app-legal-bar{margin-left:220px;padding-left:20px;padding-right:20px}}
@media(min-width:900px){.app-legal-bar{margin-left:230px}}

.app-legal-bar .alb-inner{
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  font-size:11px;line-height:1.65;color:#8f8b82;
}
.app-legal-bar .alb-links{display:flex;flex-wrap:wrap;gap:2px 18px}
.app-legal-bar .alb-links a{
  display:inline-flex;align-items:center;min-height:28px;
  font-size:11px;font-weight:600;letter-spacing:.3px;
  color:var(--w70,#a8a49a);text-decoration:none;
}
.app-legal-bar .alb-links a:hover,.app-legal-bar .alb-links a:focus-visible{color:var(--gold,#c9a84c);text-decoration:underline}
.app-legal-bar .alb-note,.app-legal-bar .alb-status{margin:0;max-width:78ch}
.app-legal-bar .alb-note{color:#9a968c}
.app-legal-bar .alb-note strong{color:var(--w70,#a8a49a);font-weight:700}
.app-legal-bar .alb-status{color:#7d7970;font-size:10.5px;padding-top:12px;border-top:1px solid var(--bdr3,rgba(255,255,255,.06))}

/* ── 5. Accessibility helpers ── */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;padding:10px 16px;background:var(--gold,#c9a84c);color:#060608;font-weight:700;border-radius:8px;text-decoration:none}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:2px}