/* =========================================================
   ROUTIQ RECEIVING CORE
   FILE: cores/receiving/receiving.css
   STANDARD: Purchasing Core Layout
   SIGNATURE: Receiving Green
========================================================= */

/* =========================================================
   1. RECEIVING DESIGN TOKENS
========================================================= */

:root {
  --receiving-bg: #f0f2ef;

  --receiving-surface: #ffffff;
  --receiving-surface-soft: #f7faf7;
  --receiving-surface-muted: #edf3ef;

  --receiving-border: #d9dfd9;
  --receiving-border-strong: #c8d0c9;

  --receiving-text: #202421;
  --receiving-text-secondary: #687069;
  --receiving-text-muted: #909791;

  --receiving-primary: #3f8b61;
  --receiving-primary-dark: #2f6d4a;
  --receiving-primary-soft: #e7f1eb;

  --receiving-success: #3f8b61;
  --receiving-success-soft: #e7f1eb;

  --receiving-warning: #a4772f;
  --receiving-warning-soft: #f7efdf;

  --receiving-danger: #a64d4d;
  --receiving-danger-soft: #f8eaea;

  --receiving-shadow:
    0 18px 45px rgba(38, 64, 48, 0.08);

  --receiving-shadow-soft:
    0 10px 28px rgba(38, 64, 48, 0.06);

  --receiving-radius-large: 18px;
  --receiving-radius-medium: 12px;
  --receiving-radius-small: 8px;
}

/* =========================================================
   2. BASIC RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   3. RECEIVING HEADER
========================================================= */

.receiving-header {
  background:
    linear-gradient(
      110deg,
      #203a2b 0%,
      #294b37 48%,
      #1d3427 100%
    );

  border-bottom-color:
    rgba(88, 154, 109, 0.45);

  box-shadow:
    0 8px 26px rgba(22, 47, 31, 0.22),
    inset 0 -1px 0 rgba(120, 177, 138, 0.16);
}

.receiving-header .header-divider {
  background:
    rgba(126, 181, 143, 0.38);
}

.receiving-header .page-title-block h1,
.receiving-header .header-date,
.receiving-header .header-time,
.receiving-header .user-info strong {
  color: #f1f6f2;
}

.receiving-header .page-title-block p,
.receiving-header .user-info p {
  color:
    rgba(241, 246, 242, 0.65);
}

.receiving-header .header-svg-icon,
.receiving-header .user-avatar svg,
.receiving-header .chevron-svg {
  color: #79b98c;
  stroke: currentColor;
}

.receiving-header .user-avatar {
  color: #79b98c;

  background:
    rgba(88, 154, 109, 0.12);

  border-color:
    rgba(88, 154, 109, 0.28);
}

.receiving-header .theme-toggle {
  background:
    rgba(15, 32, 22, 0.34);

  border-color:
    rgba(106, 169, 125, 0.34);
}

.receiving-header .toggle-knob {
  background: #62a878;

  box-shadow:
    0 3px 8px rgba(15, 31, 21, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.receiving-header .toggle-sun,
.receiving-header .toggle-moon {
  color: #acd4b8;
  stroke: currentColor;
}

.receiving-header .user-block:hover {
  background:
    rgba(106, 169, 125, 0.09);
}

.receiving-header .theme-toggle:hover {
  border-color:
    rgba(126, 188, 145, 0.58);
}

/* =========================================================
   DOCK RECEIVING WORKSPACE PANEL
========================================================= */

:root {
  --dock-panel-width: min(430px, 36vw);
  --dock-panel-bg: #111613;
  --dock-panel-surface: #1b231e;
  --dock-panel-border: rgba(119, 184, 139, 0.28);
  --dock-panel-text: #f1f6f2;
  --dock-panel-green: #62a878;
}

.dock-workspace-panel {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--dock-panel-width);
  min-width: 360px;
  color: var(--dock-panel-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 157, 108, 0.15), transparent 32%),
    var(--dock-panel-bg);
  border-left: 1px solid var(--dock-panel-border);
  box-shadow: -18px 0 48px rgba(8, 13, 9, 0.3);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 360ms step-end;
}

body.dock-workspace-open .dock-workspace-panel {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms step-start;
}

.dock-workspace-panel__inner {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100%;
}

.dock-workspace-panel__header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(12, 17, 14, 0.96);
  border-bottom: 1px solid var(--dock-panel-border);
}

.dock-workspace-panel__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.dock-workspace-panel__symbol {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  background: #24382a;
  border: 1px solid rgba(126, 190, 145, 0.58);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(63, 139, 97, 0.2);
}

.dock-workspace-panel__symbol img,
.dock-message__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dock-workspace-panel__identity span {
  display: block;
  margin-bottom: 3px;
  color: var(--dock-panel-green);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dock-workspace-panel__identity h2 {
  margin: 0;
  color: var(--dock-panel-text);
  font-size: 0.96rem;
  font-weight: 700;
}

.dock-workspace-panel__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.dock-workspace-panel__new {
  min-height: 34px;
  padding: 0 10px;
  color: rgba(241, 246, 242, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 750;
}

.dock-workspace-panel__new span {
  margin-right: 3px;
  color: var(--dock-panel-green);
  font-size: 0.95rem;
  line-height: 1;
}

.dock-workspace-panel__new:hover {
  color: var(--dock-panel-text);
  background: rgba(63, 139, 97, 0.14);
  border-color: rgba(126, 190, 145, 0.5);
}

.dock-workspace-panel__close {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  color: rgba(241, 246, 242, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.dock-workspace-panel__close:hover {
  color: var(--dock-panel-text);
  background: rgba(63, 139, 97, 0.14);
  border-color: rgba(126, 190, 145, 0.5);
}

.dock-workspace-panel__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.dock-workspace-hero {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  background: #101711;
  border-bottom: 1px solid var(--dock-panel-border);
}

.dock-workspace-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(8, 13, 9, 0.92) 0%,
    rgba(8, 13, 9, 0.2) 58%,
    rgba(8, 13, 9, 0.04) 100%
  );
}

.dock-workspace-hero__image {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  object-position: center;
}

.dock-workspace-hero__overlay {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 15px;
  left: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dock-workspace-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: rgba(241, 246, 242, 0.76);
  font-size: 0.67rem;
  font-weight: 650;
}

.dock-workspace-hero__status i {
  width: 7px;
  height: 7px;
  background: #70c88c;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(112, 200, 140, 0.12);
}

.dock-workspace-hero__overlay h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 750;
}

.dock-workspace-hero__overlay p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
}

.dock-workspace-hero__icon {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid rgba(126, 190, 145, 0.58);
  border-radius: 11px;
}

.dock-conversation {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  scrollbar-color: rgba(98, 168, 120, 0.38) transparent;
}

.dock-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.dock-message__avatar {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  background: #294531;
  border: 1px solid rgba(126, 190, 145, 0.42);
  border-radius: 9px;
}

.dock-message__content {
  max-width: 82%;
  padding: 11px 13px;
  background: var(--dock-panel-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px 14px 14px 14px;
}

.dock-message__content span {
  display: block;
  margin-bottom: 5px;
  color: var(--dock-panel-green);
  font-size: 0.64rem;
  font-weight: 750;
}

.dock-message__content p {
  margin: 0;
  color: rgba(241, 246, 242, 0.88);
  font-size: 0.76rem;
  line-height: 1.55;
}

.dock-message--user {
  justify-content: flex-end;
}

.dock-message--user .dock-message__avatar {
  order: 2;
  background: #304437;
  border-color: rgba(180, 211, 187, 0.34);
}

.dock-message--user .dock-message__content {
  max-width: 84%;
  background: rgba(91, 157, 109, 0.15);
  border-color: rgba(105, 178, 124, 0.3);
  border-radius: 14px 4px 14px 14px;
}

.dock-message--user .dock-message__content span {
  color: rgba(241, 246, 242, 0.64);
  text-align: right;
}

.dock-message--status .dock-message__content {
  border-style: dashed;
}

.dock-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 9px;
  padding: 14px 16px 16px;
  background: rgba(12, 17, 14, 0.97);
  border-top: 1px solid var(--dock-panel-border);
}

