/*
  Responsive and PWA polish layer.
  Loaded last so shared fixes can stabilize page-specific inline styles.
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

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

.main-wrapper,
.content-area,
.topbar,
.topbar-left,
.topbar-right,
.card,
.glass-card,
.modal-content {
  min-width: 0;
}

.content-area {
  max-width: 100% !important;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-responsive > .table,
.table-responsive > table {
  margin-bottom: 0;
}

.table th,
.table td {
  overflow-wrap: normal;
}

.topbar {
  max-width: 100%;
}

.topbar-search,
.topbar-search-shell,
.topbar-search-input {
  min-width: 0;
}

.topbar-notify-menu,
.dropdown-menu {
  max-width: min(420px, calc(100vw - 24px));
}

.topbar-notify-list {
  max-height: min(520px, 64vh);
  overflow-y: auto;
}

.modal {
  --bs-modal-width: min(720px, calc(100vw - 24px));
}

.modal-dialog {
  max-width: var(--bs-modal-width);
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  overflow-x: hidden;
}

.btn,
.form-control,
.form-select,
.input-group-text {
  min-width: 0;
}

.btn-group {
  max-width: 100%;
}

.table-responsive .btn-group {
  white-space: nowrap;
}

:is(
  .students-filter,
  .students-filter-advanced-body,
  .enr-filter,
  .enr-filter-advanced-grid,
  .pay-filter,
  .pay-filter-tools,
  .pay-filter-row,
  .pay-filter-advanced-body,
  .rc-filter-grid,
  .rc-filter-advanced-grid,
  .mis-filter-grid,
  .mis-filter-dates,
  .dash-filter-card,
  .usr-toolbar .row,
  .sch-filter,
  .bat-filter,
  .tgt-filter,
  .crs-filter
) {
  min-width: 0;
}

:is(
  .students-active-filters,
  .enr-active-filters,
  .pay-active-filters,
  .rc-active-filters,
  .mail-view-filters,
  .dash-filter-presets,
  .pay-filter-shortcuts
) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

:is(
  .students-hero,
  .enr-hero,
  .pay-hero,
  .usr-hero,
  .rep-hero,
  .tgt-hero,
  .bat-hero,
  .crs-hero,
  .sch-hero,
  .audit-hero,
  .int-hero,
  .sv-hero,
  .mail-hero
) h1,
:is(
  .students-hero,
  .enr-hero,
  .pay-hero,
  .usr-hero,
  .rep-hero,
  .tgt-hero,
  .bat-hero,
  .crs-hero,
  .sch-hero,
  .audit-hero,
  .int-hero,
  .sv-hero,
  .mail-hero
) p {
  overflow-wrap: anywhere;
}

.pwa-network-status {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  max-width: min(380px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid rgba(81, 65, 135, 0.24);
  border-radius: 12px;
  background: #182033;
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.pwa-network-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.is-pwa-standalone body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1199.98px) {
  :is(.students-stat-grid, .enr-stat-grid, .pay-stat-grid, .app-kpi-grid, .mis-summary-grid, .dash-summary-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mail-grid > [class*="col-"] {
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .main-wrapper {
    display: block !important;
  }

  .sidebar {
    left: 0 !important;
    width: min(var(--app-sidebar-width, 292px), calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px);
    transform: translateX(calc(-100% - 16px));
    transition: transform 180ms ease !important;
    z-index: 1050 !important;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .content-area {
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1020;
  }

  .topbar-left,
  .topbar-right {
    min-width: 0;
  }

  .topbar-right {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :is(
    .students-filter,
    .enr-filter,
    .pay-filter,
    .pay-filter-tools,
    .pay-filter-row,
    .rc-filter-grid,
    .mis-filter-grid,
    .dash-filter-card,
    .usr-toolbar .row
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(.enr-filter-actions, .pay-filter-actions, .students-filter-actions) {
    width: 100%;
    justify-content: stretch !important;
  }

  :is(.enr-filter-actions, .pay-filter-actions, .students-filter-actions) .btn {
    flex: 1 1 auto;
  }

  .mail-shell .mail-read-toolbar {
    align-items: stretch !important;
  }
}

@media (max-width: 767.98px) {
  .content-area {
    padding-top: 12px !important;
  }

  .topbar {
    gap: 8px !important;
  }

  .topbar-search {
    flex-basis: 100% !important;
  }

  .topbar-search-input {
    min-height: 40px;
  }

  :is(
    .students-stat-grid,
    .enr-stat-grid,
    .pay-stat-grid,
    .app-kpi-grid,
    .mis-summary-grid,
    .dash-summary-grid,
    .students-form-grid,
    .enr-summary-grid,
    .pay-summary-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(
    .students-filter-advanced-body,
    .enr-filter-advanced-grid,
    .pay-filter-advanced-body,
    .rc-filter-advanced-grid,
    .mis-filter-dates
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(.students-list-foot, .enr-list-foot, .pay-list-foot) .btn-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  :is(.students-list-foot, .enr-list-foot, .pay-list-foot) .btn-group .btn {
    border-radius: 9px !important;
  }

  .mail-shell .mail-compose-btn,
  .mail-shell .mail-read-toolbar .btn {
    width: 100%;
  }

  .mail-shell .mail-view-filter {
    flex: 0 0 auto;
  }

  .table-responsive {
    border-radius: 12px !important;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 13px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .content-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .glass-card,
  :is(.students-panel, .enr-panel, .sch-panel, .bat-panel, .rep-panel, .tgt-panel, .pay-panel, .crs-panel, .usr-panel, .mail-panel) {
    border-radius: 12px !important;
  }

  :is(.students-hero, .enr-hero, .pay-hero, .usr-hero, .rep-hero, .tgt-hero, .bat-hero, .crs-hero, .sch-hero, .audit-hero, .int-hero, .sv-hero, .mail-hero) {
    padding: 14px !important;
  }

  :is(.students-hero, .enr-hero, .pay-hero, .usr-hero, .rep-hero, .tgt-hero, .bat-hero, .crs-hero, .sch-hero, .audit-hero, .int-hero, .sv-hero, .mail-hero) h1 {
    font-size: 1.35rem !important;
  }

  .btn {
    white-space: normal !important;
  }

  .table-responsive .btn {
    white-space: nowrap !important;
  }

  .topbar-notify-menu {
    position: fixed !important;
    inset: auto 12px 12px 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: 78vh;
    overflow-y: auto;
  }

  .pwa-network-status {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 20px);
  }
}