/* High-density phone layout shared by every application screen. */
@media (max-width: 767.98px) {
  body { font-size: 14px; line-height: 1.35; }
  .app-main { padding-top: 68px; padding-bottom: 96px; }
  .content-pad { padding-left: 9px !important; padding-right: 9px !important; }
  .content-width { max-width: 100%; }

  .page-head,
  .employee-home-head {
    min-height: 0;
    gap: 8px;
    margin-bottom: 10px;
  }
  .page-title { font-size: 1.38rem; line-height: 1.08; }
  .eyebrow { margin-bottom: 2px !important; font-size: .6rem; }
  .section-title { font-size: .98rem; }
  .section-row { margin: 13px 0 6px; }
  .section-row h2 { font-size: .96rem; }

  .card { border-radius: 11px; box-shadow: 0 3px 11px rgba(18,50,86,.055); }
  .claim-card,
  .mobile-form-card,
  .filter-panel,
  .stat-card { padding: 9px 10px; }
  .mobile-form-card { margin-bottom: 7px; }
  .card > hr { margin: 8px 0; }

  .form-label { margin-bottom: 4px; font-size: .75rem; }
  .form-control,
  .form-select,
  .input-group-text { min-height: 40px; border-radius: 9px; font-size: 16px; }
  textarea.form-control { min-height: 76px; }
  .form-hint { margin-top: 3px; font-size: .7rem; }
  .filter-panel .row { --bs-gutter-x: .4rem; --bs-gutter-y: .4rem; }

  .btn { min-height: 40px; padding: .42rem .68rem; border-radius: 9px; font-size: .82rem; }
  .btn-sm { min-height: 32px; padding: .28rem .52rem; font-size: .72rem; }
  .btn-lg { min-height: 46px; }
  .status-badge { padding: 4px 7px; font-size: .62rem; }

  .meta-grid { gap: 6px 9px; }
  .meta-label { font-size: .64rem; }
  .meta-value { font-size: .78rem; }
  .claim-number { font-size: .85rem; }
  .claim-amount { font-size: 1rem; }
  .empty-state { min-height: 105px; padding: 22px 12px; }

  .record-pagination { gap: 7px; margin-top: 9px; padding: 7px 8px; border-radius: 10px; }
  .record-page-summary { font-size: .68rem; }
  .record-page-controls { gap: 3px; }
  .record-page-controls a,
  .record-page-controls span { min-width: 31px; height: 31px; border-radius: 8px; font-size: .72rem; }

  .expense-mobile-list,
  .trip-card-list,
  .home-expense-list,
  .notification-list,
  .review-list,
  .record-card-grid { gap: 4px !important; }
  .expense-mobile-row { grid-template-columns: 39px minmax(0,1fr); gap: 7px; padding: 7px 8px; }
  .expense-date-tile { padding: 4px; border-radius: 8px; }
  .expense-date-tile strong { font-size: .94rem; }
  .expense-date-tile small { font-size: .55rem; }
  .expense-row-main > strong { font-size: .84rem; }
  .expense-row-main > span { font-size: .7rem; }
  .expense-row-main small { font-size: .62rem; }
  .expense-row-end { gap: 3px; }
  .expense-row-end b { font-size: .84rem; }

  body[data-path="/claims"] .claim-list-page .claim-compact-row {
    min-height: 64px;
    gap: 4px 8px;
    padding: 6px 8px;
  }
  body[data-path="/claims"] .claim-row-reference small { font-size: .66rem; }
  body[data-path="/claims"] .claim-row-amount strong { font-size: .86rem; }
  body[data-path="/claims"] .claim-row-actions { gap: 3px; }
  body[data-path="/claims"] .claim-row-actions .btn { min-width: 52px; min-height: 31px; }

  body[data-path="/approvals"] .peer-review-list-row { min-height: 58px; padding: 6px 8px 6px 12px; }
  body[data-path="/approvals"] .peer-list-employee .avatar { width: 30px; height: 30px; flex-basis: 30px; }
  body[data-path="/approvals"] .peer-list-action { width: 30px; height: 30px; min-height: 30px; }

  body[data-path="/notifications"] .notification-row { min-height: 46px; padding: 6px 8px; }
  body[data-path="/notifications"] .notification-row strong { font-size: .76rem; }
  body[data-path="/notifications"] .notification-message { font-size: .68rem; }

  .trip-mobile-card { padding: 7px 9px; }
  .trip-mobile-card h2 { margin-top: 2px; font-size: .86rem; }
  .trip-card-stats { gap: 8px; margin-top: 4px; padding-top: 4px; font-size: .62rem; }
  .trip-summary-month-filter { gap: 7px; padding: 9px; }
  .trip-summary-hero { padding: 12px; }
  .trip-summary-overview { padding-bottom: 10px; }
  .trip-employee-grid { padding-top: 9px; }
  .trip-employee-summary { padding: 9px; }
  .trip-expense-summary-list > a { min-height: 48px; padding: 5px 7px; }

  .record-card-grid .compact-record-card,
  .record-card-grid .department-record-card { gap: 4px 7px; min-height: 52px; padding: 6px 8px; }
  .responsive-data-table tr,
  body[data-path="/admin/users"] table tr,
  body[data-path="/admin/projects"] table tr,
  body[data-path="/admin/audit-logs"] table tr { margin: 0 0 4px; padding: 6px 8px; border-radius: 9px; }
  .responsive-data-table td,
  body[data-path="/admin/users"] table td,
  body[data-path="/admin/projects"] table td,
  body[data-path="/admin/audit-logs"] table td { padding: 4px 0 !important; }

  .record-expense-hero { min-height: 78px; gap: 10px; padding: 11px; border-radius: 13px; }
  .record-expense-hero > span { width: 43px; height: 43px; border-radius: 12px; font-size: 1.8rem; }
  .record-expense-hero strong { font-size: 1.05rem; }
  .employee-home-actions { gap: 6px; margin: 7px 0; }
  .employee-home-actions a { padding: 8px; }
  .employee-month-strip { margin: 8px 0; border-radius: 10px; }
  .employee-month-strip > span { padding: 8px 9px; }
  .active-trip-grid { gap: 5px; }
  .active-trip-grid a { min-height: 96px; padding: 8px; }
  .home-expense-list > a { padding: 7px 9px; }
}

