/* Final responsive layer.
   Loaded last so page-specific mobile behavior stays predictable. */

html {
  min-width: 320px;
  overflow-x: hidden;
}

body,
main,
.view,
.panel,
.admin-shell,
.admin-page,
.registration-panel {
  min-width: 0;
}

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

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1023px) {
  body.admin-drawer-open {
    overflow: hidden;
  }

  .admin-sidebar {
    width: min(320px, 88vw) !important;
    max-width: 100%;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  .admin-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
  }

  .admin-shell,
  .admin-sidebar-collapsed .admin-shell {
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
  }

  .admin-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .admin-header-tools {
    grid-column: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
  }

  .admin-drawer-toggle {
    display: inline-grid !important;
    place-items: center;
  }

  .admin-page > .panel,
  .admin-page > section,
  .dashboard-card,
  .settings-card {
    min-width: 0;
  }

  .facility-table-wrap,
  .resident-table-wrap,
  .payment-table-wrap,
  .account-table-wrap,
  .table-wrap {
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  :root {
    scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .customer-mode main {
    width: 100% !important;
    padding: 10px !important;
  }

  #register-view.active,
  .registration-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .registration-panel {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .public-logo-strip {
    gap: 10px !important;
    padding: 8px 10px !important;
  }

  .public-logo-strip img {
    max-width: min(42vw, 150px) !important;
  }

  .public-logo-strip span {
    max-width: 48vw;
    overflow-wrap: anywhere;
    font-size: 0.74rem !important;
  }

  .wizard-stepper {
    gap: 5px !important;
  }

  .wizard-stepper li {
    min-width: 0 !important;
    padding-inline: 3px !important;
  }

  .wizard-stepper strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .facility-choice-card,
  .upload-card,
  .payment-total,
  .selected-facility-summary,
  .bank-details,
  .application-review-summary {
    min-width: 0 !important;
  }

  .facility-choice-card {
    padding: 12px !important;
  }

  .facility-card-head {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }

  .facility-choice-card strong,
  .facility-choice-card small,
  .facility-price,
  .upload-file-name {
    overflow-wrap: anywhere;
  }

  .facility-month-control button {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .payment-card,
  .payment-summary.live-summary,
  .payment-qr-panel,
  .upload-grid,
  .form-grid.two-col {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bank-qr {
    width: min(190px, 60vw) !important;
    margin-inline: auto;
  }

  .bank-details dl > div,
  .bank-details dd {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .bank-details dd {
    display: grid !important;
  }

  .bank-details dd button {
    width: fit-content;
  }

  .wizard-actions {
    bottom: 0 !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .wizard-actions button {
    min-height: 46px !important;
  }

  .public-portal-footer {
    margin-bottom: env(safe-area-inset-bottom) !important;
  }

  .admin-shell,
  .admin-sidebar-collapsed .admin-shell {
    padding: 10px !important;
  }

  .admin-header {
    position: sticky;
    top: 0;
    z-index: 30;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .admin-header h2 {
    overflow: hidden;
    font-size: clamp(1.05rem, 5vw, 1.3rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-header p,
  .admin-profile-static > div {
    display: none !important;
  }

  .admin-profile-static {
    padding: 0 !important;
  }

  .admin-profile-static > span,
  .notification-button,
  .admin-drawer-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .admin-page {
    width: 100%;
    padding-top: 10px;
  }

  .admin-page > .panel,
  .dashboard-card,
  .review-card,
  .review-document-card {
    padding: 14px !important;
    border-radius: 13px !important;
  }

  .section-heading,
  .compact-heading,
  .admin-page[data-admin-page="users"] > .panel > .section-heading {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .section-heading > button.primary,
  .admin-page[data-admin-page="users"] > .panel > .section-heading > button {
    width: 100%;
  }

  .kpi-grid,
  .summary-grid,
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .kpi-card,
  .summary-card,
  .stat-card {
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 14px !important;
  }

  .dashboard-layout,
  .admin-page[data-admin-page="dashboard"] .dashboard-layout,
  .settings-grid,
  .scanner-station-grid,
  .account-report-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-page[data-admin-page="dashboard"] .dashboard-left-column,
  .admin-page[data-admin-page="dashboard"] .dashboard-side {
    display: contents !important;
  }

  .admin-page[data-admin-page="dashboard"] .dashboard-card {
    min-height: 0 !important;
  }

  .chart-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .chart-row .chart-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .filters,
  .user-tools,
  .facility-table-tools,
  .notification-filters,
  .account-period-filters,
  .account-payment-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .filters label,
  .user-tools label,
  .facility-table-tools label,
  .account-period-filters label {
    min-width: 0 !important;
    width: 100%;
  }

  .filters :is(input, select, button),
  .user-tools :is(input, select, button),
  .facility-table-tools :is(input, select),
  .account-period-filters select {
    width: 100%;
    min-height: 44px;
  }

  .mobile-record-card,
  .facility-mobile-card,
  .resident-mobile-list article,
  .payment-mobile-list article,
  .email-item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .facility-mobile-card dl,
  .resident-mobile-list dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .facility-table-actions,
  .resident-table-actions,
  .record-actions {
    flex-wrap: wrap;
  }

  .table-pagination,
  .facility-pagination,
  .resident-pagination,
  .payment-pagination,
  .notification-pagination,
  .account-pagination {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }

  .table-pagination span,
  .facility-pagination span,
  .resident-pagination span,
  .payment-pagination span,
  .notification-pagination span,
  .account-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    text-align: center;
  }

  .review-page-header {
    padding: 14px !important;
  }

  .review-tabs {
    width: 100%;
    padding-inline: 4px;
    scrollbar-width: thin;
  }

  .review-tabs button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .facility-payment-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .review-payment-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .review-document-preview {
    height: clamp(280px, 76vw, 340px) !important;
  }

  .application-detail-view .application-review-actions {
    bottom: 0;
    width: calc(100% - 20px) !important;
    max-height: 45dvh;
    overflow-y: auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .application-detail-view .application-review-actions > button,
  .application-detail-view .approved-review-summary button {
    width: 100%;
  }

  .facility-edit-drawer,
  .manual-resident-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .facility-edit-drawer > header,
  .facility-edit-drawer > footer,
  .facility-drawer-body,
  .manual-resident-drawer > header,
  .manual-resident-drawer > footer,
  .manual-resident-body {
    padding-inline: 14px !important;
  }

  .facility-edit-drawer > footer,
  .manual-resident-drawer > footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .manual-resident-footer-actions {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .manual-resident-footer-actions button {
    min-height: 46px !important;
  }

  dialog,
  #confirm-dialog,
  #user-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
  }

  dialog .dialog-card,
  #confirm-dialog .dialog-card,
  #user-dialog .dialog-card {
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  #scanner-view.active {
    padding: 8px !important;
  }

  #scanner-view .scanner-panel {
    width: 100%;
    padding: 14px !important;
  }

  #scanner-view .scan-box {
    width: 100%;
    height: min(72vw, 320px) !important;
    min-height: 230px !important;
  }

  #scanner-view .scanner-unlock-row,
  #scanner-view .manual-scan {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #scanner-view .scanner-unlock-row button,
  #scanner-view .manual-scan button {
    width: 100%;
  }

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

@media (max-width: 479px) {
  .kpi-grid,
  .summary-grid,
  .admin-stat-grid,
  .account-summary-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .wizard-stepper strong {
    display: none !important;
  }

  .wizard-stepper li {
    min-height: 42px !important;
  }

  .facility-mobile-card dl,
  .resident-mobile-list dl,
  .applicant-field-grid,
  .activity-timeline,
  .verification-checklist {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .facility-payment-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .review-header-navigation,
  .review-header-actions,
  .document-tools,
  .approved-review-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .review-header-navigation button,
  .review-header-actions button,
  .document-tools button,
  .document-tools a {
    width: 100%;
  }

  .toast-region {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    max-width: none;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  #admin-login-panel {
    position: absolute;
    min-height: 100%;
    align-items: start;
    overflow-y: auto;
  }

  .manager-login-card {
    margin-block: 12px;
  }

  #scanner-view.active {
    padding-block: 8px !important;
  }

  #scanner-view .scan-box {
    height: min(52vh, 260px) !important;
    min-height: 190px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}