/* =========================================================
   tbgat • Design System — app.css
   Versão: 2.1  •  Desktop com wrapper ≤ 90vw (máx 1400px)
   ========================================================= */

/* ---------- 1. Design tokens (dark base44) ---------- */
:root{
  /* superfícies, bordas, texto */
  --surface-0:#070B09; --surface-1:#0C120E; --surface-2:#111A15; --surface-3:#16211B;
  --border-1:#24352C;  --border-2:#2C4236;
  --text-strong:#F5FFFA; --text:#E7F3EC; --text-muted:#A7C0B1;

  /* brand genérica + sombras */
  --brand-1:#19EE8B; --brand-2:#22C55E; --brand-3:#06B6D4; --brand-dark:#0E4B32;
  --icon-on-brand:#072013;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-brand:0 12px 30px rgba(25,238,139,.18);

  /* layout */
  --radius:16px;
  --topbar-h:72px;
  --sidebar-w:260px;
  --sidebar-mini:84px;

  /* wrapper desktop “menor que a viewport” */
  --frame-w:90vw;
  --frame-max:1400px;

  /* cores/overrides de papel (default — admin genérico) */
  --role-accent:var(--brand-1);
  --role-kpi-bg:color-mix(in oklab, var(--role-accent) 18%, transparent);
  --role-kpi-border:color-mix(in oklab, var(--role-accent) 45%, transparent);
}

/* ---------- 1.1 Temas por papel (/dash/) ---------- */
[data-role="admin"]{
  --brand-1:#EF4444; --brand-2:#F43F5E; --role-accent:var(--brand-1);
  --surface-0:#0C0707; --surface-1:#130B0C; --surface-2:#1A0D0F; --surface-3:#201013;
  --border-1:#35161A; --border-2:#401A1E;
  --text:#FFF7F7; --text-strong:#FFECEC; --text-muted:#E8B6B6;
}
[data-role="publisher"]{
  --brand-1:#3B82F6; --brand-2:#0EA5E9; --role-accent:var(--brand-1);
  --surface-0:#070B0B; --surface-1:#0B1016; --surface-2:#0D131B; --surface-3:#111A22;
  --border-1:#1E293B; --border-2:#233143;
  --text:#E7F3FA; --text-strong:#F8FAFC; --text-muted:#A3B5C5;
}
[data-role="advertiser"]{
  --brand-1:#06B6D4; --brand-2:#22D3EE; --role-accent:var(--brand-1);
  --surface-0:#061013; --surface-1:#081519; --surface-2:#0B1B20; --surface-3:#0E2128;
  --border-1:#12313A; --border-2:#163C46;
  --text:#E7F7FA; --text-strong:#F0FDFF; --text-muted:#9AD4DE;
}
[data-role="agency"]{
  --brand-1:#8B5CF6; --brand-2:#A78BFA;
  --surface-0:#0A0810; --surface-1:#0E0B18; --surface-2:#120F1F; --surface-3:#171329;
  --border-1:#241E3F; --border-2:#2C2650;
  --text:#EFEAFF; --text-strong:#F8F7FF; --text-muted:#BBB1E6;
}
[data-role="creator"]{
  --brand-1:#F59E0B; --brand-2:#F97316;
  --surface-0:#0B0A07; --surface-1:#12100B; --surface-2:#17130D; --surface-3:#1C170F;
  --border-1:#2B2314; --border-2:#362B18;
  --text:#FFF7EA; --text-strong:#FFFBF2; --text-muted:#E9D3AD;
}
[data-role="influencer"]{
  --brand-1:#EC4899; --brand-2:#D946EF;
  --surface-0:#0C070B; --surface-1:#130C12; --surface-2:#190F18; --surface-3:#21121F;
  --border-1:#321A2D; --border-2:#3D1F37;
  --text:#FFE9F3; --text-strong:#FFF3F9; --text-muted:#E4B7CC;
}

/* ---------- 2. Reset/typo & background ---------- */
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(25,238,139,.08), transparent 60%),
    radial-gradient(900px 700px at 120% 120%, rgba(6,182,212,.06), transparent 60%),
    linear-gradient(180deg,var(--surface-0),#060907);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  scroll-padding-top:var(--topbar-h);
}

/* ---------- 3. Topbar (fixo/sticky) ---------- */
.topbar, header.nav-blur{
  position:sticky; top:0; z-index:60;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  background:color-mix(in oklab, var(--surface-1) 85%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border-1);
  width:100%;
}

/* ---------- 4. Wrapper central desktop 90% ---------- */
.site-frame{
  width:min(var(--frame-w), var(--frame-max));
  margin-inline:auto;
}

/* Conteúdo principal com sidebar fixa (desktop) */
body.has-sidebar main{
  min-height:calc(100vh - var(--topbar-h));
  padding-top:24px;
  padding-bottom:48px;
  padding-inline:clamp(8px, 2vw, 24px);
  transition:padding-left .18s ease;
}

/* ---------- 5. Sidebar fixa (desktop) + estados ---------- */
.sidebar{
  position:fixed; left:0; top:var(--topbar-h); z-index:58;
  height:calc(100vh - var(--topbar-h));
  width:var(--sidebar-w);
  background:var(--surface-1);
  border-right:1px solid var(--border-1);
  overflow:auto;
  transition:width .18s ease;
}
body[data-sb="mini"] .sidebar{ width:var(--sidebar-mini); }
body[data-sb="hidden"] .sidebar{ transform:translateX(-100%); }

