/*
 * Responsive layout layer
 *
 * This file is intentionally loaded after the feature styles. It is the single
 * source of truth for viewport breakpoints, preventing page-specific styles
 * from competing with each other as new admin pages are added.
 */

:root {
  --layout-sidebar-wide: 214px;
  --layout-sidebar-compact: 72px;
  --layout-page-gutter: clamp(16px, 2.35vw, 34px);
  --layout-gap: clamp(12px, 1.25vw, 18px);
}

/* Every grid child may shrink. This avoids long content forcing its parent
 * wider than the available administration workspace. */
.page,
.panel,
.card,
.org-main,
.customer-directory,
.history-main,
.inventory-directory-main,
.device-directory-main,
.dashboard-command-grid > *,
.dashboard-overview-grid > * {
  min-width: 0;
}

.page { padding-inline: var(--layout-page-gutter); }
.topbar { gap: 18px; padding-inline: var(--layout-page-gutter); }
.topbar-title,
.top-actions,
.dashboard-toolbar,
.page-title-row,
.customer-page-bar,
.device-page-bar { min-width: 0; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.top-actions .search { width: clamp(180px, 22vw, 305px); min-width: 0; }

/* Customer archive actions stay with filtering controls instead of a separate
 * title area, keeping the page focused on the directory itself. */
.customer-org-page { padding-top: 24px; }
.customer-toolbar {
  /* Search, reset, export and create share a single compact action row. */
  grid-template-columns: minmax(120px, 1fr) 32px auto auto;
  align-items: center;
}
.customer-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
}
.customer-toolbar-actions .secondary-btn,
.customer-toolbar-actions .primary-btn {
  height: 38px;
  margin: 0;
  padding-inline: 14px;
}

/* Tables retain their information density, but scrolling is always contained
 * inside the card rather than extending the document width. */
.org-table-card,
.customer-table-card,
.history-panel,
.ops-table-card,
.device-table-card,
.inventory-bottle-card,
.inventory-summary-table-wrap,
.dashboard-device-table-wrap { max-width: 100%; }

/* Formula history is a business ledger, not a dashboard card. Keep its
 * identifiers and quantities legible by scrolling inside the card whenever
 * the work area is narrower than the record table needs. */
.history-panel { container-type: inline-size; }
.history-table-scroll-guide {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.history-table-scroll-guide small { color: var(--muted); font-size: 10px; }
.history-panel > [data-history-content] > .history-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.history-dispense-table {
  width: 100%;
  min-width: 1260px;
  table-layout: fixed;
}
.history-dispense-table th,
.history-dispense-table td {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}
.history-dispense-table th:first-child,
.history-dispense-table td:first-child {
  width: 44px;
  min-width: 44px;
  padding-inline: 10px;
}
/* The disclosure cell belongs to its record, rather than behaving like a raised frozen rail. */

@container (max-width: 1260px) {
  .history-table-scroll-guide { display: flex; }
}

@container (max-width: 820px) {
  .history-dispense-table { min-width: 760px; }
  .history-dispense-table th:nth-child(3),
  .history-dispense-table td:nth-child(3),
  .history-dispense-table th:nth-child(4),
  .history-dispense-table td:nth-child(4),
  .history-dispense-table th:nth-child(7),
  .history-dispense-table td:nth-child(7),
  .history-dispense-table th:nth-child(9),
  .history-dispense-table td:nth-child(9) { display: none; }
  .history-table-scroll-guide small { display: none; }
}

@media (max-width: 1600px) {
  /* The device workspace needs 1,316px before page padding. Move details
   * below its data area before the three columns begin to collide. */
  .device-directory-layout {
    height: auto;
    min-height: 0;
    grid-template-columns: clamp(220px, 20vw, 250px) minmax(0, 1fr);
  }
  .device-directory-main { height: auto; }
  .device-org-panel { height: auto; min-height: 620px; }
  .device-ops-page .device-detail {
    position: static;
    grid-column: 2;
    height: auto;
    min-height: 420px;
    max-height: none;
    overflow: visible;
  }
  .device-ops-page .ops-detail-empty { min-height: 420px; }

  /* Customer details already use an off-canvas panel. Keep that progressive
   * disclosure model instead of reserving a third desktop column. */
  .customer-org-layout { grid-template-columns: clamp(238px, 20vw, 300px) minmax(0, 1fr); }
}

@media (max-width: 1460px) {
  /* A 240px tree + 620px content + 330px detail cannot safely fit after the
   * permanent navigation and page padding are taken into account. */
  .org-layout { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); }
  .org-detail { display: none; }

  .history-workspace { grid-template-columns: clamp(240px, 21vw, 280px) minmax(0, 1fr); }
  .history-filter-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(118px, 1fr)); }
  .history-keyword-filter { grid-column: 1 / -1; }
}