/* Final interaction and visual polish for touch screens. */
@media (max-width: 767.98px) {
  html { scroll-behavior: smooth; }
  body.authenticated { overflow-x: hidden; background: linear-gradient(180deg,#f4f8fc 0,#eef3f8 100%); }

  .topbar {
    border-bottom-color: rgba(190,205,220,.72);
    background: rgba(255,255,255,.94);
    box-shadow: 0 4px 16px rgba(18,50,86,.07);
  }
  .topbar .brand { min-width: 0; }
  .topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-alert-button { border: 1px solid #e1e9f1; background: #f4f8fc; }

  .card { border-color: #d8e3ed; }
  a.card,
  button,
  .btn,
  .record-page-controls a,
  .employee-bottom-nav a,
  .bottom-nav a { transition: transform .12s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease; }
  a.card:active,
  button:active,
  .btn:active { transform: scale(.985); }

  .form-control,
  .form-select { background-color: #fff; }
  .form-control:focus,
  .form-select:focus { border-color: #4d94e8; box-shadow: 0 0 0 3px rgba(23,105,224,.11); }
  .btn-primary { box-shadow: 0 4px 11px rgba(23,105,224,.2); }
  .btn-outline-primary,
  .btn-outline-secondary { background: rgba(255,255,255,.72); }

  .employee-bottom-nav,
  .bottom-nav {
    border-top-color: rgba(190,205,220,.8);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -7px 22px rgba(18,50,86,.1);
    backdrop-filter: blur(14px);
  }
  .employee-bottom-nav a,
  .bottom-nav a,
  .mobile-menu-toggle.bottom-menu-toggle { min-width: 0; overflow: hidden; }
  .employee-bottom-nav a,
  .bottom-nav a { white-space: nowrap; text-overflow: ellipsis; }
  .employee-bottom-nav a:active,
  .bottom-nav a:active { transform: translateY(1px); }
  .employee-bottom-nav .employee-expense-action { overflow: visible; color: var(--blue); }
  .employee-bottom-nav .employee-expense-action span {
    transform: translateY(-5px);
    border: 2px solid #fff;
    box-shadow: 0 6px 15px rgba(23,105,224,.3);
  }
  .employee-bottom-nav .employee-expense-action.active span { background: #0d55b9; }

  .mobile-menu {
    width: min(86vw,330px);
    border-radius: 0 22px 22px 0;
    background: linear-gradient(180deg,#153f6a 0,#10365c 100%);
    box-shadow: 16px 0 45px rgba(4,18,32,.32);
  }
  .mobile-menu-head { padding-bottom: 14px; }
  .mobile-account-card { margin-bottom: 10px; padding: 9px 10px; border-radius: 12px; }
  .mobile-menu-nav { gap: 3px; }
  .mobile-menu-nav a,
  .mobile-menu-logout button { min-height: 46px; border-radius: 10px; font-size: .88rem; }
  .mobile-menu-nav a:active { transform: translateX(2px); }
  .mobile-menu-close:focus-visible { outline-color: rgba(255,255,255,.75); }

  .notification-row,
  .peer-review-list-row,
  .expense-mobile-row,
  .claim-compact-row,
  .trip-mobile-card { overflow: hidden; }
  .notification-message,
  .expense-row-main,
  .claim-row-reference,
  .trip-expense-details { min-width: 0; }

  .record-pagination { background: rgba(255,255,255,.92); }
  .record-page-controls a.active { box-shadow: 0 4px 10px rgba(23,105,224,.22); }
  .record-page-controls a.disabled { opacity: .32; }

  :where(a,button,input,select,textarea):focus-visible { outline: 3px solid rgba(23,105,224,.3); outline-offset: 2px; }
}