/**
 * iMS — mobile / tablet responsiveness (Bootstrap breakpoints)
 * Loaded after theme.css + theme-bridge.css.
 *
 * Breakpoints (Bootstrap 4/5):
 *  xs <576 | sm ≥576 | md ≥768 | lg ≥992 | xl ≥1200 | xxl ≥1400
 */

/* ---------- Safe area + base ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.theme-app {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.sidebar-open {
  overflow: hidden;
  touch-action: none;
}

.app-shell,
.app-main,
.app-content,
.card,
.card-body,
.table-responsive,
.form-row,
.row {
  min-width: 0;
  max-width: 100%;
}

/* Sticky topbar above content; keep safe area under notches */
.app-topbar {
  padding-top: env(safe-area-inset-top);
  z-index: 30;
}
.sidebar-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.4rem 0.65rem;
}

/* ---------- Tables: never blow out the viewport ---------- */
.app-content .card-body > .table,
.app-content .card-body > table.table,
.app-content form > .table,
.app-content .tab-content .table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.app-content .table-responsive {
  margin-bottom: 0.5rem;
  border-radius: var(--radius-md, 7px);
}
.app-content .table th,
.app-content .table td {
  white-space: nowrap;
}
.app-content .table td.text-wrap,
.app-content .table td.wrap,
.app-content .table .text-wrap {
  white-space: normal;
  min-width: 10rem;
}

/* ---------- Forms & filters ---------- */
.app-content .form-control,
.app-content .custom-select,
.app-content select.form-control,
.app-content textarea.form-control {
  max-width: 100%;
}
.app-content .select2-container {
  width: 100% !important;
  max-width: 100%;
}
.app-content .input-group {
  flex-wrap: wrap;
}
.app-content .btn-toolbar,
.app-content .dt-buttons,
.app-content .dataTables_wrapper .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.app-content .btn-group {
  flex-wrap: wrap;
}

/* Action rows under forms */
.app-content .form-actions,
.app-content .card-footer,
.app-content .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.app-content .form-actions .btn,
.app-content .card-footer .btn {
  margin: 0;
}

/* ---------- DataTables ---------- */
div.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
  float: none !important;
  text-align: left !important;
  margin-bottom: 0.5rem;
}
div.dataTables_wrapper div.dataTables_filter input {
  width: auto;
  max-width: 100%;
  display: inline-block;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-height: 36px;
  padding: 0.35rem 0.65rem !important;
}

/* ---------- Modals / dropdowns on small screens ---------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem);
  }
  .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }
  .app-topbar .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 1rem));
  }
}

/* ---------- Dashboard grids ---------- */
.inventory-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.tank-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---------- Kanban / horizontal boards ---------- */
.tanker-yard-board .kanban-board {
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
.tanker-yard-board .kanban-column {
  scroll-snap-align: start;
}

/* ---------- Tablet (≤991.98px) ---------- */
@media (max-width: 991.98px) {
  /* Off-canvas sidebar: see sidebar.css */
  .app-topbar {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .topbar-left,
  .topbar-right {
    gap: 8px;
  }
  .app-breadcrumb {
    padding: 8px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .app-content {
    padding: 14px 12px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .app-footer {
    padding: 12px;
    font-size: var(--fs-sm);
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .kpi-card .value {
    font-size: var(--fs-2xl);
  }
  .summary-card .value {
    font-size: var(--fs-3xl);
  }

  .tank-farm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Stack Bootstrap columns that are md+ */
  .app-content .form-row > [class*="col-"],
  .app-content .row > [class*="col-md-"],
  .app-content .row > [class*="col-lg-"],
  .app-content .row > [class*="col-xl-"] {
    margin-bottom: 0.65rem;
  }

  /* Page headers with actions */
  .app-content .d-flex.justify-content-between,
  .app-content .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Charts */
  #panel-sales-purchases canvas,
  #panel-month-overview canvas,
  #panel-cashflow canvas {
    max-height: 240px !important;
  }

  .drawer,
  .drawer.drawer-journey {
    width: 100vw !important;
    max-width: 100vw !important;
  }

}

/* ---------- Phone (≤575.98px) ---------- */
@media (max-width: 575.98px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .tank-farm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .inventory-summary-grid {
    grid-template-columns: 1fr;
  }
  .tank-grid {
    grid-template-columns: 1fr;
  }

  .app-content .btn:not(.btn-sm):not(.btn-link) {
    min-height: 42px;
  }
  .app-content .btn-sm {
    min-height: 36px;
  }

  /* Full-width primary actions on create/edit footers */
  .app-content .card-footer .btn-primary,
  .app-content .form-actions .btn-primary,
  .app-content form > .btn-primary.mt-3,
  .app-content form > .btn.btn-primary {
    width: 100%;
  }

  /* Hide less-critical table columns when marked */
  .table-mobile-hide-md,
  .hide-on-xs {
    display: none !important;
  }

  .tanker-yard-board .kanban-column {
    flex: 0 0 85vw;
    min-width: 85vw;
  }

  /* Livewire / barcode / receipt line items */
  .barcode-workbench .form-row > [class*="col-"],
  .purchase-form .form-row > [class*="col-"],
  .sale-form .form-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Large phone / small tablet landscape ---------- */
@media (max-width: 991.98px) and (orientation: landscape) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---------- Print: hide chrome ---------- */
@media print {
  .sidebar,
  .sidebar-backdrop,
  .sidebar-toggle,
  .app-topbar,
  .app-footer,
  .drawer,
  .drawer-backdrop,
  #nav-progress {
    display: none !important;
  }
  .app-shell,
  .app-main,
  .app-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}