/* PANDA MOBILE FINAL FIX — load after all page styles */
*{box-sizing:border-box!important}
html,body{max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%;font-size:16px!important}

@media(max-width:768px){
  body{background:#f8f8f8!important}
  .app{display:block!important;width:100%!important;min-height:100vh!important}

  /* Sidebar drawer */
  .sidebar,#sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:282px!important;max-width:86vw!important;min-height:100vh!important;transform:translateX(-105%)!important;margin:0!important;z-index:1000!important;transition:transform .25s ease!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .sidebar.open,#sidebar.open,.sidebar.mob-open,#sidebar.mob-open{transform:translateX(0)!important;left:0!important}
  #overlay,#mobOverlay,.sidebar-overlay{position:fixed!important;inset:0!important;background:rgba(0,0,0,.45)!important;z-index:999!important}
  #overlay.show,#mobOverlay.show,.sidebar-overlay.show,.sidebar-overlay.open{display:block!important}

  /* Main layout */
  .main,.page-content,.main-inner{margin-left:0!important;width:100%!important;max-width:100%!important;padding:0!important}
  .page{width:100%!important;max-width:100%!important;padding:12px!important;margin:0!important}
  .topbar{height:56px!important;width:100%!important;padding:0 12px!important;gap:8px!important;position:sticky!important;top:0!important;z-index:100!important}
  .topbar>div{min-width:0!important}
  .topbar-title{font-size:15px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:58vw!important}
  .mob-toggle,.mob-menu-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;border-radius:10px!important;background:#fff!important;border:1px solid #e8e8e8!important;color:#111!important;flex:0 0 auto!important}
  .admin-badge,.worker-badge{font-size:11px!important;padding:5px 8px!important;white-space:nowrap!important}

  /* Cards / panels */
  .card,.panel,.box,.stat-card,.welcome-card,.promo-banner,.unpaid-banner,
  .content-card,.form-card,.summary-card,.order-card,.quote-card,
  [class*="card"],[class*="panel"]{max-width:100%!important;border-radius:14px!important}
  .card,.panel,.box,.content-card,.form-card,.summary-card{padding:12px!important}

  /* Grids become mobile friendly */
  .db-wrap,.top-row,.grid,.stats-grid,.cards-grid,.form-grid,.two-col,.gap-sm,
  .settings-grid,.profile-grid,.payment-grid,.quote-grid,.orders-grid,
  .admin-grid,.worker-grid{grid-template-columns:1fr!important;gap:10px!important}
  .ob-grid,.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}

  /* Rows stack */
  .filter-row,.action-row,.btn-row,.toolbar,.page-head,.section-head,
  .form-actions,.bot,.detail-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .page-head>*,.section-head>*,.toolbar>*,.filter-row>*{width:100%!important;max-width:100%!important}

  /* Buttons */
  .btn,.sbtn,button[type="submit"],a.btn{width:100%!important;justify-content:center!important;text-align:center!important;min-height:42px!important;padding:10px 14px!important}

  /* Forms */
  label{font-size:13px!important}
  input,select,textarea,.input{width:100%!important;min-height:42px!important;padding:10px 12px!important}
  textarea,.input[type="textarea"]{min-height:90px!important}
  .upload-box,.upload-zone,.ug{width:100%!important;grid-template-columns:1fr!important}

  /* Tables: horizontal scroll instead of breaking page */
  table{width:100%!important;min-width:680px!important;border-collapse:collapse!important}
  .table-wrap,.orders-table-wrap,.responsive-table,.table-responsive,
  div:has(> table){max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  th,td{font-size:12px!important;padding:9px 8px!important;white-space:nowrap!important}

  /* Tabs/chips scroll */
  .tabs,.type-tabs,.tab-row,.svc-row,.nav-tabs,.filter-tabs{display:flex!important;overflow-x:auto!important;white-space:nowrap!important;gap:6px!important;padding-bottom:4px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .tabs::-webkit-scrollbar,.type-tabs::-webkit-scrollbar,.tab-row::-webkit-scrollbar,.svc-row::-webkit-scrollbar{display:none!important}
  .tab,.type-tab,.tab-pill,.svc-tab{flex:0 0 auto!important;width:auto!important;font-size:12px!important;padding:8px 12px!important}

  /* Order form compact fixes */
  .dt-grid,.dtype-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .fmt-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .tag,.pay-grid,.pg,.pay-row{grid-template-columns:1fr!important;gap:8px!important}
  .row2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}

  /* Hide noisy right columns on dashboard */
  .db-right{display:none!important}

  /* Text sizing */
  h1{font-size:26px!important;line-height:1.15!important}
  h2{font-size:22px!important;line-height:1.2!important}
  h3{font-size:18px!important;line-height:1.25!important}
  p{font-size:14px!important;line-height:1.55!important}

  /* bottom nav space for user side */
  #mobNav{display:flex!important}
  body:has(#mobNav){padding-bottom:74px!important}
}

@media(max-width:390px){
  .page{padding:10px!important}
  .topbar-title{max-width:52vw!important;font-size:14px!important}
  .ob-grid,.stats-row{grid-template-columns:1fr!important}
  .fmt-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* Extra mobile hardening for standalone pages + inline Claude layouts */
@media(max-width:768px){
  body{width:100%!important;min-width:0!important}
  .wrap,.container,.main-wrap,.auth-wrap,.hero-inner,.section-inner,.nav,.footer-inner,
  [style*="max-width:700px"],[style*="max-width:800px"],[style*="max-width:900px"],
  [style*="max-width:960px"],[style*="max-width:1000px"],[style*="max-width:1200px"],
  [style*="width:700px"],[style*="width:800px"],[style*="width:900px"],
  [style*="width:960px"],[style*="width:1000px"],[style*="width:1200px"]{
    width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:12px!important;padding-right:12px!important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr auto"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
  }
  .hero,.section,.wrap{padding-left:12px!important;padding-right:12px!important}
  .nav{height:auto!important;min-height:64px!important;gap:10px!important;flex-wrap:wrap!important}
  .logo-name{font-size:15px!important}.logo-sub{font-size:10px!important}
  .hero-title,.title{font-size:28px!important;line-height:1.12!important;letter-spacing:-.03em!important}
  .hero-actions,.nav-actions{display:flex!important;flex-direction:column!important;width:100%!important;gap:8px!important}
  .hero-actions a,.nav-actions a{width:100%!important;text-align:center!important}
  .card-body{padding:16px!important}.card-head{padding:20px 16px!important}
  .input-wrap{width:100%!important}
  .eye{width:42px!important;min-width:42px!important}
}
@media(max-width:430px){
  .card{border-radius:16px!important}.wrap{padding:12px!important}
  .hero-title,.title{font-size:24px!important}
  h1{font-size:24px!important}
}