/* FRONTEND-HIERARCHY-20260920
 * Screen-only hierarchy for the five daily office workspaces. No geometry,
 * visibility, row fills, status colors or behavior overrides. Explicit roots
 * keep the sidebar, SIMON, driver/broker portals and print output untouched.
 */
:root {
  --office-heading-bg: #29323c;
  --office-heading-text: #f8fafc;
  --office-heading-divider: #56616e;
  --office-surface-shadow: 0 2px 6px #14243a0d;
  --office-selected: color-mix(in srgb, var(--gold, #f5a800) 22%, var(--emr-card-bg));
  --office-section: color-mix(in srgb, var(--emr-border) 55%, var(--emr-card-bg));
}
html:is([data-theme="dark"],[data-theme="dim"]) {
  --office-heading-bg: #303030;
  --office-heading-text: #f5f5f5;
  --office-heading-divider: #626262;
  --office-surface-shadow: 0 2px 6px #00000040;
}

/* A firm header band separates column names from live business data. Keep
 * sticky positioning and resize handles owned by the existing tables. */
#panel-orders #orders-list-wrap .emr-orders-thead,
#panel-manifest #mf-table thead,
#panel-manifest #mf-table thead .emr-mfl-th,
#panel-accounting .emr-bill-table thead .col,
#panel-fleetadmin table thead th,
#panel-wboard #wb-table thead tr.wb-thead-axis th {
  background: var(--office-heading-bg) !important;
  color: var(--office-heading-text) !important;
  border-bottom-color: var(--office-heading-divider) !important;
  box-shadow: inset 0 -1px 0 var(--office-heading-divider);
}
#panel-orders #orders-list-wrap .emr-orders-th,
#panel-orders #orders-list-wrap .emr-orders-th:hover,
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted,
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted .emr-sort-arrow,
#panel-wboard #wb-table thead tr.wb-thead-axis th[data-axis] span {
  color: var(--office-heading-text);
}
#panel-orders #orders-list-wrap .emr-sort-arrow { opacity: .7; }
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted .emr-sort-arrow { opacity: 1; }
#panel-manifest #mf-table .emr-mfl-th.is-sorted {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Gold/custom accents may be too dark against a charcoal header: a white
 * underline marks the sorted column independently of the chosen accent. */
#panel-orders #orders-list-wrap .emr-orders-th.is-sorted,
#panel-manifest #mf-table .emr-mfl-th.is-sorted {
  text-decoration-color: var(--office-heading-text);
}
#panel-accounting .emr-bill-table thead .grp:is(.invoice,.paperwork,.order,.billing,.assignees) {
  background: var(--office-section);
  color: var(--emr-text);
  box-shadow: inset 0 -1px 0 var(--emr-border-strong);
}

/* Existing header/filter bands receive separate surfaces without consuming
 * another row. Inputs remain distinct from the surrounding toolbar. */
#panel-orders .emr-orders-main > .section-hdr.emr-orders-onerow,
#panel-accounting .emr-acc-head,
#panel-manifest .emr-mfl-toolbar,
#panel-fleetadmin > div > .section-hdr,
#panel-wboard .wb-board-header {
  background: var(--emr-card-bg) !important;
  border-bottom-color: var(--emr-border-strong) !important;
  box-shadow: inset 0 2px 0 var(--gold, #f5a800), var(--office-surface-shadow);
}
#panel-orders #orders-summary-row,
#panel-accounting .emr-acc-stat-bar,
#panel-manifest #mf-summary-bar,
#panel-wboard #wb-vk-toolbar {
  background: var(--office-section) !important;
  box-shadow: inset 0 -1px 0 var(--emr-border);
}
#panel-orders #orders-search,
#panel-accounting #acc-search,
#panel-manifest #mf-search,
#panel-wboard #wb-search {
  background: var(--emr-input-bg) !important;
  border-color: var(--emr-border-strong) !important;
  box-shadow: inset 0 1px 2px #0000000a;
}
#panel-orders #orders-search:focus,
#panel-accounting #acc-search:focus,
#panel-manifest #mf-search:focus,
#panel-wboard #wb-search:focus {
  outline: 2px solid var(--emr-text);
  outline-offset: -2px;
}

