/* SkyWay Express — global responsive hardening
   Public website + authenticated customer/agent pages.
   2026-08-23 V1 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; max-width: 100%; }
body { overflow-x: hidden; }

/* Prevent media/content from forcing the viewport wider than the device. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video, canvas { height: auto; }
iframe { border: 0; }
pre, code { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.container, .container-fluid, .row,
.card, .card-body, .card-header,
.modal-content, .modal-body,
[class*="content"], [class*="wrap"] {
  min-width: 0;
}

/* Long operational values (tracking numbers, codes, emails, notes) must wrap. */
.card-body, .alert, .modal-body,
.dashboard-content, .shipment-content, .tracking-content,
.payment-content, .user-content, .claims-wrap, .pc-wrap,
.package-alerts-main, .custom-clearance {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tables remain usable on touch screens even on legacy pages without a wrapper. */
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > .table { margin-bottom: 0; }

/* Keep controls inside their columns/containers. */
.form-control, .custom-select, select, textarea, input,
.input-group, .input-group > .form-control,
.select2-container, .bootstrap-select {
  max-width: 100%;
}
textarea { resize: vertical; }
.pagination { flex-wrap: wrap; row-gap: 6px; }
.btn-toolbar, .swp-page-actions, .swd-row-actions { flex-wrap: wrap; }

/* Bootstrap modals can otherwise exceed very small phones when custom widths are used. */
.modal-dialog {
  max-width: calc(100vw - 30px);
}
.modal-body {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header/dropdown containment. */
.skyway-navbar .dropdown-menu {
  max-width: calc(100vw - 24px);
  overflow-wrap: anywhere;
}
.skyway-brand, .skyway-brand-text, .skyway-navbar .navbar-collapse { min-width: 0; }

/* Common grids/forms should never create an accidental horizontal scrollbar. */
.swd-app-grid, .swd-metrics, .swd-attention-grid,
.swd-quick-grid, .swd-service-grid,
.cs-grid, .cp-grid, .sw-address-grid,
.cw-grid, .pa-grid, .ac-grid {
  min-width: 0;
}

@media (max-width: 1199.98px) {
  /* Tablet navigation: dropdowns are part of the collapsed flow, never off-screen. */
  .skyway-navbar .dropdown-menu,
  .skyway-navbar .dropdown-menu-right {
    position: static !important;
    float: none !important;
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }

  .skyway-topbar .container { width: 100%; }
  .skyway-announcement, .skyway-contact { max-width: 100%; }
  .skyway-contact a { min-width: 0; overflow-wrap: anywhere; }

  /* Wide legacy tables: horizontal scrolling is preferable to clipped data. */
  .dashboard-content table,
  .shipment-content table,
  .tracking-content table,
  .payment-content table,
  .user-content table,
  .claims-wrap table,
  .pc-wrap table,
  .package-alerts-main table,
  .custom-clearance table,
  .clearance-container table,
  .clearance-details-container table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767.98px) {
  .modal-body > * { min-width: 0 !important; max-width: 100%; }
  /* Comfortable gutters on phones/tablets. */
  .container, .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .row {
    margin-left: -7px;
    margin-right: -7px;
  }
  .row > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
  }

  /* Custom multi-column forms become one clear vertical flow on phones. */
  .form-row > [class*="col-md-"],
  .form-row > [class*="col-lg-"],
  .form-row > [class*="col-xl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
  .modal-content { border-radius: 14px; }
  .modal-header, .modal-body, .modal-footer { padding-left: 15px; padding-right: 15px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer > .btn { margin: 0 !important; }

  /* Touch-friendly actions while retaining inline buttons where space allows. */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .btn-group { max-width: 100%; flex-wrap: wrap; }

  /* Legacy public tables not covered by portal wrappers. */
  body > table,
  main table,
  .site-section table,
  .section table,
  .container > table,
  .container-fluid > table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs, .nav-pills {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nav-tabs .nav-item, .nav-pills .nav-item { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  .skyway-navbar { min-height: 64px; }
  .skyway-brand-mark { width: 38px; height: 38px; border-radius: 10px; }
  .skyway-brand-text strong { font-size: .94rem; }

  /* Top-bar messages and contacts wrap instead of clipping. */
  .skyway-announcement span { white-space: normal; line-height: 1.4; }
  .skyway-contact { display: grid; grid-template-columns: 1fr; }
  .skyway-contact a { display: flex; align-items: flex-start; gap: 7px; }

  .card-header { padding: 14px 15px !important; }
  .card-body { padding: 15px !important; }
  .alert { padding-left: 14px; padding-right: 14px; }

  /* Action bars become easy-to-tap stacked/wrapped groups. */
  .swp-page-actions, .swd-hero-actions { width: 100%; }
  .swp-page-actions .btn, .swd-hero-actions .swd-btn { flex: 1 1 100%; }

  .pagination { justify-content: center; }
  .pagination .page-link { margin: 2px; }
}

@media (max-width: 359.98px) {
  .container, .container-fluid { padding-left: 10px; padding-right: 10px; }
  .skyway-brand-text strong { font-size: .88rem; }
  .skyway-navbar .navbar-toggler { padding: 6px 8px; }
  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl { max-width: calc(100vw - 12px) !important; }
}

/* Print must not inherit touch-screen scrolling layouts. */
@media print {
  body { overflow: visible !important; }
  table { display: table !important; overflow: visible !important; }
  .table-responsive { overflow: visible !important; border: 0 !important; box-shadow: none !important; }
}