/**
 * Responsive layout for common laptop and smartphone viewports:
 * laptops ~1366–1920, 1536×864, 1440×900; phones ~360×640–414×896.
 */

/* --- Base: prevent horizontal page scroll --- */
.architect-ui .app-main {
  overflow-x: clip;
}

.architect-ui .app-content .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Tables inside cards: horizontal scroll when needed */
.architect-ui .card-body.p-0.table-responsive,
.architect-ui .table-responsive.card-body {
  -webkit-overflow-scrolling: touch;
}

.architect-ui .card-body.p-0.table-responsive > .table {
  margin-bottom: 0;
}

.architect-ui .table-responsive .table {
  min-width: 36rem;
}

.architect-ui .table .btn-sm {
  white-space: nowrap;
}

/* Card toolbars */
.architect-ui .card-header.d-flex {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.architect-ui .card-header.d-flex .ms-auto {
  margin-left: 0 !important;
  width: 100%;
}

/* Filter panels: collapsed on phone, always open from md up */
.architect-ui .filters-panel.collapse:not(.show) {
  display: none;
}

.architect-ui .filters-panel.collapse.show,
.architect-ui .filters-panel.collapse.row {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
}

.architect-ui .filters-panel.collapse.show {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (min-width: 768px) {
  .architect-ui .filters-panel.collapse {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    visibility: visible !important;
  }

  .architect-ui .filters-toggle {
    display: none !important;
  }
}

/* Pagination: hide numbered pages on very small screens */
@media (max-width: 575.98px) {
  .architect-ui .pagination .page-item {
    display: none;
  }

  .architect-ui .pagination .page-item.active,
  .architect-ui .pagination .page-item:first-child,
  .architect-ui .pagination .page-item:nth-child(2),
  .architect-ui .pagination .page-item:nth-last-child(2),
  .architect-ui .pagination .page-item:last-child {
    display: list-item;
  }

  .architect-ui .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Breadcrumb: wrap on narrow screens */
.architect-ui .app-content-header .breadcrumb {
  flex-wrap: wrap;
  justify-content: flex-start !important;
  float: none !important;
  margin-top: 0.25rem;
}

/* --- Smartphone (≤575px): 360×640, 360×800 --- */
@media (max-width: 575.98px) {
  .architect-ui .app-content .container-fluid {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .architect-ui .app-content-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .architect-ui .app-content-header h3 {
    font-size: 1.15rem;
  }

  .architect-ui .app-header .navbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .architect-ui .btn-sm {
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
  }

  .architect-ui .form-control,
  .architect-ui .form-select {
    font-size: 1rem;
  }

  .architect-ui .widget-numbers {
    font-size: 1.75rem;
  }

  .architect-ui .card-footer .pagination .page-link {
    padding: 0.45rem 0.65rem;
  }

  .architect-ui .table-responsive .table {
    font-size: 0.875rem;
  }

  .architect-ui .card-header.d-flex .btn {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .architect-ui .card-header.d-flex .ms-auto {
    margin-left: auto !important;
    width: auto;
  }
}

/* --- Large phone / small tablet (576–767): 390×844, 414×896 --- */
@media (max-width: 767.98px) {
  .architect-ui .app-sidebar {
    --lte-sidebar-width: min(85vw, 280px);
  }

  .architect-ui .login-box {
    width: 100%;
    max-width: 22rem;
  }
}

/* --- Tablet / small laptop (768–991): 768, 864, 1366 scaled --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .architect-ui .app-content .container-fluid {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

/* --- Laptop (992–1535): 1366×768, 1536×864, 1440×900, 1920×1080 --- */
@media (min-width: 992px) and (max-width: 1535.98px) {
  .architect-ui .table-responsive .table {
    min-width: 0;
  }
}

/* --- Wide / QHD (≥1536): 2560×1440 — cap content width for readability --- */
@media (min-width: 1536px) {
  .architect-ui .app-content > .container-fluid {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Optional utility: hide table columns below breakpoints */
@media (max-width: 767.98px) {
  .architect-ui .d-none-mobile-cell {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .architect-ui .d-none-tablet-cell {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .architect-ui .d-none-laptop-cell {
    display: none !important;
  }
}

.architect-ui .reports-chart-wrap {
  min-height: 12rem;
  position: relative;
}

@media (max-width: 575.98px) {
  .architect-ui .reports-chart-wrap {
    min-height: 10rem;
  }

  .architect-ui .reports-chart-wrap canvas {
    max-height: 220px;
  }
}