/* =========================================================
   ATLAS CRM V7 — MOBILE-FIRST OVERRIDE
   This intentionally replaces the "desktop squeezed into phone"
   behavior from V5/V6.
   ========================================================= */
@media (max-width: 700px){

  html,body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:#F5F7FA!important;
  }

  body{
    padding:0 0 78px!important;
    margin:0!important;
    font-family:Inter,Arial,sans-serif!important;
  }

  /* NEVER show desktop sidebar on phone */
  aside.side,
  .side{
    display:none!important;
    width:0!important;
    min-width:0!important;
    visibility:hidden!important;
  }

  /* kill desktop offset */
  .main{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 14px 92px!important;
  }

  /* clean mobile app header */
  .mobile-header{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:58px!important;
    z-index:5000!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 14px!important;
    background:#fff!important;
    border-bottom:1px solid #E5EAF0!important;
    box-shadow:0 3px 14px rgba(5,30,60,.07)!important;
  }
  .mobile-header .mh-left{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .mobile-header .mh-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:36px!important;height:36px!important;
    padding:0!important;border:0!important;
    border-radius:10px!important;
    background:#EEF4FB!important;
    color:#06244A!important;
    font-size:18px!important;
  }
  .mobile-header .mh-title{
    font-size:15px!important;
    font-weight:800!important;
    color:#06244A!important;
  }
  .mobile-header .mh-user{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;height:34px!important;
    border-radius:50%!important;
    background:#06244A!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
  }

  /* page heading */
  .top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin:18px 0 14px!important;
  }
  .top h1{
    font-size:24px!important;
    line-height:1.15!important;
    color:#0B1F3A!important;
    margin:0 0 4px!important;
  }
  .top .muted{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .top > .btn,
  .top > .btn2{
    align-self:flex-start!important;
    min-height:40px!important;
  }

  /* panels */
  .panel{
    width:100%!important;
    min-width:0!important;
    margin:0 0 12px!important;
    padding:0!important;
    background:#fff!important;
    border:1px solid #E4E9F0!important;
    border-radius:16px!important;
    box-shadow:0 6px 22px rgba(6,36,74,.06)!important;
    overflow:hidden!important;
  }

  /* no horizontal table on phone */
  .tablewrap{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }
  .tablewrap > table{
    display:none!important;
  }

  /* generated mobile records */
  .m-table-list{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
  }
  .m-table-card{
    width:100%!important;
    padding:15px!important;
    background:#fff!important;
    border-bottom:1px solid #EDF0F4!important;
  }
  .m-table-card:last-child{
    border-bottom:0!important;
  }
  .m-card-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:11px!important;
  }
  .m-card-title{
    color:#0B1F3A!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.3!important;
  }
  .m-card-stage{
    display:inline-flex!important;
    align-items:center!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    background:#EDF4FF!important;
    color:#17499A!important;
    font-size:10px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .m-card-sub{
    color:#7A8797!important;
    font-size:11px!important;
    line-height:1.4!important;
    margin-top:3px!important;
  }
  .m-card-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin-top:8px!important;
  }
  .m-card-field{
    min-width:0!important;
    padding:9px 10px!important;
    background:#F7F9FC!important;
    border-radius:10px!important;
  }
  .m-card-label{
    color:#7A8797!important;
    font-size:9px!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:.35px!important;
    margin-bottom:3px!important;
  }
  .m-card-value{
    color:#24364D!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.35!important;
    word-break:break-word!important;
  }

  /* standard cards / KPI */
  .cards{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    width:100%!important;
  }
  .cards .card{
    width:100%!important;
    min-width:0!important;
    padding:13px!important;
    margin:0!important;
    border-radius:14px!important;
  }

  /* forms */
  .formgrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .formgrid > *{min-width:0!important}
  input,select,textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:44px!important;
    font-size:14px!important;
    border-radius:10px!important;
  }
  .actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .actions .btn,.actions .btn2{
    width:100%!important;
    text-align:center!important;
    min-height:42px!important;
  }

  /* bottom navigation */
  .mobile-bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    align-items:end!important;
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:70px!important;
    z-index:6000!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #E3E8EF!important;
    box-shadow:0 -6px 20px rgba(6,36,74,.08)!important;
    padding:5px 4px env(safe-area-inset-bottom)!important;
  }
  .mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    min-width:0!important;
    height:58px!important;
    color:#7B8797!important;
    text-decoration:none!important;
    font-size:9px!important;
    font-weight:700!important;
  }
  .mobile-bottom-nav a.active{color:#0A4FA3!important}
  .mobile-bottom-nav .bn-icon{font-size:18px!important;line-height:1!important}
  .mobile-bottom-nav a.add .bn-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;height:40px!important;
    margin-top:-10px!important;
    border-radius:13px!important;
    background:#0A4FA3!important;
    color:#fff!important;
    box-shadow:0 5px 14px rgba(10,79,163,.25)!important;
  }

  /* menu overlay + drawer */
  .mobile-menu-overlay{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:4990!important;
    background:rgba(2,17,37,.42)!important;
  }
  body.mobile-menu-open .mobile-menu-overlay{
    display:block!important;
  }
  body.mobile-menu-open .side{
    display:block!important;
    visibility:visible!important;
    width:280px!important;
    position:fixed!important;
    z-index:5100!important;
    left:0!important;top:0!important;bottom:0!important;
    background:#fff!important;
    box-shadow:10px 0 35px rgba(0,0,0,.18)!important;
    padding:18px 12px!important;
  }
  body.mobile-menu-open .side .brand{
    display:block!important;
    padding:10px 10px 18px!important;
  }
  body.mobile-menu-open .side .brand img{
    width:150px!important;
  }
  body.mobile-menu-open .side .nav{
    display:block!important;
    position:static!important;
    width:100%!important;
    padding:0!important;
  }
  body.mobile-menu-open .side .nav a{
    display:block!important;
    height:auto!important;
    padding:12px!important;
    margin:3px 0!important;
    border-radius:10px!important;
  }
  body.mobile-menu-open .side .brand span,
  body.mobile-menu-open .side .nav .txt{
    display:inline!important;
  }

  /* remove accidental loading/processing layer unless explicitly active */
  #globalLoader:not(.show){
    display:none!important;
  }

  /* utility */
  .filterbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .filterbar select,.filterbar input,.filterbar button{
    width:100%!important;
    max-width:none!important;
  }
  canvas{max-width:100%!important}
}

@media(max-width:390px){
  .main{padding-left:11px!important;padding-right:11px!important}
  .m-card-grid{gap:7px!important}
  .m-card-field{padding:8px!important}
}