/* Orders surface polish. Dense grid, saved columns, inline viewport,
   breakpoints and semantic state fills stay with the existing renderers.
   Keep this layer visual: no font, dimension, layout or visibility changes. */

/* Shared office neutral palette; dark continues to inherit the APP palette. */
html:not(:is([data-theme="dark"],[data-theme="dim"])) #panel-orders,
html:not(:is([data-theme="dark"],[data-theme="dim"])) #orders-detail.emr-orders-detail {
  --bg: var(--emr-bg-muted);
  --bg2: var(--emr-bg);
  --bg3: var(--emr-bg-subtle);
  --bg4: var(--emr-border);
  --border: var(--emr-border);
  --border2: var(--emr-border-strong);
  --text: var(--emr-text);
  --text2: var(--emr-text-muted);
  --text3: var(--emr-text-subtle);
  --text4: var(--emr-text-faint);
}

/* Only surface/effect tokens in dark: no local --bg/--text/--border overrides. */
#panel-orders,
#orders-detail.emr-orders-detail {
  --ord-pol-ink: var(--text);
  --ord-pol-ink: color-mix(in srgb, var(--gold, #f5a800) 30%, var(--text));
  --ord-pol-focus: var(--text);
  --ord-pol-focus: color-mix(in srgb, var(--gold, #f5a800) 35%, var(--text));
  --ord-pol-surface-shadow: 0 1px 2px rgba(0, 0, 0, .045);
  --ord-pol-header-shadow: 0 1px 0 var(--border2), 0 3px 8px rgba(0, 0, 0, .055);
  --ord-pol-popover-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  --ord-pol-drawer-shadow: 0 0 32px rgba(0, 0, 0, .18);
  --ord-pol-hover-edge: rgba(0, 0, 0, .08);
  --ord-pol-selected-edge: rgba(245, 168, 0, .6);
  --ord-pol-control-inset: inset 0 1px 2px rgba(0, 0, 0, .035);
}
html:is([data-theme="dark"],[data-theme="dim"]) #panel-orders,
html:is([data-theme="dark"],[data-theme="dim"]) #orders-detail.emr-orders-detail {
  --ord-pol-ink: var(--text);
  --ord-pol-ink: color-mix(in srgb, var(--gold, #f5a800) 65%, var(--text));
  --ord-pol-focus: var(--text);
  --ord-pol-focus: color-mix(in srgb, var(--gold, #f5a800) 55%, var(--text));
  --ord-pol-surface-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  --ord-pol-header-shadow: 0 1px 0 var(--border2), 0 3px 8px rgba(0, 0, 0, .2);
  --ord-pol-popover-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  --ord-pol-drawer-shadow: 0 0 32px rgba(0, 0, 0, .4);
  --ord-pol-hover-edge: rgba(255, 255, 255, .12);
  --ord-pol-selected-edge: rgba(245, 168, 0, .7);
  --ord-pol-control-inset: inset 0 1px 2px rgba(0, 0, 0, .16);
}

/* Workspace chrome: one visual band, with the same horizontally scrolling row. */
#panel-orders .emr-orders-main > .section-hdr.emr-orders-onerow {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  box-shadow: inset 0 2px 0 var(--gold, #f5a800);
}
#panel-orders #orders-search {
  box-shadow: var(--ord-pol-control-inset);
}
#panel-orders #orders-search::placeholder {
  color: var(--text4);
  opacity: 1;
}
#panel-orders .emr-orders-onerow :is(select, .emr-orders-date-btn),
#panel-orders .emr-orders-filtersrow select,
#panel-orders .emr-orders-pagerbar-size {
  box-shadow: var(--ord-pol-control-inset);
}
#panel-orders #orders-date-popover {
  box-shadow: var(--ord-pol-popover-shadow);
}
/* Keep exception fills/borders and semantic chip count colors as rendered. */
#panel-orders #orders-stat-chips .emr-orders-chip:not(.is-exception) {
  box-shadow: var(--ord-pol-surface-shadow);
}
#panel-orders #orders-summary-row,
#panel-orders .emr-orders-pagerbar {
  box-shadow: inset 0 1px 0 var(--border);
}

/* Two IDs intentionally beat late #panel-orders rules from source part 028. */
#panel-orders #orders-list-wrap .emr-orders-thead {
  background: var(--bg2);
  color: var(--text2);
  border-bottom-color: var(--border2);
  box-shadow: var(--ord-pol-header-shadow);
}
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted,
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted .emr-sort-arrow {
  color: var(--ord-pol-ink);
}
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted {
  text-decoration: underline;
  text-decoration-color: var(--gold, #f5a800);
  text-underline-offset: 3px;
}
#panel-orders #orders-list .emr-orders-group-hdr {
  background: var(--bg2);
  color: var(--ord-pol-ink);
  border-bottom-color: var(--border);
}
#panel-orders #orders-list .emr-orders-row {
  border-bottom-color: var(--border);
}
/* No background rule on rows: inline tracking/profit tint remains authoritative.
   Left border remains the existing 3px overdue/selection indicator. */
