/* PO polish: H&M construction material UI layer. */

body:not(.appLocked) #poPage {
  --po-amber: #F5A623;
  --po-amber-dark: #9b6400;
  --po-amber-soft: rgba(245, 166, 35, 0.16);
  --po-graphite: #151a20;
  --po-panel: #202832;
  --po-panel-2: #27313c;
  --po-slate: #303b48;
  --po-line: rgba(255, 255, 255, 0.13);
  --po-text: #f5f7f9;
  --po-muted: #aeb8c3;
  --po-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  --po-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
  --po-control-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  --po-control-shadow-lift: 0 12px 26px rgba(0, 0, 0, 0.28);
  --po-rim: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  --po-inset: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body:not(.appLocked) #poPage .poDashboard {
  background:
    radial-gradient(circle at 8% 0, rgba(245, 166, 35, 0.14), transparent 26rem),
    linear-gradient(180deg, #252d37 0, var(--po-graphite) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    var(--po-rim),
    var(--po-shadow);
  color: var(--po-text);
  overflow: hidden;
}

body:not(.appLocked) #poPage .poDashboard .moduleHeader {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    var(--po-panel);
  border-color: var(--po-line);
  border-radius: 8px;
  box-shadow:
    var(--po-rim),
    var(--po-shadow-soft);
}

body:not(.appLocked) #poPage .poDashboard .moduleHeader h2,
body:not(.appLocked) #poPage .poDashboard .moduleHeader h3,
body:not(.appLocked) #poPage .poDashboard .primaryModuleAction strong,
body:not(.appLocked) #poPage .poDashboard .jobLinkCard strong,
body:not(.appLocked) #poPage .poDashboard .summaryCard strong,
body:not(.appLocked) #poPage .poDashboard .receiptListRow strong,
body:not(.appLocked) #poPage .poQuickBrief strong {
  color: var(--po-text);
}

body:not(.appLocked) #poPage .poDashboard .moduleHeader p,
body:not(.appLocked) #poPage .poDashboard .primaryModuleAction small,
body:not(.appLocked) #poPage .poDashboard .jobLinkCard p,
body:not(.appLocked) #poPage .poDashboard .receiptListRow em,
body:not(.appLocked) #poPage .poDashboard .receiptListRow span,
body:not(.appLocked) #poPage .poDashboard .summaryCard dt,
body:not(.appLocked) #poPage .poDashboard .summaryCard em,
body:not(.appLocked) #poPage .poDashboard .poDirectoryDetails small,
body:not(.appLocked) #poPage .poQuickBrief em,
body:not(.appLocked) #poPage .poDashboard .moduleEyebrow {
  color: var(--po-muted);
}

body:not(.appLocked) #poPage .moduleBody {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 12rem),
    rgba(16, 20, 25, 0.72);
  gap: 12px;
  padding: 12px;
}

body:not(.appLocked) #poPage .moduleStatus,
body:not(.appLocked) #poPage .poStatusChip.action,
body:not(.appLocked) #poPage .statusPill.ready,
body:not(.appLocked) #poPage .statusPill.approved {
  background: var(--po-amber);
  border-color: rgba(255, 202, 104, 0.72);
  color: #1f1708;
}

body:not(.appLocked) #poPage .poActionGrid,
body:not(.appLocked) #poPage .poWorkflowStrip,
body:not(.appLocked) #poPage .poQuickBrief,
body:not(.appLocked) #poPage .poSummaryGrid {
  gap: 12px;
}

body:not(.appLocked) #poPage .primaryModuleAction,
body:not(.appLocked) #poPage .jobLinkCard,
body:not(.appLocked) #poPage .poWorkflowStrip,
body:not(.appLocked) #poPage .poWorkflowStrip span,
body:not(.appLocked) #poPage .poQuickBrief > div,
body:not(.appLocked) #poPage .summaryCard,
body:not(.appLocked) #poPage .receiptList,
body:not(.appLocked) #poPage .poQueueList > *,
body:not(.appLocked) #poPage .sourceExampleBar button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    var(--po-panel);
  border: 1px solid var(--po-line);
  border-radius: 8px;
  box-shadow:
    var(--po-rim),
    var(--po-control-shadow);
  color: var(--po-text);
}

