/* ═══════════════════════════════════════════════════════════
   GrowthOS Responsive v3 — Mobile/Tablet/Desktop
   Cobre todos os blocos 1-17
═══════════════════════════════════════════════════════════ */

/* BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden!important}
img,video,canvas{max-width:100%;height:auto}

/* ── OVERLAY SIDEBAR ──────────────────────────────────── */
#sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:998;
  -webkit-tap-highlight-color:transparent;
}
#sidebar-overlay.active{display:block}

/* ── SIDEBAR DRAWER (≤900px) ─────────────────────────── */
@media(max-width:900px){
  .sidebar,#sidebar{
    position:fixed!important;
    left:0!important;top:0!important;bottom:0!important;
    width:260px!important;max-width:82vw!important;
    transform:translateX(-110%)!important;
    transition:transform .25s cubic-bezier(.4,0,.2,1)!important;
    z-index:999!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .sidebar.open,#sidebar.open{
    transform:translateX(0)!important;
    box-shadow:6px 0 32px rgba(0,0,0,.55)!important;
  }
  /* Conteúdo principal sem margem do sidebar */
  .main,.content,.main-content,#main,#content,#main-content,
  .page-wrapper,#page-wrapper,main{
    margin-left:0!important;width:100%!important;
    max-width:100vw!important;min-width:0!important;
  }
  body.sidebar-open,body[style*="overflow: hidden"]{overflow:hidden!important}
}

/* ── TOPBAR ───────────────────────────────────────────── */
@media(max-width:900px){
  .topbar,#topbar{padding:0 10px!important;min-height:52px!important}
  #burgerBtn,.hamburger-btn,[data-burger]{
    display:flex!important;align-items:center!important;
    justify-content:center!important;
    min-width:40px!important;min-height:40px!important;
  }
}

/* ── CONTEÚDO E PADDING ───────────────────────────────── */
@media(max-width:900px){
  .content,.page-content{padding:12px!important}
  .page-header,.section-header{
    margin-bottom:12px!important;flex-wrap:wrap!important;gap:8px!important;
  }
  .page-title,h1.title{font-size:1rem!important}
  .page-header .btn,.page-header button{font-size:.78rem!important}
}
@media(max-width:480px){
  .content,.page-content{padding:8px!important}
}

/* ── KPI / STATS ──────────────────────────────────────── */
@media(max-width:900px){
  .kpi-grid,.stats-grid,.metrics-grid,.cards-row,.dashboard-grid,.metrics-row{
    grid-template-columns:1fr 1fr!important;gap:10px!important;
  }
  .kpi-card,.stat-card,.metric-card{min-width:0!important;padding:10px!important}
  .kpi-value,.stat-value{font-size:1.15rem!important}
}
@media(max-width:480px){
  .kpi-grid,.stats-grid,.metrics-grid,.metrics-row{
    grid-template-columns:1fr 1fr!important;gap:8px!important;
  }
}