#panel-orders #orders-list .emr-orders-row:hover {
  box-shadow: inset 0 1px 0 var(--ord-pol-hover-edge),
              inset 0 -1px 0 var(--ord-pol-hover-edge);
}
#panel-orders #orders-list .emr-orders-row.is-selected {
  box-shadow: inset 0 1px 0 var(--ord-pol-selected-edge),
              inset 0 -1px 0 var(--ord-pol-selected-edge);
}
#panel-orders #orders-list .emr-orders-row:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px var(--ord-pol-focus);
}

/* One-click panel: existing sticky viewport, persistent map and tab body stay. */
#panel-orders #orders-list .emr-orders-inline-panel {
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--border2);
}
#panel-orders #orders-list .emr-orders-inline-strip {
  background: var(--bg2);
  border-bottom-color: var(--border);
}
#panel-orders #orders-list .emr-orders-inline-tab.is-active {
  background: var(--bg2);
  color: var(--ord-pol-ink);
  box-shadow: var(--ord-pol-surface-shadow);
}
#panel-orders #orders-list :is(.emr-orders-inline-fin-cell, .emr-orders-inline-ctx-card) {
  box-shadow: var(--ord-pol-surface-shadow);
}
#panel-orders #orders-list .emr-orders-inline-table th {
  color: var(--text2);
  border-bottom-color: var(--border2);
}
#panel-orders #orders-list .emr-orders-inline-table td {
  border-bottom-color: var(--border);
}
/* This is map chrome, not a semantic ETA state. Remove existing navy backdrop
   injected by 025:390; renderer-supplied inline state colors still win. */
#panel-orders #orders-list .emr-orders-inline-map-eta {
  background: var(--bg2);
  color: var(--text);
  box-shadow: var(--ord-pol-popover-shadow);
}
#panel-orders #orders-list .emr-orders-inline-map-eta :is(.ns, .eta) span {
  color: var(--text3);
}
#panel-orders #orders-list .emr-orders-inline-map-eta .eta {
  color: var(--text);
}

/* Full detail / responsive drawer: only chrome, no modal sizing changes. */
#panel-orders #orders-detail {
  border-left-color: var(--border2);
  box-shadow: var(--ord-pol-drawer-shadow);
}
#orders-detail.emr-orders-detail .emr-orders-detail-head {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  box-shadow: inset 0 2px 0 var(--gold, #f5a800);
}
#orders-detail.emr-orders-detail #orders-detail-id {
  color: var(--text);
}
#orders-detail.emr-orders-detail .emr-orders-detail-tab.is-active {
  background: var(--bg);
  color: var(--ord-pol-ink);
}
#orders-detail.emr-orders-detail :is(.emr-orders-detail-meta-cell,
  .emr-odt-equip-card, .emr-odt-stop, .emr-odt-tot-cell, .emr-odt-rev-cell) {
  box-shadow: var(--ord-pol-surface-shadow);
}
#orders-detail.emr-orders-detail :is(.emr-orders-detail-meta-label, .emr-odt-section-hdr) {
  color: var(--text2);
}
#orders-detail.emr-orders-detail :is(.emr-orders-detail-actionbtn,
  .emr-orders-detail-close, .emr-orders-activity-rail-refresh) {
  box-shadow: var(--ord-pol-surface-shadow);
}

/* Scoped navigation polish keeps the existing 20px controls and disabled state. */
#panel-orders .dispatch-load-nav button {
  box-shadow: var(--ord-pol-surface-shadow);
}
#panel-orders .dispatch-load-nav button:hover:not(:disabled) {
  color: var(--ord-pol-ink);
}
/* Insets keep focus visible inside scroll/clipping containers. Row focus above
   is separate; it never changes the red overdue border or amber selection. */
#panel-orders :is(.emr-orders-onerow, .emr-orders-filtersrow, .emr-orders-pagerbar,
  .emr-orders-inline-panel) :is(button, a, input, select, textarea, [tabindex]):focus-visible,
#orders-detail.emr-orders-detail :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ord-pol-focus);
  outline-offset: -2px;
}

/* Existing phone cards have tighter vertical content. Keep their original
   outline placement at the card edge so focus does not cross the badge text. */
@media (max-width: 767px) {
  #panel-orders #orders-list .emr-orders-row:focus-visible {
    outline-color: var(--ord-pol-focus);
    box-shadow: inset 2px 0 0 var(--ord-pol-focus);
  }
}

/* System high-contrast colors retain an explicit keyboard focus indicator. */
@media (forced-colors: active) {
  #panel-orders #orders-list .emr-orders-row:focus-visible {
    outline-color: Highlight;
  }
}