/* Shared screen layout: keep overflow inside data tables, not the page. */
@media screen {
  .layout-page, .content-wrapper { min-inline-size: 0; }
  .row > *, .d-flex > *, .d-grid > * { min-inline-size: 0; }
  .table-responsive {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .table-responsive:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
  .content-wrapper :is(img, video, iframe) { max-inline-size: 100%; }
  .card :is(h1, h2, h3, h4, h5, h6, p), .breadcrumb-item { overflow-wrap: anywhere; }
  .card-header.d-flex, .card-footer.d-flex, .modal-footer { flex-wrap: wrap; gap: .75rem; }
  .pagination { flex-wrap: wrap; gap: .25rem; }
  .nav-tabs.flex-nowrap, .nav-pills.flex-nowrap { max-inline-size: 100%; overflow-x: auto; }
  .nav-tabs.flex-nowrap .nav-link, .nav-pills.flex-nowrap .nav-link { white-space: nowrap; }
  .modal-body { overflow-x: auto; }
  .modal-content { overflow-wrap: anywhere; }
  .navbar-notif-list { max-height: min(360px, 65dvh); }
  .auth-split-container > *, .auth-form-section, .auth-card-modern,
  .auth-form-row > *, .auth-location-grid > * { min-width: 0; }
  .auth-card-modern, .auth-hero-section { overflow-wrap: anywhere; }
  .auth-brand-row { flex-wrap: wrap; gap: .75rem; }
  .auth-page-split, .auth-page-forgot { min-height: 100dvh; }
}

@media screen and (max-width: 1199.98px) {
  .layout-menu { max-inline-size: calc(100vw - 3rem); }
  .layout-menu .menu-inner { overscroll-behavior-y: contain; }
  .fc .fc-header-toolbar { flex-wrap: wrap; gap: .75rem; }
  .fc .fc-toolbar-chunk { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
}

@media screen and (max-width: 767.98px) {
  /* 16px prevents Safari from zooming the page when focusing a field. */
  input.form-control, select.form-select, textarea.form-control,
  .form-control-modern, .form-select-modern { font-size: 1rem; }
  .form-control, .form-select { max-width: 100%; }
  .content-wrapper .input-group { flex-wrap: wrap; }
  .content-wrapper .input-group > :is(.form-control, .form-select) { min-width: 5rem; }
  .content-wrapper .input-group > .btn { width: auto; }
  .table .btn:not(.btn-icon), .btn-group > .btn { width: auto; }
  .table .d-flex { flex-wrap: nowrap; }
  .table .text-wrap { white-space: normal; }
  .table-responsive { margin-inline: 0; padding-inline: 0; }
  .modal-dialog { width: auto; margin: .5rem; max-width: calc(100% - 1rem); }
  .modal-footer > .btn { flex: 1 1 auto; width: auto; }
  .fc .fc-toolbar-title { overflow-wrap: anywhere; }
  .fc .fc-button-group { flex-wrap: wrap; }
  .fc .fc-button { min-height: 2.75rem; }
  .attendance-search-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-search-actions > .form-control { grid-column: 1 / -1; }
}

@media screen and (max-width: 575.98px) {
  .layout-navbar .nav-icon-btn, .layout-navbar .nav-link { min-height: 2.75rem; }
  .layout-navbar .nav-icon-btn { min-width: 2.75rem; }
  .navbar-nav-right { min-width: 0; }
  .navbar-notif-menu { max-width: calc(100vw - 1.5rem); }
  .attendance-search-actions { grid-template-columns: minmax(0, 1fr); }
  .attendance-date-filter .input-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-date-filter .input-group > .form-control { grid-column: 1 / -1; width: 100%; }
  .content-wrapper .input-group > .input-group-text { white-space: normal; }
  .auth-card, .auth-card-modern { padding: 1.25rem; }
  .auth-form-row { grid-template-columns: minmax(0, 1fr); }
  .invoice-box { padding: 1rem; margin-inline: .5rem; overflow-wrap: anywhere; }
}

@media (pointer: coarse) {
  .btn, .form-control, .form-select, .page-link { min-height: 2.75rem; }
  .btn-icon, .page-link { min-width: 2.75rem; }
}