img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

@media (max-width: 991.98px) {
  body {
    padding-left: 0 !important;
  }

  .main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .top-bar {
    padding: 10px 14px !important;
    height: auto !important;
    min-height: var(--topbar-h, 64px);
    align-items: flex-start !important;
    gap: 10px;
  }

  .top-bar-left,
  .top-bar-right {
    width: 100%;
  }

  .top-bar-right {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .user-btn {
    padding-inline: 10px;
  }

  .notif-menu {
    width: min(94vw, 420px) !important;
    max-width: 94vw !important;
  }

  .jac-panel {
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 84px !important;
  }

  .jac-sticky {
    left: 12px !important;
    right: 12px !important;
    top: 84px !important;
    width: auto !important;
    max-width: none !important;
    height: min(420px, calc(100vh - 112px)) !important;
  }

  .jac-sticky-dock,
  .ship-table-wrap,
  .table-responsive,
  .preview-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .jac-sticky-dock {
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .main-content .container,
  .main-content .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 767.98px) {
  body {
    overflow-x: hidden;
  }

  .container,
  .container-fluid,
  .page-shell,
  .content-container,
  .quote-layout,
  .shell {
    max-width: 100% !important;
  }

  .page-shell {
    padding: 16px !important;
  }

  .content-container {
    margin-top: 84px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page-topbar,
  .card-head,
  .topbar-inner,
  .result-header,
  .contact-header,
  .status-banner,
  .tracking-box,
  .map-head,
  .footer-inner,
  .hero-brand,
  .left-meta,
  .sb-logo {
    flex-wrap: wrap !important;
  }

  .page-topbar,
  .card-head,
  .hero-card,
  .shell,
  .detail-card,
  .search-card,
  .panel-card,
  .glass-card {
    border-radius: 18px !important;
  }

  .page-topbar-actions,
  .bulk-actions,
  .chart-tools,
  .header-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .page-topbar-actions .btn-ui,
  .btn-ui,
  .btn-modern,
  .head-pill,
  .action-btn {
    width: 100%;
    justify-content: center;
  }

  .workspace,
  .hero-grid,
  .hero-metrics,
  .main-grid,
  .summary-grid,
  .stages-grid,
  .section-grid-4,
  .section-grid-3,
  .section-grid-2,
  .command-bar,
  .quick-add-grid,
  .shipments-top,
  .mini-kpis,
  .folders-container,
  .currency-picker,
  .search-form {
    grid-template-columns: 1fr !important;
  }

  .folder-card {
    padding: 16px !important;
    margin: 0 !important;
  }

  .search-card {
    padding: 16px !important;
  }

  .table thead th,
  .table tbody td {
    padding: 0.8rem 0.75rem !important;
  }

  .table-responsive > .table,
  .card-glass .table,
  .shell .table {
    min-width: 640px;
  }

  .ship-table {
    min-width: 980px !important;
  }

  .preview-container {
    height: auto !important;
    min-height: 60vh;
  }

  .hot-container {
    overflow-x: auto;
  }

  .split {
    grid-template-columns: 1fr !important;
    min-height: 100vh;
  }

  .panel-left,
  .panel-right {
    padding: 28px 20px !important;
  }

  .panel-right::before {
    width: 100% !important;
    height: 3px !important;
  }

  .form-wrap {
    max-width: 100% !important;
  }

  .hero-copy,
  .brand,
  .sb-jobname,
  .job-code,
  .job-meta,
  .status-banner p,
  .summary-v,
  .detail-item p {
    overflow-wrap: anywhere;
  }

  .brand-wordmark,
  .brand-title,
  .brand-sub {
    white-space: normal !important;
  }

  .content-container .d-flex.gap-2.justify-content-end {
    flex-direction: column;
    align-items: stretch !important;
  }

  .detail-item {
    align-items: flex-start !important;
  }
}

@media (max-width: 575.98px) {
  .topbar-inner,
  .top-bar,
  .page-topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero-card,
  .shell,
  .detail-card,
  .panel-card,
  .glass-card,
  .card,
  .search-card {
    padding: 16px !important;
  }

  .summary-card {
    position: static !important;
    top: auto !important;
  }

  .metric-pill,
  .mini-card,
  .summary-card,
  .status-banner,
  .tracking-box {
    min-width: 0;
  }

  .brand-logo {
    height: 26px !important;
  }

  .brand-mark {
    width: 44px !important;
    height: 44px !important;
  }

  .contact-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .main-content .container.py-4 {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
}