body:not(.appLocked) #poPage .primaryModuleAction,
body:not(.appLocked) #poPage .jobLinkCard,
body:not(.appLocked) #poPage .poQuickBrief > div,
body:not(.appLocked) #poPage .summaryCard,
body:not(.appLocked) #poPage .receiptListRow,
body:not(.appLocked) #poPage .poQueueList > *,
body:not(.appLocked) #poPage .sourcePoButton,
body:not(.appLocked) #poPage .moduleSummaryHeader button,
body:not(.appLocked) #poPage .sourceExampleBar button {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

body:not(.appLocked) #poPage .primaryModuleAction > span:last-child,
body:not(.appLocked) #poPage .sourcePoText,
body:not(.appLocked) #poPage .poDirectoryDetails,
body:not(.appLocked) #poPage .poStatusChips {
  min-width: 0;
}

body:not(.appLocked) #poPage .primaryModuleAction strong,
body:not(.appLocked) #poPage .primaryModuleAction small,
body:not(.appLocked) #poPage .jobLinkCard strong,
body:not(.appLocked) #poPage .jobLinkCard p,
body:not(.appLocked) #poPage .summaryCard strong,
body:not(.appLocked) #poPage .summaryCard em,
body:not(.appLocked) #poPage .receiptListRow strong,
body:not(.appLocked) #poPage .receiptListRow em {
  overflow-wrap: anywhere;
}

body:not(.appLocked) #poPage .primaryModuleAction,
body:not(.appLocked) #poPage .moduleSummaryHeader button,
body:not(.appLocked) #poPage .sourceExampleBar button,
body:not(.appLocked) #poPage .sourcePoButton {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    var(--po-rim),
    var(--po-control-shadow);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

body:not(.appLocked) #poPage .primaryModuleAction {
  border-left: 4px solid var(--po-amber);
  min-height: 80px;
  padding: 12px;
}

body:not(.appLocked) #poPage .primaryModuleAction:not(:disabled):hover,
body:not(.appLocked) #poPage .primaryModuleAction:not(:disabled):focus-visible,
body:not(.appLocked) #poPage .moduleSummaryHeader button:not(:disabled):hover,
body:not(.appLocked) #poPage .moduleSummaryHeader button:not(:disabled):focus-visible,
body:not(.appLocked) #poPage .sourcePoButton:hover,
body:not(.appLocked) #poPage .sourcePoButton:focus-visible,
body:not(.appLocked) #poPage .sourceExampleBar button:hover,
body:not(.appLocked) #poPage .sourceExampleBar button:focus-visible {
  background:
    linear-gradient(180deg, rgba(245, 166, 35, 0.22), rgba(255, 255, 255, 0.045)),
    var(--po-panel-2);
  border-color: rgba(245, 166, 35, 0.74);
  box-shadow:
    var(--po-rim),
    var(--po-control-shadow-lift);
  outline: none;
  transform: translateY(-1px);
}

body:not(.appLocked) #poPage .moduleIcon,
body:not(.appLocked) #poPage .poWorkflowStrip strong,
body:not(.appLocked) #poPage .jobBadge {
  background: var(--po-amber);
  border-color: rgba(255, 218, 146, 0.72);
  color: #1f1708;
  box-shadow: var(--po-inset);
}

body:not(.appLocked) #poPage .poQueuePanel {
  min-height: 80px;
  padding: 12px;
}

body:not(.appLocked) #poPage .poQueueList {
  gap: 8px;
  max-height: 214px;
  padding-right: 2px;
}

body:not(.appLocked) #poPage .poQueueList:empty::before,
body:not(.appLocked) #poPage .empty,
body:not(.appLocked) #poPage .smallEmpty {
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(245, 166, 35, 0.36);
  border-radius: 8px;
  color: var(--po-muted);
}

body:not(.appLocked) #poPage .sourcePoButton,
body:not(.appLocked) #poPage .poQueueList > .sourcePoButton {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    var(--po-panel);
  border-color: var(--po-line);
  color: var(--po-text);
  min-height: 58px;
  padding: 10px 12px;
}

