/*
 * SkyHub Design System Baseline
 * Version: v0.18.1.1
 * Purpose: App-wide visual tokens and first-pass polish for The Hub, Staff Order Workspace and Hub workflow popups.
 * Guardrail: CSS-only visual baseline. No routes, workflows, permissions, schema, document logic or customer-visibility behaviour is changed here.
 */

:root {
  --aop-ds-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aop-ds-navy-950: #07132c;
  --aop-ds-navy-900: #0b1738;
  --aop-ds-navy-800: #102653;
  --aop-ds-cyan-500: #16a6c8;
  --aop-ds-cyan-600: #087fa3;
  --aop-ds-teal-500: #16a39a;
  --aop-ds-ink: #0f172a;
  --aop-ds-text: #17233a;
  --aop-ds-muted: #65758b;
  --aop-ds-line: #dbe6ef;
  --aop-ds-line-soft: rgba(15, 45, 80, .085);
  --aop-ds-bg: #f4f8fc;
  --aop-ds-surface: #ffffff;
  --aop-ds-surface-soft: #f7fbff;
  --aop-ds-success: #0f9f6e;
  --aop-ds-warning: #d98218;
  --aop-ds-danger: #c73545;
  --aop-ds-info: #126bb1;
  --aop-ds-radius-xs: 10px;
  --aop-ds-radius-sm: 14px;
  --aop-ds-radius-md: 18px;
  --aop-ds-radius-lg: 24px;
  --aop-ds-radius-xl: 30px;
  --aop-ds-shadow-card: 0 16px 42px rgba(7, 21, 47, .065);
  --aop-ds-shadow-soft: 0 10px 28px rgba(7, 21, 47, .055);
  --aop-ds-shadow-modal: 0 34px 100px rgba(4, 14, 31, .36);
}

.aop-app,
.aop-app * {
  font-family: var(--aop-ds-font);
}

