/*
 * ABC Cargo UK ERP - mobile compatibility layer
 * Scope: responsive layout only. No routes, fields, actions, permissions,
 * business rules, branding, desktop layout, or application behaviour changed.
 */

/* Prevent media, charts and controls from forcing the full page wider. */
img,
svg,
canvas {
  max-width: 100%;
}

@media (max-width: 1199.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Keep the complete current menu available without removing options. */
  .header-menu {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .header-menu .navbar,
  .header-menu .navbar-nav,
  .header-menu nav,
  .header-menu ul {
    flex-wrap: nowrap !important;
    min-width: max-content;
  }

  .header-menu .nav-item,
  .header-menu li,
  .header-menu a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Operational grids retain every column and scroll inside their own area. */
  .table-responsive,
  .table-responsive-sm,
  .table-responsive-md,
  .table-responsive-lg,
  .table-responsive-xl,
  .dx-datagrid,
  .dx-datagrid-rowsview,
  .grid-table,
  .data-table,
  .datatable,
  .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .dx-datagrid .dx-scrollable-container,
  .dx-datagrid .dx-scrollable-content {
    min-width: max-content;
  }

  table {
    width: max-content;
    min-width: 100%;
  }

  .modal-dialog {
    max-width: calc(100vw - 32px);
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 991.98px) {
  /* Current login, adapted to one column without changing authentication. */
  .login-page {
    min-height: 100vh;
    padding: 24px !important;
    overflow-y: auto;
  }

  .login-page > .login,
  .login-page .login {
    width: 100%;
    min-height: calc(100vh - 48px);
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
  }

  .login_grid_l,
  .login-left-side {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 210px;
    height: 320px !important;
    flex: 0 0 100% !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .login_grid_r,
  .login-right-side-container {
    width: 100% !important;
    max-width: 720px !important;
    min-height: calc(100vh - 368px);
    height: auto !important;
    flex: 0 0 100% !important;
    border-radius: 0 0 24px 24px !important;
  }

  .login-logo {
    width: 100%;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .login-logo .log-img {
    width: auto !important;
    height: 64px !important;
  }

  .login-logo > span {
    margin-bottom: 10px !important;
  }

  .login-logo > p {
    margin-bottom: 8px !important;
  }

  .login-logo .log-illlstration {
    width: auto !important;
    max-width: 250px;
    height: 96px !important;
    margin: 8px 0 !important;
  }

  .login-right-side {
    width: 100%;
    min-height: 400px;
    height: auto !important;
    padding: 40px 24px;
  }

  .login-form-wrap,
  .login-right-side .login-form-wrap {
    width: 100% !important;
    max-width: 480px !important;
    flex: 0 0 100% !important;
    margin: 0 auto;
  }

  /* Login is shared by the ERP and CRM modules; keep tablet taps reliable. */
  .login-right-side input,
  .login-right-side .form-control,
  .login-right-side button,
  .login-right-side .btn {
    min-height: 44px;
  }

  .login-right-side input,
  .login-right-side .form-control {
    font-size: 16px !important;
  }

  /* Header stays recognisable while fitting smaller screens. */
  .dash-head-top {
    padding: 10px 16px !important;
  }

  .dash-head-top > .row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .dash-board-logo {
    min-width: 72px;
  }

  .dashboard-right-section {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-right-wrap {
    padding: 24px 20px !important;
    min-width: 0;
    max-width: 100%;
  }

  /*
   * Deep operational forms use custom Angular components and DevExtreme grids
   * directly inside Bootstrap rows. Their desktop-calculated widths otherwise
   * enlarge the whole document on phones. Keep the page at viewport width and
   * give each grid its own horizontal scrolling surface so no column is lost.
   */
  form[class*="edit-wrapper"],
  form.invoice-edit-wrapper,
  .dashboard-right-wrap > .myCard,
  .dashboard-right-wrap .card,
  .dashboard-right-wrap .card-body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-right-wrap .card-body > .row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .dashboard-right-wrap .card-body > .row > dx-data-grid,
  .dashboard-right-wrap dx-data-grid {
    display: block;
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .dashboard-right-wrap dx-data-grid > .dx-datagrid,
  .dashboard-right-wrap .dx-datagrid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .dashboard-right-wrap .dx-datagrid-headers,
  .dashboard-right-wrap .dx-datagrid-rowsview,
  .dashboard-right-wrap .dx-datagrid-total-footer,
  .dashboard-right-wrap .dx-datagrid-content,
  .dashboard-right-wrap .dx-scrollable-wrapper,
  .dashboard-right-wrap .dx-scrollable-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-right-wrap .dx-scrollable-container,
  .dashboard-right-wrap .dx-datagrid-headers > .dx-datagrid-content,
  .dashboard-right-wrap .dx-datagrid-rowsview > .dx-datagrid-content,
  .dashboard-right-wrap .dx-datagrid-total-footer > .dx-datagrid-content,
  .dashboard-right-wrap .table-responsive,
  .dashboard-right-wrap .card-body > .row:has(> table) {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  .dashboard-right-wrap .dx-datagrid .dx-scrollable-content,
  .dashboard-right-wrap .dx-datagrid table {
    width: max-content !important;
    min-width: 100% !important;
  }

  .dashboard-right-wrap .intro-wish > .row > [class*="col-md-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .dashboard-right-wrap h2 {
    max-width: 100%;
    font-size: 24px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .chart-grid {
    min-height: 300px;
    overflow-x: auto;
  }

  .chart-grid canvas {
    width: 100% !important;
    height: auto !important;
    min-height: 280px;
  }

  /* Bootstrap/legacy forms stack while retaining every current field. */
  form .row > [class*="col-md-"],
  form .row > [class*="col-lg-"],
  .form-row > [class*="col-md-"],
  .form-row > [class*="col-lg-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .each-input-box,
  .form-group {
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  .login-page {
    padding: 0 !important;
    background: #f5f5f7;
  }

  .login-page > .login,
  .login-page .login {
    min-height: 100vh;
  }

  .login_grid_l,
  .login-left-side {
    min-height: 150px;
    height: 220px !important;
    padding: 24px 20px !important;
    border-radius: 0 !important;
  }

  .login_grid_r,
  .login-right-side-container {
    height: auto !important;
    min-height: calc(100vh - 220px);
  }

  .login-page .login {
    border-radius: 0 !important;
  }

  .login-logo {
    width: 100%;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .login-logo > p:not(.login-copyright p),
  .login-left-side > p,
  .login-bnr {
    display: none;
  }

  .login-logo img,
  .login-left-side .logo-box img {
    max-height: 64px;
  }

  .login-logo .log-img {
    width: auto !important;
    max-width: 140px;
    height: 54px !important;
  }

  .login-logo > span {
    margin-bottom: 8px !important;
  }

  .login-logo .log-illlstration {
    width: auto !important;
    max-width: 190px;
    height: 72px !important;
    margin: 8px 0 0 !important;
  }

  .login-copyright {
    margin-top: 12px;
  }

  .login_grid_r,
  .login-right-side-container {
    border-radius: 0 !important;
  }

  .login-right-side {
    min-height: calc(100vh - 150px);
    padding: 32px 20px;
    align-content: flex-start;
  }

  .login-right-side h1,
  .login-right-side h2 {
    font-size: 28px;
  }

  .login-right-side input,
  .login-right-side .form-control,
  .each-input-box .form-control,
  .ng-select .ng-select-container {
    min-height: 44px;
    font-size: 16px !important;
  }

  button,
  .btn,
  .common-btn button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }

  .dash-head-top {
    padding: 10px 12px !important;
  }

  .message_scroll {
    display: none !important;
  }

  .dash-board-logo img {
    width: auto;
    max-width: 76px;
    height: auto !important;
  }

  .notification-icon {
    width: auto !important;
    min-width: 36px;
  }

  .header-menu .navbar {
    padding: 8px 12px !important;
  }

  .dashboard-right-wrap {
    padding: 20px 12px !important;
  }

  .dashboard-right-wrap .card-body {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-right-wrap .card-body.pb-0.pt-0 {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .dashboard-right-wrap .dx-toolbar .dx-toolbar-items-container {
    min-height: 44px;
  }

  .dashboard-right-wrap .dx-button {
    min-width: 44px;
    min-height: 44px;
  }

  /*
   * Management pages use the same icon-only Add control beside the title.
   * The original desktop rule lets the inner button collapse to 23px wide,
   * which is difficult to tap on a phone. Keep its position and action while
   * making the complete control a consistent 44px touch target.
   */
  .dashboard-right-wrap .each-btn-box.icon-circle,
  .dashboard-right-wrap .each-btn-box.icon-circle > a,
  .dashboard-right-wrap .each-btn-box.icon-circle > a > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .dashboard-right-wrap .each-btn-box.icon-circle {
    flex: 0 0 44px;
    margin-right: 0 !important;
  }

  .dashboard-right-wrap .each-btn-box.icon-circle > a,
  .dashboard-right-wrap .each-btn-box.icon-circle > a > button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  /* Tracking keeps all operational columns, but scrolls them locally. */
  .dashboard-right-wrap .intransist-form {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .intro-wish h3 {
    font-size: 24px;
  }

  .counter-grid-wrap,
  .dash_counter_grid,
  .card,
  .chart-grid {
    border-radius: 10px;
  }

  .count-grid {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 14px;
  }

  .counter-grid-wrap {
    min-height: 150px;
    padding: 24px !important;
  }

  .head-card > .row {
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
  }

  .head-card > .row > [class*="col-"] {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 52px);
    flex: 1 1 auto;
    padding-left: 0;
  }

  .head-card h1,
  .head-card h2,
  .head-card h3,
  .head-card h4 {
    overflow-wrap: anywhere;
  }

  .chart-grid {
    min-width: 0;
    min-height: 260px;
    padding: 12px !important;
  }

  .chart-grid canvas {
    min-height: 240px;
  }

  /* Preserve complete button groups; allow wrapping instead of clipping. */
  .dashboard-btn-wrapper,
  .action-buttons,
  .button-group,
  .btn-group,
  .form-actions,
  .card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-dialog {
    max-width: calc(100vw - 20px);
    margin: 10px auto;
  }

  .modal-content {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }

  .dropdown-menu {
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
  }
}

@media (max-width: 399.98px) {
  .login-right-side {
    padding: 28px 16px;
  }

  .dashboard-right-wrap {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .profile-pic {
    margin-right: 2px;
  }

  .down-arrow {
    display: none;
  }
}

/* Printing retains the application's existing print rules. */
@media print {
  .header-menu,
  .table-responsive,
  .dx-datagrid {
    overflow: visible !important;
  }
}