/* Admin mobile responsive safety layer. Presentation-only; APIs and actions unchanged. */

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

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

@media (max-width: 900px) {
  body {
    min-width: 0;
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .dash {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .sidebar {
    width: min(250px, 88vw) !important;
    max-width: 88vw !important;
  }

  .sb-overlay.show {
    display: block !important;
  }

  .main {
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-bar {
    width: 100% !important;
    min-height: 58px;
    padding: 7px 10px !important;
    flex-wrap: nowrap !important;
  }

  .mobile-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wrap,
  .content,
  .main-content,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 88px !important;
  }

  .topbar {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .brand,
  .brand-logo,
  .brand-sub,
  .topbar-right {
    min-width: 0 !important;
    max-width: 100%;
  }

  .brand-logo,
  .admin-brand-logo {
    overflow-wrap: anywhere;
  }

  .topbar-right,
  .topnav,
  .actions,
  .action-group,
  .btn-row,
  .device-actions,
  .media-actions,
  .filter-actions,
  .confirm-actions,
  .modal-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .topbar-right {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .topnav {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .topnav a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .section,
  .card,
  .health-card,
  .live-card,
  .device-card,
  .media-card,
  .material-card,
  .edit-panel,
  .detail-content,
  .alert-summary-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sec-head,
  .card-title,
  .head,
  .dashboard-head,
  .activity-toolbar,
  .activity-footer,
  .device-title-row,
  .media-actions,
  .detail-row {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .sec-body,
  .card,
  .section,
  .modal-body,
  .edit-panel-body {
    overflow-wrap: anywhere;
  }

  .sec-body {
    padding: 12px !important;
  }

  .stats-grid,
  .alerts-grid,
  .health-grid,
  .metrics,
  .grid3,
  .chart-grid,
  .delivery-cards,
  .checks-grid,
  .controls-grid,
  .detail-grid,
  .form-cols,
  .form-grid,
  .account-edit-grid,
  .editor-layout,
  .detail-layout,
  .language-content,
  .color-fields,
  .material-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  .grid2,
  .form-row2,
  .editor-layout,
  .detail-layout {
    grid-template-columns: 1fr !important;
  }

  .stats-grid {
    gap: 8px !important;
  }

  .stat-card,
  .metric,
  .health-card,
  .cd-stat {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .filters,
  .filter-row,
  .list-controls,
  .controls-section,
  .controls-grid,
  .form-row,
  .form-field,
  .field,
  .device-field,
  .settings-field,
  .add-form,
  .add-form-row,
  .chip-add-row,
  .activity-filter,
  .dashboard-filters,
  .dashboard-filter,
  .sec-tools {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .filters input,
  .filters select,
  .filter-row input,
  .filter-row select,
  .list-controls input,
  .list-controls select,
  .form-field input,
  .form-field select,
  .form-field textarea,
  .field input,
  .field select,
  .field textarea,
  .device-field input,
  .device-field select,
  .device-field textarea,
  .sec-tools input,
  .sec-tools select,
  .settings-field input,
  .settings-field select,
  .settings-field textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .filters input[type=text],
  .filters input[type=date] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .btn,
  .add-btn,
  .btn-save,
  .btn-reset,
  .approve-btn,
  .action-btn,
  .icon-btn,
  .expand-btn,
  .apply-btn,
  .filter-actions button,
  .modal-actions button {
    min-height: 44px !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .data-table-wrap,
  .table-wrap,
  .activity-table-wrap,
  .journey-session-wrap,
  .integrity-table,
  .delivery-table,
  .checkout-detail-table,
  .cart-detail-table,
  .inv-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto;
  }

  table > thead,
  table > tbody,
  table > tfoot {
    display: table;
    width: max-content;
    min-width: 620px;
  }

  .prod-grid,
  .mp-grid,
  .media-grid,
  .mp-grid,
  .editor-images {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  .prod-card,
  .mp-card,
  .media-card,
  .prod-info,
  .media-info {
    min-width: 0 !important;
    max-width: 100%;
  }

  .prod-name,
  .media-name-input,
  .mp-name,
  .cell-sub,
  .device-title,
  .journey-who,
  .customer-chip,
  .ap-name,
  .detail-item,
  .message,
  .desc {
    overflow-wrap: anywhere !important;
  }

  .prod-actions,
  .row-actions,
  .cat-actions,
  .media-actions,
  .device-btns,
  .confirm-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .modal-overlay,
  .modal-backdrop,
  .confirm-overlay,
  .cd-overlay,
  .mp-overlay {
    padding: 8px !important;
  }

  .modal-box,
  .cart-modal-box,
  .checkout-modal-box,
  .confirm-modal,
  .cd-box,
  .dialog,
  .mp-overlay .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
  }

  .modal-body,
  .confirm-modal,
  .cd-box,
  .dialog {
    overflow-y: auto !important;
  }

  .editor-layout,
  .frame-wrap,
  .device-frame,
  .edit-panel,
  iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .device-frame,
  .frame-wrap {
    overflow: hidden !important;
  }

  .fixed-bottom,
  .mobile-bottom-nav,
  .ks-bottom-nav,
  .bottom-nav {
    max-width: 100% !important;
    width: 100% !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 480px) {
  .wrap,
  .content,
  .main-content,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .stats-grid,
  .alerts-grid,
  .health-grid,
  .metrics,
  .prod-grid,
  .mp-grid,
  .media-grid,
  .editor-images {
    grid-template-columns: 1fr !important;
  }

  .sec-head,
  .sec-body,
  .card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar {
    align-items: stretch !important;
  }
}