/* Small screens. Loaded last so these beat the list rules in splynx-ui.css
   and ic-v2.css. 768px is the tablet, 375px is the phone. AdminLTE collapses
   the sidebar at 767px; the block below starts one pixel sooner so a 768-wide
   window does not keep a 230px sidebar over the list. */

@media (max-width: 768px) {
  body.sidebar-mini .content-wrapper,
  body.sidebar-mini .right-side,
  body.sidebar-mini .main-footer {
    margin-left: 0 !important;
  }

  body.sidebar-mini:not(.sidebar-open) .main-sidebar,
  body.sidebar-mini:not(.sidebar-open) .left-side {
    -webkit-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }

  body.sidebar-mini.sidebar-open .main-sidebar,
  body.sidebar-mini.sidebar-open .left-side {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .spx-record-head,
  body.spx-app .content-header,
  body.spx-app .content-header-actions,
  .spx-toolbar-actions {
    flex-wrap: wrap;
  }

  .spx-toolbar-actions,
  body.spx-app .content-header-actions {
    margin-left: 0;
    width: 100%;
  }

  .spx-toolbar-actions .btn,
  body.spx-app .content-header-actions .btn {
    flex: 1 1 auto;
  }

  /* Five- and six-tile strips are one row on a desk. On a tablet they are
     two columns, not one leftover tile on a second line. */
  body.spx-app .spx-kpi-row,
  body.spx-app .spx-kpi-row:has(> .spx-kpi:nth-child(5):last-child),
  body.spx-app .spx-kpi-row:has(> .spx-kpi:nth-child(6):last-child),
  body.ic-v2 .v2-band,
  body.ic-v2 .v2-band:has(> :nth-child(5):last-child),
  body.ic-v2 .v2-band:has(> :nth-child(6):last-child),
  body.ic-v2 .spx-kpi-row,
  body.ic-v2 .spx-kpi-row:has(> .spx-kpi:nth-child(5):last-child),
  body.ic-v2 .spx-kpi-row:has(> .spx-kpi:nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.spx-app form.spx-filters,
  body.spx-app .vhost-table-toolbar,
  body.spx-app .stmt-grid,
  body.spx-app .stmt-paths,
  body.spx-app .stmt-fields {
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  body.spx-app .vhost-table-toolbar .dataTables_filter,
  body.spx-app .vhost-table-toolbar .dataTables_filter input,
  body.spx-app form.spx-filters input.form-control,
  body.spx-app form.spx-filters select.form-control {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  /* The table scrolls inside the card. The page itself does not. */
  body.spx-app .content-wrapper {
    overflow-x: hidden;
  }

  body.spx-app .box.spx-card > .box-body:has(table),
  body.spx-app .dataTables_wrapper,
  body.spx-app .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-dialog,
  .spx-modal-dialog,
  .spx-record-modal-dialog,
  .dm-confirm {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-body,
  .spx-modal-body,
  .spx-record-modal-body,
  .dm-confirm-body {
    max-height: calc(100dvh - 140px);
  }

  .dm-overlay {
    padding: 8px;
  }
}

@media (max-width: 375px) {
  body.spx-app .spx-kpi-row,
  body.spx-app .spx-kpi-row:has(> .spx-kpi:nth-child(5):last-child),
  body.spx-app .spx-kpi-row:has(> .spx-kpi:nth-child(6):last-child),
  body.ic-v2 .v2-band,
  body.ic-v2 .v2-band:has(> :nth-child(5):last-child),
  body.ic-v2 .v2-band:has(> :nth-child(6):last-child),
  body.ic-v2 .spx-kpi-row,
  body.ic-v2 .spx-kpi-row:has(> .spx-kpi:nth-child(5):last-child),
  body.ic-v2 .spx-kpi-row:has(> .spx-kpi:nth-child(6):last-child) {
    grid-template-columns: 1fr;
  }

  body.sidebar-mini .content-wrapper {
    padding-right: 8px;
    padding-bottom: 52px;
  }
}

/* An export button floated in a card header used to run past the card edge.
   This is not only a phone rule: the float does it on a desk too. */
body.spx-app .box-header.with-border:has(> a.btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

body.spx-app .box-header.with-border:has(> a.btn) > .box-title {
  float: none;
  flex: 1 1 auto;
}

body.spx-app .box-header.with-border:has(> a.btn) > a.btn {
  float: none !important;
  margin-left: auto;
}

@media (max-width: 768px) {
  body.spx-app .box-header.with-border:has(> a.btn) > a.btn {
    margin-left: 0;
  }
}