.dock-composer__field {
  display: block;
  min-width: 0;
}

.dock-composer textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 13px;
  resize: none;
  color: var(--dock-panel-text);
  outline: none;
  background: #1b271e;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.dock-composer textarea::placeholder {
  color: rgba(241, 246, 242, 0.42);
}

.dock-composer textarea:focus {
  border-color: rgba(98, 168, 120, 0.55);
  box-shadow: 0 0 0 3px rgba(98, 168, 120, 0.12);
}

.dock-composer__send {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  color: #102014;
  background: linear-gradient(145deg, #91d09e, var(--dock-panel-green));
  border: 1px solid rgba(174, 220, 181, 0.68);
  border-radius: 11px;
}

.dock-composer__send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.dock-composer__send:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dock-composer__status {
  min-height: 16px;
  margin: 0;
  padding: 0 16px 12px;
  color: rgba(184, 220, 190, 0.8);
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  :root {
    --dock-panel-width: min(410px, 44vw);
  }
}

@media (max-width: 820px) {
  :root {
    --dock-panel-width: 100vw;
  }

  .dock-workspace-panel {
    min-width: 0;
  }

}

/* ---------------------------------------------------------
   Header center slot
--------------------------------------------------------- */

.receiving-header .receiving-ai-slot {
  display: flex;

  min-width: 310px;
  min-height: 70px;

  align-items: center;
  justify-content: center;

  gap: 18px;

  overflow: visible;

  color: inherit;
}

.receiving-header
.receiving-ai-slot
.feed-track[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   Dock assistant labels
--------------------------------------------------------- */

.dock-agent-label {
  display: inline-flex;

  align-items: center;

  line-height: 1;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}

.dock-agent-label--role {
  color:
    rgba(241, 246, 242, 0.62);

  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.dock-agent-label--action {
  color: #83c99a;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

/* ---------------------------------------------------------
   Dock button body
--------------------------------------------------------- */

.dock-agent-button {
  position: relative;

  display: grid;

  width: 68px;
  height: 68px;

  place-items: center;

  padding: 0;

  overflow: hidden;

  appearance: none;
  outline: none;

  background:
    linear-gradient(
      145deg,
      rgba(20, 27, 22, 0.99),
      rgba(7, 11, 8, 0.99)
    );

  border:
    1px solid
    rgba(99, 184, 126, 0.72);

  border-radius: 18px;

  box-shadow:
    0 7px 18px rgba(5, 12, 8, 0.38),
    0 0 0 rgba(75, 171, 105, 0),
    inset 0 1px 0 rgba(189, 235, 202, 0.12);

  cursor: pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

/* =========================================================
   5. PAGE FOUNDATION
========================================================= */

.receiving-page {
  min-height:
    calc(100vh - 72px);

  padding:
    26px
    clamp(24px, 3.2vw, 58px)
    54px;

  color:
    var(--receiving-text);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(63, 139, 97, 0.11),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(105, 157, 122, 0.055),
      transparent 28%
    ),
    var(--receiving-bg);
}

/* =========================================================
   6. COMPACT INTRODUCTION
========================================================= */

.receiving-heading {
  display: flex;
  max-width: 1680px;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin:
    0 auto 18px;
}

.receiving-heading__content {
  min-width: 0;
}

.receiving-heading__content p {
  margin: 0;

  color:
    var(--receiving-text-secondary);

  font-size: 0.95rem;
  font-weight: 560;
  line-height: 1.5;
}

.receiving-heading__status {
  display: inline-flex;

  align-items: center;
  gap: 9px;

  padding:
    10px 14px;

  color:
    var(--receiving-success);

  background:
    rgba(255, 255, 255, 0.72);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.system-status-dot {
  width: 8px;
  height: 8px;

  background:
    var(--receiving-success);

  border-radius: 50%;

  box-shadow:
    0 0 0 4px
    rgba(63, 139, 97, 0.12);
}

/* =========================================================
   7. SHARED TYPOGRAPHY
========================================================= */

.section-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    var(--receiving-primary);

  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.15em;
}

.section-heading h2,
.processing-panel__header h2,
.review-panel__header h2,
.records-card__header h2 {
  margin: 0;

  color:
    var(--receiving-text);

  font-size: 1.05rem;
  font-weight: 680;
  letter-spacing: -0.018em;
}

.section-state,
.summary-date {
  color:
    var(--receiving-text-muted);

  font-size: 0.73rem;
  font-weight: 650;
}

/* =========================================================
   8. INTAKE LAYOUT
========================================================= */

.intake-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(300px, 0.7fr);

  gap: 22px;

  max-width: 1680px;

  margin:
    0 auto;
}

.intake-card,
.processing-panel,
.review-panel,
.records-card {
  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid
    var(--receiving-border);

  border-radius:
    var(--receiving-radius-large);

  box-shadow:
    var(--receiving-shadow);
}

.intake-card {
  min-width: 0;
  padding: 22px;
}

.section-heading,
.processing-panel__header,
.review-panel__header,
.records-card__header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.section-heading {
  margin-bottom: 18px;
}

/* =========================================================
   9. DOCUMENT DROP ZONE
========================================================= */

.document-drop-zone {
  display: flex;

  min-height: 286px;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding: 34px;

  text-align: center;
  outline: none;

  background:
    linear-gradient(
      145deg,
      rgba(248, 251, 249, 0.95),
      rgba(238, 245, 240, 0.8)
    );

  border:
    1.5px dashed #a9beaf;

  border-radius: 14px;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.document-drop-zone:hover,
.document-drop-zone:focus-visible,
.document-drop-zone.is-dragging {
  background:
    var(--receiving-primary-soft);

  border-color:
    var(--receiving-primary);

  box-shadow:
    inset 0 0 0 1px
    rgba(63, 139, 97, 0.09),
    0 14px 30px
    rgba(46, 101, 70, 0.09);

  transform:
    translateY(-2px);
}

.drop-zone-icon {
  display: grid;

  width: 56px;
  height: 56px;

  place-items: center;

  margin-bottom: 16px;

  color:
    var(--receiving-primary);

  background: #ffffff;

  border:
    1px solid #cddbd1;

  border-radius: 15px;

  box-shadow:
    0 10px 24px
    rgba(42, 67, 52, 0.08);
}

.drop-zone-icon svg {
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-drop-zone h3 {
  margin:
    0 0 7px;

  color:
    var(--receiving-text);

  font-size: 1.05rem;
  font-weight: 680;
}

.document-drop-zone p {
  margin:
    0 0 19px;

  color:
    var(--receiving-text-secondary);

  font-size: 0.84rem;
}

.browse-button {
  min-width: 145px;

  padding:
    10px 18px;

  color: #ffffff;

  background:
    var(--receiving-primary);

  border:
    1px solid
    var(--receiving-primary);

  border-radius: 8px;

  font-size: 0.81rem;
  font-weight: 650;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.browse-button:hover {
  background:
    var(--receiving-primary-dark);

  border-color:
    var(--receiving-primary-dark);

  transform:
    translateY(-1px);
}

.supported-file-types,
.document-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.supported-file-types {
  justify-content: center;
  margin-top: 18px;
}

.supported-file-types span,
.document-type-list span {
  padding:
    5px 8px;

  color:
    var(--receiving-text-muted);

  background:
    rgba(255, 255, 255, 0.8);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 5px;

  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.document-types {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 16px;

  padding:
    15px 2px 0;
}

.document-type-label {
  color:
    var(--receiving-text-muted);

  font-size: 0.72rem;
  font-weight: 650;
}

.document-type-list {
  justify-content: flex-end;
}

.document-type-list span {
  padding:
    6px 9px;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface-soft);

  font-size: 0.68rem;
  font-weight: 620;
  letter-spacing: normal;
}

.upload-message {
  min-height: 20px;

  margin-top: 10px;

  color:
    var(--receiving-danger);

  font-size: 0.75rem;
  font-weight: 600;
}

.upload-message.is-success {
  color:
    var(--receiving-success);
}

/* =========================================================
   10. INTAKE SUMMARY
========================================================= */

.intake-summary-card {
  display: flex;
  flex-direction: column;
}

.summary-metrics {
  display: grid;
  gap: 10px;
}

.summary-metric {
  display: flex;

  min-height: 63px;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    13px 14px;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 10px;
}

.summary-metric__label {
  display: flex;

  align-items: center;
  gap: 10px;

  color:
    var(--receiving-text-secondary);

  font-size: 0.75rem;
  font-weight: 620;
}

.summary-metric strong {
  color:
    var(--receiving-text);

  font-size: 1.3rem;
  font-weight: 680;
}

.metric-icon {
  width: 9px;
  height: 9px;

  border-radius: 50%;
}

.metric-icon--uploaded {
  background:
    var(--receiving-primary);
}

.metric-icon--processing {
  background:
    var(--receiving-warning);
}

.metric-icon--review {
  background:
    #6d7f72;
}

.metric-icon--created {
  background:
    var(--receiving-success);
}

.workflow-route {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: auto;
  padding-top: 20px;

  color:
    var(--receiving-text-muted);

  font-size: 0.65rem;
  font-weight: 650;
}

.workflow-route i {
  width: 18px;
  height: 1px;

  background:
    var(--receiving-border-strong);
}

/* =========================================================
   11. PROCESSING PANEL
========================================================= */

.processing-panel,
.review-panel,
.records-card {
  max-width: 1680px;

  margin:
    22px auto 0;

  padding: 22px;
}

.processing-status,
.review-badge {
  display: inline-flex;

  align-items: center;

  padding:
    7px 10px;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border:
    1px solid #b9d2c2;

  border-radius: 999px;

  font-size: 0.69rem;
  font-weight: 700;
}

.processing-document {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.65fr);

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding: 18px;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 12px;
}

.processing-document__file {
  display: flex;

  min-width: 0;

  align-items: center;
  gap: 13px;
}

.file-icon {
  display: grid;

  width: 42px;
  height: 42px;

  flex:
    0 0 42px;

  place-items: center;

  color: #ffffff;

  background:
    var(--receiving-primary);

  border-radius: 10px;

  font-size: 0.65rem;
  font-weight: 800;
}

.processing-document__file strong,
.processing-document__file span {
  display: block;
}

.processing-document__file strong {
  overflow: hidden;

  color:
    var(--receiving-text);

  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 0.8rem;
}

.processing-document__file span {
  margin-top: 5px;

  color:
    var(--receiving-text-muted);

  font-size: 0.68rem;
}

.processing-progress {
  display: flex;

  align-items: center;
  gap: 12px;
}

.processing-progress__track {
  height: 7px;
  flex: 1;

  overflow: hidden;

  background: #dfe7e1;

  border-radius: 999px;
}

.processing-progress__bar {
  width: 0;
  height: 100%;

  background:
    var(--receiving-primary);

  border-radius: inherit;

  transition:
    width 300ms ease;
}

.processing-progress > span {
  min-width: 38px;

  color:
    var(--receiving-text-secondary);

  font-size: 0.72rem;
  font-weight: 700;
}

.processing-steps {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-top: 16px;
}

.processing-step {
  display: flex;

  align-items: flex-start;
  gap: 10px;

  padding: 13px;

  opacity: 0.45;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 10px;

  transition:
    opacity 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.processing-step > span {
  display: grid;

  width: 25px;
  height: 25px;

  flex:
    0 0 25px;

  place-items: center;

  color:
    var(--receiving-text-muted);

  background: #ffffff;

  border:
    1px solid
    var(--receiving-border);

  border-radius: 50%;

  font-size: 0.65rem;
  font-weight: 750;
}

.processing-step strong,
.processing-step small {
  display: block;
}

.processing-step strong {
  color:
    var(--receiving-text);

  font-size: 0.72rem;
}

.processing-step small {
  margin-top: 5px;

  color:
    var(--receiving-text-muted);

  font-size: 0.63rem;
  line-height: 1.4;
}

.processing-step.is-active,
.processing-step.is-complete {
  opacity: 1;
}

.processing-step.is-active {
  background:
    var(--receiving-primary-soft);

  border-color: #b8d1c0;
}

.processing-step.is-complete {
  background:
    var(--receiving-success-soft);

  border-color: #b8d1c0;
}

.processing-step.is-complete > span {
  color: #ffffff;

  background:
    var(--receiving-success);

  border-color:
    var(--receiving-success);
}

/* =========================================================
   12. REVIEW PANEL
========================================================= */

.review-panel__header {
  align-items: flex-start;
}

.review-panel__header p {
  margin:
    7px 0 0;

  color:
    var(--receiving-text-secondary);

  font-size: 0.78rem;
  line-height: 1.5;
}

.extraction-form {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 22px;
}

.form-field {
  min-width: 0;
}

.form-field--full {
  grid-column:
    1 / -1;
}

.form-field label {
  display: block;

  margin-bottom: 7px;

  color:
    var(--receiving-text-secondary);

  font-size: 0.7rem;
  font-weight: 700;
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 42px;

  padding:
    9px 11px;

  color:
    var(--receiving-text);

  outline: none;

  background: #ffffff;

  border:
    1px solid
    var(--receiving-border-strong);

  border-radius: 8px;

  font-size: 0.78rem;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.form-field input:focus,
.form-field select:focus {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.1);
}

.form-field-note {
  display: block;

  margin-top: 7px;

  color:
    var(--receiving-text-muted);

  font-size: 0.64rem;
  line-height: 1.45;
}

.verification-summary-card {
  display: grid;

  gap: 14px;

  padding: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 250, 247, 0.96)
    );

  border:
    1px solid
    var(--receiving-border);

  border-radius: 11px;

  box-shadow:
    var(--receiving-shadow-soft);
}

.verification-summary-card__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.verification-summary-card__header h3 {
  margin: 4px 0 0;

  color:
    var(--receiving-text);

  font-size: 0.98rem;
  font-weight: 700;
}

.verification-summary-card__toggle {
  display: inline-flex;

  align-items: center;

  min-height: 34px;

  padding: 7px 12px;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.22);

  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 700;
}

.verification-summary-card__toggle:hover,
.verification-summary-card__toggle:focus-visible {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.12);
}

.verification-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px 16px;
}

.verification-summary-item {
  display: grid;

  gap: 5px;

  padding: 12px 13px;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 9px;
}

.verification-summary-item--full {
  grid-column:
    1 / -1;
}

.verification-summary-item__label {
  color:
    var(--receiving-text-muted);

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.verification-summary-item strong {
  color:
    var(--receiving-text);

  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.4;
}

.extraction-edit-fields {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  padding: 16px;

  background:
    rgba(255, 255, 255, 0.92);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 11px;
}

.extraction-edit-fields__actions {
  display: flex;

  justify-content: flex-end;
}

/* =========================================================
   13. EXTRACTED LINE ITEMS
========================================================= */

.extracted-line-items {
  padding: 16px;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 11px;
}

.line-items-heading {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}

.line-items-heading p {
  margin:
    4px 0 0;

  color:
    var(--receiving-text-muted);

  font-size: 0.68rem;
}

.line-items-heading > span {
  padding:
    6px 9px;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border-radius: 999px;

  font-size: 0.65rem;
  font-weight: 700;
}

.purchase-match-summary {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  gap: 10px;

  margin-bottom: 14px;
  padding: 10px 12px;

  color:
    var(--receiving-primary-dark);

  background:
    linear-gradient(
      145deg,
      rgba(232, 243, 236, 0.96),
      rgba(247, 250, 247, 0.98)
    );

  border:
    1px solid
    rgba(63, 139, 97, 0.2);

  border-radius: 10px;
}

.purchase-match-summary__brand,
.purchase-match-summary__item {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  min-height: 28px;

  font-size: 0.72rem;
  font-weight: 700;
}

.purchase-match-summary__brand {
  color:
    var(--receiving-primary-dark);

  letter-spacing: 0.02em;
}

.purchase-match-summary__icon {
  display: inline-grid;

  width: 20px;
  height: 20px;

  place-items: center;

  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);

  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 800;
}

.purchase-match-summary__item {
  color:
    var(--receiving-text-secondary);
}

.purchase-match-summary__divider {
  width: 1px;
  height: 16px;

  background:
    rgba(63, 139, 97, 0.22);
}

.line-items-table-wrapper,
.records-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.line-items-table-wrapper {
  overflow-x: visible;
}

.line-items-table {
  width: 100%;

  margin-top: 14px;

  border-collapse: collapse;
}

.line-items-table th,
.line-items-table td {
  padding: 7px 7px;

  text-align: left;

  border-bottom:
    1px solid
    var(--receiving-border);

  font-size: 0.7rem;
}

.line-items-table th {
  color:
    var(--receiving-text-muted);

  font-weight: 700;
}

.line-items-table td {
  color:
    var(--receiving-text-secondary);
}

/* =========================================================
   14. REVIEW ACTIONS
========================================================= */

.review-actions {
  display: flex;

  justify-content: flex-end;
  gap: 10px;
}

.primary-action,
.secondary-action {
  min-height: 42px;

  padding:
    10px 16px;

  border-radius: 8px;

  font-size: 0.76rem;
  font-weight: 700;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.primary-action {
  color: #ffffff;

  background:
    var(--receiving-primary);

  border:
    1px solid
    var(--receiving-primary);
}

.primary-action:hover {
  background:
    var(--receiving-primary-dark);

  border-color:
    var(--receiving-primary-dark);

  transform:
    translateY(-1px);
}

.secondary-action {
  color:
    var(--receiving-text-secondary);

  background: #ffffff;

  border:
    1px solid
    var(--receiving-border-strong);
}

.secondary-action:hover {
  background:
    var(--receiving-surface-soft);

  border-color:
    var(--receiving-primary);
}

/* =========================================================
   15. RECORDS HEADER
========================================================= */

.records-card__header {
  margin-bottom: 17px;
}

.record-controls {
  display: flex;
  align-items: center;
}

.record-search {
  display: flex;

  min-width: 250px;

  align-items: center;
  gap: 8px;

  padding:
    9px 11px;

  background: #ffffff;

  border:
    1px solid
    var(--receiving-border);

  border-radius: 8px;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.record-search:focus-within {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.1);
}

.record-search span {
  display: grid;

  width: 17px;
  height: 17px;

  place-items: center;

  color:
    var(--receiving-text-muted);
}

.record-search svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
}

.record-search input {
  width: 100%;
  min-width: 0;

  color:
    var(--receiving-text);

  outline: none;

  background: transparent;
  border: 0;

  font-size: 0.75rem;
}

/* =========================================================
   16. RECORDS TABLE
========================================================= */

.receive-records-wrapper {
  padding: 15px;
}

.receive-record-cards {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.receive-record-card {
  position: relative;

  background: #fcfcfd;
  border: 1px solid var(--receiving-border);
  border-radius: var(--receiving-radius-medium);
  overflow: hidden;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.receive-record-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;

  width: 20px;

  background: linear-gradient(180deg, #0f1318 0%, #10141a 100%);

  border-top-left-radius: var(--receiving-radius-medium);
  border-bottom-left-radius: var(--receiving-radius-medium);

  transition:
    background-color 180ms ease;
}

.receive-record-card--incomplete {
  border-color: var(--receiving-border);
}

.receive-record-card--incomplete:hover {
  border-color: rgba(63, 139, 97, 0.62);
  box-shadow:
    0 7px 20px rgba(63, 139, 97, 0.18),
    0 0 0 1px rgba(63, 139, 97, 0.2);
  transform: translateY(-1px);
}

.receive-record-card--incomplete:hover::before {
  background: var(--receiving-primary);
}

.receive-record-card--received {
  border-color: rgba(63, 139, 97, 0.7);
  box-shadow:
    0 7px 21px rgba(63, 139, 97, 0.22),
    0 0 0 1px rgba(63, 139, 97, 0.3);
}

.receive-record-card--received::before {
  background: var(--receiving-primary);
}

.receive-record-card--received:hover {
  box-shadow:
    0 10px 26px rgba(63, 139, 97, 0.28),
    0 0 0 1px rgba(63, 139, 97, 0.42);
  transform: translateY(-1px);
}

.receive-record-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;

  padding: 14px 16px 14px 30px;
}

.receive-record-card__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.receive-record-card__icon-slot {
  display: grid;
  width: 44px;
  place-items: center;
}

.receive-record-card__document-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 44px;
  place-items: center;

  color: #59616b;
  background: #f4f6f8;
  border: 1px solid #c6ccd4;
  border-radius: 8px;

  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.receive-record-card__document-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 11px;
  height: 11px;

  background: linear-gradient(135deg, #e4e8ec 50%, #f4f6f8 50%);
  border-left: 1px solid #c6ccd4;
  border-bottom: 1px solid #c6ccd4;
  border-top-right-radius: 7px;
}

.receive-record-card__received-icon-image {
  display: block;
  width: 34px;
  height: 34px;

  object-fit: contain;
}

.receive-record-card__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.receive-record-card__vendor,
.receive-record-card__packing-slip,
.receive-record-card__received-date {
  color: var(--receiving-text-secondary);
  font-size: 0.73rem;
  font-weight: 620;
}

.receive-record-card__vendor {
  color: var(--receiving-text);
  font-size: 0.77rem;
  font-weight: 650;
}

.receive-record-card__po {
  color: #1e2227;
}

.receive-record-card__submeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.receive-record-card__submeta-separator {
  color: #8e97a1;
  font-size: 0.7rem;
}

.receive-record-card__status-wrap {
  justify-self: end;
}

.receive-record-card--incomplete .receive-record-card__status-pill {
  color: #3e454f;
  background: #eceff2;
  border: 1px solid #ccd2d8;
}

.receive-record-card--received .receive-record-card__status-pill {
  color: #245138;
  background: rgba(63, 139, 97, 0.18);
  border: 1px solid rgba(63, 139, 97, 0.42);
}

.receive-record-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-left: 0;
  padding: 7px 12px;

  color: #525a64;
  background: #f4f6f8;
  border: 1px solid #d1d7de;
  border-radius: 999px;

  font-size: 0.67rem;
  font-weight: 700;

  justify-self: end;
}

.receive-record-card-toggle:hover,
.receive-record-card-toggle:focus-visible {
  color: #204b34;
  border-color: rgba(63, 139, 97, 0.6);
  background: rgba(63, 139, 97, 0.12);
}

.receive-record-card-toggle__icon {
  font-size: 0.66rem;
}

.receive-record-card__details {
  padding: 0 16px 15px 30px;
}

.receive-record-lines-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--receiving-border);
  border-radius: 10px;
}