.aop-app {
  color: var(--aop-ds-text);
  background:
    radial-gradient(circle at 84% -6%, rgba(22, 166, 200, .16), transparent 30rem),
    radial-gradient(circle at 8% 20%, rgba(16, 38, 83, .055), transparent 26rem),
    linear-gradient(135deg, #f9fbff 0%, var(--aop-ds-bg) 48%, #ecf3fa 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aop-main {
  padding: 20px 28px 48px;
}

.aop-content {
  padding-top: 18px;
}

/* Topbar and sidebar: keep identity, reduce plugin-like visual weight. */
.aop-topbar {
  min-height: 70px;
  height: 70px;
  border-radius: 0 0 28px 28px;
  border: 1px solid rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 38px rgba(7, 21, 47, .075);
}

.aop-command {
  height: 42px;
  max-width: 620px;
  border-radius: 999px;
  border-color: rgba(15, 45, 80, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 20px rgba(7, 21, 47, .035);
}

.aop-command input {
  font-size: 12px;
  font-weight: 520;
}

.aop-topbar .aop-btn-primary,
.aop-topbar .aop-btn-dark {
  min-height: 42px;
  border-radius: 14px;
  font-weight: 820;
  letter-spacing: -.01em;
}

.aop-bell,
.aop-account-pill {
  border-color: rgba(15, 45, 80, .08);
  box-shadow: 0 8px 18px rgba(7, 21, 47, .04);
}

.aop-account-pill small {
  color: var(--aop-ds-danger);
  font-weight: 760;
}

.aop-sidebar {
  background:
    radial-gradient(circle at 80% 28%, rgba(255, 255, 255, .08) 0 2px, transparent 3px) 0 0 / 32px 32px,
    radial-gradient(circle at 18% 8%, rgba(22, 166, 200, .22), transparent 18rem),
    linear-gradient(180deg, #111a40 0%, #0d1432 100%);
  box-shadow: 20px 0 44px rgba(7, 21, 47, .18);
}

.aop-nav-item {
  min-height: 44px;
  border-radius: 16px;
  font-weight: 760;
}

.aop-nav-item.is-active {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 4px 0 0 var(--aop-ds-cyan-500), 0 10px 24px rgba(0, 0, 0, .14);
}

.aop-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
}

/* Page rhythm and shared surfaces. */
.aop-hero,
.aop-module .aop-hero {
  border-radius: 26px;
  min-height: 118px;
  padding: 24px 28px;
  background:
    radial-gradient(circle at 92% 35%, rgba(40, 214, 255, .30), transparent 24rem),
    linear-gradient(128deg, #0c1739 0%, #102653 52%, #0d849b 100%);
  box-shadow: 0 18px 44px rgba(7, 21, 47, .13);
}

.aop-hero h1 {
  letter-spacing: -.055em;
  font-weight: 860;
}

.aop-hero p {
  color: rgba(255, 255, 255, .78);
}

.aop-panel,
.aop-form-section,
.aop-staff-order-section,
.aop-hub-command-centre,
.aop-staff-workspace-shell,
.aop-order-workspace-app {
  border-color: var(--aop-ds-line-soft) !important;
  box-shadow: var(--aop-ds-shadow-card);
}

.aop-panel,
.aop-hub-command-centre,
.aop-staff-workspace-shell,
.aop-order-workspace-app {
  border-radius: var(--aop-ds-radius-lg);
  background: rgba(255, 255, 255, .93);
}

.aop-eyebrow {
  color: var(--aop-ds-cyan-600);
  letter-spacing: .16em;
  font-weight: 860;
}

.aop-hero .aop-eyebrow,
.aop-record-modal-head .aop-eyebrow {
  color: #34d7fb !important;
}

.aop-btn {
  border-radius: 13px;
  font-weight: 820;
  letter-spacing: -.005em;
}

.aop-btn-primary {
  background: linear-gradient(135deg, #22b5d2, #0780a4);
  box-shadow: 0 12px 24px rgba(8, 128, 164, .24);
}

.aop-btn-secondary {
  background: #eaf7fb;
  color: #076f8e;
  border: 1px solid rgba(8, 128, 164, .12);
}

.aop-btn-ghost {
  background: #fff;
  border: 1px solid rgba(15, 45, 80, .10);
  color: var(--aop-ds-navy-900);
}

/* Badge/chip hierarchy: status and priority badges should read differently from evidence chips. */
.aop-badge,
.aop-chip,
.aop-hub-order-chips em,
.aop-workspace-blocker-chips span {
  min-height: 23px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 860;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.aop-hub-order-chips em,
.aop-workspace-blocker-chips span {
  border: 1px solid rgba(15, 45, 80, .055);
  background: #eef4f8;
  color: #52667c;
}

.aop-badge.critical,
.aop-chip.critical,
.aop-hub-order-card.is-priority-critical .aop-badge,
.aop-hub-order-card.is-priority-critical .aop-chip {
  background: rgba(199, 53, 69, .11);
  color: var(--aop-ds-danger);
}

.aop-badge.high,
.aop-chip.high,
.aop-hub-order-card.is-priority-high .aop-badge,
.aop-hub-order-card.is-priority-high .aop-chip {
  background: rgba(217, 130, 24, .12);
  color: var(--aop-ds-warning);
}

.aop-badge.normal,
.aop-chip.normal,
.aop-badge.done,
.aop-chip.done,
.aop-chip.approved,
.aop-chip.credit {
  background: rgba(15, 159, 110, .115);
  color: var(--aop-ds-success);
}

/* The Hub dashboard. */
.aop-module-staff-ops .aop-stat-grid,
.aop-hub-command-metrics {
  gap: 14px;
}

.aop-module-staff-ops .aop-stat,
.aop-hub-command-metrics article {
  min-height: 88px;
  border-radius: 18px;
  border: 1px solid rgba(15, 45, 80, .085);
  background: linear-gradient(135deg, #fff 0%, #f8fcff 100%);
  box-shadow: 0 12px 30px rgba(7, 21, 47, .052);
}

.aop-module-staff-ops .aop-stat strong,
.aop-hub-command-metrics strong {
  color: var(--aop-ds-navy-900);
  font-weight: 860;
  letter-spacing: -.04em;
}

.aop-hub-command-centre {
  padding: 18px;
  overflow: hidden;
}

.aop-hub-command-head h2,
.aop-hub-board-panel-head h3 {
  font-weight: 780;
  letter-spacing: -.035em;
}

.aop-hub-board-tabs {
  border-radius: 22px;
}

.aop-hub-board-tabs .aop-hub-board-nav {
  padding: 7px;
  border-radius: 18px;
  background: #f3f7fb;
  border: 1px solid rgba(15, 45, 80, .075);
}

.aop-hub-board-nav .aop-detail-tab-button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 13px;
  font-weight: 780;
}

.aop-hub-board-nav .aop-detail-tab-button.is-active {
  background: var(--aop-ds-navy-900);
  color: #fff;
  box-shadow: 0 10px 22px rgba(7, 21, 47, .18);
}

.aop-hub-board-panel {
  padding: 18px;
  border-radius: 22px;
  background: #fff;
}

.aop-hub-order-grid {
  gap: 14px;
}

.aop-hub-order-card {
  padding: 15px;
  border-radius: 20px;
  border-color: rgba(15, 45, 80, .08);
  box-shadow: 0 14px 32px rgba(7, 21, 47, .055);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.aop-hub-order-card:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 166, 200, .22);
  box-shadow: 0 20px 42px rgba(7, 21, 47, .08);
}

.aop-hub-order-card.is-priority-critical {
  border-color: rgba(199, 53, 69, .26);
  box-shadow: 0 16px 36px rgba(199, 53, 69, .08);
}

.aop-hub-order-card.is-priority-high {
  border-color: rgba(217, 130, 24, .22);
}

.aop-hub-order-card h4 {
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -.02em;
}

.aop-hub-order-card p {
  color: var(--aop-ds-muted);
}

.aop-hub-order-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.aop-hub-order-facts span {
  padding: 9px 10px;
  border-radius: 14px;
  border-color: rgba(15, 45, 80, .055);
  background: #f8fbfe;
}

.aop-hub-order-facts small {
  font-size: 9.25px;
  letter-spacing: .12em;
}

.aop-hub-order-facts strong {
  font-size: 11.5px;
  line-height: 1.28;
}

.aop-hub-order-actions .aop-btn-primary,
.aop-hub-order-actions .aop-btn-secondary,
.aop-hub-order-actions .aop-btn-ghost {
  min-height: 34px;
  padding: 8px 12px;
}

.aop-hub-order-actions .aop-btn-primary {
  flex: 0 0 auto;
}

/* Staff order workspace. */
.aop-staff-workspace-shell {
  padding: 16px;
  background: linear-gradient(180deg, rgba(248, 252, 255, .94) 0%, #fff 44%);
}

.aop-staff-workspace-header {
  border-radius: 23px;
  border-color: rgba(15, 45, 80, .08);
  box-shadow: 0 14px 34px rgba(7, 21, 47, .055);
}

.aop-workspace-compact-progress .aop-staffops-progress {
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 45, 80, .075);
}

.aop-workspace-blocker-strip {
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(7, 21, 47, .045);
}

.aop-order-workspace-app {
  padding: 14px;
  background: #f7fbff;
}

.aop-workspace-process-command {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 160px);
  gap: 12px;
}

.aop-workspace-process-command .aop-staffops-next-action-card,
.aop-workspace-context-actions {
  border-radius: 20px;
  border: 1px solid rgba(15, 45, 80, .075);
  box-shadow: 0 12px 28px rgba(7, 21, 47, .045);
}

.aop-workspace-process-command .aop-staffops-next-action-card {
  padding: 16px 18px;
}

.aop-workspace-process-command .aop-staffops-next-action-main h3 {
  color: var(--aop-ds-navy-900);
  font-weight: 820;
}

.aop-workspace-stage-tabs {
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
  background: #ecf4fb;
}

.aop-workspace-stage-tabs .aop-staffops-process-tab {
  min-height: 64px;
  border-radius: 17px;
  border: 1px solid rgba(15, 45, 80, .08);
  background: #fff;
  color: var(--aop-ds-navy-900);
}

.aop-workspace-stage-tabs .aop-staffops-process-tab span {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
}

.aop-workspace-stage-tabs .aop-staffops-process-tab strong {
  font-weight: 820;
  letter-spacing: -.012em;
}

.aop-workspace-stage-tabs .aop-staffops-process-tab.is-done {
  background: linear-gradient(135deg, #fff, #fbfffd);
}

.aop-workspace-stage-tabs .aop-staffops-process-tab.is-active,
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-current {
  background: linear-gradient(135deg, #1067a7 0%, #0d4f8f 100%);
  border-color: rgba(16, 103, 167, .9);
  box-shadow: inset 0 -3px 0 #19d1c0, 0 14px 28px rgba(13, 79, 143, .18);
}

.aop-workspace-active-panel .aop-staffops-process-stage {
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(7, 21, 47, .055);
}

.aop-workspace-active-panel .aop-staffops-process-stage-head {
  padding: 16px 18px;
  background: linear-gradient(135deg, #f4faff 0%, #edf6ff 100%);
}

.aop-workspace-active-panel .aop-staffops-process-stage-head b {
  background: rgba(22, 166, 200, .15);
  color: var(--aop-ds-cyan-600);
}

.aop-workspace-active-panel .aop-staffops-process-stage-body {
  padding: 16px;
}

.aop-staff-workspace-shell .aop-staff-order-section.is-front-processing,
.aop-workspace-guardrail-note,
.aop-workspace-help-drawer {
  border-radius: 19px !important;
  border: 1px solid rgba(15, 45, 80, .075) !important;
  box-shadow: none !important;
}

.aop-workspace-help-drawer summary {
  padding: 13px 16px;
}

.aop-workspace-help-drawer summary strong {
  color: var(--aop-ds-navy-900);
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Workflow action cards and financial lanes. */
.aop-staff-workspace-shell .aop-staff-process-grid,
.aop-staff-process-modal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: start;
  align-items: stretch;
  gap: 14px;
}

.aop-staff-workspace-shell .aop-staff-process-card,
.aop-staff-process-modal-list .aop-modal-summary-card,
.aop-modal-summary-card {
  border-radius: 20px;
  border: 1px solid rgba(15, 45, 80, .085) !important;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 12px 28px rgba(7, 21, 47, .045) !important;
}

.aop-staff-process-card h4,
.aop-modal-summary-card h4 {
  color: var(--aop-ds-navy-900);
  font-weight: 820;
  letter-spacing: -.018em;
}

.aop-staff-process-card .aop-eyebrow,
.aop-modal-summary-card .aop-eyebrow {
  color: var(--aop-ds-cyan-600);
}

.aop-staffops-finance-guard {
  border-radius: 20px !important;
  border-color: rgba(217, 130, 24, .22) !important;
  background: linear-gradient(180deg, #fff 0%, #fffdf8 100%) !important;
}

.aop-staffops-finance-guard.is-clear {
  border-color: rgba(15, 159, 110, .18) !important;
  background: linear-gradient(180deg, #fff 0%, #fbfffd 100%) !important;
}

.aop-staffops-finance-grid {
  gap: 12px;
}

.aop-staffops-finance-grid > div {
  border-radius: 17px !important;
  border: 1px solid rgba(15, 45, 80, .075) !important;
  background: #f8fbfe !important;
}

/* Shipping/document chain should feel like an operational timeline rather than loose cards. */
.aop-shipping-chain,
.aop-shipping-pack-chain,
.aop-document-chain,
.aop-staffops-chain {
  border-radius: 20px;
}

.aop-staff-workspace-shell [class*="chain"] article,
.aop-staff-workspace-shell [class*="chain"] .aop-mini-card {
  border-radius: 16px;
}

/* Hub workflow popups. */
.aop-record-modal {
  background: rgba(3, 10, 24, .68) !important;
  backdrop-filter: blur(7px);
}

.aop-record-modal .aop-record-dialog {
  width: min(1320px, calc(100vw - 44px)) !important;
  max-height: 92vh !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: var(--aop-ds-shadow-modal) !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}

.aop-record-modal-head {
  min-height: 96px;
  background:
    radial-gradient(circle at 86% 42%, rgba(39, 209, 235, .28), transparent 22rem),
    linear-gradient(125deg, #0b1738 0%, #122653 53%, #128aa0 100%) !important;
  padding: 24px 68px 24px 30px !important;
}

.aop-record-modal-head h2 {
  font-size: clamp(23px, 2vw, 32px) !important;
  font-weight: 780 !important;
  letter-spacing: -.045em !important;
}

.aop-record-modal-context {
  border-radius: 18px;
}

.aop-record-modal-body {
  max-height: calc(92vh - 96px) !important;
  padding: 22px 26px 24px !important;
  background: linear-gradient(180deg, #f7fbff 0%, #fff 28%) !important;
}

.aop-record-modal-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

.aop-record-modal input,
.aop-record-modal select,
.aop-record-modal textarea,
.aop-record-modal .aop-field input,
.aop-record-modal .aop-field select,
.aop-record-modal .aop-field textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 45, 80, .12) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  font-weight: 620;
}

.aop-record-modal input:focus,
.aop-record-modal select:focus,
.aop-record-modal textarea:focus {
  outline: 3px solid rgba(22, 166, 200, .16) !important;
  border-color: rgba(22, 166, 200, .42) !important;
}

.aop-record-modal label,
.aop-record-modal .aop-field label {
  color: #34445c;
  font-size: 11px;
  letter-spacing: .055em;
  font-weight: 820;
}

.aop-record-modal .aop-modal-summary-card {
  padding: 15px 16px;
}

.aop-record-modal .aop-modal-summary-card strong,
.aop-record-modal .aop-modal-summary-card h4,
.aop-record-modal .aop-form-section strong {
  color: var(--aop-ds-navy-900);
}

.aop-record-modal .aop-form-section,
.aop-record-modal .aop-staff-process-card {
  border-radius: 22px !important;
  box-shadow: 0 12px 28px rgba(7, 21, 47, .045) !important;
}

.aop-record-modal .aop-form-actions,
.aop-record-modal .aop-modal-actions,
.aop-record-modal .aop-staff-process-actions {
  position: sticky;
  bottom: -24px;
  z-index: 5;
  margin: 18px -2px 0;
  padding: 14px 0 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), #fff 38%);
  border-top: 1px solid rgba(15, 45, 80, .07);
}

.aop-record-modal .aop-btn-primary,
.aop-record-modal button[type="submit"]:not(.aop-btn-ghost):not(.aop-btn-secondary) {
  min-height: 40px;
}

/* Tables and forms inside app surfaces. */
.aop-table-wrap {
  border-radius: 18px;
  border-color: rgba(15, 45, 80, .075);
  box-shadow: 0 12px 28px rgba(7, 21, 47, .045);
}

.aop-table th {
  background: #102653;
  font-weight: 840;
}

.aop-app input,
.aop-app select,
.aop-app textarea {
  font-family: var(--aop-ds-font);
}

/* Responsive clean-up for the new system. */
@media (max-width: 1180px) {
  .aop-hub-order-grid {
    grid-template-columns: 1fr;
  }

  .aop-workspace-process-command {
    grid-template-columns: 1fr;
  }

  .aop-workspace-context-actions {
    flex-direction: row;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .aop-main {
    padding: 12px 12px 32px;
  }

  .aop-topbar {
    height: auto;
    min-height: 68px;
    border-radius: 20px;
  }

  .aop-hub-order-facts,
  .aop-hub-command-metrics,
  .aop-workspace-stage-tabs {
    grid-template-columns: 1fr;
  }

  .aop-record-modal .aop-record-dialog {
    width: calc(100vw - 18px) !important;
    border-radius: 22px !important;
  }

  .aop-record-modal-head {
    padding: 18px 58px 18px 18px !important;
  }

  .aop-record-modal-body {
    padding: 16px !important;
  }
}

/*
 * v0.18.1.1 — Design System Correction Hotfix
 * Purpose: preserve the v0.18.1 visual baseline while correcting Hub Dashboard, Order Workspace and Hub workflow modal issues raised in screenshot QA.
 * Guardrail: scoped visual/layout corrections only. No routes, schema, permissions, workflow state, snapshot logic or customer visibility are changed here.
 */

/* The Hub dashboard: make counters and record states scannable without changing board logic. */
.aop-hub-command-metrics .aop-command-metric {
  position: relative;
  overflow: hidden;
  padding-left: 18px;
}
.aop-hub-command-metrics .aop-command-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: #9fb3c8;
}
.aop-hub-command-metrics .aop-command-metric.is-new {
  background: linear-gradient(135deg, #fff 0%, #f0f8ff 100%);
}
.aop-hub-command-metrics .aop-command-metric.is-new::before { background: #2b8bd8; }
.aop-hub-command-metrics .aop-command-metric.is-progress {
  background: linear-gradient(135deg, #fff 0%, #eefbff 100%);
}
.aop-hub-command-metrics .aop-command-metric.is-progress::before { background: #15a9cf; }
.aop-hub-command-metrics .aop-command-metric.is-risk {
  background: linear-gradient(135deg, #fff 0%, #fff4f2 100%);
  border-color: rgba(199, 53, 69, .24) !important;
  box-shadow: 0 14px 34px rgba(199, 53, 69, .075);
}
.aop-hub-command-metrics .aop-command-metric.is-risk::before { background: #c73545; width: 5px; }
.aop-hub-command-metrics .aop-command-metric.is-customer {
  background: linear-gradient(135deg, #fff 0%, #fff9eb 100%);
}
.aop-hub-command-metrics .aop-command-metric.is-customer::before { background: #d98218; }
.aop-hub-command-metrics .aop-command-metric.is-ready {
  background: linear-gradient(135deg, #fff 0%, #f0fdf8 100%);
}
.aop-hub-command-metrics .aop-command-metric.is-ready::before { background: #0f9f6e; }
.aop-hub-command-metrics .aop-command-metric.is-risk strong { color: #a12836; }

/* Record status badges: status is workflow position; priority is urgency; evidence chips remain quiet. */
.aop-order-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 45, 80, .08);
  background: #eef4f8;
  color: #53647b;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.aop-order-status-badge.is-submitted,
.aop-order-status-badge.is-under_review,
.aop-order-status-badge.is-review_started {
  background: #eaf5ff;
  border-color: rgba(18, 107, 177, .20);
  color: #126bb1;
}
.aop-order-status-badge.is-accepted_for_processing,
.aop-order-status-badge.is-processing,
.aop-order-status-badge.is-in_progress,
.aop-order-status-badge.is-approved {
  background: #edf4ff;
  border-color: rgba(13, 79, 143, .22);
  color: #0d4f8f;
}
.aop-order-status-badge.is-ready_for_delivery,
.aop-order-status-badge.is-ready_to_close,
.aop-order-status-badge.is-ready {
  background: #e9fbf7;
  border-color: rgba(15, 159, 110, .22);
  color: #0f8f69;
}
.aop-order-status-badge.is-shipped,
.aop-order-status-badge.is-shipping,
.aop-order-status-badge.is-released,
.aop-order-status-badge.is-awaiting_customer {
  background: #fff6e8;
  border-color: rgba(217, 130, 24, .24);
  color: #a35b0c;
}
.aop-order-status-badge.is-delivered_accepted,
.aop-order-status-badge.is-delivered,
.aop-order-status-badge.is-closed,
.aop-order-status-badge.is-complete,
.aop-order-status-badge.is-completed {
  background: #eafaf2;
  border-color: rgba(15, 159, 110, .24);
  color: #087a55;
}
.aop-order-status-badge.is-cancelled,
.aop-order-status-badge.is-rejected,
.aop-order-status-badge.is-query,
.aop-order-status-badge.is-queried {
  background: #fff0f2;
  border-color: rgba(199, 53, 69, .28);
  color: #b32d3b;
}
.aop-priority-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.aop-priority-chip.normal { background: #eafaf2; color: #087a55; }
.aop-priority-chip.high { background: #fff0d9; color: #a35b0c; }
.aop-priority-chip.critical { background: #ffe9ed; color: #b32d3b; }
.aop-hub-order-chips em.is-finance { background:#fff2d9; color:#9a5a0e; }
.aop-hub-order-chips em.is-shipping { background:#eaf6ff; color:#0d679d; }
.aop-hub-order-chips em.is-customer { background:#fff6e8; color:#9a5a0e; }
.aop-hub-order-chips em.is-closeout,
.aop-hub-order-chips em.is-ready_to_close { background:#eafaf2; color:#087a55; }
.aop-hub-order-chips em.is-watch,
.aop-hub-order-chips em.is-risk { background:#fff0f2; color:#b32d3b; }

/* Board tabs and workspace top-level tabs should share the pale segmented-control treatment. */
.aop-hub-board-nav .aop-detail-tab-button span,
.aop-staff-workspace-shell .aop-detail-tab-button span {
  background: #dfeaf5;
  color: #314760;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 900;
}
.aop-hub-board-nav .aop-detail-tab-button.is-active span,
.aop-staff-workspace-shell .aop-detail-tab-button.is-active span {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.aop-staff-workspace-shell .aop-detail-tab-nav:not(.aop-hub-board-nav) {
  padding: 7px;
  border-radius: 18px;
  background: #eef6fc;
  border: 1px solid rgba(15, 45, 80, .075);
}
.aop-staff-workspace-shell .aop-detail-tab-nav:not(.aop-hub-board-nav) .aop-detail-tab-button {
  min-height: 36px;
  border-radius: 13px;
  color: #52637a;
  font-weight: 820;
}
.aop-staff-workspace-shell .aop-detail-tab-nav:not(.aop-hub-board-nav) .aop-detail-tab-button.is-active {
  background: #0b1738;
  color: #fff;
  box-shadow: 0 10px 22px rgba(7, 21, 47, .16);
}

/* Order Workspace stage tracker: remove heavy solid-blue slabs and use refined app-state cards. */
.aop-workspace-stage-tabs {
  background: #eaf4fb !important;
  border: 1px solid rgba(22, 166, 200, .11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.aop-workspace-stage-tabs .aop-staffops-process-tab {
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  border-color: rgba(15, 45, 80, .08) !important;
  box-shadow: 0 8px 18px rgba(7, 21, 47, .035) !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab strong,
.aop-workspace-stage-tabs .aop-staffops-process-tab em {
  color: #0f172a !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab span {
  background: #d8f7ef !important;
  color: #0f8f69 !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-done {
  background: linear-gradient(135deg, #fff, #f5fffb) !important;
  border-color: rgba(15, 159, 110, .20) !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-active,
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-current {
  background: linear-gradient(135deg, #ffffff 0%, #eefaff 100%) !important;
  color: #0b1738 !important;
  border-color: rgba(22, 166, 200, .50) !important;
  box-shadow: inset 0 -3px 0 #18c7d8, 0 14px 28px rgba(22, 166, 200, .13) !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-active span,
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-current span {
  background: #18accb !important;
  color: #fff !important;
}
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-active em,
.aop-workspace-stage-tabs .aop-staffops-process-tab.is-current em {
  background: #dff8f5;
  color: #087a74 !important;
  border-radius: 999px;
  padding: 3px 8px;
}

/* Active step sections: keep guidance but reduce empty air. */
.aop-workspace-active-panel .aop-staffops-process-stage-body {
  padding: 14px !important;
}
.aop-staffops-action-plan.aop-workspace-help-drawer summary,
.aop-workspace-help-drawer summary {
  padding: 12px 15px !important;
}
.aop-staffops-action-plan-grid {
  gap: 10px !important;
}

/* Action card layout correction: no more tiny left-corner cards on wide desktop. */
.aop-workspace-active-panel .aop-staff-process-grid,
.aop-workspace-active-panel .aop-staff-process-modal-list {
  width: 100%;
}
.aop-workspace-active-panel [data-aop-process-panel="po"] .aop-staff-process-grid,
.aop-workspace-active-panel [data-aop-process-panel="po"] .aop-staff-process-modal-list,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-staff-process-grid,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-staff-process-modal-list {
  grid-template-columns: 1fr !important;
  max-width: none !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-staff-process-grid,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-staff-process-modal-list {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  max-width: none !important;
}
.aop-workspace-active-panel [data-aop-process-panel="po"] .aop-modal-summary-card,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-modal-summary-card {
  max-width: none !important;
  width: 100% !important;
}
@media (min-width: 980px) {
  .aop-workspace-active-panel [data-aop-process-panel="po"] .aop-modal-summary-card,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(420px, 1.5fr) minmax(150px, auto);
    align-items: center;
    gap: 16px;
  }
  .aop-workspace-active-panel [data-aop-process-panel="po"] .aop-modal-summary-card .aop-staff-po-summary-grid,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid {
    margin: 0 !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="po"] .aop-modal-summary-card .aop-modal-summary-copy,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy {
    grid-column: 1 / span 2;
    margin: 0;
  }
  .aop-workspace-active-panel [data-aop-process-panel="po"] .aop-modal-summary-card .aop-staff-process-actions,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}

/* Supplier PO/Bill/Payment status colours inside action cards and popups. */
.aop-staff-process-card-head em {
  border: 1px solid rgba(15, 45, 80, .07);
}
.aop-staff-process-card-head em.is-open,
.aop-staff-process-card-head em.is-draft,
.aop-staff-process-card-head em.is-pending,
.aop-staff-process-card-head em.is-pending_approval,
.aop-staff-process-card-head em.is-expected {
  background: #fff0f2 !important;
  border-color: rgba(199, 53, 69, .22) !important;
  color: #b32d3b !important;
}
.aop-staff-process-card-head em.is-issued,
.aop-staff-process-card-head em.is-under_review,
.aop-staff-process-card-head em.is-received,
.aop-staff-process-card-head em.is-scheduled {
  background: #eaf5ff !important;
  border-color: rgba(18, 107, 177, .18) !important;
  color: #126bb1 !important;
}
.aop-staff-process-card-head em.is-supplier_confirmed,
.aop-staff-process-card-head em.is-approved,
.aop-staff-process-card-head em.is-ready_for_payment,
.aop-staff-process-card-head em.is-float_drawdown_created,
.aop-staff-process-card-head em.is-paid,
.aop-staff-process-card-head em.is-linked,
.aop-staff-process-card-head em.is-allocated,
.aop-staff-process-card-head em.is-closed,
.aop-staff-process-card-head em.is-complete,
.aop-staff-process-card-head em.is-completed {
  background: #eafaf2 !important;
  border-color: rgba(15, 159, 110, .22) !important;
  color: #087a55 !important;
}
.aop-staff-process-card-head em.is-partially_received,
.aop-staff-process-card-head em.is-on_account_30_day_account,
.aop-staff-process-card-head em.is-pending_float_drawdown {
  background: #fff6e8 !important;
  border-color: rgba(217, 130, 24, .22) !important;
  color: #a35b0c !important;
}
.aop-staff-process-card-head em.is-cancelled,
.aop-staff-process-card-head em.is-disputed,
.aop-staff-process-card-head em.is-rejected {
  background: #ffe9ed !important;
  border-color: rgba(199, 53, 69, .28) !important;
  color: #b32d3b !important;
}
.aop-staff-process-card-head em.is-not_required {
  background: #eef4f8 !important;
  color: #52667c !important;
}

/* Shipping / Release: give the document chain full width and keep dark panels legible. */
.aop-workspace-active-panel [data-aop-process-panel="docs"] .is-front-processing {
  width: 100%;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-staff-process-grid > * {
  width: 100%;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card {
  color: #fff !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-eyebrow,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card h4,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card p,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card strong {
  color: #fff !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card aside strong {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
  gap: 12px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-closeout {
  grid-column: span 3;
}
@media (max-width: 1200px) {
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack,
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-closeout {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-staff-process-grid,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-staff-process-modal-list,
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hub form popups: persistent action footer, matching the better add-supplier/add-product modal pattern. */
.aop-record-modal .aop-record-modal-body {
  padding-bottom: 112px !important;
}
.aop-record-modal .aop-staff-process-actions {
  position: fixed !important;
  z-index: 80 !important;
  left: max(22px, calc(50% - 640px));
  right: max(22px, calc(50% - 640px));
  bottom: max(20px, calc(4vh + 4px));
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(15, 45, 80, .09) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 42px rgba(7, 21, 47, .15) !important;
  backdrop-filter: blur(10px);
}
.aop-record-modal .aop-staff-process-actions .aop-btn,
.aop-record-modal .aop-staff-process-actions button,
.aop-record-modal .aop-staff-process-actions a {
  min-height: 42px !important;
}
@media (max-width: 760px) {
  .aop-record-modal .aop-staff-process-actions {
    left: 14px;
    right: 14px;
    bottom: 12px;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

/* =========================================================
 * v0.18.1.2 — Hub Workflow Micro-Fix
 * Purpose: fix the three screenshot QA issues without broad design-system churn.
 * ========================================================= */

/* Finance step: stack Supplier Bill and Supplier Payment into separate full-width rows. */
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-staff-process-modal-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: none !important;
  width: 100% !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card {
  display: grid !important;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.8fr) minmax(150px, auto) !important;
  gap: 16px !important;
  align-items: center !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid > div,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-card-head,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy {
  min-width: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid strong,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-card-head strong,
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-card-head small {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy {
  grid-column: 1 / span 2 !important;
  margin: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
}
@media (max-width: 1180px) {
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card {
    grid-template-columns: 1fr !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy,
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-actions {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}
@media (max-width: 760px) {
  .aop-workspace-active-panel [data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Shipping / Release current-action CTA: avoid white-on-white and match the app primary button. */
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn-primary,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn-secondary {
  background: linear-gradient(135deg, #13a9c7 0%, #0992b5 100%) !important;
  border-color: rgba(19, 169, 199, .78) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(9, 146, 181, .22) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn:hover,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn-primary:hover,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card .aop-btn-secondary:hover {
  background: linear-gradient(135deg, #0f9bb8 0%, #087fa0 100%) !important;
  color: #fff !important;
}

/* Add Doc modal confirmation: keep the action in a Hub popup instead of immediate refresh. */
.aop-add-doc-modal-card {
  border-left: 4px solid #13a9c7 !important;
}
.aop-add-doc-modal-card .aop-add-doc-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.aop-add-doc-modal-card .aop-add-doc-context-grid div {
  padding: 14px;
  border: 1px solid rgba(15, 45, 80, .08);
  border-radius: 14px;
  background: #f6fbff;
}
.aop-add-doc-modal-card .aop-add-doc-context-grid span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aop-add-doc-modal-card .aop-add-doc-context-grid strong {
  color: #0b1738;
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .aop-add-doc-modal-card .aop-add-doc-context-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * v0.18.1.3 — Workflow Micro-Fix Follow-up
 * Purpose: fix exact selectors/markup missed in v0.18.1.2 without broad UI churn.
 * ========================================================= */

/* Finance workflow: force bill/payment actions to render as rows, not side-by-side blocks. */
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-staff-process-grid,
.aop-order-workspace-app .aop-finance-action-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}
.aop-order-workspace-app .aop-finance-action-stack > .aop-staff-process-multi-list,
.aop-order-workspace-app .aop-finance-action-stack > .aop-staff-process-modal-list,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-staff-process-grid > .aop-staff-process-multi-list,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-staff-process-grid > .aop-staff-process-modal-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .85fr) minmax(0, 1.7fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 20px !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-staff-process-card-head,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-card-head {
  min-width: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-staff-po-summary-grid,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-staff-po-summary-grid > div,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-po-summary-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card strong,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card strong,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card small,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card small {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-modal-summary-copy,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy {
  grid-column: 1 / 3 !important;
  margin: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-staff-process-actions,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  position: static !important;
}
@media (max-width: 1180px) {
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card {
    grid-template-columns: 1fr !important;
  }
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-modal-summary-copy,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-modal-summary-copy,
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card .aop-staff-process-actions,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card .aop-staff-process-actions {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

/* Shipping current action: strong explicit primary treatment for links, anchors and form buttons. */
.aop-order-workspace-app .aop-shipping-current-action-card aside .aop-btn,
.aop-order-workspace-app .aop-shipping-current-action-card aside a.aop-btn,
.aop-order-workspace-app .aop-shipping-current-action-card aside button.aop-btn,
.aop-order-workspace-app .aop-shipping-current-action-card aside .aop-btn-primary,
.aop-order-workspace-app .aop-shipping-current-action-card aside .aop-btn-secondary {
  background: linear-gradient(135deg, #13a9c7 0%, #0892b4 100%) !important;
  border-color: rgba(19, 169, 199, .8) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(9, 146, 181, .24) !important;
  text-shadow: none !important;
}
.aop-order-workspace-app .aop-shipping-current-action-card aside .aop-btn:hover,
.aop-order-workspace-app .aop-shipping-current-action-card aside a.aop-btn:hover,
.aop-order-workspace-app .aop-shipping-current-action-card aside button.aop-btn:hover {
  background: linear-gradient(135deg, #0f9bb8 0%, #087fa0 100%) !important;
  color: #fff !important;
}

/* v0.20.1 — The Hub Go-Live Clarity Polish
 * Scope: staff Hub clarity only. No workflow, schema, finance, inventory or customer-portal logic changes.
 */
.aop-hub-command-head p {
  max-width: 690px;
}
.aop-hub-board-tabs .aop-hub-board-nav {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.aop-hub-board-nav .aop-detail-tab-button {
  flex: 0 0 auto;
}
.aop-hub-board-nav .aop-detail-tab-button.is-active {
  outline: 1px solid rgba(255,255,255,.18);
}
.aop-hub-board-panel-head > strong {
  box-shadow: inset 0 0 0 1px rgba(29,78,216,.08);
}
.aop-hub-command-metrics .aop-command-metric.is-risk {
  border-color: rgba(199,53,69,.32) !important;
  box-shadow: 0 16px 36px rgba(199,53,69,.095);
}
.aop-hub-command-metrics .aop-command-metric.is-risk strong {
  font-size: 28px;
}
.aop-hub-command-metrics .aop-command-metric.is-ready {
  border-color: rgba(15,159,110,.18) !important;
}
.aop-hub-order-card {
  min-width: 0;
}
.aop-hub-order-card.is-priority-critical {
  border-color: rgba(199,53,69,.40) !important;
  box-shadow: 0 0 0 1px rgba(199,53,69,.10), 0 18px 42px rgba(199,53,69,.10);
}
.aop-hub-order-card.is-priority-critical .aop-hub-order-card-top h4::before {
  content: "Priority";
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(199,53,69,.10);
  color: #a12836;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  vertical-align: middle;
}
.aop-hub-order-facts .is-next-action {
  grid-column: span 2;
  background: linear-gradient(135deg, #ffffff 0%, #eefbff 100%);
  border-color: rgba(22,166,200,.18);
}
.aop-hub-order-facts .is-next-action strong {
  color: #0f2f57;
  font-weight: 850;
}
.aop-hub-order-chips em {
  box-shadow: inset 0 0 0 1px rgba(15,45,80,.035);
}
.aop-hub-order-actions {
  padding-top: 2px;
}
.aop-performance-note {
  margin-top: 12px;
  padding: 9px 12px;
  border-style: dashed;
  opacity: .82;
  box-shadow: none;
}
.aop-performance-note strong {
  font-size: 11px;
}
.aop-performance-note span {
  font-size: 11px;
}
@media (max-width: 900px) {
  .aop-hub-order-facts .is-next-action {
    grid-column: 1 / -1;
  }
}

/* v0.23.2 — The Hub Compact Workstation + Shipping / Handling Polish
   Read-only/CSS-only density pass for laptop workstations and Shipping / Release cards. */
@media (max-width: 1540px) {
  .aop-main {
    padding: 14px 18px 36px !important;
  }
  .aop-content {
    padding-top: 10px !important;
  }
  .aop-topbar {
    min-height: 62px !important;
    height: 62px !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 0 0 22px 22px !important;
  }
  .aop-topbar-left {
    min-width: 138px !important;
  }
  .aop-breadcrumb span {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }
  .aop-breadcrumb strong {
    font-size: 15px !important;
  }
  .aop-command {
    height: 38px !important;
    max-width: 520px !important;
    padding: 0 12px !important;
  }
  .aop-command input {
    font-size: 12px !important;
  }
  .aop-topbar-actions {
    gap: 7px !important;
  }
  .aop-topbar-actions .aop-btn,
  .aop-topbar .aop-btn {
    min-height: 38px !important;
    padding: 9px 14px !important;
    border-radius: 14px !important;
  }
  .aop-bell {
    width: 38px !important;
    height: 38px !important;
  }
  .aop-account-pill {
    padding: 5px 9px 5px 5px !important;
  }
  .aop-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .aop-module-staff-ops .aop-panel.aop-staff-workspace-shell {
    padding: 12px !important;
    border-radius: 22px !important;
  }
  .aop-staff-workspace-shell {
    gap: 10px !important;
  }
  .aop-staff-workspace-topline {
    gap: 8px !important;
  }
  .aop-staff-workspace-topline .aop-btn {
    min-height: 34px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
  }
  .aop-staff-workspace-header {
    padding: 12px 16px !important;
    border-radius: 18px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .aop-staff-workspace-header h2 {
    font-size: clamp(21px, 2vw, 26px) !important;
    line-height: 1.06 !important;
  }
  .aop-staff-workspace-header p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .aop-workspace-command-stack {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .aop-staffops-next-command-inline {
    margin-top: 0 !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    background: rgba(248, 250, 252, .78) !important;
    border: 1px solid rgba(15, 45, 80, .075) !important;
  }
  .aop-staffops-next-command-inline > span {
    font-size: 9px !important;
    letter-spacing: .10em !important;
  }
  .aop-staffops-next-command-inline .aop-btn {
    min-height: 28px !important;
    padding: 6px 10px !important;
  }
  .aop-staff-workspace-progress-row .aop-staffops-progress {
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }
  .aop-staffops-progress-head,
  .aop-staffops-progress small {
    font-size: 11px !important;
  }
  .aop-workspace-blocker-strip {
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }
  .aop-detail-tabs.aop-staff-workspace-tabs {
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .aop-staff-workspace-tabs .aop-detail-tab-nav {
    padding: 6px !important;
    gap: 5px !important;
  }
  .aop-staff-workspace-tabs .aop-detail-tab-button {
    min-height: 35px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }
  .aop-staff-workspace-tabs .aop-detail-tab-panel {
    padding: 12px !important;
  }

  .aop-order-workspace-app {
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  .aop-workspace-process-command {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .aop-workspace-process-command .aop-staffops-next-action-card {
    border-radius: 16px !important;
  }
  .aop-staffops-next-action-main {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .aop-staffops-next-action-main h3 {
    margin: 2px 0 3px !important;
    font-size: clamp(16px, 1.55vw, 19px) !important;
    line-height: 1.1 !important;
  }
  .aop-staffops-next-action-main p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .aop-staffops-next-action-side {
    min-width: 150px !important;
    gap: 6px !important;
  }
  .aop-staffops-next-action-side > span {
    min-height: 24px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
  }
  .aop-staffops-next-action-side .aop-btn {
    min-height: 36px !important;
    padding: 9px 14px !important;
  }
  .aop-workspace-context-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  .aop-workspace-context-actions .aop-btn {
    width: auto !important;
    min-height: 34px !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
  }
  .aop-workspace-stage-tabs {
    gap: 6px !important;
    padding: 5px !important;
    border-radius: 17px !important;
  }
  .aop-workspace-stage-tabs .aop-staffops-process-tab {
    min-height: 48px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    align-items: center !important;
  }
  .aop-workspace-stage-tabs .aop-staffops-process-tab span {
    grid-row: 1 / 3 !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    font-size: 12px !important;
  }
  .aop-workspace-stage-tabs .aop-staffops-process-tab strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .aop-workspace-stage-tabs .aop-staffops-process-tab em {
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }
  .aop-workspace-active-panel .aop-staffops-process-stage {
    border-radius: 18px !important;
  }
  .aop-staffops-process-stage-head {
    padding: 11px 14px !important;
    gap: 10px !important;
  }
  .aop-staffops-process-stage-head b {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .aop-staffops-process-stage-head h3 {
    margin-bottom: 3px !important;
    font-size: 16px !important;
  }
  .aop-staffops-process-stage-head p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .aop-staffops-process-stage-head em {
    min-height: 23px !important;
    padding: 4px 9px !important;
    font-size: 9px !important;
  }
  .aop-staffops-process-stage-body {
    padding: 0 14px 14px !important;
    gap: 10px !important;
  }
  .aop-order-workspace-app .aop-staffops-stage-anchor-note {
    display: none !important;
  }
  .aop-order-workspace-app .aop-staff-order-section {
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .aop-order-workspace-app .aop-detail-section-heading {
    margin-bottom: 8px !important;
    gap: 10px !important;
  }
  .aop-order-workspace-app .aop-detail-section-heading h3 {
    font-size: 15px !important;
  }
  .aop-order-workspace-app .aop-detail-section-heading > span {
    min-height: 22px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }
  .aop-order-workspace-app .aop-staff-order-section.is-front-processing > .aop-muted-copy {
    display: none !important;
  }
  .aop-staff-process-grid {
    gap: 9px !important;
    margin-top: 8px !important;
  }
  .aop-staff-process-card {
    padding: 12px !important;
    border-radius: 15px !important;
  }
  .aop-staff-process-card-head {
    margin-bottom: 9px !important;
    gap: 10px !important;
  }
  .aop-staff-process-card-head strong {
    font-size: 15px !important;
  }
  .aop-staff-process-card p {
    font-size: 12px !important;
    line-height: 1.38 !important;
  }
}

/* Shipping / Release sub-section polish: cleaner cards, compact trackers, and better laptop fit. */
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-guided-flow {
  background: linear-gradient(180deg, rgba(248,252,255,.96), #fff 48%) !important;
  border-color: rgba(15, 45, 80, .08) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-guided-flow > .aop-detail-section-heading {
  margin-bottom: 8px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-guided-note {
  margin: -2px 0 10px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #53647b !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card {
  margin: 10px 0 10px !important;
  padding: 13px 15px !important;
  border-radius: 17px !important;
  gap: 12px !important;
  box-shadow: 0 12px 28px rgba(7,21,47,.10) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card h4 {
  font-size: 17px !important;
  margin: 3px 0 4px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card aside {
  min-width: 170px !important;
  gap: 7px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card aside strong {
  padding: 5px 9px !important;
  font-size: 9px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-chain-panel {
  padding: 10px 11px 8px !important;
  margin: 8px 0 9px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(7,21,47,.035) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-workspace-heading h4 {
  font-size: 13px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-chain-panel .aop-shipping-doc-checklist {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 7px 0 2px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-chain-panel .aop-shipping-doc-checklist span {
  padding: 7px 8px !important;
  border-radius: 12px !important;
  min-height: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-doc-checklist b {
  font-size: 9px !important;
  line-height: 1.15 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-doc-checklist small {
  font-size: 10px !important;
  line-height: 1.15 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-support-drawer {
  margin: 7px 0 9px !important;
  border-radius: 14px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-support-drawer summary {
  padding: 9px 12px !important;
  font-size: 10px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
  gap: 9px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block {
  padding: 11px 12px !important;
  border-radius: 15px !important;
  box-shadow: 0 7px 18px rgba(7,21,47,.04) !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-head {
  margin-bottom: 6px !important;
  gap: 8px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-head b {
  font-size: 13px !important;
  line-height: 1.12 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-head span {
  padding: 4px 8px !important;
  font-size: 8.5px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block > p {
  margin-bottom: 9px !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-doc-complete-summary,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-pack-refs {
  gap: 6px !important;
  margin: 7px 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-doc-complete-summary span,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-pack-refs span {
  padding: 7px 8px !important;
  border-radius: 11px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-doc-complete-summary small,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-pack-refs small {
  font-size: 8px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-doc-complete-summary strong,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-pack-refs strong {
  font-size: 11px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-staff-process-actions {
  gap: 6px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-staff-process-actions .aop-btn {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
}

@media (max-width: 1320px) {
  .aop-topbar-left {
    min-width: 112px !important;
  }
  .aop-command {
    max-width: 420px !important;
  }
  .aop-workspace-process-command {
    grid-template-columns: 1fr !important;
  }
  .aop-workspace-context-actions {
    justify-content: flex-start !important;
  }
  .aop-workspace-stage-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-chain-panel .aop-shipping-doc-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack,
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-closeout {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 1020px) {
  .aop-workspace-stage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .aop-staff-workspace-header {
    align-items: flex-start !important;
  }
  .aop-workspace-command-stack {
    justify-content: flex-start !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card,
  .aop-staffops-next-action-main {
    grid-template-columns: 1fr !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-shipping-current-action-card aside,
  .aop-staffops-next-action-side {
    align-items: flex-start !important;
    justify-items: start !important;
    min-width: 0 !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v0.23.2.1 — Supplier PO card simplification: one-line info, actions below/right aligned. */
.aop-workspace-active-panel [data-aop-process-panel="po"] .aop-po-workbench-card,
.aop-order-workspace-app [data-aop-process-panel="po"] .aop-po-workbench-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}
.aop-po-workbench-info-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) auto minmax(96px,.62fr) minmax(92px,.55fr) minmax(96px,.62fr) minmax(130px,.7fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}
.aop-po-workbench-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-right: 14px;
  border-right: 1px solid rgba(15,45,80,.08);
}
.aop-po-workbench-identity span,
.aop-po-workbench-metric span {
  display: block;
  color: #087fa3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.15;
  text-transform: uppercase;
}
.aop-po-workbench-identity strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
  word-break: normal;
}
.aop-po-workbench-identity small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.aop-po-workbench-card > em,
.aop-po-workbench-info-row > em {
  justify-self: start;
  white-space: nowrap;
}
.aop-po-workbench-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #dbe7f0;
  border-radius: 13px;
  background: #f8fcff;
  min-height: 54px;
  align-content: center;
}
.aop-po-workbench-metric strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.15;
  word-break: normal;
}
.aop-po-workbench-metric.is-tax-treatment strong {
  font-size: 13px;
}
.aop-po-workbench-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(15,45,80,.08);
  padding-top: 10px;
}
.aop-po-workbench-action-row .aop-modal-summary-copy {
  margin: 0 !important;
  color: #53647b;
  font-size: 12px;
  line-height: 1.35;
}
.aop-po-workbench-action-row .aop-staff-process-actions {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 1380px) {
  .aop-po-workbench-info-row {
    grid-template-columns: minmax(190px,1fr) auto repeat(3,minmax(88px,.5fr)) minmax(110px,.65fr);
    gap: 8px;
  }
  .aop-po-workbench-metric { padding: 7px 9px; }
  .aop-po-workbench-metric strong { font-size: 14px; }
}
@media (max-width: 1120px) {
  .aop-po-workbench-info-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .aop-po-workbench-metric {
    grid-column: span 1;
  }
  .aop-po-workbench-action-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .aop-po-workbench-action-row .aop-staff-process-actions {
    width: 100%;
  }
}


/* =========================================================
 * v0.23.2.2 — Bill Payment Card + Shipping Release Layout Polish
 * Purpose: laptop-friendly presentation only. No workflow, finance, float or document logic changes.
 * ========================================================= */
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  align-items: stretch !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 0 6px !important;
  min-width: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head strong,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head strong,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head strong,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head strong {
  font-size: 15px !important;
  line-height: 1.18 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head small,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head small,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-card-head small,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-card-head small {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.05fr) minmax(170px, 1fr) minmax(135px, .65fr) minmax(118px, .55fr) !important;
  gap: 9px !important;
  margin: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid > div,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid > div,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid > div,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid > div {
  padding: 11px 13px !important;
  border-radius: 13px !important;
  min-height: 0 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid span,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid span,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid span,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid span {
  font-size: 10px !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid strong,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid strong,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid strong,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-modal-summary-copy,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-modal-summary-copy,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-modal-summary-copy,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-modal-summary-copy {
  grid-column: auto !important;
  margin: 2px 0 0 !important;
  font-size: 12px !important;
}
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-actions,
.aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-actions,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-process-actions,
.aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-process-actions {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: auto !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  position: static !important;
}
.aop-order-workspace-app .aop-staffops-finance-guard {
  padding: 14px 16px !important;
  border-radius: 17px !important;
}
.aop-order-workspace-app .aop-staffops-finance-guard .aop-detail-section-heading {
  margin-bottom: 9px !important;
}
.aop-order-workspace-app .aop-staffops-finance-grid {
  gap: 9px !important;
}
.aop-order-workspace-app .aop-staffops-finance-grid > div {
  padding: 11px 13px !important;
  border-radius: 13px !important;
}
.aop-order-workspace-app .aop-staffops-finance-guard p {
  margin: 9px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.3fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-guided-doc-head {
  margin: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-guided-doc-wait,
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-shipping-pack-refs {
  margin: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-staff-process-actions {
  justify-content: flex-end !important;
  margin: 0 !important;
}
.aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-closeout {
  grid-column: 1 / -1 !important;
}
@media (max-width: 1320px) {
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack {
    grid-template-columns: 1fr auto !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-guided-doc-wait,
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack .aop-shipping-pack-refs {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 1020px) {
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-grid.aop-shipping-workspace-grid {
    grid-template-columns: 1fr !important;
  }
  .aop-workspace-active-panel [data-aop-process-panel="docs"] .aop-guided-doc-block.is-pack {
    grid-template-columns: 1fr !important;
  }
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-finance-action-stack .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-bill-card .aop-staff-po-summary-grid,
  .aop-order-workspace-app .aop-staffops-process-panel[data-aop-process-panel="finance"] .aop-modal-summary-card.aop-supplier-payment-card .aop-staff-po-summary-grid {
    grid-template-columns: 1fr !important;
  }
}