/* ============================================================================
   Lead Logic — Mobile stylesheet (loads AFTER style.css).
   Only active at <=768px. FlowCRM-style: hamburger drawer, compact typography,
   stacked headers, scrollable tables, 2-col KPIs, thumb-friendly buttons.
   Desktop is untouched.
   ============================================================================ */

/* tap feedback */
@media (max-width: 768px){
  .btn:active,.nav-item:active,.mobile-menu-btn:active,.pill:active{
    transform:scale(.97);transition:transform .05s ease;
  }
  * { -webkit-tap-highlight-color: transparent; }
}

/* ---- 1. page scroll + main padding ---- */
@media (max-width: 768px){
  html{overflow-x:clip;-webkit-overflow-scrolling:touch;}
  body{display:block;min-height:100dvh;max-width:100vw;overflow-x:clip;}
  .main{
    display:block!important;width:100vw!important;max-width:100vw!important;
    margin:0!important;padding:56px 12px 40px!important;
  }
  .main > *:first-child{margin-top:0!important;}
  img{max-width:100%;height:auto;}
}

/* ---- 2. hamburger button ---- */
@media (max-width: 768px){
  .mobile-menu-btn{
    display:flex!important;align-items:center;justify-content:center;
    width:40px!important;height:40px!important;top:8px!important;left:10px!important;
    border-radius:12px!important;font-size:20px!important;z-index:10000!important;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
  }
}

/* ---- 3. sidebar drawer ---- */
@media (max-width: 768px){
  .sidebar{
    position:fixed!important;top:0!important;left:0!important;
    width:min(84vw,300px)!important;height:100dvh!important;max-height:100dvh!important;
    padding:14px 10px 16px!important;margin:0!important;
    transform:translateX(-104%)!important;transition:transform .22s ease!important;
    z-index:10001!important;overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
    box-shadow:2px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.open{transform:translateX(0)!important;}
  .sidebar-backdrop{z-index:10000!important;}
  .sidebar-backdrop.open{display:block!important;}
  /* bigger tap targets inside drawer */
  .sidebar .nav-item{padding:11px 12px!important;font-size:14px!important;}
  .sidebar .nav-label{padding:10px 12px 6px!important;font-size:11px!important;}
}

/* ---- 4. page header stacks ---- */
@media (max-width: 768px){
  .page-head{flex-direction:column!important;align-items:stretch!important;gap:12px!important;}
  .page-head h1{font-size:20px!important;line-height:1.25!important;}
  .page-head .actions{display:flex;flex-wrap:wrap;gap:8px;}
  .page-head .actions .btn{flex:1 1 auto;justify-content:center;}
}

/* ---- 5. compact typography ---- */
@media (max-width: 768px){
  h1{font-size:20px!important;} h2{font-size:16px!important;}
  .muted.small,.small{font-size:12px!important;}
}

/* ---- 6. cards ---- */
@media (max-width: 768px){
  .card{padding:14px!important;border-radius:14px!important;margin-bottom:12px!important;}
  .card-head{flex-wrap:wrap;gap:8px;}
  .grid-2,.grid-3,.detail-grid{grid-template-columns:1fr!important;}
}

/* ---- 7. buttons ---- */
@media (max-width: 768px){
  .btn{min-height:40px;padding:9px 14px;font-size:14px;}
  .btn.small{min-height:34px;padding:6px 10px;font-size:12.5px;}
  .form-actions{display:flex;flex-direction:column;gap:8px;}
  .form-actions .btn{width:100%;justify-content:center;}
}

/* ---- 8. forms ---- */
@media (max-width: 768px){
  .form-grid{grid-template-columns:1fr!important;gap:12px!important;}
  input,select,textarea{width:100%;font-size:15px;}
}

/* ---- 9. segmented tabs scroll ---- */
@media (max-width: 768px){
  .seg{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
       white-space:nowrap;gap:6px;padding-bottom:2px;scrollbar-width:none;}
  .seg::-webkit-scrollbar{display:none;}
  .seg a{flex:0 0 auto;}
}

/* ---- 10. tables: horizontal scroll, compact ---- */
@media (max-width: 768px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
              border-radius:12px;margin:0 -2px;}
  .table{min-width:640px;font-size:13px;}
  .table th,.table td{padding:9px 10px!important;white-space:nowrap;}
}

/* ---- 11. KPI grid ---- */
@media (max-width: 768px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}
  .kpi-card{padding:12px!important;}
}

/* ---- 12. pills ---- */
@media (max-width: 768px){
  .pill{font-size:11px!important;padding:3px 8px!important;}
}

/* ---- 13. kanban: swipe columns ---- */
@media (max-width: 768px){
  .kanban{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;
          gap:12px;grid-template-columns:none!important;scroll-snap-type:x mandatory;}
  .kanban > *{flex:0 0 82vw;scroll-snap-align:start;}
}

/* ---- 14. AI fab a touch smaller ---- */
@media (max-width: 768px){
  #aiFab{right:16px!important;bottom:16px!important;width:50px!important;height:50px!important;font-size:22px!important;}
  .ai-panel{right:12px!important;bottom:74px!important;width:calc(100vw - 24px)!important;}
}

/* ---- 15. super small phones ---- */
@media (max-width: 380px){
  .main{padding:54px 8px 36px!important;}
  .kpi-grid{grid-template-columns:1fr!important;}
  .page-head h1{font-size:18px!important;}
}