.receive-record-lines-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.receive-record-lines-table th,
.receive-record-lines-table td {
  padding: 11px;
  border-bottom: 1px solid var(--receiving-border);

  font-size: 0.71rem;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
}

.receive-record-lines-table th {
  color: var(--receiving-text-muted);
  background: var(--receiving-surface-soft);

  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.receive-record-lines-table tbody tr:last-child td {
  border-bottom: 0;
}

.receive-record-lines-table th:nth-child(1),
.receive-record-lines-table td:nth-child(1) {
  width: 18%;
}

.receive-record-lines-table th:nth-child(2),
.receive-record-lines-table td:nth-child(2) {
  width: 38%;
}

.receive-record-lines-table td:nth-child(2) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.receive-record-lines-table th:nth-child(3),
.receive-record-lines-table td:nth-child(3),
.receive-record-lines-table th:nth-child(4),
.receive-record-lines-table td:nth-child(4),
.receive-record-lines-table th:nth-child(5),
.receive-record-lines-table td:nth-child(5) {
  white-space: nowrap;
}

.receive-record-lines-empty {
  padding: 22px !important;
  color: var(--receiving-text-muted);
  text-align: center !important;
}

.receive-record-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;

  margin-top: 12px;
}

.receive-record-actions__column {
  padding: 12px;
  border: 1px solid var(--receiving-border);
  border-radius: 10px;
  background: var(--receiving-surface-soft);
}

