/* Mobile-only layout overlay. Loaded after the app's existing styles. */
@media (max-width: 760px) {
  :is(html, body, .app-shell, .main, .panel, .login-shell, .login-card, .expense-page) {
    max-width: 100%;
    min-width: 0;
  }

  :is(img, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    a.button,
    a.btn
  ) {
    min-height: 44px;
    min-width: 44px;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

  :is(
    .app-header,
    .expense-header,
    .header-actions,
    .expense-header-actions,
    .attendance-toolbar,
    .panel-actions,
    .row-actions,
    .modal-head,
    .modal-actions,
    .expense-row-actions,
    .expense-action-buttons,
    .expense-batch-edit-actions,
    .panel-toolbar
  ) {
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap !important;
  }

  :is(
    .form-grid,
    .bottom-grid,
    .source-detail-grid,
    .expense-batch-shared-grid,
    .expense-review-summary,
    .slip-summary,
    .audit-kpis,
    .official-grid,
    .signature-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(
    .table-wrap,
    .attendance-table-wrap,
    .expense-table-wrap,
    .expense-category-table-wrap,
    .expense-history-list,
    .audit-list
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-backdrop, .slip-backdrop, .expense-evidence-modal, .expense-action-modal) {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

  :is(.modal, .slip-modal, .expense-evidence-dialog, .expense-action-dialog, dialog, [role="dialog"]) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto;
  }
}

@media (max-width: 420px) {
  :is(.header-actions, .expense-header-actions, .modal-actions, .expense-action-buttons) > button {
    flex: 1 1 100%;
  }
}