:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17231b;
  background: #f3f6f4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; background: #f3f6f4; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.dashboard-shell { display: block; min-height: 100vh; }

.sidebar-flyout {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  width: 68px;
  height: 76px;
  transition: width .18s ease, height .18s ease;
}
.sidebar-flyout:hover,
.sidebar-flyout.pinned {
  width: 290px;
  height: min(720px, 100vh);
}
.sidebar-menu-trigger {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-content: center;
  gap: 5px;
  border: 1px solid #cfe2d6;
  border-radius: 12px;
  color: #1d6c45;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 22px rgba(30,85,59,.14);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-menu-trigger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.sidebar-flyout:hover .sidebar-menu-trigger,
.sidebar-flyout.pinned .sidebar-menu-trigger {
  color: #f3fbf6;
  border-color: #286b4d;
  background: linear-gradient(135deg, #32795a, #245f45);
  box-shadow: 0 8px 22px rgba(31,92,63,.22);
}
.sidebar-flyout.pinned .sidebar-menu-trigger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-flyout.pinned .sidebar-menu-trigger span:nth-child(2) { opacity: 0; }
.sidebar-flyout.pinned .sidebar-menu-trigger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sidebar {
  position: absolute;
  z-index: 2;
  top: 68px;
  left: 14px;
  display: flex;
  width: 268px;
  max-height: calc(100vh - 86px);
  flex-direction: column;
  overflow: hidden auto;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  color: #f4fbf6;
  background:
    radial-gradient(circle at 18% 3%, rgba(170,235,194,.24), transparent 29%),
    linear-gradient(180deg, #2f694f, #285f47 58%, #22533d);
  box-shadow: 0 22px 55px rgba(26,70,49,.28), 0 4px 14px rgba(26,70,49,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(.975);
  transform-origin: top left;
  visibility: hidden;
  transition: opacity .16s ease, transform .2s ease, visibility .2s ease;
}
.sidebar-flyout:hover .sidebar,
.sidebar-flyout.pinned .sidebar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}
.dashboard-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 6px 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
.dashboard-brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 7px 20px rgba(0,0,0,.18); }
.dashboard-brand div { display: grid; gap: 2px; }
.dashboard-brand strong { font-size: 14px; letter-spacing: -.02em; }
.dashboard-brand span { color: #c2dfcd; font-size: 9px; }
.dashboard-nav { display: grid; gap: 5px; padding-top: 12px; }
.nav-item {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px 11px;
  color: #d8eadf;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.nav-item > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.06); font-size: 11px; }
.nav-item b { min-width: 20px; border-radius: 999px; padding: 2px 6px; color: #ffd79c; background: rgba(230,157,51,.17); font-size: 8px; text-align: center; }
.nav-item[hidden] { display: none !important; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-item.active { color: #174d34; background: linear-gradient(135deg, #dff5e7, #ccebd8); box-shadow: 0 5px 14px rgba(20,69,46,.12); }
.nav-item.active > span { color: #18613d; background: rgba(255,255,255,.68); }
.sidebar-footer { display: grid; margin-top: 12px; gap: 3px; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.15); color: #b7d5c3; font-size: 8px; }
.sidebar-footer strong { color: #e3f2e8; font-size: 9px; }

.dashboard-main { min-width: 0; width: 100%; }
.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 25px 14px 78px;
  border-bottom: 1px solid #dce5df;
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 20px rgba(22,53,35,.04);
  backdrop-filter: blur(14px);
}
.eyebrow, .section-label { margin: 0; color: #75857b; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.04em; }
h2 { margin: 2px 0 0; font-size: 15px; letter-spacing: -.025em; }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.dashboard-theme-control {
  display: grid;
  gap: 3px;
  margin-right: 4px;
  color: #77867d;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dashboard-theme-control select {
  min-width: 118px;
  border: 1px solid #d4dfd8;
  border-radius: 8px;
  padding: 7px 28px 7px 9px;
  color: #365143;
  background: #f8fbf9;
  font-size: 9px;
  font-weight: 800;
  text-transform: none;
}
.top-status { display: grid; margin-right: 6px; gap: 2px; text-align: right; }
.top-status strong { color: #254331; font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.status-pill, .soft-pill, .healthy-dot, .locked {
  border-radius: 999px;
  padding: 4px 8px;
  color: #65766b;
  background: #edf2ef;
  font-size: 8px;
  font-weight: 850;
}
.status-pill.running { color: #086139; background: #e1f6e9; }
.status-pill.paused { color: #85530c; background: #fff2d5; }
.button { border: 0; border-radius: 9px; padding: 9px 12px; font-size: 10px; font-weight: 800; transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.button:not(:disabled):active { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button.primary { color: #fff; background: linear-gradient(135deg, #348d62, #4aa878); box-shadow: 0 5px 14px rgba(52,141,98,.17); }
.button.success { color: #236846; border: 1px solid #a7d6ba; background: #ecf8f0; }
.button.warning,
.button.resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
}
.button.warning::before {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: -2px;
  content: "\275A\275A";
}
.button.warning {
  color: #513704;
  border-color: #dfa938;
  background: linear-gradient(135deg, #f8cc67, #efb23b);
  box-shadow: 0 5px 14px rgba(96,67,10,.13);
}
.button.warning:disabled {
  color: #8b713b;
  border-color: #ecd8a8;
  background: linear-gradient(135deg, #fff5da, #f7e4b5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
  opacity: 1;
}
.button.resume::before { font-size: 8px; content: "\25B6"; }
.button.resume {
  color: #fff;
  border-color: #285ba7;
  background: linear-gradient(135deg, #3b79d1, #2c61b3);
  box-shadow: 0 5px 14px rgba(44,97,179,.18);
}
.button.ghost { border: 1px solid #d7e0da; color: #526158; background: #f8faf8; }
.button.danger { color: #fff; background: #b93d32; }
.button.stop-soft {
  color: #8a3f36;
  border: 1px solid #e6b8b1;
  background: #fff2ef;
  box-shadow: 0 4px 12px rgba(151,69,56,.08);
}
.button.stop-soft:not(:disabled):hover { color: #fff; background: #bd5b4d; }
.button:hover:not(:disabled) { filter: brightness(.96); }

.view { display: none; padding: 22px 25px 35px; }
.view.active { display: block; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dde5df;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(22,53,35,.035);
}
.kpi-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; font-size: 15px; font-weight: 900; }
.kpi-icon.green { color: #147b49; background: #e2f6e9; }
.kpi-icon.amber { color: #aa6615; background: #fff0d9; }
.kpi-icon.blue { color: #315da9; background: #e8f0ff; }
.kpi-icon.purple { color: #694ba9; background: #f0ebff; }
.kpi div { min-width: 0; }
.kpi small { display: block; color: #78877e; font-size: 9px; }
.kpi strong { display: block; overflow: hidden; margin-top: 3px; font-size: 20px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.kpi p { margin: 2px 0 0; color: #95a098; font-size: 8px; }

.overview-grid, .diagnostic-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; margin: 12px 0; }
.panel {
  min-width: 0;
  border: 1px solid #dce5df;
  border-radius: 15px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(22,53,35,.035);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.progress { height: 6px; margin-bottom: 16px; overflow: hidden; border-radius: 999px; background: #edf2ee; }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #18804c, #42c77e); transition: width .25s ease; }
.current-details { display: grid; grid-template-columns: 1.5fr 1fr .6fr 1fr; gap: 14px; }
.current-details div { min-width: 0; }
.current-details small { display: block; margin-bottom: 4px; color: #89958d; font-size: 8px; text-transform: uppercase; }
.current-details strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.error-box { margin-top: 14px; padding: 9px 10px; border-left: 3px solid #c94635; border-radius: 0 8px 8px 0; color: #8f3021; background: #fff2ef; font-size: 9px; }
.healthy-dot { color: #126c43; background: #e4f7eb; }
.health-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.health-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.health-list li:last-child { border: 0; padding-bottom: 0; }
.health-list span { color: #58665d; }
.health-list b { color: #1b7549; font-size: 8px; }
.text-link { border: 0; padding: 4px; color: #24794c; background: transparent; font-size: 9px; font-weight: 800; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: grid; grid-template-columns: 9px 1fr auto; align-items: start; gap: 10px; padding: 9px 10px; border: 1px solid #e5eae6; border-radius: 10px; background: #fafbfa; }
.activity-dot { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: #9ba69e; }
.activity-item.success .activity-dot { background: #24a260; box-shadow: 0 0 0 3px #e2f5e9; }
.activity-item.error .activity-dot { background: #d55340; box-shadow: 0 0 0 3px #fbe8e4; }
.activity-item.warning .activity-dot { background: #dc9d23; box-shadow: 0 0 0 3px #fff1d5; }
.activity-copy { display: grid; gap: 2px; }
.activity-copy strong { font-size: 9px; }
.activity-copy span { color: #7d8981; font-size: 8px; }
.activity-item time { color: #929d95; font-size: 8px; }
.empty { margin: 16px 0 4px; color: #8b978f; font-size: 9px; text-align: center; }

.toolbar { display: flex; align-items: center; gap: 7px; }
input, select {
  border: 1px solid #d2ddd5;
  border-radius: 9px;
  padding: 8px 9px;
  color: #243229;
  background: #fbfcfb;
  font-size: 10px;
  outline: none;
}
input:focus, select:focus { border-color: #29945f; box-shadow: 0 0 0 3px rgba(41,148,95,.1); background: #fff; }
.toolbar input { width: 230px; }
.table-wrap { width: 100%; overflow: auto; border: 1px solid #e2e8e3; border-radius: 11px; }
table { width: 100%; border-collapse: collapse; font-size: 9px; }
th { padding: 9px 10px; color: #748078; background: #f5f7f5; font-size: 8px; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { max-width: 320px; padding: 10px; border-top: 1px solid #e7ebe8; color: #455248; vertical-align: top; }
td strong { color: #1f2d24; }
.event-chip { display: inline-block; border-radius: 999px; padding: 3px 7px; color: #5d6c62; background: #eef2ef; font-size: 8px; font-weight: 800; white-space: nowrap; }
.event-chip.completed { color: #0f6c40; background: #e3f6ea; }
.event-chip.skipped { color: #9b521c; background: #fff0dd; }
.supplier-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.supplier-badge.restaurant {
  border-color: #b9dfc8;
  color: #0c6a3c;
  background: #e7f7ed;
}
.supplier-badge.webstaurant {
  border-color: #f1c99d;
  color: #97500e;
  background: #fff1df;
}
.reason-cell { white-space: normal; line-height: 1.4; }

.margin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 12px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #cfe2d6;
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 10%, rgba(44,176,105,.15), transparent 34%),
    linear-gradient(135deg, #fff, #edf8f1);
  box-shadow: 0 4px 16px rgba(22,53,35,.045);
}
.margin-hero h2 { margin-top: 3px; font-size: 22px; }
.margin-hero p:last-child { margin: 6px 0 0; color: #64736a; font-size: 9px; }
.margin-filters { display: flex; align-items: end; gap: 8px; }
.margin-filters label { display: grid; gap: 5px; color: #526159; font-size: 8px; font-weight: 800; }
.margin-filters select { min-width: 145px; }
.margin-filters input { min-width: 135px; }
.margin-kpis { margin-bottom: 12px; }
.profit-kpi { border-color: #cce5d5; background: linear-gradient(135deg, #fff, #f0faf4); }
.margin-summary-grid { display: grid; grid-template-columns: 1.55fr .8fr; gap: 12px; margin-bottom: 12px; }
.chart-controls { display: flex; align-items: end; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.chart-controls label { display: grid; gap: 4px; color: #758179; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.chart-controls select { min-width: 86px; padding: 6px 8px; font-size: 8px; text-transform: none; }
.chart-controls .soft-pill { align-self: end; margin-bottom: 1px; white-space: nowrap; }
.margin-chart {
  display: grid;
  height: 210px;
  grid-template-columns: repeat(var(--chart-columns, 12), minmax(20px, 1fr));
  align-items: end;
  gap: 7px;
  overflow-x: auto;
  padding: 14px 8px 0;
  border-bottom: 1px solid #dce5df;
  background: repeating-linear-gradient(to top, transparent 0 49px, #edf2ee 50px);
}
.chart-month { display: grid; height: 100%; min-width: 0; grid-template-rows: 1fr 18px; gap: 4px; align-items: end; }
.chart-bars { display: flex; height: 100%; align-items: end; justify-content: center; gap: 3px; }
.chart-bar { display: block; width: min(10px, 27%); min-height: 0; border-radius: 4px 4px 1px 1px; cursor: help; transition: height .2s ease, filter .15s ease, transform .15s ease; }
.chart-bar:hover, .chart-bar:focus-visible { filter: brightness(1.08); outline: 2px solid rgba(34, 112, 72, .22); outline-offset: 2px; transform: translateY(-2px); }
.margin-chart-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 240px;
  padding: 7px 9px;
  border: 1px solid rgba(20, 65, 43, .16);
  border-radius: 8px;
  color: #fff;
  background: rgba(20, 48, 34, .96);
  box-shadow: 0 8px 24px rgba(20, 48, 34, .2);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
}
.margin-chart-tooltip[hidden] { display: none; }
.chart-bar:only-child { width: min(13px, 52%); }
.chart-bar.sales { background: linear-gradient(#6ea3ef, #3f78ca); }
.chart-bar.profit { background: linear-gradient(#50c783, #1c8b52); }
.chart-bar.loss { background: linear-gradient(#e77b6e, #bd4437); }
.chart-month small { overflow: hidden; color: #87938b; font-size: 7px; text-align: center; text-overflow: clip; }
.chart-legend { display: flex; justify-content: center; gap: 18px; margin-top: 10px; color: #6f7c73; font-size: 8px; }
.chart-legend span::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; content: ""; }
.sales-key::before { background: #4e84d2; }
.profit-key::before { background: #279b5e; }
.loss-key::before { background: #cc5144; }
.margin-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.margin-settings label { display: grid; min-width: 0; align-content: start; gap: 5px; color: #47554b; font-size: 9px; font-weight: 750; }
.margin-settings small { color: #89948d; font-size: 8px; font-weight: 500; line-height: 1.35; }
.margin-settings .button { align-self: end; }
.margin-settings .wide-field { grid-column: 1 / -1; }
.tracking-schedule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #cfe3d6;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6fcf8, #edf8f1);
}
.tracking-schedule-card > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 7px;
}
.tracking-schedule-card small { grid-column: 2; color: #6c7e72; }
.tracking-schedule-card strong { grid-column: 2; color: #174f32; font-size: 11px; }
.tracking-schedule-card p { grid-column: 2; margin: 0; color: #718078; font-size: 8px; }
.tracking-schedule-actions { display: flex; align-items: center; gap: 7px; }
.delay-unit-control {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 96px;
  gap: 6px;
}
.delay-unit-control input,
.delay-unit-control select { width: 100%; min-width: 0; }
.schedule-dot {
  grid-row: 1 / 4;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a7b2ab;
  box-shadow: 0 0 0 4px rgba(167,178,171,.13);
}
.schedule-dot.active {
  background: #2b9b5f;
  box-shadow: 0 0 0 4px rgba(43,155,95,.14);
}
.shipping-orders-panel tr.sequential-active-row td {
  background: #eaf8ef;
  box-shadow: inset 0 1px #bfe3cd, inset 0 -1px #bfe3cd;
}
#marginSettingsMessage { align-self: center; color: #26794d; font-size: 8px; font-weight: 750; }
.monthly-panel, .margin-orders-panel { margin-bottom: 12px; }
.margin-data-notice {
  margin: -3px 0 12px;
  padding: 9px 11px;
  border: 1px solid #d8e7dd;
  border-radius: 9px;
  color: #4d6858;
  background: #f1f8f4;
  font-size: 8px;
}
.margin-table td { vertical-align: middle; white-space: nowrap; }
.margin-table .margin-item-column { width: 62px; min-width: 62px; }
.money-edit, .percent-edit {
  display: grid;
  width: 92px;
  grid-template-columns: auto 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d6dfd9;
  border-radius: 7px;
  background: #fff;
}
.percent-edit { width: 70px; grid-template-columns: 1fr auto; }
.money-edit span, .percent-edit span { padding: 0 6px; color: #849087; font-size: 8px; }
.money-edit input, .percent-edit input { min-width: 0; width: 100%; border: 0; border-radius: 0; padding: 6px 2px; box-shadow: none; background: transparent; font-size: 8px; }
.manual-badge, .needs-data {
  display: block;
  width: max-content;
  margin-top: 4px;
  border-radius: 999px;
  padding: 2px 5px;
  color: #6651a1;
  background: #f0ebff;
  font-size: 7px;
  font-weight: 800;
}
.needs-data { margin: 0; color: #9a5b16; background: #fff1db; }
.row-actions { display: flex; gap: 4px; }
.button.mini { padding: 6px 7px; border-radius: 7px; font-size: 8px; }
.positive-value { color: #147546; font-weight: 850; }
.negative-value { color: #b33d31 !important; font-weight: 850; }
.needs-data-row { background: #fffaf1; }
.warning-row { background: #fffdf5; }
.loss-row { background: #fff7f5; }

.run-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.mini-stat { display: grid; gap: 4px; padding: 15px; border: 1px solid #dde5df; border-radius: 13px; background: #fff; }
.mini-stat small { color: #7b887f; font-size: 9px; }
.mini-stat strong { font-size: 18px; }
.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 0 0 18px; font-size: 9px; }
.timeline-item::before { position: absolute; top: 9px; bottom: -3px; left: 142px; width: 1px; background: #dce5df; content: ""; }
.timeline-item:last-child::before { display: none; }
.timeline-time { color: #89958d; text-align: right; }
.timeline-content { position: relative; padding-left: 18px; }
.timeline-content::before { position: absolute; top: 3px; left: -5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #27935b; box-shadow: 0 0 0 2px #bfe2cd; content: ""; }
.timeline-content strong { display: block; margin-bottom: 2px; }
.timeline-content span { color: #78857d; }
.recovery-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; background: linear-gradient(135deg, #f0f9f3, #fff); }
.recovery-intro p:last-child { max-width: 720px; margin: 7px 0 0; color: #6e7d73; font-size: 9px; line-height: 1.5; }
.recovery-intro > span { border-radius: 999px; padding: 7px 11px; color: #136f43; background: #dff4e7; font-size: 9px; font-weight: 850; white-space: nowrap; }
.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recovery-card { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 15px; border: 1px solid #dce5df; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(22,53,35,.035); }
.recovery-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #167547; background: #e3f6ea; font-size: 10px; font-weight: 900; }
.recovery-copy { display: grid; gap: 6px; }
.recovery-copy h3 { margin: 0; font-size: 11px; }
.recovery-line { display: grid; grid-template-columns: 65px 1fr; gap: 7px; font-size: 8px; line-height: 1.45; }
.recovery-line b { color: #78857d; text-transform: uppercase; }
.recovery-line span { color: #4c5b52; }
.recovery-line.safety span { color: #176b43; font-weight: 700; }

.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-card { display: grid; align-content: start; gap: 13px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px; border: 1px solid #e1e8e3; border-radius: 10px; background: #f8faf8; }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row strong { font-size: 10px; }
.toggle-row small { color: #7e8b82; font-size: 8px; }
.toggle-row input { width: 17px; height: 17px; accent-color: #198551; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.form-grid label { display: grid; min-width: 0; align-content: start; grid-auto-rows: max-content; gap: 5px; color: #47554b; font-size: 9px; font-weight: 750; }
.form-grid label > input { width: 100%; }
.form-grid small { color: #89948d; font-size: 8px; font-weight: 500; }
.form-grid .wide { grid-column: 1 / -1; }
.prefix, .suffix { display: grid; align-items: center; overflow: hidden; border: 1px solid #d2ddd5; border-radius: 9px; background: #fbfcfb; }
.prefix { grid-template-columns: auto 1fr; }
.suffix { grid-template-columns: 1fr auto; }
.prefix span, .suffix span { padding: 0 9px; color: #7b887f; font-size: 9px; }
.prefix input, .suffix input { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.safety-card { grid-column: 1 / -1; }
.locked { color: #6f5b13; background: #fff3c9; }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.safety-grid div { padding: 9px 10px; border-radius: 9px; color: #33634a; background: #edf8f1; font-size: 9px; font-weight: 700; }
.settings-footer { position: sticky; bottom: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 11px; border: 1px solid #dbe4dd; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 -6px 20px rgba(26,57,38,.07); backdrop-filter: blur(12px); }
#settingsMessage { color: #26794d; font-size: 9px; font-weight: 700; }
.action-stack { display: grid; gap: 8px; }
.data-summary { display: grid; gap: 0; margin: 0; }
.data-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.data-summary div:last-child { border: 0; }
.data-summary dt { color: #758179; }
.data-summary dd { overflow: hidden; margin: 0; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#stateSnapshot { max-height: 360px; margin: 0; overflow: auto; border-radius: 10px; padding: 13px; color: #cfe8d8; background: #14251b; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }

.shipping-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 19px 21px; border: 1px solid #d5e8dc; border-radius: 16px; background: linear-gradient(135deg, #eaf7ef, #f5fbf7 60%, #fff); box-shadow: 0 7px 22px rgba(45,112,77,.06); }
.shipping-hero h2 { margin: 2px 0 5px; font-size: 20px; }
.shipping-hero p:last-child { margin: 0; color: #718078; font-size: 9px; }
.shipping-summary-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 12px; margin-bottom: 12px; }
.shipping-pipeline { display: grid; grid-template-columns: repeat(5, minmax(95px, 1fr)); gap: 7px; overflow-x: auto; }
.pipeline-step { display: grid; gap: 3px; min-width: 78px; padding: 12px 9px; border: 1px solid #dfe7e2; border-radius: 11px; background: #f8faf9; text-align: center; }
.pipeline-step strong { font-size: 18px; }
.pipeline-step span { color: #718078; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.pipeline-step.shipped { color: #275f9f; background: #edf5ff; }
.pipeline-step.processing { color: #7258a5; background: #f4efff; }
.pipeline-step.delivered { color: #177548; background: #ebf8f0; }
.pipeline-step.running_late { color: #ad3e34; background: #fff0ee; }
.shipping-orders-panel { margin-bottom: 12px; }
.confirm-shipments-hero {
  border-color: #cde6d7;
  background:
    radial-gradient(circle at 90% 15%, rgba(64, 173, 109, .12), transparent 32%),
    linear-gradient(135deg, #e9f7ef, #f8fcfa 62%, #fff);
}
.confirm-shipments-panel { overflow: hidden; }
.confirm-run-panel { margin-bottom: 14px; }
.confirm-run-settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.confirm-run-settings > label:not(.switch-row) {
  display: grid;
  align-content: start;
  gap: 5px;
  color: #47554b;
  font-size: 9px;
  font-weight: 750;
}
.confirm-run-settings > label:not(.switch-row) > input,
.confirm-run-settings > label:not(.switch-row) > select { width: 100%; }
.confirm-run-settings .switch-row { grid-column: span 2; }
.confirm-run-progress {
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid #dce9e0;
  border-radius: 12px;
  background: #f8fcf9;
}
.confirm-run-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.confirm-run-progress-copy strong { font-size: 10px; }
.confirm-run-progress-copy span { color: #748178; font-size: 8px; }
.confirm-run-progress .progress { margin: 0; }
.confirm-run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.confirm-run-message { margin: 9px 0 0; }
.confirm-shipments-table tr.confirmed td { opacity: .65; }
.confirm-ready-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid #d4e8dc;
  border-radius: 10px;
  color: #52675b;
  background: #f3faf6;
  font-size: 8px;
}
.confirm-ready-note strong { color: #1f6c45; }
.confirm-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #cfe5d7;
  border-radius: 11px;
  background: linear-gradient(135deg, #edf8f1, #f9fcfa);
}
.confirm-selection-summary { display: grid; gap: 2px; }
.confirm-selection-summary strong { color: #216c48; font-size: 10px; }
.confirm-selection-summary span { color: #718078; font-size: 8px; }
.confirm-selection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.confirm-select-column { width: 78px; min-width: 78px; text-align: center; }
.confirm-select-all { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.confirm-select-all span { font-size: 8px; }
.confirm-row-select,
.shipping-row-select,
#confirmSelectAll,
#shippingSelectAll { width: 16px; height: 16px; accent-color: #2f9665; cursor: pointer; }
.confirm-shipments-table { min-width: 1430px; }
.confirm-shipments-table tbody tr td { background: #f4faf6; }
.confirm-shipments-table tbody tr:hover td { background: #eaf6ee; }
.confirm-shipments-table tbody tr.selected td { background: #e2f4e9; }
.confirm-shipments-table tbody tr td:first-child { box-shadow: inset 4px 0 #2da665; }
@media (max-width: 1100px) {
  .confirm-run-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shipping-toolbar { flex-wrap: wrap; justify-content: flex-end; }
.shipping-toolbar input { min-width: 220px; }
.shipping-table { min-width: 1330px; }
.shipping-table td { vertical-align: middle; white-space: nowrap; }
[data-shipping-column][hidden] { display: none !important; }
.shipping-select-column { width: 78px; min-width: 78px; text-align: center; }
.shipping-table tbody tr.selected td { background: #e2f4e9; }
.shipping-item-picture {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid #cfe2d6;
  border-radius: 10px;
  background: #fff;
}
.shipping-item-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.shipping-item-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #438362;
  background: #eaf5ee;
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .confirm-selection-bar { align-items: stretch; flex-direction: column; }
  .confirm-selection-actions { justify-content: stretch; }
  .confirm-selection-actions .button { flex: 1; }
}
.column-picker { position: relative; }
.column-picker > summary { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.column-picker > summary::-webkit-details-marker { display: none; }
.column-picker > summary span { color: #728078; font-size: 7px; }
.column-picker[open] > summary { border-color: #82bda0; background: #eef8f2; }
.column-picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  width: 310px;
  border: 1px solid #d7e3db;
  border-radius: 13px;
  padding: 13px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20, 49, 32, .16);
}
.column-picker-heading { display: grid; gap: 3px; margin-bottom: 10px; }
.column-picker-heading strong { font-size: 11px; }
.column-picker-heading small { color: #7a867e; font-size: 8px; }
.column-picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.column-picker-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  border: 1px solid #e3e9e5;
  border-radius: 8px;
  padding: 7px 8px;
  color: #3e4f45;
  background: #fafcfb;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}
.column-picker-option:hover { border-color: #a8cdb8; background: #f0f8f3; }
.column-picker-option input { width: 15px; min-width: 15px; height: 15px; margin: 0; accent-color: #198551; }
.column-picker-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e7ece9; }
.tracking-link { color: #176fa6; font-weight: 800; text-decoration: none; }
.tracking-link:hover { text-decoration: underline; }
.copy-field { display: inline-flex; align-items: center; gap: 6px; }
.copy-value {
  display: inline-grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid #d7e2da;
  border-radius: 7px;
  background: #f7faf8;
  color: #176a48;
  padding: 4px;
  cursor: pointer;
}
.copy-value:hover { border-color: #8fc3aa; background: #eaf7f0; }
.copy-value svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.copy-value.copied { color: #fff; border-color: #198551; background: #198551; }
.row-error { display: block; max-width: 210px; margin-top: 4px; overflow: hidden; color: #ae463a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: #929c95; }
.state-chip { display: inline-grid; min-width: 28px; height: 25px; place-items: center; border-radius: 7px; color: #235d7e; background: #eaf4fa; font-size: 8px; font-weight: 900; }
.shipping-status { display: inline-flex; border-radius: 999px; padding: 4px 7px; color: #536158; background: #edf1ee; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.shipping-status.shipped { color: #275f9f; background: #e9f3ff; }
.shipping-status.processing { color: #7258a5; background: #f1eaff; }
.shipping-status.delivered { color: #157346; background: #ddf4e6; }
.shipping-status.running_late { color: #ac3e33; background: #ffe6e2; }
.completion-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 7px; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.completion-badge.complete { color: #146f45; background: #ddf4e6; }
.completion-badge.incomplete { color: #9a4f0b; background: #fff0ce; }
.completion-badge.unchecked { color: #647169; background: #edf1ee; }
.shipping-table tbody tr.completion-complete td { background: #effaf3; }
.shipping-table tbody tr.completion-complete:hover td { background: #e4f6eb; }
.shipping-table tbody tr.completion-incomplete td { background: #eef4f0; }
.shipping-table tbody tr.completion-incomplete:hover td { background: #e3eee7; }
.shipping-table tbody tr.completion-complete td:first-child { box-shadow: inset 4px 0 #24a565; }
.shipping-table tbody tr.completion-incomplete td:first-child { box-shadow: inset 4px 0 #789986; }
.shipping-status.needs_tracking { color: #765e22; background: #fff3d5; }
.carrier-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 9px; }
.carrier-card { display: grid; gap: 5px; padding: 13px; border: 1px solid #dde6e0; border-radius: 11px; background: #f9fbfa; }
.carrier-card span { color: #6f7d74; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.carrier-card strong { font-size: 13px; }
.carrier-card small { color: #859087; font-size: 8px; }
.switch-row { display: flex !important; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #e0e7e2; border-radius: 9px; background: #f7faf8; }
.switch-row span { display: grid; gap: 3px; }
.switch-row input { width: 18px; height: 18px; accent-color: #198551; }
#shippingSettingsMessage { align-self: center; color: #26794d; font-size: 8px; font-weight: 750; }

/* Executive Pro changes presentation only. Every existing view, form, table,
   setting, and workflow handler remains the same. */
html[data-dashboard-theme="executive"] { color: #172239; background: #edf1f7; }
html[data-dashboard-theme="executive"] body {
  color: #172239;
  background:
    radial-gradient(circle at 92% 0, rgba(73,112,181,.10), transparent 28%),
    linear-gradient(135deg, #f5f7fb 0%, #edf1f6 55%, #f7f9fc 100%);
}
html[data-dashboard-theme="executive"] .topbar {
  min-height: 84px;
  border-bottom-color: rgba(149,163,184,.28);
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(249,251,254,.90);
  box-shadow: 0 10px 34px rgba(25,39,68,.07);
  backdrop-filter: blur(20px) saturate(140%);
}
html[data-dashboard-theme="executive"] .eyebrow,
html[data-dashboard-theme="executive"] .section-label { color: #70809a; letter-spacing: .17em; }
html[data-dashboard-theme="executive"] h1 { color: #111c31; font-size: 25px; font-weight: 780; letter-spacing: -.045em; }
html[data-dashboard-theme="executive"] h2 { color: #17243b; font-size: 16px; }
html[data-dashboard-theme="executive"] .sidebar {
  border-color: rgba(255,255,255,.12);
  color: #eef4ff;
  background:
    radial-gradient(circle at 20% 0, rgba(86,139,205,.30), transparent 35%),
    linear-gradient(160deg, #172945, #15243c 54%, #101d31);
  box-shadow: 0 26px 65px rgba(17,31,54,.38), 0 5px 18px rgba(17,31,54,.20);
}
html[data-dashboard-theme="executive"] .sidebar-menu-trigger {
  color: #254d78;
  border-color: #cbd8e8;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 24px rgba(31,57,91,.15);
}
html[data-dashboard-theme="executive"] .sidebar-flyout:hover .sidebar-menu-trigger,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned .sidebar-menu-trigger {
  color: #fff;
  border-color: #31557f;
  background: linear-gradient(135deg, #315f91, #203e68);
}
html[data-dashboard-theme="executive"] .dashboard-brand span,
html[data-dashboard-theme="executive"] .sidebar-footer { color: #9db0ca; }
html[data-dashboard-theme="executive"] .sidebar-footer strong { color: #eef4ff; }
html[data-dashboard-theme="executive"] .nav-item { color: #c8d4e5; }
html[data-dashboard-theme="executive"] .nav-item > span { background: rgba(255,255,255,.07); }
html[data-dashboard-theme="executive"] .nav-item:hover { color: #fff; background: rgba(255,255,255,.09); }
html[data-dashboard-theme="executive"] .nav-item.active {
  color: #163557;
  background: linear-gradient(135deg, #eaf3ff, #d8e8fb);
  box-shadow: 0 8px 22px rgba(6,18,38,.22);
}
html[data-dashboard-theme="executive"] .nav-item.active > span { color: #285b91; background: rgba(255,255,255,.78); }
html[data-dashboard-theme="executive"] .panel,
html[data-dashboard-theme="executive"] .kpi,
html[data-dashboard-theme="executive"] .mini-stat,
html[data-dashboard-theme="executive"] .carrier-card {
  border-color: rgba(152,169,194,.30);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(31,48,78,.065), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
}
html[data-dashboard-theme="executive"] .panel,
html[data-dashboard-theme="executive"] .kpi { border-radius: 17px; }
html[data-dashboard-theme="executive"] .kpi { min-height: 92px; padding: 18px; }
html[data-dashboard-theme="executive"] .kpi-icon { border-radius: 13px; box-shadow: inset 0 1px rgba(255,255,255,.65); }
html[data-dashboard-theme="executive"] .kpi strong { color: #17243b; font-size: 22px; }
html[data-dashboard-theme="executive"] .kpi small,
html[data-dashboard-theme="executive"] .kpi p { color: #718098; }
html[data-dashboard-theme="executive"] .button { border-radius: 10px; padding: 9px 13px; }
html[data-dashboard-theme="executive"] .button.primary {
  background: linear-gradient(135deg, #356ca5, #244f82);
  box-shadow: 0 7px 18px rgba(36,79,130,.20);
}
html[data-dashboard-theme="executive"] .button.ghost { color: #475a73; border-color: #ced9e7; background: #f7f9fc; }
html[data-dashboard-theme="executive"] .dashboard-theme-control { color: #687991; }
html[data-dashboard-theme="executive"] .dashboard-theme-control select {
  color: #274766;
  border-color: #c9d6e5;
  background: #f4f8fc;
}
html[data-dashboard-theme="executive"] input,
html[data-dashboard-theme="executive"] select,
html[data-dashboard-theme="executive"] textarea {
  border-color: #cbd7e5;
  color: #273a54;
  background-color: #fbfcfe;
  box-shadow: inset 0 1px 2px rgba(30,49,78,.025);
}
html[data-dashboard-theme="executive"] .switch-row,
html[data-dashboard-theme="executive"] .tracking-schedule-card {
  border-color: #d1dce9;
  background: linear-gradient(135deg, #f8fafd, #eef4fa);
}
html[data-dashboard-theme="executive"] .tracking-schedule-card strong { color: #24496f; }
html[data-dashboard-theme="executive"] .schedule-dot.active { background: #3b78b3; box-shadow: 0 0 0 4px rgba(59,120,179,.14); }
html[data-dashboard-theme="executive"] table { border-color: #d7e0eb; background: rgba(255,255,255,.92); }
html[data-dashboard-theme="executive"] thead th { color: #5f7088; background: #edf3f9; }
html[data-dashboard-theme="executive"] tbody td { border-color: #e3e9f0; }
html[data-dashboard-theme="executive"] tbody tr:hover td { background: #f2f6fb; }
html[data-dashboard-theme="executive"] .shipping-table tbody tr.completion-complete td { background: #eef7f3; }
html[data-dashboard-theme="executive"] .shipping-table tbody tr.completion-incomplete td { background: #f2f5f8; }
html[data-dashboard-theme="executive"] .soft-pill,
html[data-dashboard-theme="executive"] .status-pill { color: #53677f; background: #eaf0f7; }
html[data-dashboard-theme="executive"] .status-pill.running { color: #1c6446; background: #ddf2e7; }
html[data-dashboard-theme="executive"] .progress { background: #e3eaf2; }
html[data-dashboard-theme="executive"] .progress span { background: linear-gradient(90deg, #315f91, #4d8cc8); }
html[data-dashboard-theme="executive"] .chart-bar.sales { background: linear-gradient(#79a8dc, #416faa); }
html[data-dashboard-theme="executive"] .chart-bar.profit { background: linear-gradient(#59b88c, #287557); }
html[data-dashboard-theme="executive"] .chart-bar.loss { background: linear-gradient(#e18a7c, #b84e45); }
html[data-dashboard-theme="executive"] .text-link,
html[data-dashboard-theme="executive"] .tracking-link { color: #2c6097; }
html[data-dashboard-theme="executive"] ::selection { color: #fff; background: #315f91; }

/* Executive workspace layout
   This is deliberately a different information architecture from Classic:
   global sections live in a horizontal command bar, actions live in their own
   sticky header, and content uses a wider centered operations canvas. */
html[data-dashboard-theme="executive"] .dashboard-shell { display: block; }
html[data-dashboard-theme="executive"] .sidebar-flyout,
html[data-dashboard-theme="executive"] .sidebar-flyout:hover,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned {
  position: sticky;
  z-index: 60;
  top: 0;
  width: 100%;
  height: 68px;
  background: #14243b;
  box-shadow: 0 8px 30px rgba(15,29,50,.18);
}
html[data-dashboard-theme="executive"] .sidebar-menu-trigger { display: none; }
html[data-dashboard-theme="executive"] .sidebar,
html[data-dashboard-theme="executive"] .sidebar-flyout:hover .sidebar,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned .sidebar {
  position: static;
  display: grid;
  width: 100%;
  height: 68px;
  max-height: none;
  grid-template-columns: 184px minmax(0, 1fr);
  align-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0 24px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}
html[data-dashboard-theme="executive"] .dashboard-brand {
  min-height: 0;
  gap: 9px;
  border: 0;
  padding: 0 18px 0 0;
}
html[data-dashboard-theme="executive"] .dashboard-brand img {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
html[data-dashboard-theme="executive"] .dashboard-brand strong { font-size: 12px; }
html[data-dashboard-theme="executive"] .dashboard-brand span { font-size: 7px; }
html[data-dashboard-theme="executive"] .dashboard-nav {
  display: flex;
  min-width: 0;
  height: 68px;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  padding: 0 0 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
html[data-dashboard-theme="executive"] .nav-item {
  display: flex;
  width: auto;
  flex: 0 0 auto;
  grid-template-columns: none;
  gap: 6px;
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 9px;
  white-space: nowrap;
}
html[data-dashboard-theme="executive"] .nav-item > span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 9px;
}
html[data-dashboard-theme="executive"] .nav-item b { margin-left: 1px; }
html[data-dashboard-theme="executive"] .nav-item.active {
  color: #fff;
  background: rgba(88,144,204,.24);
  box-shadow: inset 0 0 0 1px rgba(128,177,228,.22);
}
html[data-dashboard-theme="executive"] .nav-item.active > span {
  color: #d9ecff;
  background: rgba(255,255,255,.10);
}
html[data-dashboard-theme="executive"] .sidebar-footer { display: none; }
html[data-dashboard-theme="executive"] .dashboard-main {
  display: block;
  width: 100%;
  min-width: 0;
}
html[data-dashboard-theme="executive"] .topbar {
  z-index: 45;
  top: 68px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  min-height: 82px;
  padding: 13px 32px;
}
html[data-dashboard-theme="executive"] .topbar > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}
html[data-dashboard-theme="executive"] .topbar .eyebrow {
  padding-right: 12px;
  border-right: 1px solid #d5dfeb;
  white-space: nowrap;
}
html[data-dashboard-theme="executive"] .topbar h1 {
  overflow: hidden;
  margin: 0;
  font-size: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-dashboard-theme="executive"] .topbar .top-actions {
  flex-wrap: nowrap;
  gap: 7px;
}
html[data-dashboard-theme="executive"] .top-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
}
html[data-dashboard-theme="executive"] .top-status strong {
  min-width: 69px;
  border-left: 1px solid #d8e1ec;
  padding-left: 9px;
}
html[data-dashboard-theme="executive"] .dashboard-theme-control {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 5px 0 0;
}
html[data-dashboard-theme="executive"] .dashboard-theme-control span { display: none; }
html[data-dashboard-theme="executive"] .dashboard-theme-control select {
  min-width: 126px;
  border-radius: 999px;
}
html[data-dashboard-theme="executive"] .view {
  width: min(100%, 1720px);
  margin: 0 auto;
  padding: 28px 32px 46px;
}
html[data-dashboard-theme="executive"] .kpi-grid { gap: 15px; }
html[data-dashboard-theme="executive"] .overview-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr);
  gap: 15px;
  margin: 15px 0;
}
html[data-dashboard-theme="executive"] .current-panel {
  border-color: rgba(99,134,181,.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(67,119,177,.10), transparent 26%),
    rgba(255,255,255,.92);
}
html[data-dashboard-theme="executive"] .panel { padding: 20px; }
html[data-dashboard-theme="executive"] .panel-heading {
  margin-bottom: 17px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e6ebf1;
}
html[data-dashboard-theme="executive"] .shipping-hero,
html[data-dashboard-theme="executive"] .margin-hero {
  border: 1px solid rgba(138,158,185,.28);
  border-radius: 18px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 94% 0, rgba(76,124,181,.12), transparent 28%),
    rgba(255,255,255,.90);
  box-shadow: 0 10px 30px rgba(31,48,78,.055);
}
html[data-dashboard-theme="executive"] .shipping-kpis,
html[data-dashboard-theme="executive"] .margin-kpis { margin-top: 15px; }
html[data-dashboard-theme="executive"] .shipping-summary-grid {
  grid-template-columns: minmax(320px, .72fr) minmax(520px, 1.28fr);
  gap: 15px;
}
html[data-dashboard-theme="executive"] .margin-summary-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr);
  gap: 15px;
}
html[data-dashboard-theme="executive"] .shipping-orders-panel,
html[data-dashboard-theme="executive"] .margin-orders-panel,
html[data-dashboard-theme="executive"] .monthly-panel { margin-top: 15px; }
html[data-dashboard-theme="executive"] .toolbar {
  border: 1px solid #d8e1eb;
  border-radius: 12px;
  padding: 8px;
  background: #f6f8fb;
}
html[data-dashboard-theme="executive"] .table-wrap {
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #fff;
}
html[data-dashboard-theme="executive"] thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-top: 11px;
  padding-bottom: 11px;
  letter-spacing: .08em;
}
html[data-dashboard-theme="executive"] tbody td { padding-top: 10px; padding-bottom: 10px; }
html[data-dashboard-theme="executive"] .settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 15px;
}
html[data-dashboard-theme="executive"] .margin-settings { gap: 13px; }
html[data-dashboard-theme="executive"] .switch-row { padding: 12px; }
html[data-dashboard-theme="executive"] .tracking-schedule-card { padding: 15px 16px; }
html[data-dashboard-theme="executive"] .run-summary-grid { gap: 15px; }
html[data-dashboard-theme="executive"] .recovery-grid { gap: 15px; }
html[data-dashboard-theme="executive"] .recovery-card {
  border-color: #d7e1ec;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(31,48,78,.05);
}
html[data-dashboard-theme="executive"] .activity-list,
html[data-dashboard-theme="executive"] .timeline { font-size: 10px; }

@media (max-width: 1320px) {
  html[data-dashboard-theme="executive"] .sidebar {
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 0 16px;
  }
  html[data-dashboard-theme="executive"] .dashboard-brand span { display: none; }
  html[data-dashboard-theme="executive"] .nav-item { padding: 8px 7px; font-size: 8px; }
  html[data-dashboard-theme="executive"] .topbar { padding-right: 22px; padding-left: 22px; }
  html[data-dashboard-theme="executive"] .shipping-summary-grid { grid-template-columns: 1fr; }
}

/* Executive Pro light command menu
   Keep the reorganized workspace, but use a quiet floating menu instead of
   the dark horizontal navigation bar. */
html[data-dashboard-theme="executive"] {
  color: #243731;
  background: #f3f7f5;
}
html[data-dashboard-theme="executive"] body {
  color: #243731;
  background:
    radial-gradient(circle at 94% 0, rgba(89,169,144,.09), transparent 26%),
    radial-gradient(circle at 5% 35%, rgba(116,156,191,.06), transparent 24%),
    linear-gradient(135deg, #f8faf9, #f1f6f4 56%, #f8faf9);
}
html[data-dashboard-theme="executive"] .sidebar-flyout,
html[data-dashboard-theme="executive"] .sidebar-flyout:hover,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 68px;
  height: 76px;
  background: transparent;
  box-shadow: none;
}
html[data-dashboard-theme="executive"] .sidebar-flyout:hover,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned {
  width: 318px;
  height: min(740px, 100vh);
}
html[data-dashboard-theme="executive"] .sidebar-menu-trigger {
  display: grid;
  color: #347864;
  border-color: #c9ded6;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 24px rgba(41,94,75,.13);
}
html[data-dashboard-theme="executive"] .sidebar-flyout:hover .sidebar-menu-trigger,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned .sidebar-menu-trigger {
  color: #fff;
  border-color: #62a18d;
  background: linear-gradient(135deg, #58a38a, #377b67);
  box-shadow: 0 8px 24px rgba(51,119,94,.20);
}
html[data-dashboard-theme="executive"] .sidebar,
html[data-dashboard-theme="executive"] .sidebar-flyout:hover .sidebar,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned .sidebar {
  position: absolute;
  top: 68px;
  left: 14px;
  display: flex;
  width: 296px;
  height: auto;
  max-height: calc(100vh - 86px);
  flex-direction: column;
  overflow: hidden auto;
  border: 1px solid #d8e5df;
  border-radius: 18px;
  padding: 16px;
  color: #29443a;
  background:
    radial-gradient(circle at 12% 0, rgba(111,191,163,.12), transparent 30%),
    rgba(252,254,253,.98);
  box-shadow: 0 24px 60px rgba(42,78,64,.18), 0 5px 16px rgba(42,78,64,.08);
  transform-origin: top left;
  transition: opacity .16s ease, transform .2s ease, visibility .2s ease;
}
html[data-dashboard-theme="executive"] .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(.98);
  visibility: hidden;
}
html[data-dashboard-theme="executive"] .sidebar-flyout:hover .sidebar,
html[data-dashboard-theme="executive"] .sidebar-flyout.pinned .sidebar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}
html[data-dashboard-theme="executive"] .dashboard-brand {
  min-height: 44px;
  gap: 10px;
  border-bottom: 1px solid #e4ece8;
  padding: 2px 5px 15px;
}
html[data-dashboard-theme="executive"] .dashboard-brand img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 7px 18px rgba(47,103,81,.15);
}
html[data-dashboard-theme="executive"] .dashboard-brand strong { color: #264b3d; font-size: 13px; }
html[data-dashboard-theme="executive"] .dashboard-brand span { display: block; color: #82958d; font-size: 8px; }
html[data-dashboard-theme="executive"] .dashboard-nav {
  display: grid;
  width: 100%;
  height: auto;
  gap: 5px;
  overflow: visible;
  padding: 12px 0 0;
}
html[data-dashboard-theme="executive"] .nav-item {
  display: grid;
  width: 100%;
  grid-template-columns: 25px 1fr auto;
  gap: 0;
  border-radius: 10px;
  padding: 10px 11px;
  color: #536a60;
  font-size: 10px;
  white-space: normal;
}
html[data-dashboard-theme="executive"] .nav-item > span {
  width: 22px;
  height: 22px;
  color: #477967;
  background: #edf5f1;
}
html[data-dashboard-theme="executive"] .nav-item:hover {
  color: #2c5948;
  background: #eff7f3;
}
html[data-dashboard-theme="executive"] .nav-item.active {
  color: #236048;
  background: linear-gradient(135deg, #e1f3eb, #d4ece2);
  box-shadow: inset 0 0 0 1px #c3e2d5, 0 5px 14px rgba(53,116,90,.08);
}
html[data-dashboard-theme="executive"] .nav-item.active > span {
  color: #2b7659;
  background: rgba(255,255,255,.82);
}
html[data-dashboard-theme="executive"] .sidebar-footer {
  display: grid;
  margin-top: 12px;
  border-top-color: #e1eae6;
  color: #879991;
}
html[data-dashboard-theme="executive"] .sidebar-footer strong { color: #47675a; }
html[data-dashboard-theme="executive"] .topbar {
  top: 0;
  padding-left: 78px;
  border-bottom-color: #dfe8e4;
  background: rgba(251,253,252,.92);
  box-shadow: 0 9px 28px rgba(43,75,62,.055);
}
html[data-dashboard-theme="executive"] h1,
html[data-dashboard-theme="executive"] h2,
html[data-dashboard-theme="executive"] .kpi strong { color: #203a31; }
html[data-dashboard-theme="executive"] .eyebrow,
html[data-dashboard-theme="executive"] .section-label { color: #748c82; }
html[data-dashboard-theme="executive"] .panel,
html[data-dashboard-theme="executive"] .kpi,
html[data-dashboard-theme="executive"] .mini-stat,
html[data-dashboard-theme="executive"] .carrier-card {
  border-color: rgba(174,196,187,.40);
  background: rgba(255,255,255,.91);
  box-shadow: 0 10px 30px rgba(44,75,62,.055), inset 0 1px rgba(255,255,255,.82);
}
html[data-dashboard-theme="executive"] .button.primary {
  background: linear-gradient(135deg, #55a087, #34755f);
  box-shadow: 0 7px 18px rgba(52,117,95,.18);
}
html[data-dashboard-theme="executive"] .button.ghost {
  color: #53685f;
  border-color: #d3e0da;
  background: #f8fbf9;
}
html[data-dashboard-theme="executive"] input,
html[data-dashboard-theme="executive"] select,
html[data-dashboard-theme="executive"] textarea {
  border-color: #cfddd7;
  color: #304a40;
  background-color: #fcfefd;
}
html[data-dashboard-theme="executive"] .dashboard-theme-control select {
  color: #356451;
  border-color: #cbded6;
  background: #f5faf7;
}
html[data-dashboard-theme="executive"] .switch-row,
html[data-dashboard-theme="executive"] .tracking-schedule-card {
  border-color: #d6e4de;
  background: linear-gradient(135deg, #fafcfb, #f0f7f4);
}
html[data-dashboard-theme="executive"] .tracking-schedule-card strong { color: #32634f; }
html[data-dashboard-theme="executive"] .schedule-dot.active {
  background: #4b9a7e;
  box-shadow: 0 0 0 4px rgba(75,154,126,.14);
}
html[data-dashboard-theme="executive"] thead th { color: #60766d; background: #eef5f2; }
html[data-dashboard-theme="executive"] tbody td { border-color: #e4ece8; }
html[data-dashboard-theme="executive"] tbody tr:hover td { background: #f3f8f6; }
html[data-dashboard-theme="executive"] .progress span { background: linear-gradient(90deg, #4a9078, #76b9a1); }
html[data-dashboard-theme="executive"] .text-link,
html[data-dashboard-theme="executive"] .tracking-link { color: #347a62; }
html[data-dashboard-theme="executive"] ::selection { color: #fff; background: #4b8f77; }

/* Layout Studio */
.layout-studio-button { white-space: nowrap; }
.layout-studio-backdrop {
  position: fixed;
  z-index: 88;
  inset: 0;
  background: rgba(20,35,29,.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  backdrop-filter: blur(2px);
}
.layout-studio-backdrop.open { opacity: 1; pointer-events: auto; }
.layout-studio {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  display: grid;
  width: min(430px, 94vw);
  height: 100vh;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid #d8e4de;
  color: #293e35;
  background: #fbfdfc;
  box-shadow: -22px 0 60px rgba(31,62,49,.18);
  transform: translateX(104%);
  transition: transform .24s ease;
}
.layout-studio.open { transform: translateX(0); }
.layout-studio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 22px 17px;
  border-bottom: 1px solid #e0e9e4;
  background: linear-gradient(135deg, #f7fbf9, #eef7f2);
}
.layout-studio-header h2 { margin-top: 4px; font-size: 20px; }
.layout-studio-header > div > span { display: block; margin-top: 4px; color: #789087; font-size: 9px; }
.layout-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d2dfd8;
  border-radius: 10px;
  color: #61776d;
  background: #fff;
  font-size: 20px;
  line-height: 1;
}
.layout-studio-scroll { overflow-y: auto; padding: 19px 22px 26px; }
.layout-studio-scroll section + section { margin-top: 25px; padding-top: 22px; border-top: 1px solid #e3ebe7; }
.layout-global-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.layout-page-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.layout-option-heading { display: grid; grid-column: 1 / -1; gap: 3px; margin-bottom: 2px; }
.layout-option-heading strong { color: #2d493d; font-size: 12px; }
.layout-option-heading small { color: #84978e; font-size: 8px; }
.layout-global-options > label:not(.layout-switch),
.layout-page-options > label:not(.layout-switch) {
  display: grid;
  gap: 5px;
  color: #64786f;
  font-size: 8px;
  font-weight: 800;
}
.layout-global-options select,
.layout-page-options select,
.layout-block-width {
  width: 100%;
  border: 1px solid #d2dfd8;
  border-radius: 8px;
  padding: 8px 9px;
  color: #395247;
  background: #fff;
  font-size: 9px;
  font-weight: 750;
}
.layout-switch {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dce7e1;
  border-radius: 10px;
  padding: 10px 11px;
  background: #f7faf8;
}
.layout-switch span { display: grid; gap: 2px; }
.layout-switch strong { font-size: 9px; }
.layout-switch small { color: #83958c; font-size: 8px; }
.layout-switch input { width: 18px; height: 18px; accent-color: #438a70; }
.layout-block-list { display: grid; gap: 8px; margin-top: 12px; }
.layout-block-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 96px 58px;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce6e1;
  border-radius: 11px;
  padding: 9px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(45,76,63,.035);
}
.layout-block-visible { display: grid; place-items: center; }
.layout-block-visible input { width: 17px; height: 17px; accent-color: #438a70; }
.layout-block-name { display: grid; min-width: 0; gap: 2px; }
.layout-block-name strong { overflow: hidden; color: #344b41; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.layout-block-name small { color: #8b9b94; font-size: 7px; }
.layout-block-width { padding: 7px 6px; font-size: 8px; }
.layout-order-buttons { display: flex; gap: 4px; }
.layout-order-buttons button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #d5e1db;
  border-radius: 7px;
  color: #4e6a5d;
  background: #f7faf8;
  font-size: 12px;
  font-weight: 850;
}
.layout-order-buttons button:disabled { cursor: not-allowed; opacity: .32; }
.layout-studio-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #dfe8e3;
  padding: 14px 22px;
  background: #f8fbf9;
}

.view.active.layout-customized {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.view.layout-customized > * { min-width: 0; grid-column: span 12; margin: 0 !important; }
.view.layout-customized > [data-layout-span="8"] { grid-column: span 8; }
.view.layout-customized > [data-layout-span="6"] { grid-column: span 6; }
.view.layout-customized > [data-layout-span="4"] { grid-column: span 4; }

.view.active.layout-customized[data-page-gap="tight"] { gap: 7px; }
.view.active.layout-customized[data-page-gap="normal"] { gap: 14px; }
.view.active.layout-customized[data-page-gap="wide"] { gap: 21px; }
.view.active.layout-customized[data-page-gap="extra"] { gap: 30px; }
.view[data-page-spacing="tight"] { padding-top: 13px; padding-bottom: 22px; }
.view[data-page-spacing="normal"] { padding-top: 24px; padding-bottom: 38px; }
.view[data-page-spacing="roomy"] { padding-top: 42px; padding-bottom: 64px; }
.view[data-page-background="soft"] {
  border-radius: 18px;
  background: rgba(232,238,235,.58);
}
.view[data-page-background="mint"] {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(225,244,235,.72), rgba(243,249,246,.62));
}
.view[data-page-background="blue"] {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(228,238,249,.72), rgba(245,248,252,.64));
}
.view[data-page-padding="compact"] .panel,
.view[data-page-padding="compact"] .kpi,
.view[data-page-padding="compact"] .shipping-hero,
.view[data-page-padding="compact"] .margin-hero { padding: 11px; }
.view[data-page-padding="normal"] .panel,
.view[data-page-padding="normal"] .kpi,
.view[data-page-padding="normal"] .shipping-hero,
.view[data-page-padding="normal"] .margin-hero { padding: 16px; }
.view[data-page-padding="spacious"] .panel,
.view[data-page-padding="spacious"] .kpi,
.view[data-page-padding="spacious"] .shipping-hero,
.view[data-page-padding="spacious"] .margin-hero { padding: 25px; }
.view[data-page-border="none"] .panel,
.view[data-page-border="none"] .kpi,
.view[data-page-border="none"] .shipping-hero,
.view[data-page-border="none"] .margin-hero,
.view[data-page-border="none"] .mini-stat { border-color: transparent; }
.view[data-page-border="strong"] .panel,
.view[data-page-border="strong"] .kpi,
.view[data-page-border="strong"] .shipping-hero,
.view[data-page-border="strong"] .margin-hero,
.view[data-page-border="strong"] .mini-stat { border-width: 2px; border-color: #b9cdc3; }
.view[data-page-heading="small"] h2 { font-size: 12px; }
.view[data-page-heading="normal"] h2 { font-size: 15px; }
.view[data-page-heading="large"] h2 { font-size: 19px; }
.view[data-page-heading="large"] h3 { font-size: 15px; }
.view[data-page-text="small"] p,
.view[data-page-text="small"] small,
.view[data-page-text="small"] label,
.view[data-page-text="small"] td,
.view[data-page-text="small"] th { font-size: 7px; }
.view[data-page-text="large"] p,
.view[data-page-text="large"] small,
.view[data-page-text="large"] label,
.view[data-page-text="large"] td,
.view[data-page-text="large"] th { font-size: 10px; }
.view.layout-customized[data-page-align="start"] { align-items: start; }
.view.layout-customized[data-page-align="center"] { align-items: center; }
.view.layout-customized[data-page-align="stretch"] { align-items: stretch; }
.view.layout-customized[data-page-align="stretch"] > * { align-self: stretch; height: 100%; }
.view[data-page-table="compact"] tbody td { padding-top: 5px; padding-bottom: 5px; }
.view[data-page-table="compact"] thead th { padding-top: 7px; padding-bottom: 7px; }
.view[data-page-table="roomy"] tbody td { padding-top: 14px; padding-bottom: 14px; }
.view[data-page-table="roomy"] thead th { padding-top: 13px; padding-bottom: 13px; }
.view[data-page-toolbar="row"] .toolbar { flex-wrap: nowrap; }
.view[data-page-toolbar="wrap"] .toolbar { flex-wrap: wrap; }
.view[data-page-toolbar="stack"] .toolbar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.view[data-page-toolbar="stack"] .toolbar > * { width: 100%; }
.view[data-page-labels="hidden"] .section-label { display: none; }
.view[data-page-animations="on"].active.layout-customized > * {
  animation: layout-box-enter .25s ease both;
}
.view[data-page-animations="on"].active.layout-customized > *:nth-child(2) { animation-delay: .025s; }
.view[data-page-animations="on"].active.layout-customized > *:nth-child(3) { animation-delay: .05s; }
.view[data-page-animations="on"].active.layout-customized > *:nth-child(4) { animation-delay: .075s; }
.view[data-page-animations="on"].active.layout-customized > *:nth-child(n+5) { animation-delay: .1s; }
@keyframes layout-box-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-layout-width="centered"] .view { max-width: 1480px; margin-right: auto; margin-left: auto; }
html[data-layout-width="wide"] .view { width: min(100%, 1780px); max-width: 1780px; margin-right: auto; margin-left: auto; }
html[data-layout-width="full"] .view { width: 100%; max-width: none; }
html[data-layout-density="compact"] .view { padding-top: 15px; padding-bottom: 25px; }
html[data-layout-density="compact"] .panel,
html[data-layout-density="compact"] .kpi { padding: 12px; }
html[data-layout-density="compact"] .kpi-grid,
html[data-layout-density="compact"] .overview-grid,
html[data-layout-density="compact"] .shipping-summary-grid,
html[data-layout-density="compact"] .margin-summary-grid { gap: 8px; }
html[data-layout-density="compact"] tbody td { padding-top: 6px; padding-bottom: 6px; }
html[data-layout-density="spacious"] .view { padding-top: 36px; padding-bottom: 60px; }
html[data-layout-density="spacious"] .panel,
html[data-layout-density="spacious"] .kpi { padding: 24px; }
html[data-layout-density="spacious"] .kpi-grid,
html[data-layout-density="spacious"] .overview-grid,
html[data-layout-density="spacious"] .shipping-summary-grid,
html[data-layout-density="spacious"] .margin-summary-grid { gap: 20px; }
html[data-layout-radius="rounded"] .panel,
html[data-layout-radius="rounded"] .kpi,
html[data-layout-radius="rounded"] .mini-stat,
html[data-layout-radius="rounded"] .shipping-hero,
html[data-layout-radius="rounded"] .margin-hero { border-radius: 24px; }
html[data-layout-radius="square"] .panel,
html[data-layout-radius="square"] .kpi,
html[data-layout-radius="square"] .mini-stat,
html[data-layout-radius="square"] .shipping-hero,
html[data-layout-radius="square"] .margin-hero { border-radius: 5px; }
html[data-layout-shadows="off"] .panel,
html[data-layout-shadows="off"] .kpi,
html[data-layout-shadows="off"] .mini-stat,
html[data-layout-shadows="off"] .shipping-hero,
html[data-layout-shadows="off"] .margin-hero,
html[data-layout-shadows="off"] .carrier-card { box-shadow: none !important; }

@media (max-width: 980px) {
  .view.layout-customized > [data-layout-span] { grid-column: span 12; }
  .layout-block-row { grid-template-columns: 24px minmax(0, 1fr) 86px 58px; }
}

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .top-actions .ghost { display: inline-flex; }
  .settings-layout { grid-template-columns: 1fr; }
  .margin-summary-grid { grid-template-columns: 1fr; }
  .shipping-summary-grid { grid-template-columns: 1fr; }
  .safety-card, .settings-footer { grid-column: 1; }
}

/* Main Dashboard: one-page command center */
.main-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .8fr);
  gap: 22px;
  margin-bottom: 16px;
  padding: 25px 27px;
  border: 1px solid #cfe4d7;
  border-radius: 20px;
  background:
    radial-gradient(circle at 2% 0%, rgba(91, 187, 128, .18), transparent 34%),
    linear-gradient(135deg, #f0faf4, #ffffff 70%);
  box-shadow: 0 14px 38px rgba(34, 88, 59, .08);
}
.main-command-copy h2 { margin: 3px 0 7px; font-size: 24px; letter-spacing: -.025em; }
.main-command-copy > p:last-of-type { max-width: 760px; margin: 0; color: #65776c; font-size: 10px; line-height: 1.65; }
.main-master-controls {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 17px;
  border: 1px solid #d9e7de;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
}
.main-master-status { display: grid; gap: 5px; }
.main-master-status .status-pill { justify-self: start; }
.main-master-status strong { font-size: 14px; }
.main-master-status small { color: #6c7b72; line-height: 1.45; }
.main-master-actions { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.main-master-actions .button { min-height: 42px; }
.main-large-action { box-shadow: 0 9px 20px rgba(27, 143, 87, .2); }

.main-queue { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.main-queue-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #dce7e0;
  border-radius: 999px;
  color: #748078;
  background: rgba(255,255,255,.75);
  font-size: 8px;
  font-weight: 800;
}
.main-queue-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #bac6be; }
.main-queue-chip.queued { color: #315e49; border-color: #b8dcc7; background: #edf8f1; }
.main-queue-chip.queued::before { background: #62a982; }
.main-queue-chip.active { color: #075e37; border-color: #72c698; background: #dbf4e5; box-shadow: 0 0 0 3px rgba(43, 164, 99, .08); }
.main-queue-chip.active::before { background: #11975a; box-shadow: 0 0 0 4px rgba(17,151,90,.13); }
.main-queue-chip.done { color: #176c43; border-color: #b5dec5; background: #e5f6eb; }
.main-queue-chip.done::before { background: #24a565; }
.main-queue-chip.failed { color: #a04437; border-color: #f0c2bb; background: #fff0ed; }
.main-queue-chip.failed::before { background: #d45d4d; }

.main-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.main-summary-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #dae5de;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(35, 73, 51, .045);
}
.main-summary-card > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #14613d; background: #e4f4ea; font-size: 10px; font-weight: 900; }
.main-summary-card div { display: grid; min-width: 0; gap: 2px; }
.main-summary-card small { color: #75827a; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.main-summary-card strong { font-size: 12px; }
.main-summary-card p { overflow: hidden; margin: 0; color: #708078; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.main-workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.manual-order-panel {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) minmax(360px, 1fr);
  align-items: end;
  gap: 18px 24px;
  margin-bottom: 16px;
  border-color: #bfe1cc;
  background: linear-gradient(135deg, #f2fbf5, #fff 72%);
}
.manual-order-copy h2 { margin: 3px 0 6px; font-size: 18px; }
.manual-order-copy p:last-child { max-width: 780px; margin: 0; color: #687970; font-size: 9px; line-height: 1.55; }
.manual-order-form { display: grid; grid-template-columns: 1.35fr 1fr auto; align-items: end; gap: 9px; }
.manual-order-form label { display: grid; gap: 5px; color: #4c5c52; font-size: 8px; font-weight: 800; }
.manual-order-form .button { min-height: 38px; white-space: nowrap; }
.manual-order-result { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid #dcebe1; }
.manual-order-result > strong { color: #405147; font-size: 9px; }
.manual-order-details { grid-column: 1 / -1; color: #65766c; font-size: 8px; }
.manual-order-details b { color: #1e6f45; }
@media (max-width: 1180px) {
  .manual-order-panel { grid-template-columns: 1fr; }
  .manual-order-form { grid-template-columns: 1fr 1fr; }
  .manual-order-form .button { grid-column: 1 / -1; }
}
.main-workflow-card { display: grid; align-content: start; gap: 16px; min-height: 255px; padding: 19px; }
.main-workflow-heading { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.main-workflow-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #14623e; background: linear-gradient(135deg, #e2f4e9, #f4fbf6); font-size: 11px; font-weight: 900; }
.main-workflow-heading h2 { margin: 2px 0 4px; font-size: 15px; }
.main-workflow-heading p:last-child { margin: 0; color: #718078; font-size: 8px; line-height: 1.5; }
.main-include { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #d6e5db; border-radius: 9px; color: #315e49; background: #f7fbf8; font-size: 8px; font-weight: 800; }
.main-include input, .main-switch input { width: 15px; height: 15px; accent-color: #168c56; }
.main-quick-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.main-quick-settings > label, .main-automation-actions > label { display: grid; align-content: start; gap: 5px; color: #536159; font-size: 8px; font-weight: 800; }
.main-quick-settings input:not([type="checkbox"]), .main-quick-settings select { width: 100%; min-height: 35px; }
.main-quick-settings .suffix { grid-template-columns: minmax(0, 1fr) minmax(86px, auto); }
.main-quick-settings .suffix select { min-width: 86px; border: 0; border-left: 1px solid #d8e2db; border-radius: 0; background: #f4f8f5; }
.main-inline-status { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #cfe4d6; border-radius: 11px; color: #245b41; background: linear-gradient(135deg, #f2faf5, #eaf7ef); }
.main-inline-status > div { display: grid; gap: 3px; }
.main-inline-status strong { font-size: 9px; }
.main-inline-status small { color: #6c7d73; font-size: 8px; }
.main-switch { display: flex !important; min-height: 35px; flex-direction: row !important; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid #d7e1da; border-radius: 9px; background: #fbfcfb; }
.main-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.main-card-actions .button { min-height: 34px; }
.main-completion-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.main-completion-stats > div { display: grid; gap: 3px; padding: 12px; border: 1px solid #e0e8e2; border-radius: 11px; background: #f8faf9; }
.main-completion-stats small { color: #758179; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.main-completion-stats strong { font-size: 17px; }

.main-automation-panel { margin-bottom: 30px; padding: 20px; }
.main-automation-panel .panel-heading { align-items: end; }
.main-automation-panel .panel-heading h2 { margin-bottom: 4px; }
.main-automation-panel .panel-heading p:last-child { margin: 0; color: #718078; font-size: 8px; }
.main-automation-actions { display: flex; align-items: end; gap: 9px; }
.main-automation-actions .input-suffix { min-width: 120px; }
.main-schedule-table { overflow: hidden; margin-top: 16px; border: 1px solid #dce6df; border-radius: 13px; }
.main-schedule-header, .main-schedule-row { display: grid; grid-template-columns: minmax(145px, 1.25fr) 78px minmax(100px, .8fr) minmax(105px, .8fr) minmax(120px, .9fr) minmax(150px, 1fr); align-items: center; gap: 10px; }
.main-schedule-header { padding: 9px 12px; color: #6d7b72; background: #f1f6f3; font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.main-schedule-row { padding: 10px 12px; border-top: 1px solid #e5ece7; background: #fff; }
.main-schedule-row:hover { background: #f8fcf9; }
.main-schedule-row > input[type="checkbox"] { width: 17px; height: 17px; accent-color: #168c56; }
.main-schedule-row input, .main-schedule-row select { min-width: 0; width: 100%; }
.main-schedule-row strong { font-size: 9px; }
.main-schedule-row small { color: #6c7b72; font-size: 8px; }
.main-automation-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #65756b; font-size: 8px; }

html[data-dashboard-theme="executive"] .main-command-hero {
  border-color: #cddfd5;
  background: radial-gradient(circle at 3% 0%, rgba(85,171,121,.18), transparent 34%), linear-gradient(135deg, #eff8f3, #fff 72%);
}
html[data-dashboard-theme="executive"] .main-workflow-number,
html[data-dashboard-theme="executive"] .main-summary-card > span { color: #285f47; background: #e4f2e9; }

@media (max-width: 1280px) {
  .main-command-hero { grid-template-columns: 1fr; }
  .main-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-schedule-table { overflow-x: auto; }
  .main-schedule-header, .main-schedule-row { min-width: 880px; }
}

@media (max-width: 1040px) {
  .main-workflow-grid { grid-template-columns: 1fr; }
  .main-master-actions { grid-template-columns: 1fr 1fr 1fr; }
}

/* Online dashboard connection controls */
.online-worker-control { display: grid; gap: 3px; min-width: 170px; color: #6b7b72; font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.online-worker-control select { min-height: 34px; max-width: 220px; border: 1px solid #d5e1da; border-radius: 9px; padding: 0 28px 0 9px; color: #304c3f; background: #fff; font-size: 9px; font-weight: 750; text-transform: none; letter-spacing: 0; }
.online-account-chip { display: inline-flex; min-height: 34px; max-width: 190px; align-items: center; border: 1px solid #d5e1da; border-radius: 9px; padding: 0 10px; overflow: hidden; color: #315645; background: #f5faf7; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-access-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #cfe1d7; border-radius: 16px; padding: 20px; background: linear-gradient(135deg, #eef8f2, #fff); }
.user-access-hero h2, .user-access-hero p { margin: 0; }
.user-access-hero h2 { margin-top: 3px; color: #1c3c2e; font-size: 20px; }
.user-access-hero p:not(.section-label) { max-width: 720px; margin-top: 7px; color: #63756b; font-size: 10px; line-height: 1.55; }
.user-access-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.pending-users-notice { display: flex; align-items: center; gap: 10px; margin-top: 12px; border: 1px solid #ebcf99; border-radius: 12px; padding: 11px 13px; color: #775018; background: #fff8e9; font-size: 9px; }
.pending-users-notice[hidden] { display: none; }
.pending-users-notice strong { color: #5d3b0e; }
.user-access-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .72fr); align-items: start; gap: 12px; margin-top: 12px; }
.user-list-panel, .user-policy-panel { min-width: 0; }
.user-access-table td { vertical-align: middle; }
.user-person { display: grid; min-width: 180px; gap: 3px; }
.user-person strong { color: #213a2e; font-size: 10px; }
.user-person span { color: #74847b; font-size: 8px; }
.account-status { display: inline-flex; width: max-content; border-radius: 999px; padding: 4px 7px; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.account-status.pending { color: #84520a; background: #fff0cf; }
.account-status.active { color: #09673c; background: #dff5e8; }
.account-status.disabled { color: #913b35; background: #fde5e2; }
.user-role-select { min-width: 112px; min-height: 34px; }
.user-actions { display: flex; min-width: 170px; flex-wrap: wrap; gap: 6px; }
.user-actions .button { min-height: 31px; padding: 0 9px; font-size: 8px; }
.user-policy-form { display: grid; gap: 11px; }
.user-policy-form .toggle-row { margin: 0; }
.account-safety-note { display: grid; gap: 4px; border: 1px solid #dbe7e0; border-radius: 10px; padding: 11px; color: #687a70; background: #f6faf8; font-size: 8px; line-height: 1.45; }
.account-safety-note strong { color: #315543; font-size: 9px; }
.form-message { min-height: 16px; margin: 0; color: #397057; font-size: 8px; }
.user-action-error { color: #a23f32; }
.online-connection-banner { position: fixed; z-index: 72; right: 18px; bottom: 18px; display: flex; max-width: min(520px, calc(100vw - 36px)); align-items: center; gap: 8px; border: 1px solid #d4e2da; border-radius: 11px; padding: 9px 12px; color: #486357; background: rgba(255,255,255,.95); box-shadow: 0 10px 28px rgba(30,65,48,.13); backdrop-filter: blur(10px); font-size: 8px; }
#onlineConnectionDot { width: 8px; height: 8px; border-radius: 50%; background: #d3a548; box-shadow: 0 0 0 4px rgba(211,165,72,.12); }
#onlineConnectionDot.online { background: #1aa363; box-shadow: 0 0 0 4px rgba(26,163,99,.13); }
.online-auth-gate { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(238,246,241,.94); backdrop-filter: blur(12px); }
.online-auth-gate[hidden] { display: none; }
.online-auth-card { display: grid; width: min(420px, 94vw); justify-items: start; gap: 13px; border: 1px solid #cfdfd5; border-radius: 20px; padding: 30px; background: #fff; box-shadow: 0 24px 70px rgba(32,70,51,.18); }
.online-auth-card img { width: 48px; height: 48px; }
.online-auth-card h2, .online-auth-card p { margin: 0; }
.online-auth-card p:not(.section-label) { color: #6c7c73; font-size: 10px; line-height: 1.6; }
.online-auth-form { display: grid; width: 100%; gap: 12px; }
.online-auth-form [hidden] { display: none !important; }
.online-auth-form label { display: grid; gap: 6px; color: #42584c; font-size: 9px; font-weight: 800; }
.online-auth-form input { width: 100%; min-height: 44px; border: 1px solid #cadbd1; border-radius: 11px; padding: 0 12px; color: #1d3429; background: #fbfdfc; font-size: 12px; outline: none; }
.online-auth-form input:focus { border-color: #168c56; box-shadow: 0 0 0 3px rgba(22,140,86,.12); }
.online-auth-form .button { width: 100%; min-height: 44px; margin-top: 2px; }
.online-auth-error { width: 100%; border: 1px solid #efc6c0; border-radius: 10px; padding: 9px 10px; color: #a23f32 !important; background: #fff4f2; }
.online-auth-switch { justify-self: center; border: 0; padding: 4px; color: #13774b; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.online-owner-activate { justify-self: stretch; min-height: 38px; border: 1px solid #c9ded2; border-radius: 10px; padding: 7px 10px; color: #205e42; background: #eef8f2; font-size: 9px; font-weight: 850; cursor: pointer; }
.online-worker-dialog { width: min(480px, 94vw); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 24px 70px rgba(25,58,42,.25); }
.online-worker-dialog::backdrop { background: rgba(22,44,34,.35); backdrop-filter: blur(4px); }
.online-worker-card { position: relative; display: grid; gap: 13px; padding: 26px; }
.online-worker-card h2, .online-worker-card p { margin: 0; }
.online-worker-card > p:not(.section-label), .online-worker-card small { color: #6e7e75; font-size: 9px; line-height: 1.55; }
.online-worker-card label { display: grid; gap: 6px; color: #52655b; font-size: 9px; font-weight: 800; }
.online-worker-card input, .online-worker-card textarea { width: 100%; border: 1px solid #d4e0d9; border-radius: 9px; padding: 10px; color: #2c4639; background: #fbfdfc; }
.online-worker-card textarea { min-height: 92px; resize: vertical; font-family: monospace; font-size: 9px; }
#onlineWorkerTokenResult { display: grid; gap: 10px; }
#onlineWorkerTokenResult[hidden] { display: none; }
.online-dialog-close { position: absolute; top: 13px; right: 13px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d8e3dc; border-radius: 9px; color: #64766c; background: #fff; font-size: 18px; }
@media (max-width: 1180px) { .online-worker-control { min-width: 145px; } .online-worker-control select { max-width: 170px; } }

/* Responsive operations workspace. Desktop keeps the full command center;
   tablets and phones prioritize the active workflow and touch controls. */
@media (max-width: 1024px) {
  .topbar,
  html[data-dashboard-theme="executive"] .topbar {
    top: 0;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 10px;
    padding: 12px 14px 12px 70px;
  }
  .topbar > div:first-child,
  html[data-dashboard-theme="executive"] .topbar > div:first-child {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
  }
  .topbar h1,
  html[data-dashboard-theme="executive"] .topbar h1 { font-size: 19px; }
  .top-actions,
  html[data-dashboard-theme="executive"] .topbar .top-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: thin;
  }
  .top-actions > * { flex: 0 0 auto; }
  .top-actions .button { min-height: 38px; white-space: nowrap; }
  .view,
  html[data-dashboard-theme="executive"] .view {
    width: 100%;
    padding: 16px 14px 34px;
  }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid,
  .diagnostic-grid,
  .margin-summary-grid,
  .shipping-summary-grid,
  .settings-layout { grid-template-columns: 1fr !important; }
  .main-command-hero { grid-template-columns: 1fr; }
  .main-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-workflow-grid { grid-template-columns: 1fr; }
  .current-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-footer { justify-content: stretch; flex-wrap: wrap; }
  .settings-footer .button { flex: 1; }
  .table-wrap { width: 100%; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
  .online-connection-banner { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  .user-access-grid { grid-template-columns: 1fr; }
  .user-access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .user-access-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .user-access-summary { grid-template-columns: 1fr 1fr; }
  .pending-users-notice { align-items: flex-start; flex-direction: column; }
  .sidebar-flyout { width: 60px; height: 64px; }
  .sidebar-menu-trigger {
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
  }
  .sidebar-flyout:hover,
  .sidebar-flyout.pinned,
  html[data-dashboard-theme="executive"] .sidebar-flyout:hover,
  html[data-dashboard-theme="executive"] .sidebar-flyout.pinned {
    width: 100vw;
    height: 100vh;
  }
  .sidebar,
  html[data-dashboard-theme="executive"] .sidebar {
    top: 60px;
    left: 8px;
    width: calc(100vw - 16px);
    height: auto;
    max-height: calc(100dvh - 70px);
    border-radius: 15px;
    padding: 12px;
  }
  .nav-item { min-height: 43px; padding: 9px 10px; font-size: 12px; }
  .topbar,
  html[data-dashboard-theme="executive"] .topbar {
    position: sticky;
    gap: 8px;
    padding: 10px 9px 9px 60px;
  }
  .topbar .eyebrow { display: none; }
  .topbar h1,
  html[data-dashboard-theme="executive"] .topbar h1 { font-size: 17px; }
  .top-actions,
  html[data-dashboard-theme="executive"] .topbar .top-actions {
    margin-left: -51px;
    width: calc(100vw - 18px);
  }
  .dashboard-theme-control { display: none !important; }
  .online-worker-control { min-width: 152px; }
  .online-worker-control select { max-width: 152px; min-height: 38px; }
  .top-status { min-width: 88px; min-height: 38px; align-content: center; text-align: center; }
  .view,
  html[data-dashboard-theme="executive"] .view { padding: 10px 8px 26px; }
  .panel,
  html[data-dashboard-theme="executive"] .panel,
  .main-command-hero,
  .margin-hero,
  .shipping-hero { border-radius: 13px; padding: 13px 11px; }
  .panel-heading,
  .toolbar,
  .shipping-toolbar,
  .margin-filters,
  .settings-footer,
  .main-automation-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .toolbar input,
  .toolbar select,
  .shipping-toolbar input,
  .shipping-toolbar select { width: 100%; min-width: 0; }
  .kpi-grid,
  .main-summary-grid,
  .run-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .kpi-card,
  .mini-stat { min-width: 0; padding: 11px; }
  .main-master-actions,
  .main-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .main-large-action { grid-column: 1 / -1; }
  .main-quick-settings,
  .confirm-run-settings,
  .form-grid,
  .margin-settings,
  .recovery-grid,
  .safety-grid { grid-template-columns: 1fr !important; }
  .current-details { grid-template-columns: 1fr; gap: 8px; }
  .button { min-height: 42px; padding: 10px 11px; font-size: 11px; }
  input,
  select { min-height: 42px; font-size: 12px !important; }
  .main-schedule-header { display: none; }
  .main-schedule-row {
    min-width: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
    border: 1px solid #dce7e0;
    border-radius: 11px;
    padding: 10px;
  }
  .main-schedule-row > strong,
  .main-schedule-row > small { grid-column: 1 / -1; }
  .column-picker-menu { position: fixed; inset: auto 8px 8px; width: auto; max-height: 72dvh; overflow: auto; }
  .online-auth-gate { align-items: start; overflow-y: auto; padding: 20px 10px; }
  .online-auth-card { width: min(100%, 430px); gap: 11px; border-radius: 16px; padding: 20px 17px; }
  .online-auth-card img { width: 42px; height: 42px; }
  .online-auth-form input { min-height: 46px; font-size: 14px !important; }
}

@media (max-width: 430px) {
  .kpi-grid,
  .main-summary-grid,
  .run-summary-grid { grid-template-columns: 1fr; }
  .main-master-actions,
  .main-card-actions { grid-template-columns: 1fr; }
  .main-large-action { grid-column: auto; }
  .online-connection-banner { font-size: 9px; }
}

/* Keep live order tables responsive while mouse or touch scrolling is active. */
html, body { touch-action: pan-x pan-y; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.view, .table-wrap, .sidebar, .top-actions, .column-picker-menu { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.panel, .kpi-card, .main-workflow-card { contain: style; }
@media (hover: none), (pointer: coarse) {
  .topbar, .settings-footer, .online-connection-banner,
  html[data-dashboard-theme="executive"] .topbar,
  html[data-dashboard-theme="executive"] .panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .button:hover:not(:disabled), .chart-bar:hover, .nav-item:hover { filter: none; transform: none; }
  .panel, .kpi-card, .mini-stat, .main-workflow-card { box-shadow: 0 2px 8px rgba(27,67,47,.055) !important; }
}


/* Polished navigation, command header, and summary spacing. */
.sidebar-backdrop {
  position: fixed;
  z-index: 35;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(15, 43, 29, .24);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
body.navigation-open { overflow: hidden; }

.topbar,
html[data-dashboard-theme="executive"] .topbar {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 10px;
}
.top-actions,
html[data-dashboard-theme="executive"] .topbar .top-actions {
  gap: 10px;
}
.top-action-group {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe6df;
  border-radius: 13px;
  padding: 6px 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,248,.94));
  box-shadow: 0 4px 14px rgba(30,72,49,.045);
}
.top-action-group .button { min-height: 34px; white-space: nowrap; }
.top-appearance-group { border-color: #d6e3db; }
.top-run-group {
  border-color: #cfe2d7;
  background: linear-gradient(180deg, #fbfefc, #f0f8f3);
}
.top-status {
  min-width: 76px;
  margin: 0;
  border-right: 1px solid #dce7e0;
  padding: 2px 10px 2px 3px;
  text-align: center;
}
.dashboard-theme-control { margin-right: 0; }

.kpi-grid {
  gap: 16px;
  margin-bottom: 22px;
}
.kpi {
  min-height: 98px;
  padding: 20px 18px;
}
.main-summary-grid {
  gap: 16px;
  margin: 19px 0 24px;
}
.main-summary-card {
  min-height: 92px;
  padding: 18px 17px;
}

@media (max-width: 1320px) {
  .topbar,
  html[data-dashboard-theme="executive"] .topbar {
    grid-template-columns: 1fr;
    padding-left: 76px;
  }
  .top-actions,
  html[data-dashboard-theme="executive"] .topbar .top-actions {
    justify-content: flex-start;
  }
}

@media (hover: none), (pointer: coarse) {
  .sidebar-flyout:not(.pinned):hover {
    width: 68px;
    height: 76px;
  }
  .sidebar-flyout:not(.pinned):hover .sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px) scale(.975);
    visibility: hidden;
  }
}

@media (max-width: 720px) {
  .sidebar-backdrop { background: rgba(15,43,29,.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .top-action-group { min-height: 46px; flex: 0 0 auto; padding: 5px 6px; }
  .top-connection-group { max-width: calc(100vw - 22px); }
  .top-status { min-width: 82px; }
  .kpi-grid { gap: 11px; margin-bottom: 17px; }
  .kpi { min-height: 91px; padding: 16px 14px; }
  .main-summary-grid { gap: 11px; margin: 15px 0 19px; }
  .main-summary-card { min-height: 86px; padding: 15px 13px; }
}

@media (max-width: 720px) and (hover: none), (max-width: 720px) and (pointer: coarse) {
  .sidebar-flyout:not(.pinned):hover {
    width: 60px;
    height: 64px;
  }
}