/* YABOX OS V3418 - Mobile First Operational Interface
   UI-only layer. No business logic, no routes, no permissions mutation. */

:root{
  --mobile-topbar-h:56px;
  --mobile-bottom-nav-h:64px;
  --mobile-drawer-w:min(88vw,320px);
  --mobile-touch:48px;
}

@media(max-width:768px){
  html,body{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
    overscroll-behavior-y:contain;
  }

  body.is-mobile-first,
  body.yabox-mobile-first{
    background:var(--bg,#F5F7FB);
  }

  #app{
    width:100%;
    min-width:0;
    max-width:100vw;
    min-height:100dvh;
    height:100dvh;
    overflow:hidden!important;
    display:flex;
    flex-direction:column;
  }

  .main-area{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    margin-left:0!important;
    flex:1 1 auto;
    height:100dvh!important;
    overflow:hidden!important;
    padding-left:0!important;
  }

  .content{
    width:100%;
    max-width:100vw;
    min-width:0;
    flex:1 1 auto;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    padding:12px 10px calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px) + 18px)!important;
  }

  #cnt,#tabs,.cbox,.card,.kpis,.topbar{
    max-width:100%;
    min-width:0;
  }

  .topbar{
    position:sticky!important;
    top:0;
    z-index:210;
    min-height:calc(var(--mobile-topbar-h) + var(--safe-top,0px))!important;
    height:auto!important;
    padding:calc(var(--safe-top,0px) + 8px) 10px 8px!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:8px!important;
    background:var(--white,#fff)!important;
    border-bottom:1px solid var(--border,#E2E8F0)!important;
  }

  .sidebar-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    border:1px solid var(--border,#E2E8F0)!important;
    background:var(--white,#fff)!important;
    color:var(--text,#0F172A)!important;
  }

  .topbar-title{
    display:block!important;
    min-width:0!important;
    width:auto!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px!important;
    line-height:1.2;
  }

  .page-sub,.search-wrap{
    display:none!important;
  }

  .topbar-sync-wrap{
    display:flex!important;
    gap:4px!important;
    min-width:0;
  }

  .topbar-btn{
    min-width:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    border-radius:12px!important;
  }

  .topbar-btn-text,
  #last-sync-info{
    display:none!important;
  }

  #sbadge{
    min-height:36px;
    max-width:92px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:var(--mobile-drawer-w)!important;
    max-width:var(--mobile-drawer-w)!important;
    height:100dvh!important;
    transform:translateX(-105%)!important;
    transition:transform .2s ease!important;
    z-index:700!important;
    box-shadow:18px 0 40px rgba(15,23,42,.22)!important;
  }

  .sidebar.open,
  body.nav-open .sidebar,
  body.sidebar-open .sidebar{
    transform:translateX(0)!important;
  }

  .sidebar-overlay{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    background:rgba(15,23,42,.48)!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:690!important;
    transition:opacity .18s ease,visibility .18s ease;
  }

  .sidebar-overlay.open,
  body.nav-open .sidebar-overlay,
  body.sidebar-open .sidebar-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .sidebar-nav{
    padding-bottom:calc(96px + var(--safe-bottom,0px))!important;
  }

  .nav-item,
  .sd-item,
  .sd-group-btn{
    min-height:46px!important;
    font-size:14px!important;
    gap:10px!important;
  }

  #bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    min-height:calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px))!important;
    height:calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px))!important;
    padding:6px 6px var(--safe-bottom,0px)!important;
    background:var(--white,#fff)!important;
    border-top:1px solid var(--border,#E2E8F0)!important;
    box-shadow:0 -10px 30px rgba(15,23,42,.1)!important;
    z-index:650!important;
  }

  .bnav-btn{
    min-width:0!important;
    min-height:52px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    color:var(--text2,#475569)!important;
    font-size:10px!important;
    font-weight:800!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:hidden;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
  }

  .bnav-btn .bnav-icon{
    font-family:var(--font-mono,monospace);
    font-size:11px!important;
    line-height:1;
    width:24px;
    height:22px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-hover,#EEF2F8);
    color:var(--text,#0F172A);
  }

  .bnav-btn .bnav-label{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .bnav-btn.active,
  .bnav-btn[aria-current="page"]{
    color:var(--blue,#2155E0)!important;
    background:var(--blue-soft,rgba(33,85,224,.1))!important;
  }

  .bnav-btn.active .bnav-icon,
  .bnav-btn[aria-current="page"] .bnav-icon{
    background:var(--blue,#2155E0)!important;
    color:#fff!important;
  }

  .kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:8px 0!important;
    overflow:visible!important;
  }

  .kpi{
    min-height:96px!important;
    padding:12px!important;
    border-radius:14px!important;
  }

  .kpil{
    font-size:10px!important;
    letter-spacing:.04em!important;
  }

  .kpiv{
    font-size:26px!important;
    line-height:1.05!important;
  }

  .kpi-sub{
    display:block!important;
    font-size:11px!important;
    line-height:1.25!important;
  }

  table,.data-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .obtn,.obtn-primary,.yabox-btn,.cai-act,.conf-action-btn,.octa,button,input,select,textarea{
    font-size:16px;
  }

  .obtn,.obtn-primary,.yabox-btn,.cai-act,.conf-action-btn,.octa,button{
    min-height:var(--mobile-touch)!important;
  }

  input,select,textarea{
    min-height:44px!important;
    max-width:100%!important;
  }

  textarea{
    min-height:92px!important;
  }

  /* Confirmation workspace */
  #cai-root,
  .cai-main,
  .cai-content{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  #cai-sb,
  .cai-sb{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    display:block!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:8px 0!important;
    white-space:nowrap;
  }

  #cai-sb-inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    align-items:center;
    width:max-content;
    min-width:100%;
  }

  .cai-sb-sec{
    display:none!important;
  }

  .cai-sb-item{
    width:auto!important;
    min-width:max-content!important;
    min-height:42px!important;
    border-radius:999px!important;
    padding:8px 12px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
  }

  #cai-list,
  .cai-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .cai-card,
  .ocard,
  [data-oid]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    border-radius:16px!important;
    padding:14px!important;
    box-shadow:0 8px 22px rgba(15,23,42,.07)!important;
  }

  .cai-card-title,
  .oname{
    font-size:17px!important;
    line-height:1.2!important;
  }

  .cai-price,
  .oprice,
  [data-field="cod"],
  .order-cod{
    display:inline-flex!important;
    align-items:center;
    min-height:32px;
    font-size:18px!important;
    font-weight:900!important;
    color:var(--success,#16A34A)!important;
  }

  .cai-address,
  .order-address,
  [data-field="address"]{
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
    color:var(--text,#0F172A)!important;
  }

  #cai-detail,
  .cai-detail{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    max-height:86dvh!important;
    min-height:46dvh;
    transform:none!important;
    z-index:620!important;
    border-radius:22px 22px 0 0!important;
    border:1px solid var(--border,#E2E8F0)!important;
    border-bottom:0!important;
    background:var(--white,#fff)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-shadow:0 -18px 42px rgba(15,23,42,.18)!important;
    padding-bottom:calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px))!important;
  }

  #cai-detail:empty,
  #cai-detail.hidden,
  .cai-detail.hidden,
  #cai-detail.mobile-detail-empty,
  .cai-detail.mobile-detail-empty{
    display:none!important;
  }

  .cai-detail-hdr{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    background:var(--white,#fff)!important;
    padding:14px!important;
    border-bottom:1px solid var(--border,#E2E8F0)!important;
  }

  .cai-detail-body{
    padding:12px!important;
  }

  .cai-section{
    border-radius:16px!important;
    margin-bottom:12px!important;
  }

  .cai-acts{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .cai-actions-section{
    position:sticky!important;
    bottom:calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px))!important;
    z-index:4!important;
    background:var(--white,#fff)!important;
  }

  /* Dispatch / redispatch */
  .dispatch-grid,
  .dispatch-layout,
  #dispatch-main,
  #dispatch-root,
  .dispatch-root,
  .dispatch-panels{
    display:block!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
  }

  .dispatch-panel,
  .dispatch-card,
  .dispatch-stats,
  .dispatch-table-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-bottom:12px!important;
    overflow-x:auto!important;
  }

  /* Follow-up, stock, SAV, manager dashboards */
  .followup-card,
  .delivery-card,
  .tracking-card,
  .ticket-card,
  .claim-card,
  .stock-card,
  .product-card,
  .executive-card,
  .finance-card,
  .business-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-radius:16px!important;
    padding:14px!important;
    margin-bottom:10px!important;
  }

  .stock-grid,
  .stock-layout,
  .sav-grid,
  .claims-grid,
  .executive-grid,
  .finance-grid,
  .business-grid,
  .agent-grid,
  .manager-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .stock-table,
  .products-table,
  .claims-table,
  .dispatch-table{
    overflow-x:auto!important;
    width:100%!important;
    max-width:100%!important;
  }

  .mobile-only{display:block!important}
  .desktop-only{display:none!important}

  .mobile-network-banner{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(var(--mobile-bottom-nav-h) + var(--safe-bottom,0px) + 10px);
    z-index:900;
    min-height:44px;
    border-radius:14px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    background:var(--danger,#EF4444);
    color:#fff;
    font-weight:800;
    box-shadow:0 14px 32px rgba(15,23,42,.22);
  }

  body.is-offline .mobile-network-banner{display:flex}
}

@media(max-width:430px){
  .topbar{grid-template-columns:auto 1fr auto!important}
  .topbar-sync-wrap{display:none!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:414px){
  .content{padding-left:9px!important;padding-right:9px!important}
  .cai-card,.ocard,[data-oid]{padding:13px!important}
}

@media(max-width:390px){
  .bnav-btn{font-size:9px!important}
  .bnav-btn .bnav-icon{width:22px;height:21px;font-size:10px!important}
  .kpiv{font-size:24px!important}
}

@media(max-width:360px){
  .kpis{gap:6px!important}
  .kpi{padding:10px!important}
  .kpi-sub{font-size:10px!important}
  .cai-acts{grid-template-columns:1fr!important}
}

@media(max-width:320px){
  .topbar-title{font-size:14px!important}
  .content{padding-left:7px!important;padding-right:7px!important}
  .bnav-btn .bnav-label{font-size:8px}
}

@media(min-width:769px){
  .mobile-only{display:none!important}
}