.receive-record-actions__status-label,
.receive-record-actions__notes-label {
  display: block;
  margin-bottom: 7px;

  color: var(--receiving-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
}

.receive-record-actions__notes-label {
  margin-top: 10px;
}

.receive-record-actions__notes {
  width: 100%;
  min-height: 88px;
  padding: 9px 10px;

  color: var(--receiving-text);
  background: var(--receiving-surface);
  border: 1px solid var(--receiving-border-strong);
  border-radius: 8px;
  outline: none;

  font-size: 0.72rem;
  line-height: 1.45;
  resize: vertical;
}

.receive-record-actions__notes:focus {
  border-color: var(--receiving-primary);
  box-shadow: 0 0 0 3px rgba(63, 139, 97, 0.1);
}

.receive-record-actions__buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.receive-record-confirm-button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 0.72rem;
}

.records-table {
  width: 100%;
  min-width: 920px;

  border-collapse: collapse;
}

.receiving-records-table {
  min-width: 1180px;
}

.records-table th,
.records-table td {
  padding:
    13px 12px;

  text-align: left;
  vertical-align: middle;

  border-bottom:
    1px solid
    var(--receiving-border);

  font-size: 0.72rem;
}

.records-table th {
  color:
    var(--receiving-text-muted);

  background:
    var(--receiving-surface-soft);

  font-weight: 700;
  white-space: nowrap;
}

