/* One report form and one set of values, arranged for touch on small screens. */
.report-mobile-only { display: none; }
.report-table-form :is(.report-select-all-label, .report-row-check) { display: flex; justify-content: center; align-items: center; margin: 0; }

@media (max-width: 820px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .auth-card { width: 100%; max-width: 400px; min-width: 0; padding: 24px; border-radius: 16px; background: var(--surface); }
  .auth-card h1 { font-size: 22px; margin-bottom: 20px; }
  .auth-form { min-width: 0; gap: 16px; }
  .auth-form label { min-width: 0; }
  .auth-form input { width: 100%; min-width: 0; height: 46px; font-size: 16px; }
  .auth-form button { min-height: 46px; font-size: 16px; }
  .auth-feedback:empty { display: none; }
  /* The same navigation buttons become plain tabs, without nested pill shapes. */
  .sidebar { border-radius: 0; padding: 0 16px; box-shadow: none; background: var(--surface); backdrop-filter: none; }
  .nav-list { gap: 18px; }
  .sidebar .nav-link { min-height: 48px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; }
  .sidebar .nav-link.is-active { color: var(--hongyu-accent-text); border-bottom-color: currentColor; background: transparent; box-shadow: none; font-weight: 600; }
  .sidebar .nav-link::before, .sidebar .nav-link::after, .sidebar .nav-icon { display: none; }
  body[data-active-view="reporting"] { height: auto; min-height: 100dvh; overflow: auto; }
  body[data-active-view="reporting"] .app-shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  body[data-active-view="reporting"] .sidebar { position: relative; border-radius: 0; padding: 0 16px; }
  body[data-active-view="reporting"] .nav-link { min-height: 44px; flex: 0 0 auto; }
  body[data-active-view="reporting"] .workspace { display: block; min-width: 0; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  body[data-active-view="reporting"] .topbar { gap: 0; margin-bottom: 4px; }
  body[data-active-view="reporting"] .topbar h1 { display: none; }
  body[data-active-view="reporting"] .topbar-actions { flex-wrap: wrap; align-items: center; gap: 0 4px; }
  body[data-active-view="reporting"] .session-actor { flex: 1; font-size: 12px; overflow-wrap: anywhere; }
  body[data-active-view="reporting"] .topbar-actions button { min-width: 44px; min-height: 44px; padding: 8px 6px; font-size: 12px; }
  body[data-active-view="reporting"] .view.is-active,
  body[data-active-view="reporting"] #reporting-view > .data-panel { display: block; overflow: visible; max-height: none; }
  #reporting-view .reporting-entry-panel { border-radius: 14px 14px 0 0; }
  #reporting-view .report-table-form { display: flex; flex-direction: column; width: 100%; gap: 0; padding: 0; }
  #reporting-view .report-table-form .report-context-section { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: visible; border: 0; border-bottom: 1px solid var(--line); }
  #report-target-fields { display: contents; }
  .report-table-form .report-order-field { order: 0; }
  .report-table-form .report-product-field { order: 1; }
  .report-table-form .report-process-field { order: 2; }
  .report-table-form .report-meta-fields { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .report-table-form .report-meta-fields:has(.report-reporter-field) { grid-template-columns: minmax(0, 1fr); }
  .report-table-form .report-selected-context, .report-table-form .report-context-note { order: 4; }
  .report-table-form .report-date-field { max-width: none; margin: 0; }
  .report-table-form .report-reporter-field:has(select option:only-child) { display: none; }
  .report-table-form label { font-size: 13px; min-width: 0; }
  .report-table-form .compact-field-caption { color: var(--text-secondary); }
  #reporting-view :is(input:not([type=checkbox]):not([type=hidden]), select, .searchable-select-input) { width: 100%; min-width: 0; min-height: 46px; height: 46px; font-size: 16px; font-weight: 400; padding: 10px 12px; border-radius: 9px; scroll-margin-block: 100px; }
  #reporting-view .searchable-select-input { padding-right: 34px; text-overflow: ellipsis; }
  #reporting-view input[type=date] { appearance: none; -webkit-appearance: none; box-sizing: border-box; text-align: left; line-height: 24px; padding-block: 10px; }
  #reporting-view input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 24px; }
  #reporting-view input[type=date]::-webkit-datetime-edit { padding: 0; }
  #reporting-view .searchable-select-native { width: 1px; height: 1px; min-height: 0; padding: 0; }
  #reporting-view :is(.primary-button, .secondary-button, .text-button, .drawer-close) { min-height: 44px; font-size: 14px; }
  #reporting-view .report-table-form [hidden] { display: none !important; }
  .report-table-form .report-product-context { display: grid; gap: 5px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .report-table-form .report-product-context strong { font-size: 14px; font-weight: 550; }
  .report-table-form .report-product-context :is(span, small) { color: var(--text-secondary); }
  .report-table-form .report-quantity-fields { margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
  .report-table-form .report-context-note { margin: 0; }
  .report-table-form .report-people-section { overflow: visible; padding: 0 16px; }
  .report-personnel-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .report-personnel-toolbar > button { align-self: flex-start; }
  .report-fill-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
  .report-fill-controls label { flex: 0 1 90px; }
  .report-fill-controls [data-report-fill] { flex: 1; white-space: nowrap; }
  .report-people-section:not(:has([data-report-row-select]:checked)) .report-fill-controls > :is(label, [data-report-fill]) { display: none; }
  .report-people-section:not(:has([data-entry-row])) .report-personnel-table { display: none; }
  .report-table-form input[type=checkbox] { width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0; accent-color: var(--hongyu-accent-action); flex-shrink: 0; }
  .report-personnel-scroll { overflow: visible; }
  .report-personnel-table { display: block; width: 100%; border-collapse: collapse; font-size: 14px; }
  .report-personnel-table colgroup { display: none; }
  .report-personnel-table :is(thead, tbody) { display: block; }
  .report-personnel-table thead tr { display: block; }
  .report-personnel-table thead th { display: none; }
  .report-personnel-table thead th:first-child { display: block; padding: 0; }
  .report-table-form .report-select-all-label { min-height: 44px; justify-content: flex-start; gap: 10px; font-weight: 400; }
  .report-mobile-only { display: inline; }
  .report-personnel-table tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 10px 0; align-items: center; padding: 10px 0 16px; border-top: 1px solid var(--line); }
  .report-personnel-table tbody tr.is-selected { background: rgb(var(--hongyu-accent-rgb) / 5%); }
  .report-personnel-table td { display: block; min-width: 0; border: 0; padding: 0; }
  .report-personnel-table td:first-child { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .report-personnel-table .entry-employee { grid-column: 2 / 4; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; overflow-wrap: anywhere; }
  .report-personnel-table .report-person-name { font-weight: 550; }
  .report-personnel-table [data-employee-code] { color: var(--muted); font-size: 12px; }
  .report-personnel-table td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; padding-right: 12px; }
  .report-personnel-table td:nth-child(4) { grid-column: 3 / 5; grid-row: 2; padding-left: 8px; }
  .report-personnel-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
  .report-personnel-table td:last-child { grid-column: 4; grid-row: 1; }
  .report-personnel-table [data-mobile-label]::before { display: block; content: attr(data-mobile-label); margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; }
  .report-personnel-table [data-report-day-total] { display: flex; align-items: center; min-height: 46px; font-size: 19px; font-variant-numeric: tabular-nums; }
  .report-personnel-table .record-icon-button { width: 44px; height: 44px; }
  .report-personnel-table .record-icon-button.is-danger { color: var(--danger); }
  .report-table-form .report-row-check { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin: 0; }
  .report-people-empty { padding: 8px 0 20px; text-align: left; color: var(--muted); font-size: 13px; }
  .report-table-form .report-submit-bar { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgb(var(--shadow-rgb) / 4%); }
  .report-table-form .report-submit-bar .entry-summary { flex: 1; padding: 0; margin: 0; font-size: 12px; line-height: 1.6; }
  .report-table-form .report-submit-bar button { flex: 0 0 auto; }
  .report-table-form:has(input:focus) .report-submit-bar { position: static; }
  .report-table-form .report-duplicate-warning { margin: 12px 0; overflow-wrap: anywhere; scroll-margin-block: 100px; }
  .report-table-form .report-employee-dialog { position: fixed; inset: calc(var(--report-viewport-top, 0px) + 12px) 0 auto; width: calc(100% - 24px); max-width: 520px; height: min(700px, calc(var(--report-viewport-height, 100dvh) - 24px)); max-height: calc(var(--report-viewport-height, 100dvh) - 24px); padding: 0; margin: auto; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); box-shadow: 0 20px 60px rgb(var(--shadow-rgb) / 20%); overflow: hidden; }
  .report-employee-dialog[open] { display: flex; flex-direction: column; }
  .report-employee-dialog::backdrop { background: var(--scrim); }
  .report-employee-dialog :is(header, footer) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-shrink: 0; }
  .report-employee-dialog header { border-bottom: 1px solid var(--line); }
  .report-employee-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; }
  .report-employee-dialog .drawer-close { width: 44px; }
  .report-employee-dialog footer { border-top: 1px solid var(--line); font-size: 13px; }
  .report-picker-filters { display: grid; gap: 12px; padding: 12px 16px; flex-shrink: 0; }
  .report-table-form .report-picker-select-all { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px; flex-shrink: 0; }
  .report-picker-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
  .report-table-form .report-picker-person { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid var(--line); }
  .report-picker-person:has(input:checked) { background: rgb(var(--hongyu-accent-rgb) / 6%); }
  .report-picker-person span { display: grid; gap: 3px; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
  .report-picker-person small { font-size: 12px; color: var(--muted); }
  .report-picker-empty { text-align: center; color: var(--muted); font-size: 13px; }
  body[data-active-view="reporting"] .searchable-select-menu { padding: 4px; border-radius: 10px; }
  body[data-active-view="reporting"] .searchable-select-option { min-height: 48px; padding: 10px; border-radius: 0; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; font-size: 15px; }
  body[data-active-view="reporting"] .searchable-select-option:last-of-type { border-bottom: 0; }
  .report-picker-filters label:has(select option:nth-child(2):last-child) { display: none; }
  body[data-active-view="reporting"] .aps-calendar { width: min(340px, calc(100vw - 20px)); }
  body[data-active-view="reporting"] .aps-calendar button { min-height: 40px; }
  body[data-active-view="reporting"] .aps-calendar-days { gap: 2px; }
  body[data-active-view="reporting"] .flash { max-width: calc(100vw - 24px); top: auto; left: 50%; right: auto; margin: 0; bottom: calc(92px + env(safe-area-inset-bottom)); font-size: 14px; }
}