/* Mobile workspace density — full-width dashboards, single-column stats.
   Loaded after mobile-responsive.css / erp-mobile-shell-fix.css on shell + modules. */

@media (max-width: 900px) {
  /* Flatten nested shell containers so content uses the full viewport width. */
  html,
  html body.erp-body,
  html body.erp-body .erp-container,
  html body.erp-body .erp-container > .main-content,
  html body.erp-body .erp-content-scroll,
  html body.erp-body .module-section,
  html body.erp-body .module-section.active,
  body .app-container,
  body .main-content,
  body .content-area,
  body .dashboard-content,
  body .module-content,
  body .workspace-panel,
  body .content-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.erp-body .erp-container > .main-content,
  html body.erp-body .erp-content-scroll,
  body:not(.body-accounting) .main-content,
  body .dashboard-content,
  body .module-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Live modules fill the shell pane; keep the 10px inset on landing only. */
  html[data-active-shell-mode="app"] body.erp-body .erp-container > .main-content,
  html[data-active-shell-mode="app"] body.erp-body .erp-content-scroll,
  html[data-active-module]:not([data-active-module="landing"]) body.erp-body .erp-container > .main-content,
  html[data-active-module]:not([data-active-module="landing"]) body.erp-body .erp-content-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* CRM / module iframes: drop double gutters from header + section stacks. */
  html.crm-layout-v2.is-iframed #main-content.main-content,
  body.crm-layout-v2.is-iframed #main-content.main-content,
  html.crm-layout-v2.is-iframed.crm-sidebar-collapsed #main-content,
  body.crm-layout-v2.is-iframed.crm-sidebar-collapsed #main-content,
  html.crm-layout-v2.is-iframed:not(.crm-sidebar-collapsed) #main-content,
  body.crm-layout-v2.is-iframed:not(.crm-sidebar-collapsed) #main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.65rem max(10px, env(safe-area-inset-right, 0px)) 0.85rem
      max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  html.crm-layout-v2.is-iframed .page-header,
  body.crm-layout-v2.is-iframed .page-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 14px !important;
  }

  html.crm-layout-v2.is-iframed .content-section > .row,
  body.crm-layout-v2.is-iframed .content-section > .row {
    --bs-gutter-x: 0.65rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .page-header,
  body .card,
  body .metric-card,
  body .stat-card {
    max-width: 100% !important;
  }

  /* One stat / metric tile per row on phones (not two-up grids). */
  .stats-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .pp-grid-3,
  .pp-grid-4,
  [class*="-stats-grid"],
  [class*="-grid-4"],
  [class*="-grid-3"],
  [class*="-grid-2"],
  .dashboard-stats,
  .metrics-grid,
  .metric-grid,
  .dashboard-grid,
  .dashboard-main-grid,
  .dashboard-secondary-grid,
  .dashboard-tertiary-grid,
  .dashboard-quaternary-grid,
  .dashboard-quinary-grid,
  .dashboard-senary-grid,
  .dashboard-health-grid,
  .kpi-grid,
  .kpi-row,
  .metric-row,
  .charts-grid,
  .hr-dashboard-grid,
  #dashboard-kpi-row,
  #dashboard-kpi-row > *,
  .erp-cc-kpi-row,
  .erp-cc-kpi-row > .kpi-card,
  .erp-hero-visual.erp-cc-kpi-row > .kpi-card,
  .unit-gateway-grid:not(.unit-gateway-grid--horizontal),
  #twilio-analytics-row > [class*="col-"],
  .row.g-2 > :not(.nav-item):not([role="tab"]),
  .row.g-3 > :not(.nav-item):not([role="tab"]),
  .row.g-4 > :not(.nav-item):not([role="tab"]),
  .row > [class*="col-sm-"],
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"],
  .row > [class*="col-xl-"],
  .row > [class*="col-xxl-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .stats-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  [class*="-stats-grid"],
  [class*="-grid-4"],
  [class*="-grid-3"],
  [class*="-grid-2"],
  .dashboard-stats,
  .metrics-grid,
  .metric-grid,
  .dashboard-grid,
  .dashboard-main-grid,
  .dashboard-secondary-grid,
  .dashboard-tertiary-grid,
  .dashboard-quaternary-grid,
  .dashboard-quinary-grid,
  .dashboard-senary-grid,
  .dashboard-health-grid,
  .kpi-grid,
  .hr-dashboard-grid,
  #dashboard-kpi-row,
  .erp-cc-kpi-row,
  .erp-hero-visual.erp-cc-kpi-row {
    grid-template-columns: 1fr !important;
  }

  #dashboard-kpi-row > *,
  .erp-cc-kpi-row > .kpi-card,
  .erp-hero-visual.erp-cc-kpi-row > .kpi-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Horizontal nav bars stay multi-item (tabs, pill rails, CRM sub-nav). */
  .nav-tabs,
  .nav-pills,
  .nav-scroll,
  .twilio-tabs,
  .nav-menu,
  [role="tablist"].nav-tabs,
  [role="tablist"].nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.35rem;
  }

  .nav-tabs > .nav-item,
  .nav-pills > .nav-item,
  .twilio-tabs > .nav-item,
  .nav-menu > .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  .twilio-tabs .nav-link {
    white-space: nowrap !important;
  }

  /* WhatsApp / split panels stack vertically on narrow screens. */
  .tw-wa-layout > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  html body.erp-body .erp-container > .main-content,
  body .main-content,
  html.crm-layout-v2.is-iframed #main-content.main-content,
  body.crm-layout-v2.is-iframed #main-content.main-content {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
}