@media (max-width: 1280px) {
  .page { padding-block: 22px 32px; }
  .topbar { min-height: 70px; height: auto; padding-block: 12px; }
  .topbar h1 { font-size: 22px; }
  .top-actions { gap: 10px; }
  .top-actions .search { width: clamp(170px, 20vw, 230px); }

  .dashboard-command-grid { min-height: 0; }
  .dashboard-toolbar { flex-wrap: wrap; gap: 10px; }
  .dashboard-toolbar-actions { margin-left: 0; }

  .inventory-directory-layout { grid-template-columns: clamp(210px, 23vw, 250px) minmax(0, 1fr); }
  .inventory-org-panel { position: static; min-height: 0; }
  .inventory-metrics { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .inventory-metrics .ops-metric { min-width: 150px; }
}

/* A 1024px laptop has less than 810px after the full navigation. At this point
 * use an icon rail, not a squeezed desktop layout. */
@media (max-width: 1080px) {
  /* The legacy theme layer sets the rail width through several selectors.
   * Keep this one authoritative at the compact-workspace breakpoint. */
  body .sidebar { width: var(--layout-sidebar-compact) !important; padding: 18px 8px; }
  .brand { justify-content:center; padding: 0 7px 25px; }
  .brand > div:not(.brand-mark),
  .workspace-switch,
  .nav-label,
  .nav-item span:not(.nav-icon),
  .sidebar-footer > div:not(.avatar),
  .sidebar-footer .chevron,
  .sidebar-footer .logout-btn { display: none; }
  .nav-item { justify-content: center; margin-inline: 0; padding-inline: 0; }
  .main-content { min-width: 0; }

  .top-actions .search { display: none; }
  .user > span { display: none; }

  .customer-org-layout,
  .inventory-directory-layout,
  .history-workspace { grid-template-columns: 1fr; }
  .customer-org-tree.org-tree-panel,
  .history-store-org.history-org-panel,
  .inventory-org-panel { position: static; min-height: 0; max-height: none; }
  .customer-org-tree .org-tree-list,
  .history-store-org .history-org-tree,
  .inventory-org-tree { max-height: 320px; }

  .customer-toolbar { grid-template-columns: minmax(120px, 1fr) 32px auto auto; }
  .customer-filter-search { grid-column: auto; }
  .customer-toolbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .history-filter-grid { grid-template-columns: 1fr; }
  .history-date-range,
  .history-keyword-filter { grid-column: 1 / -1; }

  /* Data wall breakpoints are based on the usable content width, not only on
   * the browser width. */
  .dw-main-grid { grid-template-columns: minmax(160px, .52fr) minmax(0, 1fr); }
  .dw-right-rail { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .dw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dw-bottom-grid { grid-template-columns: 1fr 1fr; }
  .dw-trend-panel { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .topbar { align-items: center; }
  .crumb { display: none; }
  .topbar h1 { font-size: 20px; }
  .top-actions .icon-btn:nth-child(3) { display: none; }
  .page-title-row,
  .device-page-bar,
  .customer-page-bar { align-items: flex-start; flex-direction: column; }
  .page-title-row .toolbar,
  .device-page-bar .ops-actions,
  .customer-page-actions { margin-left: 0; }

  .device-directory-layout { grid-template-columns: 1fr; }
  .device-org-panel,
  .device-directory-main { height: auto; min-height: 0; }
  .device-org-panel { min-height: 320px; }
  .device-org-tree { max-height: 280px; }
  .device-ops-page .device-detail { grid-column: auto; min-height: 0; }
  .device-metrics,
  .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .org-layout { display: block; margin-inline: calc(-1 * var(--layout-page-gutter)); }
  .org-tree { display: none; }
  .org-main { padding: 18px 12px 28px; overflow: visible; }
  .org-toolbar { align-items: stretch; }
  .org-toolbar .input { flex-basis: 100%; }

  .dw-command-bar { align-items: flex-start; }
}

@media (max-width: 700px) {
  body .sidebar { width: 65px !important; }
  .page { padding: 18px 14px 30px; }
  .topbar { padding-inline: 14px; }
  .top-actions { gap: 4px; }
  .top-actions .theme-toggle { margin-left: 0; }
  .page-title-row .toolbar,
  .ops-actions,
  .customer-page-actions { flex-wrap: wrap; }

  .history-filter-grid,
  .ops-form-grid,
  .field-grid { grid-template-columns: 1fr; }
  .customer-toolbar { grid-template-columns: 1fr 1fr; }
  .customer-filter-search,
  .history-date-range,
  .history-keyword-filter { grid-column: auto; }
  .customer-filter-search { grid-column: 1 / -1; }
  .customer-toolbar-actions { grid-column: auto; justify-self: start; flex-wrap: wrap; }
  .customer-table-card .table { min-width: 590px; }
  .customer-pagination { align-items: flex-start; flex-direction: column; padding: 12px 14px; }
  .customer-page-controls { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .customer-table-heading h3 { gap: 7px; }
  .customer-table-heading h3::before { width: 19px; height: 18px; flex-basis: 19px; }
  .history-summary,
  .history-dye-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 540px) {
  .device-metrics,
  .ops-metrics,
  .history-summary,
  .history-dye-slot-grid { grid-template-columns: 1fr; }
  .device-filter-row,
  .ops-filter-row { align-items: stretch; flex-direction: column; }
  .device-list-search,
  .device-filter-row .select,
  .ops-filter-row .input,
  .ops-filter-row .select { width: 100%; min-width: 0; }
}

/*
 * Comfortable density layer
 *
 * The outer 1920px canvas used to shrink the entire application on smaller
 * screens. The application now uses the real viewport, so density is tuned
 * through local spacing and hierarchy instead of a bitmap-like transform.
 * Keep this layer after feature CSS so it owns page geometry without touching
 * database-backed components or form field contracts.
 */
:root {
  --ui-density: 1.04;
  --comfortable-page-gutter: clamp(18px, 2.5vw, 38px);
  --comfortable-page-top: clamp(24px, 2vw, 32px);
  --comfortable-page-bottom: clamp(32px, 3vw, 48px);
  --comfortable-layout-gap: clamp(14px, 1.35vw, 22px);
  --golden-main: 1.618fr;
  --golden-side: 1fr;
}

.page {
  padding-inline: var(--comfortable-page-gutter);
  padding-block: var(--comfortable-page-top) var(--comfortable-page-bottom);
}

.topbar {
  min-height: 72px;
  height: auto;
  padding-inline: var(--comfortable-page-gutter);
  padding-block: 18px;
}

.page-title-row,
.dashboard-toolbar,
.customer-page-bar,
.device-page-bar {
  gap: var(--comfortable-layout-gap);
}

.page-title-row h2,
.governance-page .page-title-row h2 {
  font-size: clamp(19px, calc(18px + .18vw), 23px);
}

.page-desc,
.customer-scope-heading p,
.governance-page .page-desc {
  font-size: calc(12px * var(--ui-density));
}

.card,
.panel {
  border-radius: calc(11px * var(--ui-density));
}

/* The dashboard's main work area follows the golden ratio: the map and trend
 * receive the visual weight, while the operational rail remains readable. */
@media (min-width: 1201px) {
  body[data-active-page="dashboard"] .dashboard-command-grid {
    grid-template-columns: minmax(0, var(--golden-main)) minmax(390px, var(--golden-side));
    gap: var(--comfortable-layout-gap);
  }

  body[data-active-page="dashboard"] .dashboard-command-grid .dashboard-kpi-grid,
  body[data-active-page="dashboard"] .dashboard-command-grid .dashboard-side-analytics {
    gap: var(--comfortable-layout-gap);
  }

  body[data-active-page="dashboard"] .dashboard-command-grid .dashboard-kpi-grid .dashboard-kpi {
    padding: calc(13px * var(--ui-density));
  }
}

/* History page density pass: preserve the date range as the primary time
 * control, while keeping the four secondary selectors compact. The ledger
 * below fits the usable history pane on desktop, so its complete record is
 * readable without an inner horizontal scroll. */
@media (min-width: 1081px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: 190px 200px repeat(4, 105px) max-content !important;
    column-gap: 8px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
    width: 190px;
    max-width: 190px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-date-range {
    width: 200px;
  }

  .history-page .history-filter-grid > label.history-quick-range-field,
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(2),
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(3),
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(4) {
    width: 105px;
  }

  .history-page .history-date-range > div {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
  }

  .history-page .history-summary {
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: start;
    gap: 8px;
  }

  .history-page .history-summary .history-kpi {
    min-height: 84px;
    padding: 10px 12px 11px;
    border-radius: 10px;
  }

  .history-page .history-summary .history-kpi:before {
    top: 11px;
    bottom: 11px;
  }

  .history-page .history-kpi-head {
    gap: 6px;
  }

  .history-page .history-kpi-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    border-radius: 6px;
  }

  .history-page .history-kpi-icon:before {
    inset: 4px;
  }

  .history-page .history-kpi-label {
    font-size: 10px !important;
  }

  .history-page .history-summary .history-kpi strong {
    padding-left: 29px;
    font-size: 20px;
    font-weight: 500;
  }

  .history-page .history-kpi-metric {
    gap: 6px;
    padding-left: 29px;
  }

  .history-page .history-kpi-action-hint {
    font-size: 9px;
  }

  .history-page .history-kpi-bag-summary small {
    font-size: 8px;
  }

  .history-page .history-kpi-bag-summary b {
    font-size: 12px;
  }

  .history-page .history-panel > [data-history-content] > .history-table-wrap {
    overflow-x: hidden !important;
  }

  .history-page .history-panel > [data-history-content] > .history-table-wrap::before {
    display: none !important;
  }

  .history-page .history-dispense-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 11px;
  }

  .history-page .history-dispense-table th,
  .history-page .history-dispense-table td {
    box-sizing: border-box;
    padding: 8px 7px !important;
    font-size: 11px !important;
    line-height: 15px;
  }

  /* The content columns previously received a second 36px inset. Keep the
   * device and status columns in place, but return the preceding fields to
   * the table's normal left edge. */
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+3):nth-child(-n+6) {
    padding-left: 7px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(6) .history-operator-cell {
    transform: none !important;
  }

  .history-page .history-dispense-table time {
    display: block;
    line-height: 15px;
    white-space: normal;
  }

  .history-page .history-dispense-table .history-record-date,
  .history-page .history-dispense-table .history-record-time {
    display: block;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-record-time {
    color: #8b96a8;
    font-size: 10px;
  }

  .history-page .history-dispense-table th:nth-child(1),
  .history-page .history-dispense-table td:nth-child(1) { width: 4% !important; }
  .history-page .history-dispense-table th:nth-child(2),
  .history-page .history-dispense-table td:nth-child(2) { width: 14% !important; }
  .history-page .history-dispense-table th:nth-child(3),
  .history-page .history-dispense-table td:nth-child(3) { width: 13% !important; }
  .history-page .history-dispense-table th:nth-child(4),
  .history-page .history-dispense-table td:nth-child(4) { width: 12% !important; }
  .history-page .history-dispense-table th:nth-child(5),
  .history-page .history-dispense-table td:nth-child(5) { width: 20% !important; }
  .history-page .history-dispense-table th:nth-child(6),
  .history-page .history-dispense-table td:nth-child(6) { width: 15% !important; }
  .history-page .history-dispense-table th:nth-child(7),
  .history-page .history-dispense-table td:nth-child(7) { width: 14% !important; }
  .history-page .history-dispense-table th:nth-child(8),
  .history-page .history-dispense-table td:nth-child(8) { width: 8% !important; }

  .history-page .history-dispense-table .history-table-heading {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-table-heading-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .history-page .history-dispense-table time,
  .history-page .history-dispense-table :is(.history-operator-cell, .history-org-cell, .history-device-cell, .history-customer-cell) {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-formula-cell,
  .history-page .history-dispense-table .history-formula-cell strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .history-page .history-dispense-table .history-formula-cell strong {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .history-page .history-dispense-table .history-device-cell {
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-device-code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-badge {
    max-width: 100%;
    overflow: hidden;
    padding: 4px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-page="history"] .history-operator-list-trigger {
    grid-template-columns: 34px minmax(170px, 1.4fr) repeat(3, minmax(72px, .6fr)) minmax(96px, .7fr);
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
  }

  body[data-active-page="history"] .history-operator-avatar {
    width: 30px;
    height: 30px;
  }

  body[data-active-page="history"] .history-operator-list-metric small {
    font-size: 10px;
  }

  body[data-active-page="history"] .history-operator-list-metric b {
    font-size: 12px;
  }

body[data-active-page="history"] .history-operator-detail-link {
    font-size: 11px;
  }
}

/* Last-mile record density: these declarations intentionally sit after every
 * legacy history layer so the visual contract is stable in the live shell. */
@media (min-width: 1081px) {
  .history-page .history-summary {
    grid-template-columns: repeat(3, minmax(0, 300px)) !important;
    justify-content: start;
    gap: 8px;
  }

  .history-page .history-summary .history-kpi {
    width: 300px;
    min-height: 84px;
    padding: 10px 12px 11px;
  }

  .history-page .history-summary .history-kpi:before {
    top: 11px;
    bottom: 11px;
  }

  .history-page .history-kpi-head {
    gap: 6px;
  }

  .history-page .history-kpi-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .history-page .history-kpi-icon:before {
    inset: 4px;
  }

  .history-page .history-kpi-label {
    font-size: 10px !important;
  }

  .history-page .history-summary .history-kpi strong {
    padding-left: 29px;
    font-size: 20px;
  }

  .history-page .history-kpi-metric {
    gap: 6px;
    padding-left: 29px;
  }

  .history-page .history-kpi-action-hint {
    font-size: 9px;
  }

  .history-page .history-kpi-bag-summary small {
    font-size: 8px;
  }

  .history-page .history-kpi-bag-summary b {
    font-size: 12px;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+3):nth-child(-n+6) {
    padding-left: 7px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(6) .history-operator-cell {
    transform: none !important;
  }

  .history-page .history-dispense-table time {
    display: block;
    line-height: 15px;
    white-space: normal;
  }

  .history-page .history-dispense-table .history-record-date,
  .history-page .history-dispense-table .history-record-time {
    display: block;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-record-time {
    color: #8b96a8;
    font-size: 10px;
  }

  .history-page .history-dispense-table .history-badge {
    width: 100%;
    min-width: 70px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 2px 4px rgba(36, 48, 70, .08);
  }

  .history-page .history-dispense-table .history-badge.success {
    border: 1px solid #d8f0e4;
    background: linear-gradient(180deg, #effbf5 0%, #e2f5eb 100%);
    color: #159565;
  }

  .history-page .history-dispense-table .history-badge.danger {
    border: 1px solid #f8dfe2;
    background: linear-gradient(180deg, #fff5f5 0%, #fdebed 100%);
    color: #d84f61;
  }
}

/* Keep the main working surface dominant on organization-oriented pages while
 * letting the tree/detail rails grow fluidly with the available viewport. */
.organization-tree-page .org-tree-layout,
.customer-org-layout,
.history-workspace,
.inventory-directory-layout,
.device-directory-layout {
  column-gap: var(--comfortable-layout-gap);
}

.organization-tree-page .org-tree-layout {
  grid-template-columns: clamp(260px, 19vw, 320px) minmax(0, 1fr);
}

.customer-org-layout {
  grid-template-columns:
    clamp(250px, 18vw, 320px)
    minmax(0, var(--golden-main))
    clamp(290px, 20vw, 360px);
}

.history-workspace {
  grid-template-columns: clamp(260px, 19vw, 320px) minmax(0, var(--golden-main));
}

.inventory-directory-layout {
  grid-template-columns: clamp(240px, 18vw, 290px) minmax(0, var(--golden-main));
}

@media (max-width: 1600px) {
  :root { --ui-density: 1.02; }
}

@media (max-width: 1280px) {
  :root {
    --ui-density: 1;
    --comfortable-page-gutter: clamp(18px, 2.35vw, 30px);
  }

  .organization-tree-page .org-tree-layout,
  .customer-org-layout,
  .history-workspace,
  .inventory-directory-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .customer-org-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .topbar { padding-block: 14px; }
  .page-title-row h2,
  .governance-page .page-title-row h2 { font-size: 20px; }
}

@media (max-width: 700px) {
  :root {
    --ui-density: 1;
    --comfortable-page-gutter: 14px;
    --comfortable-page-top: 18px;
    --comfortable-page-bottom: 30px;
  }

  .topbar { padding-inline: 14px; }
  .card,
  .panel { border-radius: 10px; }
}

/*
 * Layout safety net
 *
 * Feature CSS predates this responsive layer and some pages still set a
 * fixed/minimum table width or use `display: contents` for dashboard rails.
 * Keep the exceptions here so the component and icon styling remains intact
 * while the page geometry has one final, predictable owner.
 */
.app-shell,
.main-content,
#page-content,
.dashboard-command-grid,
.dashboard-overview-grid,
.dashboard-hero-grid,
.dashboard-analytics-grid,
.dashboard-side-stack,
.dashboard-side-analytics,
.customer-table-wrap,
.history-table-wrap { min-width: 0; }

/* Every wide data view owns its horizontal scroll. Never let its intrinsic
 * table width create a second, page-level scrollbar. */
.org-table-card,
.customer-table-wrap,
.history-panel > [data-history-content] > .history-table-wrap,
.ops-table-card,
.device-table-card,
.inventory-bottle-card,
.inventory-summary-table-wrap,
.dashboard-device-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

/* Restore the history ledger's intended information density. A previous
 * feature rule cancelled its internal scroller and compressed ten fields into
 * whichever width happened to be available. */
.history-panel > [data-history-content] > .history-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}
.history-dispense-table {
  width: 100%;
  min-width: 1260px;
  table-layout: fixed;
}
.history-dispense-table th,
.history-dispense-table td {
  overflow-wrap: normal;
  word-break: normal;
}

/* A ledger keeps its column model at every width. The table owns the horizontal
 * scroll; shrinking or selectively hiding columns left the remaining legacy
 * width percentages out of sync and caused record text to overlap. */
@container (max-width: 820px) {
  .history-dispense-table { min-width: 1260px; }
  .history-dispense-table th:nth-child(3),
  .history-dispense-table td:nth-child(3),
  .history-dispense-table th:nth-child(4),
  .history-dispense-table td:nth-child(4),
  .history-dispense-table th:nth-child(7),
  .history-dispense-table td:nth-child(7),
  .history-dispense-table th:nth-child(9),
  .history-dispense-table td:nth-child(9) { display: table-cell; }
}

/* History filters: keep the date range as one control. At desktop widths the
 * two date buttons need a guaranteed shared column; otherwise the inherited
 * four-column rule lets the end date overflow into the colour selector. */
@media (min-width: 1081px) and (max-width: 1460px) {
  .history-filter-grid {
    grid-template-columns: minmax(240px, 1.2fr) minmax(300px, 1.35fr) repeat(2, minmax(180px, 1fr));
  }
  .history-date-range { min-width: 0; }
  .history-date-range > div {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }
  .history-date-trigger { min-width: 0; padding-inline: 10px; }
}

/* A ledger must not allow unbroken identifiers (notably operator emails) to
 * paint over a neighbouring cell. Keep its full set of columns and scroll only
 * the table wrapper, with deterministic column widths and ellipsis inside each
 * cell. */
.history-panel > [data-history-content] > .history-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible;
}
.history-dispense-table {
  min-width: 1540px !important;
  table-layout: fixed;
}
.history-dispense-table th:nth-child(1),
.history-dispense-table td:nth-child(1) { width: 44px !important; }
.history-dispense-table th:nth-child(2),
.history-dispense-table td:nth-child(2) { width: 150px !important; }
.history-dispense-table th:nth-child(3),
.history-dispense-table td:nth-child(3) { width: 185px !important; display: table-cell !important; }
.history-dispense-table th:nth-child(4),
.history-dispense-table td:nth-child(4) { width: 165px !important; display: table-cell !important; }
.history-dispense-table th:nth-child(5),
.history-dispense-table td:nth-child(5) { width: 205px !important; }
.history-dispense-table th:nth-child(6),
.history-dispense-table td:nth-child(6) { width: 225px !important; }
.history-dispense-table th:nth-child(7),
.history-dispense-table td:nth-child(7) { width: 190px !important; display: table-cell !important; }
.history-dispense-table th:nth-child(8),
.history-dispense-table td:nth-child(8) { width: 130px !important; }
.history-dispense-table th:nth-child(9),
.history-dispense-table td:nth-child(9) { width: 175px !important; display: table-cell !important; }
.history-dispense-table th:nth-child(10),
.history-dispense-table td:nth-child(10) { width: 120px !important; }
.history-dispense-table :is(.history-operator-cell, .history-org-cell, .history-device-cell, .history-material-cell) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-dispense-table .history-formula-cell,
.history-dispense-table .history-formula-cell strong,
.history-dispense-table .history-customer {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AI proposals are an identity ledger: material quantities stay in the
 * disclosed detail, while the compact row keeps the requested reading order. */
.history-dispense-table {
  min-width: 1280px !important;
}
.history-dispense-table th:nth-child(1),
.history-dispense-table td:nth-child(1) { width: 44px !important; }
.history-dispense-table th:nth-child(2),
.history-dispense-table td:nth-child(2) { width: 154px !important; }
.history-dispense-table th:nth-child(3),
.history-dispense-table td:nth-child(3) { width: 140px !important; }
.history-dispense-table th:nth-child(4),
.history-dispense-table td:nth-child(4) { width: 130px !important; }
.history-dispense-table th:nth-child(5),
.history-dispense-table td:nth-child(5) { width: 180px !important; }
.history-dispense-table th:nth-child(6),
.history-dispense-table td:nth-child(6) { width: 210px !important; }
.history-dispense-table th:nth-child(7),
.history-dispense-table td:nth-child(7) { width: 200px !important; }
.history-dispense-table th:nth-child(8),
.history-dispense-table td:nth-child(8) { width: 118px !important; }
.history-dispense-table .history-customer-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #586579;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-dispense-table .history-device-cell {
  overflow: visible;
  color: #526077;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .01em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* Keep Formula History typography consistent across table cells and controls. */
.history-page,
.history-page :is(button, input, select, textarea, code, time) {
  font-family: var(--font-ui);
}
.history-dispense-table .history-device-code {
  display: inline-flex;
  max-width: 100%;
  min-height: 0;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #55647b;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-theme="dark"] .history-dispense-table .history-device-code {
  color: #b9c5d7;
}
.history-dispense-table .history-badge {
  display: inline-flex;
  width: 72px;
  min-width: 72px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Inserting an expanded proposal must not let browser scroll anchoring move
 * the reader away from the record they just opened. */
.history-panel [data-history-content] { overflow-anchor: none; }

/* The filter card is a self-contained grid. All tracks may shrink, so its
 * fourth field can never paint beyond the card edge at desktop widths. */
@media (min-width: 1081px) {
  .history-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-width: 0;
  }
  .history-filter-grid > label,
  .history-date-range,
  .history-date-range > div,
  .history-date-trigger { min-width: 0; }
  .history-date-range > div {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }
  .history-keyword-filter { grid-column: 1 / -1 !important; }
}

/* Formula-history filter controls share one desktop row. This needs to live
 * after the generic history grid rules so the keyword search cannot occupy a
 * row by itself. */
@media (min-width: 1081px) {
  .history-filter-panel .history-filter-grid {
    grid-template-columns: minmax(180px, 1.65fr) minmax(260px, 1.85fr) repeat(5, minmax(110px, 1fr)) auto !important;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }
  .history-filter-panel .history-search-actions > .history-keyword-filter,
  .history-filter-panel .history-search-actions > .history-date-range,
  .history-filter-panel .history-search-actions > .history-filter-actions { grid-column: auto !important; }
}

/* Formula History is one continuous work surface. The tree is its left rail;
 * filters, KPIs, and the ledger are separated only by internal rules. */
.history-page .history-workspace {
  gap: 0 !important;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #e1e5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 42, 64, .035);
}
.history-page .history-store-org.history-org-panel {
  position: relative !important;
  top: auto;
  min-height: 0;
  box-sizing: border-box;
  border: 0 !important;
  border-right: 1px solid #e8ebf0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}
.history-page .history-main { gap: 0; background: transparent; }
.history-page .history-main > .history-filter-panel {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}
.history-page .history-main > [data-history-kpis] {
  padding: 0;
  border-bottom: 0;
  background: #fff;
}
/* Softer operational cards: a complete but low-contrast outline keeps the
 * four measures legible without the heavy boxed appearance. */
.history-page .history-summary .history-kpi {
  border: 1px solid #edf0f5 !important;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(22, 34, 54, .035);
}
.history-page .history-summary .history-kpi:hover {
  border-color: #d9d4f5 !important;
  box-shadow: 0 7px 16px rgba(40, 32, 101, .07);
}
.history-page .history-main > .history-panel {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}
body[data-theme="dark"] .history-page .history-workspace { border-color: #2b374a; background: #111a28; box-shadow: 0 2px 8px rgba(0, 0, 0, .24); }
body[data-theme="dark"] .history-page .history-store-org.history-org-panel,
body[data-theme="dark"] .history-page .history-main > .history-filter-panel,
body[data-theme="dark"] .history-page .history-main > [data-history-kpis] { border-color: #2b374a !important; }
body[data-theme="dark"] .history-page .history-main > [data-history-kpis] { background: #111a28; }
body[data-theme="dark"] .history-page .history-summary .history-kpi { border-color: #2b374a !important; }

/* A selected first row begins directly under the sticky table heading. Draw
 * its outline inside each cell and lift it above that heading so the top edge
 * remains complete instead of being visually clipped. */
.history-page .history-dispense-table tbody .history-record-row.detail-open {
  z-index: 5;
  transform: none;
  filter: drop-shadow(0 6px 12px rgba(104, 93, 187, .08));
}
.history-page .history-dispense-table tbody .history-record-row.detail-open td {
  position: relative;
  z-index: 3;
  background: #fbfaff;
  box-shadow: inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def;
}
.history-page .history-dispense-table tbody .history-record-row.detail-open td:first-child {
  border-radius: 8px 0 0 8px;
  box-shadow: inset 2px 0 0 #a49def, inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def;
}
.history-page .history-dispense-table tbody .history-record-row.detail-open td:last-child {
  border-radius: 0 8px 8px 0;
  box-shadow: inset -2px 0 0 #a49def, inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def;
}
body[data-theme="dark"] .history-page .history-dispense-table tbody .history-record-row.detail-open td { background: #1a1b2b; }

/* Formula History table headers: a small readability increase without altering row density. */
.history-dispense-table th { font-size: 13px !important; }

.history-dispense-table .history-table-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.history-dispense-table .history-table-heading-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: var(--history-heading-icon) center / contain no-repeat;
  mask: var(--history-heading-icon) center / contain no-repeat;
}
.history-dispense-table .history-table-heading-icon--submitted { --history-heading-icon: url("./assets/icons/history-submitted-time.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--organization { --history-heading-icon: url("./assets/icons/history-organization.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--customer { --history-heading-icon: url("./assets/icons/history-customer.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--formula { --history-heading-icon: url("./assets/icons/history-formula.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--operator { --history-heading-icon: url("./assets/icons/history-operator.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--device { --history-heading-icon: url("./assets/icons/history-device.svg?v=1"); }
.history-dispense-table .history-table-heading-icon--status { --history-heading-icon: url("./assets/icons/history-status.svg?v=1"); }

/* The content columns begin a little farther in than the disclosure/time
 * columns, matching the visual weight introduced by their new header icons. */
.history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+3):nth-child(-n+6) {
  padding-left: 36px !important;
}

/* Leave the header and column width untouched; shift only the operator name. */
.history-page .history-dispense-table tbody .history-record-row > td:nth-child(6) .history-operator-cell {
  transform: translateX(-12px);
}

/* A first selected record sits immediately below the sticky heading. Its
 * dedicated spacer gives the rounded top outline physical room to render. */
.history-page .history-dispense-table .history-record-top-spacer td {
  height: 8px !important;
  min-height: 8px !important;
}

@media (max-width: 1080px) {
  .history-page .history-store-org.history-org-panel { border-right: 0 !important; border-bottom: 1px solid #e8ebf0 !important; }
  body[data-theme="dark"] .history-page .history-store-org.history-org-panel { border-bottom-color: #2b374a !important; }
}

/*
 * Formula History final responsive contract
 *
 * This block intentionally comes last. The history page has several legacy
 * desktop rules in styles.css, and the comfortable-density layer above must
 * not re-expand the tree rail after the compact breakpoint has collapsed it.
 * The page itself never scrolls horizontally; only the ledger wrapper may do
 * so when its full column model is displayed.
 */
.history-page,
.history-page .history-workspace,
.history-page .history-main,
.history-page .history-filter-panel,
.history-page .history-summary {
  min-width: 0;
  max-width: 100%;
}

.history-page .history-main { container-type: inline-size; }

/* The one-row filter is only safe when the usable history main area is wide
 * enough. A 1440px viewport still loses the sidebar and organization rail. */
@media (max-width: 1460px) {
  .history-page .history-workspace {
    grid-template-columns: clamp(240px, 21vw, 280px) minmax(0, 1fr) !important;
    gap: var(--comfortable-layout-gap);
  }

  .history-page .history-summary .history-kpi {
    min-width: 0;
    padding-inline: 14px;
  }

  .history-page .history-kpi-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px;
  }

  .history-page .history-kpi-metric > strong,
  .history-page .history-kpi-secondary {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .history-page .history-kpi-bag-summary {
    min-width: 0;
    max-width: 46%;
  }

  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    column-gap: 12px;
    row-gap: 12px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter,
  .history-page .history-filter-panel .history-search-actions > .history-date-range,
  .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
    grid-column: 1 / -1 !important;
  }

  .history-page .history-filter-panel .history-filter-actions {
    justify-content: flex-end;
  }
}

/* A compact navigation rail leaves enough room for the history content. Let
 * the organization tree become a scope panel instead of reserving a second
 * narrow column beside the ledger. */
@media (max-width: 1080px) {
  .history-page .history-workspace {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter,
  .history-page .history-filter-panel .history-search-actions > .history-date-range,
  .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
    grid-column: auto !important;
  }

  .history-page .history-filter-panel .history-filter-actions {
    justify-content: flex-start;
  }
}

/* At wide desktop widths the full filter row is comfortable and preserves the
 * compact operational scan pattern shown in the approved desktop layout. */
@media (min-width: 1461px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: minmax(180px, 1.65fr) minmax(260px, 1.85fr) repeat(5, minmax(110px, 1fr)) auto !important;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }
}

/* Viewport width is not the usable history width: the application shell and
 * organization rail consume part of it. On a 1920px browser the main history
 * container can still be below 1600px, so keep the two-column filter there. */
@container (max-width: 1599px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    column-gap: 12px;
    row-gap: 12px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter,
  .history-page .history-filter-panel .history-search-actions > .history-date-range,
  .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
    grid-column: 1 / -1 !important;
  }

  .history-page .history-filter-panel .history-filter-actions {
    justify-content: flex-end;
  }
}

/* Give the contained table scroller an explicit affordance. The existing
 * history-table-scroll-guide class is kept available for future markup, while
 * the pseudo row covers the current server-rendered table without touching
 * the data or interaction contract. */
@container (max-width: 1260px) {
  .history-page .history-panel > [data-history-content] > .history-table-wrap::before {
    display: block;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: #fafbfc;
    color: var(--muted);
    content: "左右滑动查看完整字段";
    font-size: 11px;
    line-height: 16px;
  }
}

/* The compact row keeps the decision fields visible. Organization, operator,
 * and device remain available in the expanded record detail. */
@container (max-width: 820px) {
  .history-page .history-dispense-table {
    min-width: 760px !important;
  }

  .history-page .history-dispense-table th:nth-child(3),
  .history-page .history-dispense-table td:nth-child(3),
  .history-page .history-dispense-table th:nth-child(6),
  .history-page .history-dispense-table td:nth-child(6),
  .history-page .history-dispense-table th:nth-child(7),
  .history-page .history-dispense-table td:nth-child(7) {
    display: none !important;
  }

  .history-page .history-dispense-table th:nth-child(2),
  .history-page .history-dispense-table td:nth-child(2) { width: 154px !important; }
  .history-page .history-dispense-table th:nth-child(4),
  .history-page .history-dispense-table td:nth-child(4) { width: 170px !important; }
  .history-page .history-dispense-table th:nth-child(5),
  .history-page .history-dispense-table td:nth-child(5) { width: 230px !important; }
  .history-page .history-dispense-table th:nth-child(8),
  .history-page .history-dispense-table td:nth-child(8) { width: 120px !important; }

  .history-page .history-panel > [data-history-content] > .history-table-wrap::before {
    content: "可左右滑动；点击记录可查看组织、操作人和设备详情";
  }
}

/* Compact desktop contract: keep the shell and organization scope useful,
 * but return filter controls to their natural, button-like widths. */
@media (min-width: 1081px) {
  body .sidebar {
    width: 190px;
    padding-inline: 8px;
  }

  .brand {
    gap: 8px;
    padding-inline: 6px;
  }

  .nav-item {
    gap: 9px;
    padding-inline: 10px;
  }

  .history-page .history-workspace {
    grid-template-columns: clamp(220px, 15vw, 246px) minmax(0, 1fr) !important;
  }

  .history-page .history-store-org.history-org-panel {
    padding-inline: 14px;
  }
}

/* A medium history main area gets a compact five-column control rail. Search
 * remains prominent, while date and action controls stop stretching across
 * the full card. */
@container (min-width: 900px) and (max-width: 1599px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: minmax(220px, 1.55fr) minmax(180px, 1.2fr) repeat(3, minmax(120px, 1fr)) !important;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .history-page .history-filter-panel .history-search-actions > .history-date-range {
    grid-column: 1 / span 2 !important;
    width: min(420px, 100%);
  }

  .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
    grid-column: 3 !important;
    width: max-content;
    justify-content: flex-start;
  }

  .history-page .history-filter-panel .history-filter-grid > label:not(.history-keyword-filter):not(.history-date-range) {
    width: min(190px, 100%);
    justify-self: start;
  }

  .history-page .history-filter-panel .history-filter-select,
  .history-page .history-filter-panel .history-time-select {
    max-width: 190px;
  }

  .history-page .history-filter-panel .history-filter-select-trigger,
  .history-page .history-filter-panel .history-time-select-trigger {
    max-width: 190px;
  }
}

/* Below this usable width the compact rail would become too dense; stack the
 * controls intentionally instead of letting a button become unreadably narrow. */
@container (max-width: 899px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    row-gap: 12px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter,
  .history-page .history-filter-panel .history-search-actions > .history-date-range,
  .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
    grid-column: auto !important;
    width: 100%;
    max-width: none;
  }

  .history-page .history-filter-panel .history-filter-grid > label:not(.history-keyword-filter):not(.history-date-range) {
    width: 100%;
  }

  .history-page .history-filter-panel .history-filter-select,
  .history-page .history-filter-panel .history-time-select,
  .history-page .history-filter-panel .history-filter-select-trigger,
  .history-page .history-filter-panel .history-time-select-trigger {
    max-width: none;
  }
}

/* Formula History visual merge: the ledger is the page work surface on
 * desktop, so the old outer page gutter must not create two empty rails. */
@media (min-width: 1081px) {
  .history-page {
    width: 100%;
    max-width: none !important;
    padding: 0 0 32px !important;
  }

  .history-page .history-workspace {
    grid-template-columns: clamp(230px, 16vw, 270px) minmax(0, 1fr) !important;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .history-page .history-store-org.history-org-panel {
    padding-inline: 14px;
  }

  /* Restore button-like proportions instead of stretching every filter to
   * the full width of its grid track. */
  .history-page .history-filter-panel {
    padding: 14px 16px 12px;
  }

  .history-page .history-filter-grid {
    column-gap: 10px;
    row-gap: 8px;
  }

  .history-page :is(.history-time-select-trigger, .history-filter-select-trigger, .history-date-trigger) {
    height: 38px;
    min-height: 38px;
    padding-inline: 10px;
    border-radius: 6px;
    font-size: 12px;
  }

  .history-page .history-keyword-filter > div {
    height: 38px;
    padding-inline: 10px;
    border-radius: 6px;
  }

  .history-page .history-filter-actions {
    align-items: center;
    gap: 8px;
  }

  .history-page .history-filter-actions .primary-btn,
  .history-page .history-filter-actions .secondary-btn {
    height: 36px;
    min-height: 36px;
    padding-inline: 12px;
    border-radius: 6px;
    font-size: 12px;
  }

  .history-page .history-filter-actions .history-reset-icon {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  .history-page .history-panel-head {
    min-height: 52px;
    padding: 8px 14px;
  }

  .history-page .history-tabs {
    gap: 4px;
  }

  .history-page .history-tabs button {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
  }

  .history-page .history-panel-head > [data-history-top-pagination] .history-pagination {
    gap: 7px;
  }

  .history-page .history-panel-head > [data-history-top-pagination] .history-pagination nav button,
  .history-page .history-panel-head > [data-history-top-pagination] .history-page-picker-trigger {
    height: 30px;
    min-height: 30px;
    min-width: 30px;
    padding-inline: 8px;
  }

  /* The display-contents wrapper is intentional; these explicit placements
   * keep search, conditions, and actions in the compact three-row rhythm. */
  @container (min-width: 1000px) {
    .history-page .history-filter-panel .history-filter-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      grid-auto-flow: row;
      align-items: center;
    }

    .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
      grid-column: 1 / -1 !important;
      grid-row: 1;
      width: 100%;
      max-width: none;
    }

    .history-page .history-filter-panel .history-search-actions > .history-date-range {
      grid-column: 1 / span 2 !important;
      grid-row: 2;
      width: 100%;
    }

    .history-page .history-filter-grid > label.history-quick-range-field {
      grid-column: 3;
      grid-row: 2;
      width: 100%;
    }

    .history-page .history-filter-grid > label:nth-of-type(2) {
      grid-column: 4;
      grid-row: 2;
    }

    .history-page .history-filter-grid > label:nth-of-type(3) {
      grid-column: 5;
      grid-row: 2;
    }

    .history-page .history-filter-grid > label:nth-of-type(4) {
      grid-column: 1;
      grid-row: 3;
    }

    .history-page .history-filter-grid > label:nth-of-type(5) {
      grid-column: 2;
      grid-row: 3;
    }

    .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
      grid-column: 3 / span 3 !important;
      grid-row: 3;
      width: 100%;
      justify-content: flex-end;
    }
  }

  @container (min-width: 700px) and (max-width: 999px) {
    .history-page .history-filter-panel .history-filter-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      grid-auto-flow: row;
      align-items: center;
    }

    .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
      grid-column: 1 / -1 !important;
      grid-row: 1;
      width: 100%;
      max-width: none;
    }

    .history-page .history-filter-panel .history-search-actions > .history-date-range {
      grid-column: 1 / span 2 !important;
      grid-row: 2;
      width: 100%;
    }

    .history-page .history-filter-grid > label.history-quick-range-field {
      grid-column: 3;
      grid-row: 2;
    }

    .history-page .history-filter-grid > label:nth-of-type(2) {
      grid-column: 4;
      grid-row: 2;
    }

    .history-page .history-filter-grid > label:nth-of-type(3) {
      grid-column: 3;
      grid-row: 3;
    }

    .history-page .history-filter-grid > label:nth-of-type(4) {
      grid-column: 1;
      grid-row: 3;
    }

    .history-page .history-filter-grid > label:nth-of-type(5) {
      grid-column: 2;
      grid-row: 3;
    }

    .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
      grid-column: 4 !important;
      grid-row: 3;
      width: 100%;
      justify-content: flex-end;
    }
  }
}

/* English navigation uses natural wrapping for the long menu labels. This
 * preserves the full wording without letting the sidebar create page-level
 * horizontal overflow. */
@media (min-width: 1081px) {
  body .sidebar {
    width: 200px;
    overflow-x: hidden;
  }

  body .sidebar .brand > div:last-child,
  body .sidebar .nav-item > span:not(.nav-icon),
  body .sidebar .sidebar-footer > div:nth-child(2) {
    min-width: 0;
  }

  html[lang^="en"] body .sidebar {
    width: 210px;
  }

  html[lang^="en"] body .sidebar .brand strong,
  html[lang^="en"] body .sidebar .nav-item > span:not(.nav-icon),
  html[lang^="en"] body .sidebar .sidebar-footer strong,
  html[lang^="en"] body .sidebar .sidebar-footer small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
  }

  html[lang^="en"] body .sidebar .brand strong {
    line-height: 20px;
  }

  html[lang^="en"] body .sidebar .nav-item {
    height: auto;
    min-height: 43px;
    align-items: center;
    line-height: 17px;
  }
}

/* On a wide desktop canvas, keep every history filter and its actions in one
 * compact control line. The keyword search remains the only full-width row;
 * the data/query controls below it keep their natural button proportions. */
@media (min-width: 1081px) {
  @container (min-width: 900px) {
    .history-page .history-filter-panel .history-filter-grid {
      grid-template-columns: 190px 165px repeat(4, 112px) max-content !important;
      grid-auto-flow: row;
      align-items: center;
      column-gap: 8px;
      row-gap: 8px;
    }

    .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
      grid-column: 1 !important;
      grid-row: 1;
      width: 190px;
      max-width: 190px;
    }

    .history-page .history-filter-panel .history-search-actions > .history-date-range {
      grid-column: 2 !important;
      grid-row: 1;
      width: 165px;
    }

    .history-page .history-filter-grid > label.history-quick-range-field {
      grid-column: 3;
      grid-row: 1;
      width: 112px;
    }

    .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(2) {
      grid-column: 4;
      grid-row: 1;
    }

    .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(3) {
      grid-column: 5;
      grid-row: 1;
    }

    .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(4) {
      grid-column: 6;
      grid-row: 1;
    }

    .history-page .history-filter-panel .history-search-actions > .history-filter-actions {
      grid-column: 7 !important;
      grid-row: 1;
      width: max-content !important;
      justify-content: flex-start;
      gap: 6px;
    }

    /* The input used to be 40px tall inside a 38px shell. Its white fill then
     * painted over the shell border, especially in the focused state. */
    .history-page .history-keyword-filter > div {
      position: relative;
      z-index: 1;
      height: 34px;
      min-height: 34px;
      overflow: hidden;
      background: #fff;
    }

    .history-page .history-keyword-filter > div input {
      height: 100% !important;
      min-height: 0;
      line-height: 1;
      background: transparent !important;
    }

    .history-page .history-filter-actions .primary-btn,
    .history-page .history-filter-actions .secondary-btn {
      height: 34px;
      min-height: 34px;
      padding-inline: 10px;
      font-size: 11px;
    }

    .history-page .history-filter-actions .history-reset-icon {
      width: 34px;
      min-width: 34px;
    }
  }
}

/* Final history density overrides. Keep these last so legacy history rules
 * cannot re-expand the date/select controls or the ledger columns. */
@media (min-width: 1081px) {
  .history-page .history-filter-panel .history-filter-grid {
    grid-template-columns: 190px 200px repeat(4, 105px) max-content !important;
    column-gap: 8px;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter {
    width: 190px !important;
    max-width: 190px !important;
  }

  .history-page .history-filter-panel .history-search-actions > .history-date-range {
    width: 200px !important;
  }

  .history-page .history-filter-grid > label.history-quick-range-field,
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(2),
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(3),
  .history-page .history-filter-grid > label:not(.history-quick-range-field):nth-of-type(4) {
    width: 105px !important;
  }

  .history-page .history-date-range > div {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
  }

  .history-page .history-summary {
    gap: 10px;
  }

  .history-page .history-summary .history-kpi {
    min-height: 92px;
    padding: 12px 14px 13px;
    border-radius: 10px;
  }

  .history-page .history-summary .history-kpi:before {
    top: 13px;
    bottom: 13px;
  }

  .history-page .history-kpi-head {
    gap: 7px;
  }

  .history-page .history-kpi-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-radius: 6px;
  }

  .history-page .history-kpi-icon:before {
    inset: 5px;
  }

  .history-page .history-kpi-label {
    font-size: 11px !important;
  }

  .history-page .history-summary .history-kpi strong {
    padding-left: 32px;
    font-size: 20px;
    font-weight: 500;
  }

  .history-page .history-kpi-metric {
    gap: 8px;
    padding-left: 32px;
  }

  .history-page .history-kpi-action-hint {
    font-size: 10px;
  }

  .history-page .history-kpi-bag-summary small {
    font-size: 9px;
  }

  .history-page .history-kpi-bag-summary b {
    font-size: 13px;
  }

  .history-page .history-panel > [data-history-content] > .history-table-wrap {
    overflow-x: hidden !important;
  }

  .history-page .history-panel > [data-history-content] > .history-table-wrap::before {
    display: none !important;
  }

  .history-page .history-dispense-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 11px;
  }

  .history-page .history-dispense-table th,
  .history-page .history-dispense-table td {
    box-sizing: border-box;
    padding: 8px 7px !important;
    font-size: 11px !important;
    line-height: 15px;
  }

  .history-page .history-dispense-table th:nth-child(1),
  .history-page .history-dispense-table td:nth-child(1) { width: 4% !important; }
  .history-page .history-dispense-table th:nth-child(2),
  .history-page .history-dispense-table td:nth-child(2) { width: 14% !important; }
  .history-page .history-dispense-table th:nth-child(3),
  .history-page .history-dispense-table td:nth-child(3) { width: 13% !important; }
  .history-page .history-dispense-table th:nth-child(4),
  .history-page .history-dispense-table td:nth-child(4) { width: 12% !important; }
  .history-page .history-dispense-table th:nth-child(5),
  .history-page .history-dispense-table td:nth-child(5) { width: 20% !important; }
  .history-page .history-dispense-table th:nth-child(6),
  .history-page .history-dispense-table td:nth-child(6) { width: 15% !important; }
  .history-page .history-dispense-table th:nth-child(7),
  .history-page .history-dispense-table td:nth-child(7) { width: 14% !important; }
  .history-page .history-dispense-table th:nth-child(8),
  .history-page .history-dispense-table td:nth-child(8) { width: 8% !important; }

  .history-page .history-dispense-table .history-table-heading {
    gap: 4px;
    font-size: 10px;
  }

  .history-page .history-dispense-table .history-table-heading-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .history-page .history-dispense-table time,
  .history-page .history-dispense-table :is(.history-operator-cell, .history-org-cell, .history-device-cell, .history-customer-cell) {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-page .history-dispense-table .history-formula-cell,
  .history-page .history-dispense-table .history-formula-cell strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .history-page .history-dispense-table .history-formula-cell strong,
  .history-page .history-dispense-table .history-device-cell,
  .history-page .history-dispense-table .history-device-code {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .history-page .history-dispense-table .history-badge {
    width: 100%;
    min-width: 70px;
    min-height: 28px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 2px 4px rgba(36, 48, 70, .08);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .history-page .history-dispense-table .history-badge.success {
    border: 1px solid #d8f0e4;
    background: linear-gradient(180deg, #effbf5 0%, #e2f5eb 100%);
    color: #159565;
  }

  .history-page .history-dispense-table .history-badge.danger {
    border: 1px solid #f8dfe2;
    background: linear-gradient(180deg, #fff5f5 0%, #fdebed 100%);
    color: #d84f61;
  }

  body[data-active-page="history"] .history-operator-list-trigger {
    grid-template-columns: 34px minmax(170px, 1.4fr) repeat(3, minmax(72px, .6fr)) minmax(96px, .7fr);
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
  }

  body[data-active-page="history"] .history-operator-avatar {
    width: 30px;
    height: 30px;
  }

  body[data-active-page="history"] .history-operator-list-metric small {
    font-size: 10px;
  }

  body[data-active-page="history"] .history-operator-list-metric b {
    font-size: 12px;
  }

  body[data-active-page="history"] .history-operator-detail-link {
    font-size: 11px;
  }
}

@media (min-width: 1081px) {
  /* This is the terminal override for the old icon-alignment inset. */
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+3):nth-child(-n+6) {
    padding-left: 7px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(6) .history-operator-cell {
    transform: none !important;
  }
}

/* History table header readability: every header cell uses the same inset,
 * icon-to-label gap, and vertical rhythm. Only the header is enlarged; row
 * data and its existing column positions remain unchanged. */
@media (min-width: 1081px) {
  .history-dispense-table thead th {
    box-sizing: border-box;
    height: 50px !important;
    padding: 10px 12px !important;
    color: #64738a;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 20px !important;
    text-align: left;
    vertical-align: middle;
  }

  .history-dispense-table thead th:first-child {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .history-dispense-table thead .history-table-heading {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-dispense-table thead .history-table-heading-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    opacity: .95;
  }
}

/* Use one measurable rhythm for every icon-led table heading. The SVG masks
 * have different visible shapes, so fixed boxes plus one shared gap prevent
 * the label spacing from appearing different from column to column. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table {
    --history-header-cell-inset: 12px;
    --history-header-icon-size: 17px;
    --history-header-label-gap: 10px;
  }

  .history-page .history-dispense-table thead th {
    padding-left: var(--history-header-cell-inset) !important;
    padding-right: var(--history-header-cell-inset) !important;
  }

  .history-page .history-dispense-table thead th:first-child {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .history-page .history-dispense-table thead .history-table-heading {
    gap: var(--history-header-label-gap) !important;
  }

  .history-page .history-dispense-table thead .history-table-heading-icon {
    width: var(--history-header-icon-size) !important;
    height: var(--history-header-icon-size) !important;
    flex: 0 0 var(--history-header-icon-size) !important;
  }
}

/* Keep record typography on the same neutral baseline as the submission
 * time. Status colors remain semantic, while size, weight and line-height
 * stay consistent with the rest of the row. */
@media (min-width: 1081px) {
  .history-dispense-table tbody .history-record-row :is(
    time,
    .history-record-date,
    .history-record-time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-formula-cell strong,
    .history-formula-cell small,
    .history-operator-cell,
    .history-device-cell,
    .history-device-code,
    .history-badge
  ) {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
  }

  .history-dispense-table tbody .history-record-row :is(
    .history-record-date,
    .history-record-time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-formula-cell strong,
    .history-formula-cell small,
    .history-operator-cell,
    .history-device-cell,
    .history-device-code
  ) {
    color: #647087 !important;
  }

  .history-dispense-table tbody .history-record-row .history-formula-cell strong,
  .history-dispense-table tbody .history-record-row .history-formula-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-dispense-table tbody .history-record-row .history-formula-cell small {
    margin-top: 3px;
  }

  .history-dispense-table tbody .history-record-row .history-badge {
    font-weight: 500 !important;
  }
}

/* Final desktop width balance: keep the table inside the content panel and
 * reserve enough room for the device and status headers. Long record values
 * continue to truncate inside their cells; typography is intentionally not
 * changed here. */
@media (min-width: 1081px) {
  body .history-dispense-table.history-dispense-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .history-panel > [data-history-content] > .history-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .history-dispense-table.history-dispense-table th:nth-child(1),
  body .history-dispense-table.history-dispense-table td:nth-child(1) { width: 3.5% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(2),
  body .history-dispense-table.history-dispense-table td:nth-child(2) { width: 13% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(3),
  body .history-dispense-table.history-dispense-table td:nth-child(3) { width: 12% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(4),
  body .history-dispense-table.history-dispense-table td:nth-child(4) { width: 11% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(5),
  body .history-dispense-table.history-dispense-table td:nth-child(5) { width: 19% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(6),
  body .history-dispense-table.history-dispense-table td:nth-child(6) { width: 13% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(7),
  body .history-dispense-table.history-dispense-table td:nth-child(7) { width: 16% !important; }
  body .history-dispense-table.history-dispense-table th:nth-child(8),
  body .history-dispense-table.history-dispense-table td:nth-child(8) { width: 12.5% !important; }

  .history-dispense-table thead th,
  .history-dispense-table tbody td {
    min-width: 0 !important;
  }

  .history-dispense-table thead .history-table-heading,
  .history-dispense-table tbody td > :is(
    time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-operator-cell,
    .history-device-cell,
    .history-badge
  ) {
    min-width: 0;
    max-width: 100%;
  }
}

/* Keep the KPI row and the interaction-tab row on the same content rails.
 * The shared inset aligns both rows without changing the KPI card height. */
@media (min-width: 1081px) {
  .history-page .history-main {
    --history-row-inset: 14px;
    --history-kpi-gap: 28px;
  }

  .history-page .history-main > [data-history-kpis] {
    box-sizing: border-box;
    background: transparent;
    padding-inline: var(--history-row-inset);
  }

  .history-page .history-main > .history-panel > .history-panel-head {
    padding-inline: var(--history-row-inset);
  }

  .history-page .history-main > [data-history-kpis] > .history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--history-kpi-gap);
    row-gap: 18px;
    width: 100%;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi {
    width: 100%;
    height: 92px;
    min-width: 0;
    min-height: 92px;
    max-height: 92px;
    box-sizing: border-box;
  }
}

/* Focused history search: the render adapter moves the keyword field into
 * .history-search-actions (display: contents). Keep the grid tracks fixed and
 * let only the focused field overflow to the right. This creates a lifted,
 * floating extension without pushing the date/filter/action controls. */
@media (min-width: 1281px) {
  .history-page .history-filter-panel,
  .history-page .history-filter-panel .history-filter-grid {
    overflow: visible;
  }

  .history-page .history-filter-panel .history-search-actions > .history-keyword-filter:focus-within,
  .history-page .history-filter-panel .history-filter-grid > .history-keyword-filter:focus-within {
    width: 480px !important;
    max-width: 480px !important;
    min-width: 0 !important;
    box-sizing: border-box;
    position: relative;
    transform: translateY(-3px);
    z-index: 230;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-page .history-filter-panel .history-keyword-filter,
  .history-page .history-filter-panel .history-keyword-filter > div {
    transition: none !important;
  }
}

/* Align the store value with the “门店” label rather than with its leading
 * header icon.  The header intentionally keeps its icon, so this offset is
 * limited to the desktop body cell and does not change the table grid. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(3) {
    padding-left: 37px !important;
  }
}

/* Keep every record value under the text portion of its icon-led header.
 * The table has a dedicated disclosure column first. Each remaining header
 * reserves 12px cell padding + 17px icon + 8px gap; data rows use that same
 * 37px text rail so the value is aligned with the label, not the icon. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table {
    --history-data-text-inset: 37px;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+8) {
    box-sizing: border-box;
    padding-left: var(--history-data-text-inset) !important;
    padding-right: 12px !important;
    text-align: left !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+8) > * {
    margin-left: 0 !important;
    transform: none !important;
  }

  /* Match the legacy operator selector's specificity so its historical
   * horizontal nudge cannot reintroduce a one-column drift. */
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(6) .history-operator-cell {
    transform: none !important;
  }

  .history-page .history-dispense-table thead th:nth-child(n+2) .history-table-heading {
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* Keep the disclosure rail compact on wide screens. Its width used to be
 * percentage-based, so the blank area before 提交时间 grew with the viewport.
 * The rail is reduced from its right edge; the arrow remains a comfortable
 * hit target while the first data column moves left instead of expanding. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table th:first-child,
  .history-page .history-dispense-table td:first-child {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
    text-align: center !important;
  }

  /* The common 37px text rail is correct for icon-led columns, but the
   * submitted-time column already follows the disclosure arrow. Reducing its
   * inset keeps the red-box gap from reappearing after the rail is narrowed. */
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(2) {
    padding-left: 12px !important;
  }

  /* Pull the submitted-time value toward the disclosure arrow. The cell
   * keeps its grid width for stable column alignment; only the visible value
   * moves, removing the remaining oversized gap in the first record rail. */
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(2) > * {
    position: relative;
    left: -48px;
  }
}

/* Keep every visible history record on one predictable vertical rhythm.
 * Several legacy table rules set different cell padding and let each field
 * choose its own height. A record now owns a fixed-height grid row; single
 * line values are centered against the same two-line baseline used by time,
 * formula, and device values. Long values remain readable but cannot make
 * one record taller than its neighbours. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td {
    box-sizing: border-box;
    height: 76px !important;
    min-height: 76px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td > :is(
    time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-operator-cell,
    .history-device-cell,
    .history-badge
  ) {
    display: flex;
    flex-direction: column;
    min-height: 34px;
    justify-content: center;
    align-items: center;
  }

  .history-page .history-dispense-table tbody .history-record-row > td > :is(
    .history-org-cell,
    .history-customer-cell,
    .history-operator-cell,
    .history-device-cell
  ) {
    align-items: flex-start;
  }

  .history-page .history-dispense-table tbody .history-record-row > td > time,
  .history-page .history-dispense-table tbody .history-record-row .history-formula-cell {
    gap: 2px;
  }

  .history-page .history-dispense-table tbody .history-record-row .history-formula-cell strong,
  .history-page .history-dispense-table tbody .history-record-row .history-formula-cell small,
  .history-page .history-dispense-table tbody .history-record-row .history-device-code {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 15px !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .history-page .history-dispense-table tbody .history-record-row .history-formula-cell small {
    margin-top: 0;
  }

  .history-page .history-dispense-table tbody .history-record-row .history-badge {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Final body/header inset match. A more-specific legacy selector still gave
 * every record cell a 37px left text rail, while the icon-led header starts at
 * the shared 12px cell inset. Override that selector explicitly so the record
 * values start at the same x-coordinate as their header icons. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+8) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+8) > * {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* Terminal column model for the history ledger.
 * The renderer emits exactly eight columns: one disclosure rail followed by
 * the seven visible fields. Keep both header and body on the same colgroup
 * tracks; cell-level legacy widths are neutralized here so later maintenance
 * cannot make the two rows drift apart again. */
@media (min-width: 1081px) {
  .history-page .history-panel > [data-history-content] > .history-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .history-page .history-dispense-table.history-dispense-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .history-page .history-dispense-table col.history-col-disclosure {
    width: 4% !important;
  }

  .history-page .history-dispense-table col.history-col-data {
    width: 13.7142857143% !important;
  }

  .history-page .history-dispense-table thead,
  .history-page .history-dispense-table tbody {
    width: 100% !important;
  }

  .history-page .history-dispense-table thead tr,
  .history-page .history-dispense-table tbody .history-record-row {
    display: table-row !important;
  }

  .history-page .history-dispense-table thead th,
  .history-page .history-dispense-table tbody .history-record-row > td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    position: static !important;
    transform: none !important;
  }

  .history-page .history-dispense-table thead th {
    padding: 10px 14px !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td {
    padding: 14px !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  .history-page .history-dispense-table :is(
    .history-table-heading,
    time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-operator-cell,
    .history-device-cell,
    .history-badge
  ) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .history-page .history-dispense-table thead .history-table-heading {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .history-page .history-dispense-table thead .history-table-heading-icon {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+7) > * {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:last-child {
    text-align: center !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:last-child > .history-badge {
    display: inline-flex !important;
    width: min(100%, 96px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Final history header alignment. Use one equal-width track for each visible
 * information column. This makes the start position of 提交时间、门店、客户名称、
 * 配方信息、操作人、设备信息、状态信息 evenly spaced instead of inheriting
 * the old unequal column widths. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table.history-dispense-table {
    table-layout: fixed !important;
  }

  .history-page .history-dispense-table thead {
    display: table-header-group !important;
  }

  .history-page .history-dispense-table thead tr {
    display: table-row !important;
  }

  .history-page .history-dispense-table th,
  .history-page .history-dispense-table td {
    box-sizing: border-box;
  }

  .history-page .history-dispense-table th:first-child,
  .history-page .history-dispense-table td:first-child {
    width: 4% !important;
    min-width: 56px !important;
  }

  .history-page .history-dispense-table th:nth-child(n+2),
  .history-page .history-dispense-table td:nth-child(n+2) {
    width: 13.7142857% !important;
  }

  .history-page .history-dispense-table thead th {
    display: table-cell !important;
    position: static !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  .history-page .history-dispense-table thead th:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .history-page .history-dispense-table thead .history-table-heading {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center;
    gap: 8px !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  .history-page .history-dispense-table thead .history-table-heading-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }
}

/* Single source of truth for the history table columns. The colgroup in the
 * renderer owns the grid: one disclosure rail plus seven equal information
 * tracks. This final rule deliberately neutralizes every legacy nth-child
 * width so the visual interval between headings cannot drift. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table.history-dispense-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .history-page .history-dispense-table col.history-col-disclosure {
    width: 4% !important;
  }

  .history-page .history-dispense-table col.history-col-data {
    width: 13.7142857% !important;
  }

  .history-page .history-dispense-table th,
  .history-page .history-dispense-table td {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .history-page .history-dispense-table th {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .history-page .history-dispense-table th:first-child,
  .history-page .history-dispense-table td:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
  }

  .history-page .history-dispense-table thead .history-table-heading {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Apply the same equal-column model to the record list. Legacy rules used
 * per-column translations and mixed centered/left content, which made the
 * body appear to use different spacing from the header. Every value now
 * starts from the same inset inside its equal track; only the status control
 * remains centered within its own track. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td {
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: left !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(n+2):nth-child(-n+7) > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(8) {
    text-align: center !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(8) > .history-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* The submitted-time value must stay in its own table cell. An old desktop
 * adjustment used left:-48px to compensate for a previous column model; with
 * the shared colgroup that moves only the date outside its column and makes
 * the first header look detached from the records. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(2) > time {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* Keep a minimal physical gap below the sticky header. This is intentionally
 * only 6px: it prevents the first row's rounded focus outline from being
 * clipped without reintroducing the old oversized blank band. */
.history-page .history-dispense-table tbody .history-record-top-spacer {
  display: table-row !important;
  height: 6px !important;
}

.history-page .history-dispense-table tbody .history-record-top-spacer > td {
  height: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
}

/* Device identifiers are single-line values. They truncate inside the
 * device column instead of wrapping into a second visual line and making the
 * record appear misaligned with the table header. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(7) .history-device-cell,
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(7) .history-device-code {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Compact the desktop record rhythm after the column alignment fix. Keep a
 * two-line baseline for date/formula values and enough room for the status
 * badge, while removing the excessive legacy row height. Device identifiers
 * are single-line, so they no longer need a tall row. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td {
    height: 56px !important;
    min-height: 56px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .history-page .history-dispense-table tbody .history-record-row > td > :is(
    time,
    .history-org-cell,
    .history-customer-cell,
    .history-formula-cell,
    .history-operator-cell,
    .history-device-cell,
    .history-badge
  ) {
    min-height: 24px !important;
  }
}

/* Keep the selected record outline visible at the sticky header boundary.
 * The shared table model resets cell positioning, so promote only the opened
 * row and its cells above the header layer. Ordinary rows keep the normal
 * stacking order. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table thead {
    z-index: 1 !important;
  }

  .history-page .history-dispense-table tbody .history-record-row.detail-open {
    position: relative !important;
    z-index: 8 !important;
    transform: translateZ(0) !important;
  }

  .history-page .history-dispense-table tbody .history-record-row.detail-open > td {
    position: relative !important;
    z-index: 9 !important;
    background: #fbfaff !important;
    box-shadow: inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def !important;
  }

  .history-page .history-dispense-table tbody .history-record-row.detail-open > td:first-child {
    border-radius: 8px 0 0 8px !important;
    box-shadow: inset 2px 0 0 #a49def, inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def !important;
  }

  .history-page .history-dispense-table tbody .history-record-row.detail-open > td:last-child {
    border-radius: 0 8px 8px 0 !important;
    box-shadow: inset -2px 0 0 #a49def, inset 0 2px 0 #a49def, inset 0 -2px 0 #a49def !important;
  }

body[data-theme="dark"] .history-page .history-dispense-table tbody .history-record-row.detail-open > td {
    background: #1a1b2b !important;
  }
}

/* Device IDs use the full available value in two lines. The previous
 * single-line ellipsis hid the tail of valid IDs such as the A124861 suffix;
 * allow a controlled two-line break inside the device column instead. */
@media (min-width: 1081px) {
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(7) .history-device-cell,
  .history-page .history-dispense-table tbody .history-record-row > td:nth-child(7) .history-device-code {
    display: -webkit-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 15px !important;
  }
}

/* Content-driven history surface: short result sets should not inherit a
 * viewport-sized organization card or leave a large artificial gray block
 * below the actual work surface. Long result sets still grow naturally and
 * keep the existing table/pagination behavior. */
@media (min-width: 1081px) {
  body[data-active-page="history"] #page-content,
  body[data-active-page="history"] .history-page,
  body[data-active-page="history"] .history-workspace,
  body[data-active-page="history"] .history-main,
  body[data-active-page="history"] .history-panel,
  body[data-active-page="history"] .history-panel > [data-history-content] {
    min-height: 0 !important;
    height: auto !important;
  }

  body[data-active-page="history"] .history-page {
    padding-bottom: 16px !important;
  }

  body[data-active-page="history"] .history-workspace {
    align-items: start !important;
  }

  body[data-active-page="history"] .history-store-org.history-org-panel,
  body[data-active-page="history"] .history-org-panel {
    min-height: 0 !important;
    height: max-content !important;
    max-height: none !important;
  }

  body[data-active-page="history"] .history-store-org .history-org-tree,
  body[data-active-page="history"] .history-org-panel .history-org-tree {
    max-height: min(620px, calc(100dvh - 300px)) !important;
  }
}

/* Final KPI geometry override: keep Formula History aligned with the device
 * management KPI cards even when the later content-rail rule is active. */
@media (min-width: 1081px) {
  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi {
    position: relative;
    display: flex;
    width: 280px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 12px 14px !important;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 54, .035);
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-label {
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-metric {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    padding-left: 37px;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-metric > strong {
    margin: 0;
    padding: 0;
    color: #596579;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .history-page .history-main > [data-history-kpis] > .history-summary > .history-kpi .history-kpi-secondary {
    min-width: 0;
    overflow: hidden;
    color: #687487;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Re-enable the exact raised-surface treatment from Device Management after
 * the history-page geometry rules have finished cascading. */
.history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .device-history-kpi {
  border-color: #d6dfe8 !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 8px rgba(33, 48, 72, .08), 0 1px 2px rgba(33, 48, 72, .05) !important;
}

.history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .device-history-kpi .history-kpi-icon {
  border-color: #d8dde4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(33, 48, 72, .08);
}

body[data-theme="dark"] .history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .device-history-kpi {
  background: linear-gradient(180deg, #182435 0%, #151f2e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 8px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .18) !important;
}

.history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .history-kpi-dye .history-kpi-icon::before {
  display: none !important;
}

.history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .history-kpi .history-kpi-source-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-page .history-main > [data-history-kpis].device-history-main > .history-summary.device-metrics > .history-kpi .history-kpi-icon::before {
  display: none !important;
  content: none !important;
}

.history-page .history-kpi-bag-summary {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}