body:not(.appLocked) #poPage .sourcePoNumber,
body:not(.appLocked) #poPage .sourceExampleBar span {
  color: var(--po-amber);
}

body:not(.appLocked) #poPage .statusPill.hold,
body:not(.appLocked) #poPage .statusPill.missing,
body:not(.appLocked) #poPage .poStatusChip.monthly,
body:not(.appLocked) #poPage .poStatusChip.hold,
body:not(.appLocked) #poPage .poStatusChip.missing {
  background: rgba(245, 166, 35, 0.14);
  border-color: rgba(245, 166, 35, 0.4);
  color: #ffd28a;
}

body:not(.appLocked) #poPage .sourcePoText strong,
body:not(.appLocked) #poPage .sourceExampleBar strong {
  color: var(--po-text);
}

body:not(.appLocked) #poPage .poWorkflowStrip {
  background:
    linear-gradient(90deg, rgba(245, 166, 35, 0.13), rgba(255, 255, 255, 0.045)),
    var(--po-panel);
  padding: 10px;
}

body:not(.appLocked) #poPage .poWorkflowStep.is-active {
  border-color: rgba(245, 166, 35, 0.76);
  box-shadow:
    inset 4px 0 0 var(--po-amber),
    var(--po-inset);
  color: var(--po-text);
}

body:not(.appLocked) #poPage .poWorkflowStep.is-complete {
  background:
    linear-gradient(180deg, rgba(245, 166, 35, 0.16), rgba(255, 255, 255, 0.04)),
    var(--po-panel-2);
  border-color: rgba(245, 166, 35, 0.52);
  color: var(--po-text);
}

body:not(.appLocked) #poPage .poWorkflowStep.is-upcoming {
  opacity: 1;
}

body:not(.appLocked) #poPage .poQuickBrief > div {
  border-left: 4px solid var(--po-amber);
  min-height: 88px;
  padding: 12px 14px;
}

body:not(.appLocked) #poPage .moduleSummaryHeader {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    var(--po-panel);
  border: 1px solid var(--po-line);
  border-radius: 8px;
  box-shadow:
    var(--po-rim),
    var(--po-control-shadow);
  min-height: 52px;
  padding: 10px 12px;
}

body:not(.appLocked) #poPage .moduleSummaryHeader h3 {
  color: var(--po-text);
}

body:not(.appLocked) #poPage .moduleSummaryHeader button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    var(--po-slate);
  border: 1px solid var(--po-line);
  border-radius: 8px;
  color: var(--po-text);
  min-height: 36px;
}

body:not(.appLocked) #poPage .moduleSummaryHeader button:disabled {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(174, 184, 195, 0.68);
}

body:not(.appLocked) #poPage .summaryCard {
  gap: 10px;
  padding: 12px;
}

body:not(.appLocked) #poPage .summaryCard dl {
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.appLocked) #poPage .summaryCard dl div {
  background: rgba(255, 255, 255, 0.052);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  min-height: 42px;
  padding: 7px 8px;
}

body:not(.appLocked) #poPage .summaryCard dd {
  color: var(--po-text);
}

body:not(.appLocked) #poPage .statusPill {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

body:not(.appLocked) #poPage .statusPill.draft,
body:not(.appLocked) #poPage .poStatusChip.draft,
body:not(.appLocked) #poPage .poStatusChip.count {
  background: rgba(255, 255, 255, 0.075);
  color: var(--po-muted);
}

body:not(.appLocked) #poPage .statusPill.review,
body:not(.appLocked) #poPage .poStatusChip.review,
body:not(.appLocked) #poPage .poStatusChip.source {
  background: rgba(255, 94, 91, 0.16);
  border-color: rgba(255, 121, 118, 0.34);
  color: #ffb8b5;
}

body:not(.appLocked) #poPage .poStatusChip {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--po-muted);
}

body:not(.appLocked) #poPage .poStatusChip.active,
body:not(.appLocked) #poPage .poStatusChip.ready,
body:not(.appLocked) #poPage .poStatusChip.approved {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.42);
  color: #ffd28a;
}

