@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .app-side {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    z-index: 50;
  }
  .app-brand { padding: 0 10px 0 4px; white-space: nowrap; }
  .app-side nav { flex-direction: row; overflow-x: auto; }
  .app-nav-item { white-space: nowrap; }
  .app-main { margin-left: 0; }
  .container { padding: 12px 12px 88px !important; }
  .glass.header, .header { padding: 16px !important; border-radius: var(--r-md) !important; }
  .header-top, .toolbar { width: 100%; }
  h1 { font-size: 26px !important; line-height: 1.2; }
  .desc, .panel-sub { font-size: 14px !important; }
  .tabs, #hrTabs, #managerTabs, #payTabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .tab, .tabs .tab, .tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
  }
  input, select, textarea { font-size: 16px !important; }
  .btn, .sub-tab, .lang-switch button { min-height: 44px; }
  .filters, .form-grid, .form-layout, .leave-grid, .dash-grid,
  .stat-grid, .report-filters, .report-settings-grid, .date-pair-row, .date-summary-row,
  .attachment-remarks-row, .type-config-row {
    grid-template-columns: 1fr !important;
  }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .upload-slot-row { flex-direction: column; align-items: stretch; }
  .upload-slots-grid.has-amount .upload-slots-head { display: none; }
  .upload-slots-grid.has-amount .upload-slot-row.has-amount,
  .upload-slots-grid:not(.has-amount) .upload-slot-row {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .upload-slots-grid.has-amount .upload-slot-row.has-amount > .upload-slot-row-tools,
  .upload-slots-grid:not(.has-amount) .upload-slot-row > .upload-slot-row-tools {
    justify-self: stretch;
  }
  .upload-slot-row-tools { justify-content: flex-start; }
  .toast { left: 12px !important; right: 12px !important; bottom: 12px !important; }
  .modal-box, .form-modal-box {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    border-radius: 16px !important;
    padding: 18px !important;
  }
  .module-nav-menu { left: 0 !important; right: 0 !important; min-width: 0 !important; }
  .user-chip { max-width: 100%; }
  .login-box { padding: 28px 18px !important; border-radius: 0 !important; }
}