/* compensação do conteúdo quando a sidebar existe */
body.has-sidebar main{ padding-left:calc(var(--sidebar-w) + 24px); }
body.has-sidebar[data-sb="mini"] main{ padding-left:calc(var(--sidebar-mini) + 24px); }
body.has-sidebar[data-sb="hidden"] main{ padding-left:24px; }

/* ---------- 6. Drawer (mobile) ---------- */
.drawer{
  position:fixed; inset:0; z-index:60;
  display:grid; grid-template-columns:1fr max(320px,75%);
  transform:translateX(-100%); transition:transform .2s ease;
}
.drawer .backdrop{background:rgba(0,0,0,.45)}
.drawer .panel{background:var(--surface-1); padding:16px; display:flex; flex-direction:column}
.drawer[data-open="true"]{transform:translateX(0)}

/* ---------- 7. Utilidades texto/cor ---------- */
.text-strong{color:var(--text-strong)}
.text-muted{color:var(--text-muted)}
.role-accent{color:var(--role-accent)}

/* ---------- 8. Badges, chips & pills ---------- */
.badge, .kpi-chip, .role-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:999px;
  font-weight:700; font-size:.75rem;
  border:1px solid var(--role-kpi-border, var(--border-1));
  background:var(--role-kpi-bg, var(--surface-3));
  color:var(--text);
}

/* ---------- 9. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:14px; padding:.85rem 1.25rem;
  font-weight:800; transition:filter .2s, transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:#03140B;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  box-shadow:0 12px 30px color-mix(in oklab,var(--brand-1) 18%,transparent);
}
.btn-outline{
  color:var(--text-strong);
  border:1px solid var(--role-kpi-border,var(--border-1));
  background:var(--role-kpi-bg,rgba(255,255,255,.04));
}

/* ---------- 10. Cartões & vidro ---------- */
.card{
  background:var(--surface-2);
  border:1px solid color-mix(in oklab,var(--role-accent, var(--brand-1)) 10%,var(--border-1));
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.glass{
  background:color-mix(in oklab,var(--surface-2) 86%,transparent);
  border:1px solid color-mix(in oklab,var(--role-accent, var(--brand-1)) 10%,var(--border-2));
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}

/* ---------- 11. Ícones em tile ---------- */
.icon-tile{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  box-shadow:0 12px 30px color-mix(in oklab,var(--brand-1) 18%,transparent);
}
.icon-tile svg{color:#072013}

/* ---------- 12. Inputs ---------- */
.form-input{
  width:100%; height:3rem; border-radius:.75rem;
  background:var(--surface-2); border:1px solid var(--border-1);
  padding:0 .75rem; color:var(--text-strong);
}
.form-input::placeholder{color:var(--text-muted)}

/* ---------- 13. CMP modal/banner ---------- */
.cmp-modal-backdrop{ position:fixed; inset:0; z-index:64; background:rgba(0,0,0,.55); display:none; }
.cmp-modal{position:fixed; inset:0; z-index:65; padding:2rem; overflow:auto; display:none;}
.cmp-open .cmp-modal, .cmp-open .cmp-modal-backdrop{display:block}
.cmp-banner{position:sticky; bottom:0; z-index:40}

/* ---------- 14. Scrollbox ---------- */
.scrollbox{overflow:auto}

/* ---------- 15. Hero ---------- */
.hero-wrap{position:relative; overflow:hidden; min-height:calc(90vh - var(--topbar-h));}
.hero-grid{display:grid; gap:2rem;}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1fr 1fr} }

/* ---------- 16. Grids utilitários ---------- */
.grid-autoFill{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem;}

/* ---------- 17. Foco acessível ---------- */
:focus-visible{
  outline:2px solid color-mix(in oklab,var(--role-accent,var(--brand-1)) 70%,transparent);
  outline-offset:2px;
}

/* ---------- 18. SVG full width ---------- */
svg[viewBox]{width:100%; height:auto}

/* ---------- 19. Elementos que devem ocupar 100% (full-bleed) ---------- */
.full-bleed,
.full-bleed *[data-full],
header.nav-blur,
.cmp-banner,
.cmp-modal,
.cmp-modal-backdrop,
.drawer,
.drawer .backdrop,
.hero-wrap > .absolute,
.decoration{
  width:100%; max-width:none;
}
.decoration, .hero-wrap > .absolute{ position:absolute; left:0; right:0; }

/* ---------- 20. Responsividade ---------- */
@media (max-width: 1024px){
  /* sidebar vira drawer; conteúdo sem deslocamento esquerdo */
  body.has-sidebar main{ padding-left:16px; }
  .sidebar{ display:none; } /* use .drawer para mobile */
  .site-frame{ width:94%; }
}
@media (min-width: 1920px){
  /* telas muito grandes ganham um pouco mais de “respiro” interno */
  :root{ --frame-max: 1600px; }
}

/* ---------- 21. Burger ---------- */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--border-1);
  color:var(--text-strong); background:rgba(255,255,255,.03);
}

/* ---------- 22. Firefox fallback (sem zoom do browser) ---------- */
@-moz-document url-prefix(){
  /* sem transform global — mantemos apenas scroll-padding consistente */
  body{ scroll-padding-top:var(--topbar-h); }
}