/* A selected tab is a filled surface as well as an underline. Preserve
 * renderer-owned count badges and warning dots inside it. */
#panel-accounting .emr-bill-tab.is-active,
#panel-fleetadmin :is(#fleetadm-groups,#fleetadm-subtabs) .fa-main-tab.active,
#panel-fleetadmin .fa-ud-tab.active,
#panel-manifest .emr-mfl-tab.is-active,
#panel-orders #orders-list .emr-orders-inline-tab.is-active,
#orders-detail.emr-orders-detail .emr-orders-detail-tab.is-active,
#panel-wboard #wb-week-tab-list .wb-week-tab.active {
  background: var(--office-selected);
  color: var(--emr-text);
  box-shadow: inset 0 -3px 0 var(--gold, #f5a800);
}
#panel-accounting .emr-bill-tab:not(.is-active):hover,
#panel-fleetadmin :is(#fleetadm-groups,#fleetadm-subtabs) .fa-main-tab:not(.active):hover,
#panel-manifest .emr-mfl-tab:not(.is-active):hover {
  background: var(--emr-bg-subtle);
  color: var(--emr-text);
}

/* Summary cards have stronger edges/depth; values and semantic left rails
 * retain their colors. Small labels stay readable rather than being faded. */
#panel-orders .emr-orders-stat-card,
#panel-fleetadmin #fleetadm-pane-home .emr-metric-card,
#panel-accounting .emr-acc-kpi,
#orders-detail.emr-orders-detail :is(.emr-orders-detail-meta-cell,.emr-odt-tot-cell,.emr-odt-rev-cell) {
  box-shadow: var(--office-surface-shadow), inset 0 1px 0 var(--emr-border);
}
#panel-orders :is(.emr-orders-section-hdr,.emr-orders-stat-label),
#panel-fleetadmin .fa-home-work-heading,
#panel-accounting .emr-acc-section-hdr,
#orders-detail.emr-orders-detail .emr-odt-section-hdr {
  color: var(--emr-text);
}

/* Neutral tools are quiet, outlined buttons. Keep designated primary,
 * destructive and financial actions on their existing semantic palette. */
:is(#panel-orders,#panel-accounting,#panel-manifest,#panel-fleetadmin,#panel-wboard)
  :is(.btn-secondary,.emr-btn-secondary,.emr-mfl-ghost-btn):not(:disabled) {
  background: var(--emr-card-bg);
  border-color: var(--emr-border-strong);
  color: var(--emr-text-muted);
  box-shadow: none;
}
:is(#panel-orders,#panel-accounting,#panel-manifest,#panel-fleetadmin,#panel-wboard)
  :is(.btn-primary,.emr-btn-primary,.emr-mfl-primary-btn):not(:disabled) {
  box-shadow: inset 0 0 0 1px #00000014, 0 2px 4px #0000001a;
}

/* Body-mounted order detail retains the same drawer size and tab positions. */
#orders-detail.emr-orders-detail .emr-orders-detail-head {
  background: var(--office-section);
  box-shadow: inset 0 3px 0 var(--gold, #f5a800);
}

/* Manifest detail's existing context cards and metric strip keep their
 * exact structure. Only the neutral header and card surfaces are changed. */
#manifest-page-body:has(#manifest-page-tabbody) > div:has(> button[onclick="manifestPageBack()"]) {
  background: var(--office-section) !important;
  box-shadow: inset 0 3px 0 var(--gold, #f5a800);
}
#manifest-page-body:has(#manifest-page-tabbody) > div:has(> #mfp-expenses-block-container) > div:not(#mfp-expenses-block-container),
#manifest-page-body:has(#manifest-page-tabbody) #mfp-expenses-block-container > div {
  box-shadow: var(--office-surface-shadow), inset 0 1px 0 var(--emr-border);
}
#manifest-page-body:has(#manifest-page-tabbody) > div:has(> #mfp-expenses-block-container) > div:not(#mfp-expenses-block-container) > div:first-child,
#manifest-page-body:has(#manifest-page-tabbody) #mfp-expenses-block-container > div > div:first-child {
  background: var(--office-section);
  color: var(--emr-text) !important;
}