body:not(.appLocked) #poPage .receiptList {
  gap: 0;
  max-height: min(44vh, 430px);
  overflow: auto;
}

body:not(.appLocked) #poPage .receiptDirectory::before {
  background: rgba(255, 255, 255, 0.045);
  border-bottom-color: var(--po-line);
  color: var(--po-muted);
  padding: 10px 12px;
}

body:not(.appLocked) #poPage .receiptListRow {
  background: rgba(255, 255, 255, 0.045);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
}

body:not(.appLocked) #poPage .receiptListRow[data-receipt-url] {
  box-shadow: inset 3px 0 0 rgba(245, 166, 35, 0.68);
  padding-right: 56px;
}

body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]::after {
  color: #ffd28a;
  right: 12px;
}

body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]:hover,
body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]:focus-visible,
body:not(.appLocked) #poPage .summaryCard[data-receipt-url]:hover,
body:not(.appLocked) #poPage .summaryCard[data-receipt-url]:focus-visible {
  background:
    linear-gradient(180deg, rgba(245, 166, 35, 0.17), rgba(255, 255, 255, 0.05)),
    var(--po-panel-2);
  box-shadow: inset 4px 0 0 var(--po-amber);
  outline: none;
}

body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]:hover strong,
body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]:focus-visible strong {
  color: #fff;
  text-decoration-color: var(--po-amber);
}

body:not(.appLocked) #poPage .poDashboard .receiptDirectoryRow {
  align-items: center;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr) minmax(92px, auto);
  min-height: 58px;
}

body:not(.appLocked) #poPage .poDashboard .receiptDirectoryRow .poStatusChips {
  grid-column: auto;
  justify-content: flex-end;
}

body:not(.appLocked) #poPage .sourceReceiptRow,
body:not(.appLocked) #poPage .sourcePoCard {
  border-left-color: #ff7770;
}

body:not(.appLocked) #poPage .sourceReceiptRow strong::after {
  color: #ffb8b5;
}

@media (max-width: 1180px) {
  body:not(.appLocked) #poPage .poDashboard .moduleBody {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.appLocked) #poPage .poDashboard .receiptList,
  body:not(.appLocked) #poPage .poDashboard .moduleSummaryHeader,
  body:not(.appLocked) #poPage .poDashboard .poSummaryGrid {
    grid-column: auto;
    grid-row: auto;
  }

  body:not(.appLocked) #poPage .receiptList {
    max-height: 360px;
  }
}

@media (max-width: 860px) {
  body:not(.appLocked) #poPage .poActionGrid,
  body:not(.appLocked) #poPage .poWorkflowStrip,
  body:not(.appLocked) #poPage .poQuickBrief {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.appLocked) #poPage .poDashboard .moduleHeader,
  body:not(.appLocked) #poPage .moduleBody {
    padding: 10px;
  }

  body:not(.appLocked) #poPage .summaryCard dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body:not(.appLocked) #poPage .poDashboard {
    border-radius: 0;
  }

  body:not(.appLocked) #poPage .poDashboard .moduleHeader,
  body:not(.appLocked) #poPage .moduleSummaryHeader {
    align-items: start;
    display: grid;
    gap: 8px;
  }

  body:not(.appLocked) #poPage .primaryModuleAction {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
  }

  body:not(.appLocked) #poPage .sourcePoButton,
  body:not(.appLocked) #poPage .poQueueList > .sourcePoButton,
  body:not(.appLocked) #poPage .poDashboard .poQueueCard,
  body:not(.appLocked) #poPage .poDashboard .receiptDirectoryRow {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body:not(.appLocked) #poPage .poDashboard .receiptDirectoryRow .poStatusChips,
  body:not(.appLocked) #poPage .poDashboard .poQueueCard .poStatusChips,
  body:not(.appLocked) #poPage .sourcePoButton .poStatusChips {
    justify-content: flex-start;
  }

  body:not(.appLocked) #poPage .summaryCard dl {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.appLocked) #poPage .receiptListRow[data-receipt-url] {
    padding-right: 12px;
  }

  body:not(.appLocked) #poPage .receiptListRow[data-receipt-url]::after {
    position: static;
    transform: none;
  }
}