/* Shared layout constraints: contain wide records at the table, never at the page. */
.page-container :where(.grid) > *,
.page-container :where(.flex) > :where(div, section, article, form, dl, fieldset) { min-width: 0; }
.page-container :where(.overflow-x-auto, .table-scroll, .ess-table-container, .att-table-wrap, .pr-table-wrap, .rep-table-wrap) {
  position: relative;
  max-width: 100%; min-width: 0; overscroll-behavior-x: contain;
}
.page-container :where(p, dd, h2, h3, label, .helptext, .errorlist) { overflow-wrap: anywhere; }
.page-container textarea { resize: vertical; }
.page-container input, .page-container select, .page-container textarea { max-width: 100%; }
.header-actions { display: contents; }
.mobile-menu-close { display: none; }
.app-sidebar { height: 100dvh; max-height: 100dvh; }
.app-modal { max-height: 100dvh; }
.modal-panel { margin-inline: auto; }
.modal-heading, .modal-footer { flex-shrink: 0; }
.modal-footer { flex-wrap: wrap; }
.modal-heading [data-modal-close] { min-width: 44px; min-height: 44px; }
body:has(dialog[open]) { overflow: hidden; }
/* Hidden off-canvas drawers must not expand the document's scrollable area. */
.att-drawer:not(.is-open), .dash-drawer:not(.is-open) { visibility: hidden; }
@media (max-width: 767px) {
  .app-main .app-header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; padding: .75rem 1rem; }
  .app-header > div:first-child { gap: .6rem; }
  .app-header h1 { white-space: normal; overflow: visible; font-size: 1.5rem; overflow-wrap: anywhere; }
  .header-controls { display: contents; }
  .header-controls > details { grid-row: 1; }
  .header-controls > details:first-child { grid-column: 2; }
  .header-controls > details:last-child { grid-column: 3; }
  .header-controls > nav { grid-column: 1 / -1; }
  .header-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; grid-row: 2; gap: .5rem; width: 100%; }
  .header-actions:empty { display: none; }
  .header-actions > div { display: flex; flex-wrap: wrap; width: 100%; gap: .5rem; }
  .header-actions :where(a, button) { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
  .app-header .dropdown-menu { position: absolute; top: calc(100% - .25rem); right: 1rem; width: calc(100vw - 2rem); max-width: 22rem; max-height: 65dvh; }
  .header-controls > details { position: static; }
  .mobile-menu-button, .dropdown-trigger { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .mobile-menu-button { padding-inline: .65rem; }
  .app-sidebar, .app-sidebar.is-collapsed { width: min(21rem, calc(100vw - 1rem)); }
  .mobile-menu-close { position: absolute; right: .5rem; top: .5rem; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: .4rem; color: #e2e8f0; font-size: 1.8rem; }
  .app-sidebar .sidebar-brand, .app-sidebar.is-collapsed .sidebar-brand { padding-right: 3.75rem; }
  .sidebar-footer { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .sidebar-scroll { overscroll-behavior-y: contain; }
  .sidebar-link, .nav-group-panel .sidebar-link, .profile-link { min-height: 44px; }
  .page-heading-title { font-size: 1.5rem; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .page-actions > *, .filter-toolbar > * { max-width: 100%; }
  body input:not([type=checkbox]):not([type=radio]), body select, body textarea { font-size: 16px; min-height: 44px; min-width: 0; }
  body :where(button, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-text, .ess-action-btn, .app-tab, .row-action-menu > summary) { min-height: 44px; }
  body :where(.btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-text) { font-size: 15px; white-space: normal; text-align: center; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; }
  input[type=file] { width: 100%; }
  input[type=file]::file-selector-button { min-height: 44px; max-width: 100%; }
  .app-modal { padding: .5rem; width: 100%; }
  .modal-panel { max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem); }
  .modal-heading, .modal-body, .modal-footer { padding: .85rem; }
  .modal-footer > :where(button, input) { flex: 1 1 7rem; }
  .dash-modal, .pr-modal { max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem); }
  .dash-modal-footer, .pr-modal-footer, .att-drawer-foot { flex-wrap: wrap; }
  .dash-modal-footer > button, .pr-modal-footer > button { flex: 1 1 8rem; }
  .dash-modal-close, .pr-modal-close, .row-action-menu > summary { min-width: 44px; min-height: 44px; }
  .att-drawer, .dash-drawer { max-width: 100%; height: var(--visual-viewport-height, 100dvh); bottom: auto; }
  .att-drawer-body, .dash-drawer-body { min-height: 0; overscroll-behavior: contain; }
  .att-drawer-head, .att-drawer-body, .att-drawer-foot { padding: 1rem; }
  .att-drawer-grid dd { overflow-wrap: anywhere; }
  #roleForm .section-card-header { flex-wrap: wrap; padding: .85rem; gap: .75rem; }
  #roleForm .section-card-body { padding: .85rem; }
  #roleForm .sticky-summary-bar { position: static; }
  #roleForm .perm-action-row label { min-height: 44px; }
  .payslip-document { padding: 1rem; }
  .payslip-document .flex { flex-wrap: wrap; gap: .5rem; }
  .payslip-document .font-mono { overflow-wrap: anywhere; }
  .payslip-document .text-2xl { font-size: 1.5rem; }
  .login-form-panel .login-field input { font-size: 16px !important; }
  .login-form-panel #id_otp { font-size: 24px !important; letter-spacing: .25em !important; }
  .login-form-panel .login-password-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .att-drawer, .dash-drawer { transition: none; }
}
/* Utility CSS is generated at runtime; component selectors take precedence. */
.app-header .header-controls { min-width: 0; flex-shrink: 1; }
.app-header .header-actions > div { flex-wrap: wrap; max-width: 100%; }
@media (min-width: 768px) {
  .app-header .header-controls { justify-content: flex-end; }
}
@media (max-width: 767px) {
  .app-header .header-controls { display: contents; }
  .app-header .header-actions { display: flex; }
  .app-header .header-actions > .ess-quick-actions { display: grid; }
}
.rep-chart-container canvas { display: block; max-width: 100%; }
@media (max-width: 767px) {
  .page-container table .hide-mobile { display: table-cell !important; }
  .row-menu-trigger { min-width: 44px; min-height: 44px; }
}
body .viewport-action-menu {
  position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 1rem);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem); overflow-y: auto; z-index: 70;
}
body:has(.dash-modal-overlay.is-open), body:has(.pr-modal-overlay.is-open),
body:has(.dash-drawer.is-open), body:has(.att-drawer.is-open) { overflow: hidden; }
.dash-modal-body, .pr-modal-body { overscroll-behavior: contain; }
@media (max-width: 767px) {
  .dash-drawer-footer { flex-wrap: wrap; }
  #createUserModal [onclick="closeCreateUserModal()"] { min-width: 44px; min-height: 44px; }
}