/* ============ SUPER CRM - Mobile Responsive ============ */
/* This file ONLY activates via media queries — zero impact on desktop */

/* ---------- Hamburger button (hidden on desktop) ---------- */
.menu-toggle{
  display:none;
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--violet-600);
}
.menu-toggle svg{display:block}

/* ---------- Overlay for sidebar (hidden on desktop) ---------- */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;z-index:49;
  background:rgba(15,10,30,.5);
  backdrop-filter:blur(4px);
}

/* ============================================================
   TABLET (max-width: 1024px)
   ============================================================ */
@media(max-width:1024px){
  .content{padding:20px 18px}
  .topbar{padding:0 18px}

  .grid.c4{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   MOBILE (max-width: 768px)
   ============================================================ */
@media(max-width:768px){

  /* --- Hamburger visible --- */
  .menu-toggle{display:block}

  /* --- Sidebar: off-canvas drawer --- */
  .sidebar{
    position:fixed !important;left:0 !important;top:0 !important;z-index:50 !important;
    transform:translateX(-100%) !important;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:280px !important;flex:0 0 280px !important;
    box-shadow:none;
  }
  .sidebar.open{
    transform:translateX(0) !important;
    box-shadow:8px 0 40px rgba(20,4,40,.4);
  }
  .sidebar-overlay.show{display:block}

  /* --- Main area takes full width --- */
  .main{width:100%}
  .app{display:block}

  /* --- Topbar adjustments --- */
  .topbar{
    height:56px;
    padding:0 14px;
    position:sticky;top:0;
  }
  .topbar h1{font-size:15px}
  .topbar .who span{display:none}

  /* --- Content area --- */
  .content{padding:16px 14px;max-width:100%}

  /* --- Grids --- */
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .grid{gap:12px}

  /* --- Stat cards --- */
  .stat{padding:16px 18px}
  .stat .val{font-size:24px}

  /* --- Tables: horizontal scroll --- */
  .card{border-radius:14px;overflow:hidden}
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table thead{white-space:nowrap}
  .card table td,
  .card table th{white-space:nowrap;padding:10px 12px;font-size:12.5px}

  /* --- Buttons --- */
  .btn{padding:10px 14px;font-size:13px;border-radius:10px}
  .btn.sm{padding:6px 10px;font-size:12px}

  /* --- Forms --- */
  .input,select,textarea{padding:10px 12px;font-size:14px;border-radius:10px}

  /* --- Page head --- */
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head .ttl{font-size:18px}

  /* --- Rows that should stack on mobile --- */
  .row{flex-wrap:wrap}

  /* --- Flash messages --- */
  .flash{font-size:12.5px;padding:10px 14px;border-radius:10px}

  /* --- Modals --- */
  .modal-bg{padding:10px;align-items:flex-end}
  .modal{
    max-width:100%;max-height:85vh;
    border-radius:18px 18px 0 0;
    padding:22px 18px;
  }

  /* --- Dialog elements (HTML dialog) --- */
  dialog{
    max-width:95vw !important;
    width:95vw !important;
    border-radius:14px !important;
    margin:auto !important;
  }
  dialog > div{padding:18px !important}

  /* --- Chips --- */
  .chip{font-size:11.5px;padding:4px 9px}

  /* --- Empty state --- */
  .empty{padding:30px 16px}

  /* --- Side footer --- */
  .side-foot{font-size:10px}

  /* --- Avatar --- */
  .avatar{width:32px;height:32px;font-size:13px}

  /* --- Fix inline flex rows in pages (e.g. disparador, filter forms) --- */
  form[style*="display:flex"],
  div[style*="display:flex"]{
    flex-wrap:wrap !important;
  }
  form[style*="display:flex"] > div,
  div.row > div{
    min-width:0 !important;
    flex:1 1 100% !important;
  }

  /* --- Subscription page QR box --- */
  .qr-box{padding:10px}
  .qr-box img{width:200px;height:200px}

  /* --- Login page overrides --- */
  .login-card{
    width:100% !important;max-width:100vw !important;
    border-radius:18px;padding:28px 20px;
  }
  .login-wrap{padding:16px}
  .login-wrap::before{width:200px;height:200px;top:-60px;left:-40px}
  .login-wrap::after{width:180px;height:180px;bottom:-60px;right:-30px}

  /* --- Nav label (TRACKEAMENTO section) --- */
  .nav-label{padding:6px 14px 2px !important;font-size:9px !important}
}

/* ============================================================
   SMALL PHONES (max-width: 400px)
   ============================================================ */
@media(max-width:400px){
  .topbar h1{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{padding:12px 10px}
  .stat .val{font-size:20px}
  .stat{padding:14px 14px}
  .btn{padding:9px 12px;font-size:12px}
  .card table td,.card table th{padding:8px 10px;font-size:11.5px}
  .login-card{padding:24px 16px}
  .qr-box img{width:180px;height:180px}
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media(max-width:768px) and (orientation:landscape){
  .sidebar{width:260px}
  .grid.c2{grid-template-columns:repeat(2,1fr)}
  .modal-bg{align-items:center}
  .modal{border-radius:14px;max-height:80vh}
}

/* ============================================================
   TABLET PORTRAIT (min-width: 769px, max-width: 1024px)
   ============================================================ */
@media(min-width:769px) and (max-width:1024px){
  .sidebar{width:220px;flex:0 0 220px}
  .nav a{padding:9px 12px;font-size:13px;gap:10px}
  .brand-txt b{font-size:14px}
  .brand-txt span{font-size:10px}
  .content{padding:22px 20px}
}

/* ============================================================
   PRINT (hide sidebar, topbar)
   ============================================================ */
@media print{
  .sidebar,.topbar,.menu-toggle,.sidebar-overlay{display:none !important}
  .app{display:block}
  .main{width:100%}
  .content{padding:0;max-width:100%}
}