/* ── GRIDS ────────────────────────────────────────────── */
@media(max-width:900px){
  .grid-3,.grid-4,.grid-5,.col-3,.col-4,.col-5,
  .dim-calc-grid,.nav-grid,.cria-formats,.feat-grid,
  .dim-elec-grid,.cria-row{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4,.grid-5,.col-2,.col-3,.col-4,.col-5,
  .dim-calc-grid,.nav-grid,.cria-formats,.feat-grid,
  .dim-elec-grid,.cria-row{
    grid-template-columns:1fr!important;
  }
}

/* ── TABELAS ──────────────────────────────────────────── */
.table-responsive{
  overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
  border-radius:8px;width:100%;display:block;
}
@media(max-width:900px){
  table{
    display:block!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;width:100%!important;
  }
  th,td{font-size:.78rem!important}
}

/* ── MODAIS ───────────────────────────────────────────── */
@media(max-width:767px){
  .modal-backdrop,.modal-overlay{
    align-items:flex-end!important;padding:0!important;
  }
  .modal,.modal-box,.modal-content{
    width:100vw!important;max-width:100vw!important;
    min-width:0!important;margin:0!important;
    border-radius:20px 20px 0 0!important;
    max-height:88vh!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .modal-footer,.modal .footer{
    flex-direction:column-reverse!important;gap:8px!important;
  }
  .modal-footer .btn,.modal .footer .btn{
    width:100%!important;justify-content:center!important;
  }
}

/* ── FORMULÁRIOS ──────────────────────────────────────── */
@media(max-width:767px){
  .form-row,.form-grid{grid-template-columns:1fr!important}
  /* Anti-zoom iOS (font-size mínimo 16px) */
  input,select,textarea,
  input.form-control,select.form-control,textarea.form-control,
  input[type="text"],input[type="email"],input[type="password"],
  input[type="number"],input[type="tel"],input[type="search"],
  input[type="date"],input[type="month"],input[type="url"]{
    font-size:16px!important;
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  }
  .form-label,label{font-size:.82rem!important}
}

/* ── BOTÕES / PILLS / TABS ────────────────────────────── */
@media(max-width:767px){
  .btn{min-height:40px!important}
  .btn-sm{min-height:34px!important}
  .pills-group,.tab-pills,.filter-pills,.btn-pills,
  .tabs-row,.tab-buttons,.pill-tabs,.tab-nav,.tab-bar{
    overflow-x:auto!important;flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:4px!important;scrollbar-width:none!important;gap:6px!important;
  }
  .pills-group::-webkit-scrollbar,.tab-pills::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar{display:none!important}
  .actions,.btn-group,.button-row{flex-wrap:wrap!important;gap:6px!important}
}

/* ── DRAWERS (painéis laterais) ───────────────────────── */
@media(max-width:900px){
  .prod-drawer,.pedido-drawer,#pedidoDrawer,[class*="drawer"]{
    width:min(380px,100vw)!important;
  }
}
@media(max-width:600px){
  .prod-drawer,.pedido-drawer,#pedidoDrawer,[class*="drawer"]{
    width:100vw!important;
  }
}

/* ── CARDS ────────────────────────────────────────────── */
@media(max-width:767px){
  .card{min-width:0!important}
  .card-body{padding:10px!important}
  .card-header{padding:8px 12px!important;flex-wrap:wrap!important;gap:6px!important}
  .card-title{font-size:.88rem!important}
}

/* ── CHARTS ───────────────────────────────────────────── */
@media(max-width:767px){
  canvas{max-width:100%!important}
  .chart-container,.chart-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
}

/* ── IMAGENS ──────────────────────────────────────────── */
img{max-width:100%!important;height:auto!important}

/* ── TOAST ────────────────────────────────────────────── */
@media(max-width:767px){
  .toast,#toast,#lfg-toast,.notification-toast{
    left:10px!important;right:10px!important;bottom:16px!important;
    max-width:none!important;width:auto!important;
  }
}

/* ── CHAT WIDGET ──────────────────────────────────────── */
@media(max-width:480px){
  #grow-panel{
    width:calc(100vw - 8px)!important;right:4px!important;
    bottom:76px!important;height:calc(100vh - 90px)!important;
    border-radius:16px!important;
  }
  #grow-widget-btn{
    width:50px!important;height:50px!important;
    bottom:16px!important;right:16px!important;
  }
}

/* ── LOGIN / SIGNUP ───────────────────────────────────── */
@media(max-width:767px){
  .login-left,.auth-left,.signup-left,.login-hero{display:none!important}
  .login-right,.auth-right,.signup-right,.login-form-side{
    width:100%!important;max-width:100%!important;
    padding:24px 16px!important;min-height:100dvh;
  }
  .login-container,.auth-container,.signup-container{
    flex-direction:column!important;height:auto!important;min-height:100dvh!important;
  }
}