.records-table td {
  color:
    var(--receiving-text-secondary);
}

.records-table td:last-child {
  white-space: normal;
}

.receiving-record-status-select {
  width: 100%;
  min-width: 112px;

  min-height: 42px;

  padding:
    8px 10px;

  color:
    var(--receiving-text);

  line-height: 1.2;
  white-space: normal;

  background: #ffffff;

  border:
    1px solid
    var(--receiving-border-strong);

  border-radius: 8px;

  font-size: 0.75rem;

  overflow-wrap: anywhere;
}

.receiving-record-status-select option {
  white-space: normal;
}

.records-table td strong {
  color:
    var(--receiving-text);
}

.records-table tbody tr {
  transition:
    background 150ms ease;
}

.records-table tbody tr:not(.empty-record-row):hover {
  background: transparent;
}

.records-table tbody tr:not(.empty-record-row) {
  cursor: default;
}

.records-table tbody tr:not(.empty-record-row):focus {
  outline: none;
}

.status-pill {
  display: inline-flex;

  padding:
    6px 9px;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border-radius: 999px;

  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.is-awaiting-inspection {
  color:
    var(--receiving-warning);

  background:
    var(--receiving-warning-soft);
}

.status-pill.is-received {
  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);
}

.status-pill.is-cancelled {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);
}

.match-pill {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding:
    5px 8px;

  border-radius: 999px;

  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

.match-pill.is-matched {
  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);
}

.match-pill.is-review-required {
  color:
    var(--receiving-text-muted);

  background:
    var(--receiving-surface-muted);
}

/* =========================================================
   17. EMPTY RECORD STATE
========================================================= */

.empty-record-row td {
  padding: 0;
}

.empty-record-state {
  display: grid;

  min-height: 180px;

  place-items: center;
  align-content: center;

  gap: 7px;

  color:
    var(--receiving-text-muted);

  text-align: center;
}

.empty-record-state strong {
  color:
    var(--receiving-text-secondary);

  font-size: 0.82rem;
}

.empty-record-state span {
  font-size: 0.72rem;
}

.empty-record-state--standalone {
  min-height: 160px;
  padding: 28px;

  border: 1px dashed var(--receiving-border);
  border-radius: var(--receiving-radius-medium);
}

/* =========================================================
   18. RECEIVING LINE ITEM CONTROLS
========================================================= */

.receiving-review-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.receiving-review-table th,
.receiving-review-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.receiving-review-table th:nth-child(1),
.receiving-review-table td:nth-child(1) {
  width: 12%;

  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receiving-review-table th:nth-child(2),
.receiving-review-table td:nth-child(2) {
  width: 23%;

  white-space: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receiving-review-table th:nth-child(3),
.receiving-review-table td:nth-child(3) {
  width: 8.5%;
  text-align: center;
}

.receiving-review-table th:nth-child(4),
.receiving-review-table td:nth-child(4) {
  width: 8.5%;
  text-align: center;
}

.receiving-review-table th:nth-child(5),
.receiving-review-table td:nth-child(5) {
  width: 6%;
  text-align: center;
}

.receiving-review-table th:nth-child(6),
.receiving-review-table td:nth-child(6) {
  width: 15%;
}

.receiving-review-table th:nth-child(7),
.receiving-review-table td:nth-child(7) {
  width: 7%;
  text-align: center;
}

.receiving-review-table th:nth-child(8),
.receiving-review-table td:nth-child(8) {
  width: 14%;
  text-align: center;
}

.receiving-review-table th:nth-child(3),
.receiving-review-table td:nth-child(3),
.receiving-review-table th:nth-child(4),
.receiving-review-table td:nth-child(4),
.receiving-review-table th:nth-child(5),
.receiving-review-table td:nth-child(5),
.receiving-review-table th:nth-child(7),
.receiving-review-table td:nth-child(7),
.receiving-review-table th:nth-child(8),
.receiving-review-table td:nth-child(8) {
  padding-left: 5px;
  padding-right: 5px;
}

.receiving-review-table th:nth-child(6),
.receiving-review-table td:nth-child(6),
.receiving-review-table th:nth-child(8),
.receiving-review-table td:nth-child(8) {
  white-space: normal;
}

/* =========================================================
   19. RECEIVED QUANTITY CONTROL
========================================================= */

.received-quantity-control {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  min-width: 150px;
}

.received-quantity-control input {
  width: 82px;
  min-height: 36px;

  padding:
    7px 9px;

  color:
    var(--receiving-text);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border-strong);

  border-radius: 7px;

  outline: none;

  font-size: 0.74rem;
  font-weight: 700;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.received-quantity-control input:focus {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.1);
}

.received-quantity-control__divider {
  color:
    var(--receiving-text-muted);

  font-size: 0.75rem;
  font-weight: 700;
}

.received-quantity-control__ordered {
  color:
    var(--receiving-text-secondary);

  font-size: 0.75rem;
  font-weight: 700;
}

/* =========================================================
   20. EXCEPTION CONTROLS
========================================================= */

.receiving-exception-select {
  width: 100%;
  min-width: 150px;
  min-height: 36px;

  padding:
    7px 30px 7px 9px;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border-strong);

  border-radius: 7px;

  outline: none;

  font-size: 0.7rem;
  font-weight: 650;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.receiving-exception-select:focus {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.1);
}

.receiving-exception-select.has-exception {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);

  border-color:
    rgba(166, 77, 77, 0.38);
}

.exception-pill {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding:
    5px 8px;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface-muted);

  border:
    1px solid
    rgba(120, 145, 128, 0.18);

  border-radius: 999px;

  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

.exception-pill.is-none {
  color:
    var(--receiving-text-muted);

  background:
    var(--receiving-surface-muted);
}

