/* Layout only: shared cards, forms, records, badges and dialogs. */
.shifts-screen { max-width: 1360px; margin-inline: auto; padding: 20px 16px 112px; display: grid; gap: 24px; align-content: start; min-height: 100%; }
.shifts-title { margin: 0; }
.shifts-current, .shifts-catalog, .shifts-panel { min-width: 0; }
.shifts-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 16px; }
.shifts-wide { grid-column: 1 / -1; }
.shifts-stack { display: grid; gap: 10px; margin-block: 16px; }
.shifts-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shifts-action { padding: 16px; margin-top: 20px; }
.shifts-action button { width: 100%; }
.shifts-panel h2 { margin-block: 16px 8px; }
#difference { margin-block: 16px; }
.shifts-expected { grid-column: 1 / -1; }
.shifts-expected strong { display: block; font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); }
.cash-result { padding: 12px; border-radius: 12px; }
.cash-result[data-status="danger"] { color: var(--danger); background: var(--danger-soft); }
.cash-result[data-status="success"] { color: var(--success); background: var(--success-soft); }
.cash-result[data-status="warning"] { color: var(--warning); background: var(--warning-soft); }
.cash-result[data-status="neutral"] { color: var(--neutral); background: var(--neutral-soft); }
/* Payment-method and cash rows are read-only lines, not tap targets. */
#current-methods .record-row, #detail-methods .record-row, #transactions .record-row { min-height: 0; padding: 8px 0; }
@media (width < 840px) {
  .shifts-screen[data-panel="open"] .shifts-catalog, .shifts-screen[data-panel="open"] .shifts-current, .shifts-screen[data-panel="list"] .shifts-panel { display: none; }
  .shifts-action { position: fixed; bottom: 0; inset-inline: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2; }
}
@media (min-width: 840px) {
  .shifts-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 24px 32px; gap: 32px; }
  /* Current shift and today's list on one side, the selected shift beside them. */
  .shifts-title, #access { grid-column: 1 / -1; }
  .shifts-current, .shifts-catalog { grid-column: 1; }
  .shifts-panel { grid-column: 2; grid-row: 2 / span 2; }
  .shifts-current, .shifts-catalog, .shifts-panel { align-self: start; }
  .shifts-panel { position: sticky; top: 16px; max-height: calc(var(--viewport-height) - 32px); overflow-y: auto; }
  .shifts-action { position: sticky; bottom: -20px; }
}