/* components.css — shared component library. Consumes tokens.css. */ /* ════════════════════════════════════════════════════════════════════════ MOBILE SHELL — top bar + off-canvas drawer (active only < 1024px) ──────────────────────────────────────────────────────────────────────── REBUILT to be SELF-CONTAINED + UNIVERSAL. It must render identically on any phone / browser regardless of: (a) which design tokens happen to be defined on the page, (b) whether the browser supports backdrop-filter, (c) the desktop `.sidebar` / `html.sidebar-collapsed` cascade. Design decisions that make it universal: • Every surface is FULLY OPAQUE. The old drawer used a 58%-transparent token + backdrop-filter blur to *look* solid. On browsers without backdrop-filter (many Android / in-app webviews) the drawer was see-through → the dashboard showed through it → "content outside the menu / doubled inputs". Opaque kills that on every device. • A LOCAL palette (`--m-*`) is defined right here, so colours never depend on the global token cascade being present or correct. • Critical box-model values are explicit px (no var-only padding that collapses to an invalid value when a token is missing). • All layout rules carry `!important` so they beat the desktop sidebar and the collapsed-rail rules no matter the load order. ════════════════════════════════════════════════════════════════════════ */ /* Local, always-defined palette for the mobile shell (themed). */ .app-topbar, .app-drawer, .drawer-overlay { /* Escada de superfícies, versão OPACA. Estas superfícies não podem ser translúcidas (ver a nota acima: sem backdrop-filter o drawer fica a ver-se através), por isso usa-se a forma opaca de rgba(30,30,38,0.94) → #1e1e26. O #0d0d14 anterior era MAIS ESCURO que a página (#15151b) — invertia a escada: o drawer afundava em vez de subir. */ --m-bg: #1e1e26; /* topbar/drawer — forma opaca do rgba(30,30,38,0.94) */ --m-bg-raise: #24242d; /* inputs, pickers — o degrau do cartão */ --m-border: rgba(255,255,255,0.10); --m-text-1: #f2f2f5; --m-text-2: #c9c9d4; --m-text-3: #a0a0b0; /* era #6a6a7c, muito abaixo do piso #8e8e9c */ --m-brand: #9c8ff5; --m-brand-rgb: 156,143,245; --m-hover: rgba(255,255,255,0.06); /* no escuro o hover LEVANTA */ } [data-theme="light"] .app-topbar, [data-theme="light"] .app-drawer, [data-theme="light"] .drawer-overlay { --m-bg: #ffffff; --m-bg-raise: #f4f4f8; --m-border: #ececf1; --m-text-1: #14141c; --m-text-2: #4b4b5c; --m-text-3: #6e6e80; --m-brand: #6c5fd0; --m-brand-rgb:108,95,208; --m-hover: rgba(20,20,40,0.05); /* no claro o hover AFUNDA */ } /* Topbar hidden on desktop; drawer is the normal sidebar; overlay gone. */ .app-topbar { display:none; } @media (min-width:1024px){ .drawer-overlay{ display:none !important; } } @media (max-width:1023.98px){ /* ── Mobile top bar ─────────────────────────────────────────────────── */ .app-topbar { display:flex; align-items:center; position:sticky; top:0; z-index:90; height:calc(56px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) 14px 0; background:var(--m-bg); /* opaque */ border-bottom:1px solid var(--m-border); } .app-topbar .hamburger { /* 44px é o alvo de toque mínimo do HANDOFF §2. */ display:grid; place-items:center; width:var(--tap,44px); height:var(--tap,44px); border-radius:10px; border:1px solid var(--m-border); background:var(--m-hover); color:var(--m-text-1); cursor:pointer; -webkit-tap-highlight-color:transparent; } .app-topbar .hamburger span, .app-topbar .hamburger span::before, .app-topbar .hamburger span::after { content:''; display:block; width:18px; height:2px; border-radius:2px; background:var(--m-text-1); } .app-topbar .hamburger span { position:relative; } .app-topbar .hamburger span::before { position:absolute; top:-6px; left:0; } .app-topbar .hamburger span::after { position:absolute; top:6px; left:0; } .app-topbar__brand { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; pointer-events:none; } .app-topbar__brand strong { font-size:15px; font-weight:700; color:var(--m-text-1); white-space:nowrap; } .app-topbar__logo-img { width:26px; height:26px; border-radius:7px; display:block; } /* ── Backdrop overlay ───────────────────────────────────────────────── */ .drawer-overlay { position:fixed; inset:0; z-index:199; background:rgba(0,0,0,0.74); /* darker — fully veils the dashboard widgets that used to peek (look "cut") in the strip beside the drawer */ opacity:0; pointer-events:none; transition:opacity 200ms ease; } body.drawer-open .drawer-overlay { opacity:1; pointer-events:auto; } body.drawer-open { overflow:hidden; } /* ── Drawer shell (the