.exception-pill.is-inspection-required {
  color:
    #5f7869;

  background:
    #eef4f0;

  border-color:
    rgba(95, 120, 105, 0.2);
}

.exception-pill.is-attention {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);

  border-color:
    rgba(166, 77, 77, 0.26);
}

.exception-pill.is-soft {
  color:
    var(--receiving-primary-dark);

  background:
    rgba(232, 243, 236, 0.9);

  border-color:
    rgba(63, 139, 97, 0.16);
}

.receiving-line-status-select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  max-width: 138px;

  padding:
    5px 10px;

  appearance: none;
  outline: none;

  border-radius: 999px;

  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-align-last: center;
  white-space: nowrap;
}

.receiving-line-status-select.is-awaiting-inspection {
  color:
    var(--receiving-primary-dark);

  background:
    rgba(232, 243, 236, 0.98);

  border:
    1px solid
    rgba(63, 139, 97, 0.28);
}

.receiving-line-status-select.is-accepted {
  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.3);
}

.receiving-line-status-select.is-rejected {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);

  border:
    1px solid
    rgba(166, 77, 77, 0.32);
}

.receiving-line-status-select:focus {
  box-shadow:
    0 0 0 3px rgba(63, 139, 97, 0.12);
}

@media (max-width: 1120px) {
  .line-items-table-wrapper {
    overflow-x: auto;
  }

  .receiving-review-table {
    min-width: 820px;
  }
}

/* =========================================================
   21. MATCH INDICATORS
========================================================= */

.match-indicator {
  display: inline-grid;

  width: 29px;
  height: 29px;

  place-items: center;

  border-radius: 50%;

  font-size: 0.8rem;
  font-weight: 800;
}

.match-indicator.is-matched {
  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);
}

.match-indicator.is-review-required {
  color:
    var(--receiving-warning);

  background:
    var(--receiving-warning-soft);
}

.match-indicator.is-unmatched {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);
}

/* =========================================================
   22. DOCUMENT ACTIONS
========================================================= */

.document-action-group {
  display: inline-flex;

  align-items: center;
  gap: 6px;
}

.document-action-button {
  display: inline-grid;

  width: 30px;
  height: 30px;

  place-items: center;

  padding: 0;

  color:
    var(--receiving-primary);

  background:
    var(--receiving-primary-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.22);

  border-radius: 7px;

  cursor: pointer;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.document-action-button:hover {
  color: #ffffff;

  background:
    var(--receiving-primary);

  border-color:
    var(--receiving-primary);

  transform:
    translateY(-1px);
}

.document-action-button svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.po-record-link {
  display: inline-flex;

  align-items: center;
  gap: 7px;

  color:
    var(--receiving-primary-dark);

  text-decoration: none;

  font-weight: 750;
}

.po-record-link:hover {
  color:
    var(--receiving-primary);

  text-decoration: underline;
}

/* =========================================================
   23. RECEIVING DOCUMENT VIEWER
========================================================= */

.receiving-document-viewer {
  position: fixed;
  inset: 0;

  z-index: 1200;

  display: grid;
  place-items: center;

  padding: 28px;
}

.receiving-document-viewer__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(10, 18, 13, 0.7);

  backdrop-filter:
    blur(6px);
}

.receiving-document-viewer__panel {
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;

  width:
    min(1380px, 96vw);

  height:
    min(860px, 92vh);

  overflow: hidden;

  color:
    var(--receiving-text);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border);

  border-radius:
    var(--receiving-radius-large);

  box-shadow:
    0 32px 90px
    rgba(0, 0, 0, 0.35);
}

.receiving-document-viewer__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding:
    21px 22px;

  border-bottom:
    1px solid
    var(--receiving-border);
}

.receiving-document-viewer__header h2 {
  margin: 0;

  color:
    var(--receiving-text);

  font-size: 1.05rem;
}

.receiving-document-viewer__header p {
  margin:
    6px 0 0;

  color:
    var(--receiving-text-muted);

  font-size: 0.73rem;
}

.receiving-document-viewer__close {
  display: grid;

  width: 36px;
  height: 36px;

  flex:
    0 0 36px;

  place-items: center;

  padding: 0;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 9px;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}

.receiving-document-viewer__close:hover {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);

  border-color:
    rgba(166, 77, 77, 0.3);
}

.receiving-document-viewer__close svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
}

.receiving-document-viewer__loading,
.receiving-document-viewer__error {
  display: grid;

  flex: 1;

  place-items: center;
  align-content: center;

  gap: 8px;

  padding: 30px;

  color:
    var(--receiving-text-muted);

  text-align: center;

  font-size: 0.78rem;
}

.receiving-document-viewer__error strong {
  color:
    var(--receiving-danger);
}

.receiving-document-viewer__content {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    300px;

  min-height: 0;
  flex: 1;
}

.receiving-document-viewer__preview {
  min-width: 0;
  min-height: 0;

  background:
    #dfe5e1;

  border-right:
    1px solid
    var(--receiving-border);
}

.receiving-document-viewer__preview iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 620px;

  border: 0;

  background: #ffffff;
}

.receiving-document-viewer__details {
  overflow-y: auto;

  padding: 20px;

  background:
    var(--receiving-surface-soft);
}

.receiving-viewer-document-type {
  padding:
    13px;

  background:
    var(--receiving-primary-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.22);

  border-radius: 9px;
}

.receiving-viewer-document-type span,
.receiving-viewer-document-type strong {
  display: block;
}

