/*
 * CODSHIPX AI CRM
 * MOBILE RESPONSIVE R1 — 2026-10-05
 *
 * Scope:
 * - authenticated .app-shell only
 * - phones / tablets <= 820px only
 * - no backend / JS / desktop changes
 */

@media (max-width:820px){

  /*
   * Restore normal vertical page scrolling for ordinary CRM pages.
   * Inbox keeps its own dedicated scroll ownership.
   */
  html:has(body .app-shell .app-content:not(.inbox-content)),
  body:has(.app-shell .app-content:not(.inbox-content)){
    height:auto !important;
    min-height:100% !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior-y:auto !important;
  }

  body .app-shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:none !important;

    overflow:visible !important;
  }

  body .app-shell .app-main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:none !important;

    margin-left:0 !important;
    overflow:visible !important;
  }

  body .app-shell .app-content:not(.inbox-content){
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    max-height:none !important;

    min-height:calc(100dvh - 64px) !important;

    overflow:visible !important;

    padding-bottom:
      calc(98px + env(safe-area-inset-bottom)) !important;
  }


  /*
   * Mobile topbar:
   * remove stale desktop/tablet width pressure.
   */
  body .app-shell .topbar{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    flex:0 0 64px !important;

    padding:6px 10px !important;
    gap:8px !important;

    overflow:visible !important;
  }

  body .app-shell .topbar-left{
    flex:1 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    gap:7px !important;
    overflow:hidden !important;
  }

  body .app-shell .menu-button{
    display:grid !important;

    flex:0 0 40px !important;

    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }


  /*
   * Important:
   * desktop search wrapper itself retained min-width:220px
   * even when the inner search UI was hidden.
   * Remove that dead width on mobile.
   */
  body .app-shell
  .topbar
  .topbar-right
  > .cx-r65-search-wrap{
    display:none !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    flex:0 0 0 !important;
  }


  body .app-shell .page-ident,
  body[data-cx-r31-topbar-state]
  .app-shell .page-ident{
    flex:1 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;
  }

  body .app-shell .page-ident::before,
  body .app-shell .page-ident::after{
    display:none !important;
  }

  body .app-shell .page-ident small{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:8.5px !important;
    line-height:1.05 !important;
    letter-spacing:.5px !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body .app-shell .page-ident strong{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:2px 0 0 !important;

    font-size:13px !important;
    line-height:1.12 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body .app-shell .topbar-right{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:46vw !important;

    margin-left:auto !important;

    gap:6px !important;
  }

  body .app-shell .topbar-right > *{
    min-width:0 !important;
  }


  /*
   * General viewport containment for normal CRM/dashboard surfaces.
   */
  body .app-shell .page-stack,
  body .app-shell .command-page,
  body .app-shell .cx-dashboard-v2,
  body .app-shell .command-grid,
  body .app-shell .module-head{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }


  /*
   * Dashboard hero.
   */
  body .app-shell .cx-dv2-hero{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow:hidden !important;
  }

  body .app-shell .cx-dv2-hero-copy{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body .app-shell .cx-dv2-hero-actions{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px !important;

    position:relative !important;
    z-index:8 !important;
  }

  body .app-shell .cx-dv2-hero-primary,
  body .app-shell .cx-dv2-hero-codi{
    box-sizing:border-box !important;

    flex:1 1 160px !important;

    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    position:static !important;
    transform:none !important;
  }


  /*
   * Fixed mobile dock must not cover the last CRM content.
   */
  body .app-shell .mobile-dock{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:65px !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    padding:
      5px
      7px
      max(8px, env(safe-area-inset-bottom)) !important;
  }

  body .app-shell .mobile-dock button{
    min-width:0 !important;
  }
}


/*
 * Narrow phones.
 */
@media (max-width:540px){

  body .app-shell .cx-dv2-hero-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  body .app-shell .cx-dv2-hero-primary,
  body .app-shell .cx-dv2-hero-codi{
    flex:0 0 auto !important;

    width:100% !important;
    max-width:100% !important;
  }
}


/*
 * Extra narrow phones.
 */
@media (max-width:390px){

  body .app-shell .page-ident small{
    font-size:8px !important;
    letter-spacing:.3px !important;
  }

  body .app-shell .page-ident strong{
    font-size:12px !important;
  }

  body .app-shell .topbar{
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* END CODSHIPX_AI_CRM_MOBILE_RESPONSIVE_R1_20261005 */