/* Loaded last; screen-only rules preserve printed reports. */
.layout > .container { width: 100%; min-width: 0; }
.row > *, .page-title > *, .card, .dashboard-panel { min-width: 0; }
.modal { z-index: 100; overflow-y: auto; overscroll-behavior: contain; }
.modal > div { max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal.wide > div { max-height: none; }
.toast { z-index: 200; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible { outline: 3px solid #168fbd; outline-offset: 3px; }

@media screen and (max-width: 760px) {
  .layout, .login-page { min-height: 100svh; }
  .container { margin: 18px auto; padding: 0 14px; }
  .app-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; height: auto; }
  .dashboard-brand { min-width: 0; gap: 8px; }
  .dashboard-brand .sapp-mark { flex-shrink: 0; width: 36px; }
  .dashboard-brand span { display: block; max-width: 230px; font-size: 9px; }
  .top .user { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
  #logout { grid-column: 2; grid-row: 1; }
  .app-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; white-space: normal; gap: 6px; padding-bottom: 12px; }
  .app-tabs button { border-radius: 8px; padding: 10px 6px; border: 1px solid var(--line); background: #fff; }
  .app-tabs button.active { background: #e5f7fc; border: 1px solid var(--blue); }
  button { min-height: 44px; touch-action: manipulation; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
  .field input[type=file] { font-size: 14px; }
  .field input[type=file]::file-selector-button { max-width: 100%; }
  .row { flex-direction: column; gap: 0; }
  .page-title { flex-direction: column; align-items: stretch; }
  .page-title h1 { font-size: 24px; overflow-wrap: anywhere; }
  .page-title p { margin-bottom: 0; }
  .page-title > .actions { margin-top: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px; }
  .card h2, .card p, .welcome h1, .dashboard-panel, .department-group h2 { overflow-wrap: anywhere; }
  .actions { gap: 10px; }
  .actions > button, .actions > a { flex: 1 1 140px; text-align: center; }
  .actions > a > button { width: 100%; height: 100%; }
  .dashboard { padding: 0 0 16px; }
  .welcome { padding: 6px 0 20px; }
  .dash-card { min-height: 96px; padding: 18px; gap: 12px; }
  .dash-card > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
  .dashboard-panel { padding: 20px; }
  .summary { flex-wrap: wrap; gap: 8px; }
  .department-group h2 { flex-wrap: wrap; }

  /* Each record becomes a labelled card; the same DOM remains a table on desktop. */
  .table-wrap:has(.mobile-cards) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .mobile-cards, .mobile-cards tbody { display: block; width: 100%; min-width: 0; }
  .mobile-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-cards tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; }
  .mobile-cards td { display: block; padding: 9px 0; overflow-wrap: anywhere; }
  .mobile-cards td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
  .mobile-cards td:not([data-label])::before, .mobile-cards td[data-label=""]::before { display: none; }
  .mobile-cards td:last-child { border-bottom: 0; }
  .mobile-cards td .actions { margin: 0; }
  .mobile-cards td > button { margin: 4px 4px 4px 0; }

  .modal, .modal.wide { display: block; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal > div, .modal.wide > div { width: 100%; max-height: none; overflow: visible; margin: 0 auto; padding: 20px 16px; border-radius: 12px; overflow-wrap: anywhere; }
  .modal h2 { font-size: 21px; }
  .modal .no-print[style] { float: none !important; text-align: right; margin-bottom: 12px; }
  .toast { right: 16px; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .app-footer { padding: 22px 16px max(22px, env(safe-area-inset-bottom)); overflow-wrap: anywhere; }
  .app-footer button, .login-footer-link { min-height: 44px; display: inline-flex; align-items: center; }
  .login-page { padding: 20px 16px; }
  .login-header { flex-wrap: wrap; gap: 12px; }
  .login-context { text-align: left; }
  .login-center { padding: 24px 0; }
  .login-card { padding: 28px 22px; }
  .login-card .field input { font-size: 16px; height: 46px; }
  .password-toggle { width: 44px; height: 44px; }
  .login-submit { width: 100%; min-height: 46px; }
  .forgot { min-height: 44px; }
}