.history-page {
  width: min(100%, 1180px);
  max-width: none;
  margin: 0 auto;
  padding: clamp(14px, 2.5vh, 24px) 24px 18px;
}

#authMessage[hidden] { display: none; }

.history-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.history-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.history-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  fill: #e7f1fb;
  stroke: var(--primary-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.history-brand-copy { min-width: 0; }

.history-brand-copy h1 {
  margin: 0;
  color: var(--primary-dark);
  font-size: clamp(23px, 2.3vw, 27px);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.history-brand-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.history-session-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.history-current-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.history-current-user-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.history-current-user-name {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.history-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-header-actions .quiet-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #eef6fc;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.history-search-panel {
  margin-bottom: 8px;
  padding: 12px 14px 14px;
}

.history-search-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 2px 2px 0;
}

.history-search-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.history-search-form {
  display: grid;
  gap: 10px;
}

.history-search-primary,
.history-search-secondary {
  display: grid;
  align-items: end;
  column-gap: 14px;
}

.history-search-primary {
  grid-template-columns: 370px 140px minmax(0, 1fr);
}

.history-search-secondary {
  grid-template-columns: 140px 160px 175px 150px 160px repeat(2, minmax(100px, 1fr));
}

.history-date-range {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.history-filter > span {
  display: block;
  margin: 0 0 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.history-date-inputs {
  display: grid;
  grid-template-columns: 170px 26px 170px;
}

.history-date-label-row {
  min-height: 17px;
  margin-bottom: 5px;
  line-height: 1.2;
}

.history-date-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.history-filter {
  display: grid;
  gap: 0;
}

.history-date-inputs {
  align-items: center;
  column-gap: 0;
}

.history-date-inputs input {
  box-sizing: border-box;
  width: 170px;
  height: 42px;
  min-height: 42px;
  padding: 6px 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.history-date-inputs input::-webkit-date-and-time-value,
.history-date-inputs input::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.history-date-separator {
  grid-column: 2;
  padding: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.history-filter select,
.history-filter input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 6px 10px;
  font-size: 15px;
}

.history-line-filter { width: 140px; }
.history-product-filter { width: min(560px, 100%); }
.history-record-status-filter { width: 140px; }
.history-approval-status-filter { width: 160px; }
.history-transfer-status-filter { width: 175px; }
.history-bulk-filter { width: 150px; }

.history-reset-button,
.history-search-form .save-button {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  height: 42px;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.history-reset-button {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #eef6fc;
  color: var(--primary-dark);
}

.history-search-form .save-button {
  grid-column: span 2;
  font-weight: 800;
}

.history-search-panel > .message { margin-top: 10px; }

.history-search-panel > .message[hidden] {
  display: none;
  min-height: 0;
  margin: 0;
}

.history-results-heading {
  margin: 0 2px 8px;
  padding: 2px 0 0;
}

.history-results-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.history-results-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.history-results-heading > .message {
  min-height: 0;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.history-results-heading > .message[hidden] {
  display: none;
  margin: 0;
}

.history-cards { min-width: 0; }

.history-list-wrap {
  overflow-x: auto;
  border: 1px solid #b8c0cb;
  border-radius: 4px;
  background: #fff;
}

.history-list-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.history-list-col-date { width: 9%; }
.history-list-col-line { width: 3.5%; }
.history-list-col-product { width: 35%; }
.history-list-col-pallet { width: 5%; }
.history-list-col-case { width: 6%; }
.history-list-col-expiry { width: 10%; }
.history-list-col-state { width: 6.5%; }
.history-list-col-approval-transfer { width: 12%; }
.history-list-col-actions { width: 13%; }

.history-list-table th,
.history-list-table td {
  box-sizing: border-box;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
  vertical-align: middle;
}

.history-list-table th {
  background: #edf0f4;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.history-list-table th:not(:nth-child(1)):not(:nth-child(3)),
.history-list-table td:not(:nth-child(1)):not(:nth-child(3)) { text-align: center; }

.history-list-table th:first-child,
.history-list-table td:first-child { text-align: center; }

.history-list-table tbody tr.history-list-row:nth-child(4n + 1) td { background: #f8fafc; }
.history-list-table tbody tr:last-child td { border-bottom: 0; }

.history-list-row.history-list-row-expanded td {
  border-top: 2px solid #2f79b7;
  border-bottom: 2px solid #2f79b7;
  background: #e7f2fb !important;
}

.history-list-row.history-list-row-expanded td:first-child { border-left: 2px solid #2f79b7; }
.history-list-row.history-list-row-expanded td:last-child { border-right: 2px solid #2f79b7; }

.history-list-date,
.history-list-line,
.history-list-expiry { white-space: nowrap; }

.history-list-product {
  overflow: hidden;
  font-size: 16px !important;
  font-weight: 500;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-list-number,
.history-list-case {
  color: var(--primary-dark) !important;
  font-size: 17px !important;
  font-weight: 800;
  white-space: nowrap;
}

.history-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.history-state.record-in_progress { color: #9f1d1d; border-color: #e4a0a0; background: #fff0f0; }
.history-state.record-completed,
.history-state.approved,
.history-state.transferred { color: var(--primary-dark); border-color: #b6cade; background: #eef6fc; }
.history-state.unapproved { color: #17663b; border-color: #91caa6; background: #edfaf1; }
.history-state.untransferred { color: #8a5a00; border-color: #e3c37f; background: #fff8e8; }
.history-state.record-cancelled { color: var(--muted); background: #f3f5f7; }

.history-list-approval-transfer,
.history-list-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.history-list-approval-transfer {
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
}

.history-list-mini-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.history-list-mini-status.approved,
.history-list-mini-status.transferred { border-color: #b6cade; background: #eef6fc; }
.history-list-mini-status.unapproved { color: #17663b; border-color: #91caa6; background: #edfaf1; }
.history-list-mini-status.untransferred { color: #8a5a00; border-color: #e3c37f; background: #fff8e8; }

.history-list-detail-button,
.history-list-actions .history-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.history-list-detail-button {
  background: #eef6fc;
  color: var(--primary-dark);
}

.history-list-detail-row td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #f7f9fb;
  text-align: left !important;
}

.history-detail-sections { background: #f7f9fb; }

.history-detail-section {
  padding: 12px 14px;
  border-top: 1px solid #d3dee8;
}

.history-detail-section:first-child { border-top: 0; }

.history-detail-section h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 700;
}

.history-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 9px 0 0;
}

.history-detail-work-secondary { margin-top: 11px; }

.history-detail-work-secondary > div,
.history-detail-shipment-row > div { grid-column: span 2; }

.history-detail-grid div { min-width: 0; }

.history-detail-grid dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.history-detail-grid dd {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.history-dialog {
  width: min(1000px, calc(100vw - 24px));
  height: min(680px, calc(100vh - 24px));
  height: min(680px, calc(100dvh - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
}

.history-dialog-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.history-dialog-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: #f4f8fc;
}

.history-dialog-header-content { min-width: 0; }
.history-dialog-header h2 { margin: 0; color: var(--primary-dark); }

.history-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.history-edit-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 8px 0 0;
}

.history-edit-summary-item { min-width: 0; }
.history-edit-summary-product { grid-column: 1 / -1; }
.history-edit-summary-item:not(.history-edit-summary-product) { white-space: nowrap; }
.history-edit-summary-item:not(.history-edit-summary-product) { text-align: center; }
.history-edit-summary-date { text-align: left !important; }

.history-edit-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-edit-summary dd {
  min-width: 0;
  margin: 2px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.history-edit-summary-product dd {
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 900;
}

.history-edit-summary-status dd { display: flex; align-items: center; justify-content: center; min-height: 26px; }

.history-dialog-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.history-edit-scroll {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.history-edit-grid {
  --history-edit-control-height: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.history-edit-grid label { display: grid; gap: 6px; min-width: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.history-edit-field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.history-edit-field-label strong { color: #9f1d1d; font-size: 12px; }
.history-edit-grid input:not(.switch-input),
.history-edit-grid select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--history-edit-control-height);
  min-height: var(--history-edit-control-height);
}

#editExpiryDate {
  -webkit-min-logical-width: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--history-edit-control-height);
  min-height: var(--history-edit-control-height);
  padding-block: 0;
  line-height: calc(var(--history-edit-control-height) - 2px);
  text-align: left;
}

#editExpiryDate::-webkit-date-and-time-value,
#editExpiryDate::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.history-full-width { grid-column: 1 / -1; }
.history-dialog textarea { box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; }
.history-edit-reason-field textarea { min-height: 96px; }
.history-edit-reason-field { display: grid; gap: 8px; }
.history-edit-reason-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.history-edit-other-reason { display: grid; gap: 6px; }
.history-edit-other-reason[hidden] { display: none; }
.history-edit-field-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 800; }
.history-edit-operation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 16px;
}

.history-edit-operation-field {
  display: grid;
  grid-template-rows: auto var(--history-edit-control-height);
  gap: 6px;
  min-width: 0;
}

.history-edit-grid .history-edit-toggle {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--history-edit-control-height);
  height: var(--history-edit-control-height);
  padding: 4px 8px;
  gap: 8px;
}

.history-edit-toggle .switch-ui {
  flex-basis: 56px;
  width: 56px;
  height: 28px;
}

.history-edit-toggle .switch-ui::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
}

.history-edit-toggle .switch-input:checked + .switch-ui::after { transform: translateX(28px); }
.history-edit-toggle .switch-text { font-size: 14px; font-weight: 800; }
.history-edit-bulk-field {
  min-width: 0;
  grid-template-rows: auto minmax(var(--history-edit-control-height), max-content);
}
.history-edit-bulk-field .bulk-no-entry {
  min-width: 0;
  height: auto;
  min-height: var(--history-edit-control-height);
  flex-wrap: wrap;
  align-content: start;
}
.history-edit-bulk-field .bulk-no-entry input { width: 7rem; }
.history-edit-bulk-field .bulk-no-list { min-width: 0; flex: 0 1 auto; }
.history-edit-bulk-field .bulk-no-entry .quiet-button {
  min-height: var(--history-edit-control-height);
  height: var(--history-edit-control-height);
  box-sizing: border-box;
}
.history-edit-scroll > .message { margin-top: 14px; }
.history-edit-scroll > .message[hidden] { display: none; min-height: 0; margin: 0; }

.history-dialog-footer {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #f4f8fc;
}

.history-dialog-footer .save-button { min-width: 200px; }

.bulk-no-entry { display: flex; align-items: center; gap: 8px; }
.bulk-no-entry input { width: 7rem; min-height: 42px; }
.bulk-no-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.bulk-no-tag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); padding: 3px 7px 3px 10px; font-weight: 700; }
.bulk-no-remove { min-width: 24px; min-height: 24px; border: 0; border-radius: 999px; padding: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }

@media (max-width: 900px) {
  .history-page { padding: 6px 16px 16px; }
  .history-header { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
  .history-session-actions { justify-content: space-between; }
  .history-search-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .history-date-range { grid-column: 1 / -1; }
  .history-line-filter,
  .history-product-filter { width: 100%; }
  .history-search-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .history-record-status-filter,
  .history-approval-status-filter,
  .history-transfer-status-filter,
  .history-bulk-filter { width: 100%; }
  .history-search-form .save-button { grid-column: auto; }
  .history-list-table { min-width: 1080px; }
  .history-detail-work-primary,
  .history-detail-work-secondary,
  .history-detail-shipment-row,
  .history-detail-records-row,
  .history-detail-approval-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .history-detail-work-secondary > div,
  .history-detail-shipment-row > div { grid-column: auto; }
}

@media (max-width: 600px) {
  .history-session-actions { align-items: stretch; flex-direction: column; }
  .history-current-user { justify-content: flex-start; }
  .history-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .history-search-primary,
  .history-search-secondary { grid-template-columns: 1fr; align-items: stretch; }
  .history-date-range,
  .history-filter,
  .history-reset-button,
  .history-search-form .save-button { grid-column: 1 / -1; width: 100%; }
  .history-date-inputs { grid-template-columns: 1fr; }
  .history-date-inputs input { width: 100%; }
  .history-date-separator { grid-column: 1; justify-self: center; }
  .history-edit-grid,
  .history-detail-work-primary,
  .history-detail-work-secondary,
  .history-detail-shipment-row,
  .history-detail-records-row,
  .history-detail-approval-row { grid-template-columns: 1fr; }
  .history-dialog {
    width: calc(100vw - 16px);
    height: min(680px, calc(100dvh - 16px));
    max-height: calc(100dvh - 16px);
  }
  .history-dialog-header { padding: 10px 12px; }
  .history-edit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-edit-operation-row { grid-template-columns: 1fr; }
  .history-edit-scroll { padding: 12px; }
  .history-dialog-footer { padding: 10px 12px; }
  .history-list-table { min-width: 980px; }
}