.receiving-viewer-document-type span {
  color:
    var(--receiving-text-muted);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.receiving-viewer-document-type strong {
  margin-top: 5px;

  color:
    var(--receiving-primary-dark);

  font-size: 0.78rem;
}

.receiving-viewer-metadata {
  margin:
    18px 0;
}

.receiving-viewer-metadata > div {
  padding:
    11px 0;

  border-bottom:
    1px solid
    var(--receiving-border);
}

.receiving-viewer-metadata dt {
  margin-bottom: 5px;

  color:
    var(--receiving-text-muted);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.receiving-viewer-metadata dd {
  margin: 0;

  overflow-wrap: anywhere;

  color:
    var(--receiving-text-secondary);

  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.45;
}

.receiving-document-viewer__open {
  display: flex;

  min-height: 40px;

  align-items: center;
  justify-content: center;

  padding:
    9px 13px;

  color: #ffffff;

  background:
    var(--receiving-primary);

  border:
    1px solid
    var(--receiving-primary);

  border-radius: 8px;

  text-decoration: none;

  font-size: 0.72rem;
  font-weight: 700;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.receiving-document-viewer__open:hover {
  background:
    var(--receiving-primary-dark);

  border-color:
    var(--receiving-primary-dark);

  transform:
    translateY(-1px);
}

/* =========================================================
   24. DARK MODE
========================================================= */

body.dark-mode {
  --receiving-bg: #111713;

  --receiving-surface: #18211b;
  --receiving-surface-soft: #1e2922;
  --receiving-surface-muted: #263329;

  --receiving-border: #334139;
  --receiving-border-strong: #46564c;

  --receiving-text: #edf4ef;
  --receiving-text-secondary: #b4c0b8;
  --receiving-text-muted: #85938a;

  --receiving-primary: #70bb89;
  --receiving-primary-dark: #8ac99d;
  --receiving-primary-soft: #23392b;

  --receiving-success: #70bb89;
  --receiving-success-soft: #23392b;

  --receiving-warning: #d0a860;
  --receiving-warning-soft: #3b3222;

  --receiving-danger: #db8585;
  --receiving-danger-soft: #422626;

  --receiving-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.28);
}

body.dark-mode .receiving-page {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(63, 139, 97, 0.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(105, 157, 122, 0.07),
      transparent 28%
    ),
    var(--receiving-bg);
}

body.dark-mode .intake-card,
body.dark-mode .processing-panel,
body.dark-mode .review-panel,
body.dark-mode .records-card {
  background:
    rgba(24, 33, 27, 0.96);
}

body.dark-mode .receiving-heading__status {
  background:
    rgba(24, 33, 27, 0.86);
}

body.dark-mode .document-drop-zone {
  background:
    linear-gradient(
      145deg,
      rgba(29, 40, 33, 0.98),
      rgba(24, 34, 28, 0.92)
    );

  border-color: #4c6555;
}

body.dark-mode .document-drop-zone:hover,
body.dark-mode .document-drop-zone:focus-visible,
body.dark-mode .document-drop-zone.is-dragging {
  background:
    var(--receiving-primary-soft);

  border-color:
    var(--receiving-primary);
}

body.dark-mode .drop-zone-icon,
body.dark-mode .supported-file-types span,
body.dark-mode .form-field input,
body.dark-mode .form-field select,
body.dark-mode .record-search,
body.dark-mode .secondary-action,
body.dark-mode .processing-step > span {
  color:
    var(--receiving-text);

  background:
    var(--receiving-surface);
}

body.dark-mode .supported-file-types span,
body.dark-mode .document-type-list span {
  border-color:
    var(--receiving-border);
}

body.dark-mode .processing-progress__track {
  background:
    #34443a;
}

body.dark-mode .records-table tbody tr:not(.empty-record-row):hover {
  background:
    rgba(63, 139, 97, 0.12);
}

body.dark-mode .receive-record-card {
  background: rgba(29, 40, 33, 0.95);
  border-color: var(--receiving-border);
}

body.dark-mode .receive-record-card::before {
  background: linear-gradient(180deg, #0f1318 0%, #10141a 100%);
}

body.dark-mode .receive-record-card--incomplete:hover {
  border-color: rgba(118, 175, 142, 0.72);
}

body.dark-mode .receive-record-card--incomplete:hover::before,
body.dark-mode .receive-record-card--received::before {
  background: #76af8e;
}

body.dark-mode .receive-record-card--received {
  border-color: rgba(118, 175, 142, 0.78);
  box-shadow:
    0 8px 24px rgba(118, 175, 142, 0.22),
    0 0 0 1px rgba(118, 175, 142, 0.32);
}

body.dark-mode .receive-record-card__vendor,
body.dark-mode .receive-record-card__packing-slip,
body.dark-mode .receive-record-card__received-date {
  color: var(--receiving-text-secondary);
}

body.dark-mode .receive-record-card__po {
  color: #f1f6f2;
}

body.dark-mode .receive-record-card__submeta-separator {
  color: #8fa092;
}

body.dark-mode .receive-record-card__document-icon {
  color: #d7e0da;
  background: #2f3e34;
  border-color: #5d7667;
}

body.dark-mode .receive-record-card__document-icon::after {
  background: linear-gradient(135deg, #45574b 50%, #2f3e34 50%);
  border-left-color: #5d7667;
  border-bottom-color: #5d7667;
}

body.dark-mode .receive-record-card--incomplete .receive-record-card__status-pill {
  color: #e7ede9;
  background: #2f3e34;
  border-color: #5c7465;
}

body.dark-mode .receive-record-card--received .receive-record-card__status-pill {
  color: #d5ecd9;
  background: rgba(118, 175, 142, 0.22);
  border-color: rgba(118, 175, 142, 0.5);
}

body.dark-mode .receive-record-card-toggle {
  color: #d1ddd5;
  background: #2e3d34;
  border-color: #587061;
}

body.dark-mode .receive-record-card-toggle:hover,
body.dark-mode .receive-record-card-toggle:focus-visible {
  color: #cde7d4;
  background: rgba(118, 175, 142, 0.16);
  border-color: rgba(118, 175, 142, 0.6);
}

body.dark-mode .receive-record-lines-table-wrapper,
body.dark-mode .receive-record-actions__column,
body.dark-mode .empty-record-state--standalone {
  border-color: var(--receiving-border);
}

body.dark-mode .receive-record-lines-table th,
body.dark-mode .receive-record-actions__column {
  background: var(--receiving-surface-soft);
}

body.dark-mode .receive-record-lines-table td {
  color: var(--receiving-text-secondary);
  border-bottom-color: var(--receiving-border);
}

body.dark-mode .receive-record-actions__notes {
  color: var(--receiving-text);
  background: var(--receiving-surface);
  border-color: var(--receiving-border-strong);
}

body.dark-mode .received-quantity-control input,
body.dark-mode .receiving-exception-select {
  color:
    var(--receiving-text);

  background:
    var(--receiving-surface);

  border-color:
    var(--receiving-border-strong);
}
body.dark-mode .receiving-document-viewer__preview {
  background:
    #101512;
}

/* =========================================================
   25. RESPONSIVE �� TABLET
========================================================= */

@media (max-width: 1100px) {
  .intake-layout {
    grid-template-columns: 1fr;
  }

  .receive-record-actions {
    grid-template-columns: 1fr;
  }

  .processing-steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .processing-document {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 0.6fr);
  }
}

@media (max-width: 900px) {
  .receiving-header .receiving-ai-slot {
    min-width: 0;
  }
}

/* =========================================================
   26. RESPONSIVE �� MOBILE
========================================================= */

@media (max-width: 760px) {
  .receiving-page {
    padding:
      22px 16px 40px;
  }

  .receiving-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 12px;
  }

  .receiving-heading__status {
    padding:
      8px 11px;
  }

  .intake-card,
  .processing-panel,
  .review-panel,
  .records-card {
    padding: 17px;

    border-radius:
      var(--receiving-radius-medium);
  }

  .document-drop-zone {
    min-height: 250px;
    padding: 24px 18px;
  }

  .processing-document,
  .extraction-form {
    grid-template-columns: 1fr;
  }

  .processing-steps {
    grid-template-columns: 1fr;
  }

  .records-card__header,
  .document-types {
    align-items: flex-start;
    flex-direction: column;
  }

  .record-controls,
  .record-search {
    width: 100%;
  }

  .record-search {
    min-width: 0;
  }

  .receive-record-card__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .receive-record-card__main {
    grid-column: 1 / -1;
  }

  .receive-record-card__status-wrap {
    justify-self: start;
    margin-left: 56px;
  }

  .receive-record-card-toggle {
    justify-self: end;
  }

  .review-actions {
    flex-direction: column-reverse;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .line-items-heading {
    flex-direction: column;
  }
}

/* =========================================================
   27. EXTRA-SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .receiving-page {
    padding:
      18px 12px 34px;
  }

  .receiving-heading__content p {
    font-size: 0.84rem;
  }

  .document-drop-zone h3 {
    font-size: 0.96rem;
  }

  .document-drop-zone p {
    font-size: 0.77rem;
    line-height: 1.5;
  }

  .summary-metric {
    min-height: 58px;

    padding:
      11px 12px;
  }

  .summary-metric__label {
    font-size: 0.69rem;
  }

  .summary-metric strong {
    font-size: 1.15rem;
  }

  .workflow-route {
    gap: 5px;
    font-size: 0.58rem;
  }

  .workflow-route i {
    width: 10px;
  }
}

/* =========================================================
   28. DOCUMENT VIEWER RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .receiving-document-viewer {
    padding: 14px;
  }

  .receiving-document-viewer__panel {
    width: 100%;
    height: 94vh;
  }

  .receiving-document-viewer__content {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .receiving-document-viewer__preview {
    min-height: 500px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--receiving-border);
  }

  .receiving-document-viewer__preview iframe {
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .receiving-document-viewer {
    padding: 0;
  }

  .receiving-document-viewer__panel {
    width: 100%;
    height: 100%;

    border-radius: 0;
  }

  .receiving-document-viewer__header {
    padding:
      16px;
  }

  .receiving-document-viewer__preview,
  .receiving-document-viewer__preview iframe {
    min-height: 420px;
  }

  .receiving-document-viewer__details {
    padding: 16px;
  }
}

/* =========================================================
  OPERATOR DECISION
========================================================= */

.operational-decision-card {
  padding: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 250, 247, 0.96)
    );

  border:
    1px solid
    var(--receiving-border);

  border-radius:
    var(--receiving-radius-medium);

  box-shadow:
    var(--receiving-shadow-soft);
}

.operational-decision-card__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.operational-decision-card__header h3 {
  margin: 0;

  color:
    var(--receiving-text);

  font-size: 1rem;
  font-weight: 700;
}
.operator-required-badge {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
    6px 10px;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.22);

  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.operational-decision-card {
  display: grid;

  gap: 18px;

  border-color:
    var(--receiving-border-strong);
}

.operational-decision-card__header p {
  margin:
    7px 0 0;

  color:
    var(--receiving-text-secondary);

  font-size: 0.78rem;
  line-height: 1.5;
}

.receiving-status-options {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
}

.receiving-status-options legend {
  grid-column: 1 / -1;

  margin-bottom: 2px;

  color:
    var(--receiving-text);

  font-size: 0.78rem;
  font-weight: 700;
}

.receiving-status-option {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 70px;

  align-items: center;

  gap: 11px;

  padding:
    12px 14px;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 10px;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.receiving-status-option:hover {
  border-color:
    var(--receiving-border-strong);

  transform:
    translateY(-1px);
}

.receiving-status-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.receiving-status-option__indicator {
  display: grid;

  width: 28px;
  height: 28px;

  flex: 0 0 auto;

  place-items: center;

  border:
    1px solid
    currentColor;

  border-radius: 8px;

  font-size: 0.78rem;
  font-weight: 800;
}

.receiving-status-option__copy {
  display: grid;

  min-width: 0;

  gap: 3px;
}

.receiving-status-option__copy strong {
  color:
    var(--receiving-text);

  font-size: 0.78rem;
  font-weight: 720;
}

.receiving-status-option__copy small {
  color:
    var(--receiving-text-muted);

  font-size: 0.66rem;
  line-height: 1.35;
}

.receiving-status-option:has(input:checked) {
  box-shadow:
    0 10px 24px
    rgba(38, 64, 48, 0.09);

  transform:
    translateY(-1px);
}

.receiving-status-option--received:has(input:checked) {
  color:
    var(--receiving-success);

  background:
    var(--receiving-success-soft);

  border-color:
    var(--receiving-success);
}

.receiving-status-option--rejected:has(input:checked) {
  color:
    var(--receiving-danger);

  background:
    var(--receiving-danger-soft);

  border-color:
    var(--receiving-danger);
}


/* =========================================================
   EXCEPTION CHIPS
========================================================= */

.receiving-exception-section {
  display: grid;

  gap: 11px;
}

.receiving-decision-label + .receiving-exception-options {
  margin-top: 6px;
}

.receiving-decision-label--source {
  margin-top: 16px;
}

.receiving-decision-label {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.receiving-decision-label strong {
  color:
    var(--receiving-text);

  font-size: 0.78rem;
}

.receiving-decision-label span {
  color:
    var(--receiving-text-muted);

  font-size: 0.66rem;
}

.receiving-exception-options {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}

.receiving-exception-chip {
  position: relative;

  display: inline-flex;

  align-items: center;

  min-height: 34px;

  padding:
    7px 13px;

  color:
    var(--receiving-text-secondary);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 999px;

  cursor: pointer;

  font-size: 0.7rem;
  font-weight: 650;

  transition:
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.receiving-exception-chip input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.receiving-exception-chip:has(input:checked) {
  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border-color:
    var(--receiving-primary);
}


/* =========================================================
   DECISION NOTES
========================================================= */

.receiving-decision-notes {
  display: grid;

  gap: 8px;
}

.receiving-decision-notes label {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  color:
    var(--receiving-text);

  font-size: 0.78rem;
  font-weight: 700;
}

.receiving-decision-notes label span {
  color:
    var(--receiving-text-muted);

  font-size: 0.65rem;
  font-weight: 600;
}

.receiving-decision-notes textarea {
  width: 100%;
  min-height: 92px;

  resize: vertical;

  padding:
    12px 13px;

  color:
    var(--receiving-text);

  background:
    var(--receiving-surface);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 9px;

  outline: none;

  font-size: 0.76rem;
  line-height: 1.5;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.receiving-decision-notes textarea:focus {
  border-color:
    var(--receiving-primary);

  box-shadow:
    0 0 0 3px
    rgba(63, 139, 97, 0.1);
}

.receiving-notes-footer {
  display: flex;

  justify-content: space-between;

  gap: 16px;

  color:
    var(--receiving-text-muted);

  font-size: 0.64rem;
}


/* =========================================================
   DECISION ATTRIBUTION
========================================================= */

.receiving-decision-attribution {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, 1fr);

  align-items: stretch;

  gap: 16px;

  padding: 14px;

  background:
    var(--receiving-surface-soft);

  border:
    1px solid
    var(--receiving-border);

  border-radius: 10px;
}

.decision-attribution-item {
  display: grid;

  gap: 9px;
}

.decision-attribution-item__label {
  color:
    var(--receiving-text-muted);

  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.decision-attribution-item__value {
  display: flex;

  align-items: center;

  gap: 10px;
}

.decision-attribution-item__value strong,
.decision-attribution-item__value small {
  display: block;
}

.decision-attribution-item__value strong {
  color:
    var(--receiving-text);

  font-size: 0.76rem;
}

.decision-attribution-item__value small {
  margin-top: 2px;

  color:
    var(--receiving-text-muted);

  font-size: 0.64rem;
}

.decision-attribution-avatar {
  display: grid;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  place-items: center;

  color:
    var(--receiving-primary-dark);

  background:
    var(--receiving-primary-soft);

  border:
    1px solid
    rgba(63, 139, 97, 0.24);

  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 800;
}

.decision-attribution-avatar--dock {
  color: #ffffff;

  background:
    var(--receiving-primary-dark);
}

.decision-attribution-divider {
  width: 1px;

  background:
    var(--receiving-border);
}


/* =========================================================
   RESPONSIVE DECISION UI
========================================================= */

@media (max-width: 900px) {
  .verification-summary-grid,
  .extraction-edit-fields {
    grid-template-columns: 1fr;
  }

  .purchase-match-summary {
    gap: 8px;
  }

  .purchase-match-summary__divider {
    display: none;
  }

  .receiving-status-options {
    grid-template-columns: 1fr;
  }

  .receiving-decision-attribution {
    grid-template-columns: 1fr;
  }

  .decision-attribution-divider {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 600px) {
  .verification-summary-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .operational-decision-card {
    padding: 17px;
  }

  .operational-decision-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .receiving-decision-label {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   WAREHOUSE SUITE SHARED SHELL — RECEIVING IDENTITY
========================================================= */

/* Receiving green accent for shared warehouse-header.css color system */
.receiving-header {
  --core-header-accent-rgb: 63, 139, 97;
}

/* Weather text — receiving green light palette */
.receiving-header .weather-block__temperature {
  color: #f1f6f2;
}

.receiving-header .weather-block__location {
  color: rgba(241, 246, 242, 0.65);
}

/* Sidebar active state — restrained green treatment */
.sidebar-nav-item--receiving.is-active {
  border-color: rgba(63, 139, 97, 0.42);
}

.sidebar-nav-item--receiving.is-active .sidebar-nav-icon {
  color: #3f8b61;
}

/* DOCK sidebar identity */
.sidebar-dock-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 7px;
  margin: 8px 4px 0;
  border-top: 1px solid rgba(63, 139, 97, 0.12);
}

.sidebar-dock-identity__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  opacity: 0.86;
}

.sidebar-dock-identity__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-dock-identity__name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #62a878;
  line-height: 1.2;
}

.sidebar-dock-identity__role {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 246, 242, 0.44);
  line-height: 1.2;
}