/* ── LANDING PAGE ──────────────────────────────────────── */
@media(max-width:767px){
  nav .nav-links{display:none!important}
  .hero-grid,.hero-content{
    grid-template-columns:1fr!important;text-align:center!important;gap:24px!important;
  }
  .hero-title{font-size:1.7rem!important;line-height:1.2!important}
  .hero-cta{flex-direction:column!important;gap:10px!important}
  .hero-cta .btn{width:100%!important}
  .stats-row,.stats-grid{grid-template-columns:1fr 1fr!important}
  .problema-grid,.solution-grid,.comparison-grid,
  .features-grid,.funcionalidades-grid,
  .depoimentos-grid,.planos-grid,.pricing-grid{
    grid-template-columns:1fr!important;gap:16px!important;
  }
  section{padding:36px 16px!important}
  h2,.section-title{font-size:1.35rem!important}
}
@media(max-width:480px){.hero-title{font-size:1.4rem!important}}

/* ── STUDIO IA ─────────────────────────────────────────── */
@media(max-width:900px){
  .studio-layout,.studio-grid,.cria-layout{
    grid-template-columns:1fr!important;flex-direction:column!important;
  }
  .studio-panel,.studio-preview{width:100%!important;max-width:100%!important}
  .studio-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}
  .studio-tabs::-webkit-scrollbar{display:none!important}
}

/* ── PORTAL CONTADOR ───────────────────────────────────── */
@media(max-width:767px){
  .portal-container,.portal-layout{flex-direction:column!important}
  .portal-sidebar{width:100%!important;position:relative!important;height:auto!important}
}

/* ── NFS-E / NF-e ──────────────────────────────────────── */
@media(max-width:900px){
  .nfe-form,.nota-form,[class*="nfe-grid"]{grid-template-columns:1fr!important}
  .xml-preview,.nfe-xml{
    overflow-x:auto!important;font-size:.7rem!important;
    white-space:pre!important;max-width:100%!important;
  }
}

/* ── UTILITÁRIOS ────────────────────────────────────────── */
@media(max-width:900px){
  .hide-mobile{display:none!important}
  .show-mobile{display:block!important}
  .text-center-mobile{text-align:center!important}
  .full-width-mobile{width:100%!important}
  .stack-mobile{flex-direction:column!important}
}

/* ── TEMA — botão toggle sempre visível ─────────────────── */
#btnTema,#themeToggleBtn,[data-tema-toggle],
[onclick*="toggleTema"],[onclick*="toggleTheme"]{
  display:flex!important;visibility:visible!important;
  opacity:1!important;cursor:pointer!important;
}

/* ── TEMA CLARO (light_pro) — variáveis base ────────────── */
body[data-tema="light_pro"]{
  --bg:#f8fafc;--bg2:#f1f5f9;--bg3:#e2e8f0;--bg4:#cbd5e1;
  --text1:#0f172a;--text2:#475569;--text3:#94a3b8;
  --border:#cbd5e1;--card:#ffffff;
}
body[data-tema="light_pro"] .sidebar,
body[data-tema="light_pro"] #sidebar{background:#1e293b!important}

/* ── SAFE AREA — botão voltar Android / home indicator iOS ─ */
@media(max-width:900px){
  #sidebar .sidebar-bottom,#sidebar [class*="user-info"],
  #sidebar [class*="user-box"],#sidebar [class*="sidebar-footer"],
  .sidebar .sidebar-bottom{
    padding-bottom:60px!important;
  }
  #grow-widget-btn{
    bottom:max(72px,calc(env(safe-area-inset-bottom,0px) + 72px))!important;
  }
  #grow-panel{
    bottom:max(80px,calc(env(safe-area-inset-bottom,0px) + 80px))!important;
  }
}

/* ── LANDING MOBILE ─────────────────────────────────────── */
@media(max-width:767px){
  .hero-preview,.hero-mockup-container,.hero-app-preview,
  .mockup-window{display:none!important}
  .hero-grid{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;text-align:center!important;
    padding:40px 16px!important;gap:20px!important;
  }
  .hero-left,.hero-content-left{width:100%!important}
  .hero-cta-btns,.hero-buttons{
    display:flex!important;flex-direction:column!important;
    gap:10px!important;width:100%!important;
  }
}