* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --pine-950: #18241b;
  --pine-800: #294031;
  --pine-700: #35523e;
  --pine-100: #edf1e8;
  --sand-100: #f8f2e6;
  --sand-200: #eed9ab;
  --sand-300: #dfbf73;
  --stone-700: #4f534d;
  --stone-500: #7d7d74;
  --white: #fffdfa;
  --danger: #8f3d2e;
  --warning: #9b6b1b;
  --success: #2f6846;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--pine-950);
  background:
    radial-gradient(circle at top left, rgba(223, 191, 115, 0.32), transparent 26rem),
    linear-gradient(160deg, #fbf7ef 0%, #eef3eb 58%, #f7f4ec 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(41, 64, 49, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 64, 49, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 80%);
}

body.has-test-banner {
  padding-top: 48px;
}

body.auth-shell.has-test-banner {
  padding: calc(clamp(280px, 38vh, 420px) + 48px) 24px clamp(32px, 8vh, 72px);
}

.hidden {
  display: none !important;
}

.auth-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(143, 61, 46, 0.14);
  color: var(--danger);
  line-height: 1.45;
}

.auth-message[data-tone="info"] {
  background: rgba(41, 64, 49, 0.12);
  color: var(--pine-800);
}

.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  min-height: 48px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  letter-spacing: 0.12em;
  font: 800 13px/1.2 Arial, Helvetica, sans-serif;
  color: var(--white);
  background: #8a1f2d;
  box-shadow: 0 10px 24px #0004;
}

.test-banner-btn {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font: 800 0.72rem/1 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.test-banner-btn[data-enabled="false"],
.test-banner-btn.off {
  background: rgba(24, 36, 27, 0.38);
  border-color: rgba(255, 255, 255, 0.34);
}

.app-shell {
  width: min(1680px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.session-panel {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 30;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #2a394a;
  border-radius: 999px;
  background: rgba(18, 27, 37, 0.96);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
  color: #eef4fb;
  cursor: pointer;
}

body.has-test-banner .session-panel {
  top: 60px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1c2330, #121821);
  background-size: cover;
  background-position: center;
  border: 1px solid #2a394a;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #eef4fb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-meta {
  min-width: 0;
  display: grid;
}

.session-meta .section-label {
  display: none;
}

.session-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.session-name-row h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.session-meta .muted-copy {
  margin: 2px 0 0;
  max-width: none;
  color: #a6b7ca;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.session-name-row h2,
.session-name-row span {
  overflow-wrap: anywhere;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #16304d;
  color: #8ec3ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.user-menu {
  position: fixed;
  left: 16px;
  top: 70px;
  z-index: 31;
  min-width: 180px;
  padding: 6px;
  border: 1px solid #2a394a;
  border-radius: 10px;
  background: rgba(18, 27, 37, 0.96);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

body.has-test-banner .user-menu {
  top: 118px;
}

.user-menu button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #eef4fb;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.user-menu button:hover {
  background: rgba(29, 110, 200, 0.14);
}

.hero-card,
.table-card,
.summary-card {
  background: rgba(255, 253, 250, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(53, 82, 62, 0.12);
  box-shadow: 0 24px 60px rgba(24, 36, 27, 0.08);
}

.hero-card {
  border-radius: 28px;
  padding: 28px;
  display: grid;
  gap: 24px;
}

.hero-copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.label-mode-toggle {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid rgba(41, 64, 49, 0.14);
  border-radius: 999px;
  background: #edf1e8;
}

.mode-toggle-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--pine-800);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.mode-toggle-btn.active {
  color: var(--white);
  background: linear-gradient(135deg, var(--pine-800), var(--pine-700));
  box-shadow: 0 10px 22px rgba(24, 36, 27, 0.18);
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  color: var(--pine-700);
}

.app-title-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
}

.app-title-lockup img {
  width: clamp(48px, 6vw, 72px);
  height: clamp(48px, 6vw, 72px);
  flex: 0 0 auto;
  object-fit: contain;
}

.app-title-lockup h1,
.table-head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.app-title-lockup h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.lede {
  margin: 16px 0 0;
  max-width: 54rem;
  color: var(--stone-700);
  line-height: 1.6;
}

.lookup-form {
  display: grid;
  gap: 12px;
}

.lookup-form label {
  font-weight: 700;
}

.lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
}

.lookup-form input {
  min-width: 0;
  border: 1px solid rgba(41, 64, 49, 0.2);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--white);
}

.lookup-form button,
#previewBtn,
.secondary-btn {
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

.lookup-form button,
#previewBtn {
  background: linear-gradient(135deg, var(--pine-800), var(--pine-700));
  color: var(--white);
}

.secondary-btn {
  background: var(--sand-100);
  color: var(--pine-800);
}

.csv-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lookup-form button:hover,
#previewBtn:hover,
.secondary-btn:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.lookup-hint {
  margin: 0;
  color: var(--stone-700);
}

.status-panel {
  min-height: 24px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eef3ea;
  color: var(--pine-800);
}

.status-panel[data-tone="success"] {
  background: rgba(47, 104, 70, 0.14);
  color: var(--success);
}

.status-panel[data-tone="warning"] {
  background: rgba(155, 107, 27, 0.16);
  color: var(--warning);
}

.status-panel[data-tone="error"] {
  background: rgba(143, 61, 46, 0.14);
  color: var(--danger);
}

.bc-context-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 240px) minmax(220px, 320px) minmax(220px, 1fr);
  gap: 14px;
  align-items: end;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid rgba(41, 64, 49, 0.14);
  border-radius: 22px;
  background: #eef3ea;
}

.bc-context-panel.hidden {
  display: none;
}

.bc-context-panel h2 {
  margin: 0;
  color: var(--pine-800);
}

.bc-context-panel label,
.filter-bar label {
  display: grid;
  gap: 6px;
  color: var(--stone-700);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bc-context-panel select,
.bc-context-panel input,
.filter-bar input {
  min-width: 0;
  border: 1px solid rgba(41, 64, 49, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--pine-900);
  background: var(--white);
  font: 600 0.95rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.context-status {
  min-height: 40px;
  margin: 0;
  color: var(--stone-700);
  font-size: 0.9rem;
  line-height: 1.35;
}

.context-status[data-tone="success"] {
  color: var(--success);
}

.context-status[data-tone="warning"] {
  color: var(--warning);
}

.context-status[data-tone="error"] {
  color: var(--danger);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.summary-card {
  border-radius: 22px;
  padding: 18px 20px;
  display: grid;
  gap: 6px;
}

.summary-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--stone-500);
}

.section-label {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7fa8d6;
}

.summary-card strong {
  font-size: 1.45rem;
}

.table-card {
  border-radius: 28px;
  padding: 24px;
}

.table-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.table-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #1d5f9f;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover,
.link-btn:focus-visible {
  color: #123d68;
}

.link-btn:focus-visible {
  outline: 2px solid rgba(29, 110, 200, 0.45);
  outline-offset: 3px;
}

.link-btn:disabled {
  color: var(--stone-500);
  cursor: not-allowed;
  opacity: 0.65;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(41, 64, 49, 0.12);
  border-radius: 18px;
  background: #f6f4ee;
}

.filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 190px;
}

.list-jump-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 30px;
  margin: -4px 2px 10px;
}

.list-jump-actions-bottom {
  margin: 10px 2px 0;
}

.list-jump-btn {
  min-height: 28px;
  font-size: 0.86rem;
}

.product-group-filter {
  display: grid;
  gap: 8px;
  min-width: min(100%, 260px);
  margin: 0;
  padding: 0;
  border: 0;
}

.product-group-filter legend {
  margin: 0 0 6px;
  color: var(--stone-700);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-group-dropdown {
  position: relative;
  min-width: 240px;
}

.product-group-dropdown summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(41, 64, 49, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--pine-800);
  background: var(--white);
  font: 800 0.86rem/1.2 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  list-style: none;
}

.product-group-dropdown summary::-webkit-details-marker {
  display: none;
}

.product-group-dropdown summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pine-700);
  border-bottom: 2px solid var(--pine-700);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 120ms ease;
}

.product-group-dropdown[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.product-group-filter-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(41, 64, 49, 0.16);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 38px rgba(24, 36, 27, 0.16);
}

.product-group-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6f4ee;
  color: var(--pine-800);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.product-group-option input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.product-group-option small {
  color: var(--stone-500);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.product-group-empty {
  color: var(--stone-500);
  font-size: 0.86rem;
  font-weight: 700;
}

.filter-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7e2d4;
  color: var(--stone-700);
  font-size: 0.78rem;
  font-weight: 800;
}

.filter-status[data-active="true"] {
  background: rgba(29, 110, 200, 0.13);
  color: #1d5f9f;
}

.table-wrap {
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(41, 64, 49, 0.12);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1360px;
  background: var(--white);
}

thead th {
  padding: 14px 12px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--stone-700);
  background: #f0eee6;
}

tbody td {
  padding: 14px 12px;
  border-top: 1px solid rgba(41, 64, 49, 0.08);
  vertical-align: top;
}

tbody tr:nth-child(even):not(.empty-row-state) {
  background: #f8f5ed;
}

tbody tr:hover:not(.empty-row-state) {
  background: #eaf2f7;
}

.checkbox-cell {
  width: 92px;
  text-align: center;
}

.checkbox-cell input {
  width: 18px;
  height: 18px;
}

.pick-header {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.pick-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.pick-link-btn {
  min-height: 22px;
}

.subtle {
  color: var(--stone-500);
  font-size: 0.88rem;
}

.field-value {
  cursor: help;
}

.print-indicator {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  font-weight: 900;
}

.print-indicator.empty {
  color: var(--stone-500);
  background: #ede8dc;
}

.print-indicator.printed {
  color: #fff;
  background: var(--success);
}

.modified-indicator {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(155, 107, 27, 0.16);
  color: var(--warning);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.row-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row-icon-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.row-icon-btn:hover,
.row-icon-btn:focus-visible {
  background: rgba(29, 110, 200, 0.1);
  text-decoration: none;
}

.row-edit-field {
  display: grid;
  gap: 3px;
  margin: 0 0 6px;
  color: var(--stone-700);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.row-edit-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid rgba(41, 64, 49, 0.22);
  border-radius: 10px;
  padding: 7px 8px;
  color: var(--pine-950);
  background: #fff;
  font: 600 0.88rem/1.2 Arial, Helvetica, sans-serif;
}

.line-input {
  width: 92px;
}

.empty-row {
  text-align: center;
  color: var(--stone-700);
  padding: 28px 18px;
}

.email-log-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 15, 0.68);
}

.email-log-modal.hidden {
  display: none;
}

.email-log-card {
  width: min(960px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2a394a;
  border-radius: 18px;
  background: #121b25;
  color: #eef4fb;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.email-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #2a394a;
}

.email-log-head h2,
.email-log-head p,
.email-log-status,
.email-log-meta,
.email-log-reason {
  margin: 0;
}

.email-log-head h2 {
  font-size: 1rem;
}

.email-log-head p,
.email-log-meta,
.email-log-reason {
  color: #a6b7ca;
  font-size: 0.82rem;
  line-height: 1.5;
}

.email-log-close {
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #16304d;
  color: #eef4fb;
  cursor: pointer;
}

.email-log-close:hover,
.email-log-close:focus-visible {
  background: #1d6ec8;
}

.email-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #2a394a;
}

.email-log-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #a6b7ca;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-log-filter input {
  min-width: 150px;
  border: 1px solid #2a394a;
  border-radius: 10px;
  padding: 8px 10px;
  background: #0f1722;
  color: #eef4fb;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.email-log-status {
  padding: 10px 18px;
  color: #a6b7ca;
  font-size: 0.82rem;
  font-weight: 700;
}

.email-log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 18px;
  overflow: auto;
}

.email-log-entry {
  border: 1px solid #2a394a;
  border-radius: 14px;
  padding: 12px 14px;
  background: #0f1722;
}

.email-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.email-log-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.email-log-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #16304d;
  color: #8ec3ff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-log-pill[data-status="suppressed"] {
  background: #4d2916;
  color: #ffbf8e;
}

.email-log-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.email-log-toggle {
  border: 1px solid #30445d;
  border-radius: 10px;
  padding: 6px 10px;
  background: #162434;
  color: #eef4fb;
  font-weight: 700;
  cursor: pointer;
}

.email-log-details {
  display: none;
  margin-top: 10px;
}

.email-log-entry.is-open .email-log-details {
  display: block;
}

.email-log-details pre {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #0a101a;
  color: #d8e4f5;
  white-space: pre-wrap;
  word-break: break-word;
  font: 500 0.78rem/1.5 Consolas, Monaco, monospace;
}

.email-log-view {
  margin-top: 10px;
}

.email-log-view[hidden] {
  display: none;
}

.email-log-frame {
  width: 100%;
  min-height: 320px;
  border: 1px solid #30445d;
  border-radius: 10px;
  background: #fff;
}

.email-log-body-text {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #0a101a;
  color: #d8e4f5;
  white-space: pre-wrap;
  word-break: break-word;
  font: 500 0.78rem/1.5 Consolas, Monaco, monospace;
}

.label-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10090;
  display: grid;
  place-items: stretch center;
  padding: 24px;
  background: rgba(3, 8, 15, 0.72);
}

.label-preview-modal.hidden {
  display: none !important;
}

.label-preview-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2a394a;
  border-radius: 18px;
  background: #111a24;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.label-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #2a394a;
  color: #eef4fb;
}

.label-preview-toolbar h2,
.label-preview-toolbar p {
  margin: 0;
}

.label-preview-toolbar p {
  margin-top: 4px;
  color: #a6b7ca;
  font-size: 0.85rem;
}

.label-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.label-preview-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #e2c074;
  color: #202015;
  font-weight: 800;
  cursor: pointer;
}

.label-preview-actions button:last-child {
  background: #26384c;
  color: #eef4fb;
}

.label-preview-list {
  flex: 1 1 auto;
  display: grid;
  gap: 18px;
  justify-items: center;
  overflow: auto;
  padding: 18px;
  background: #d9d9d9;
}

.bulk-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 10095;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 15, 0.72);
}

.bulk-edit-modal.hidden {
  display: none !important;
}

.bulk-edit-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2a394a;
  border-radius: 18px;
  background: #111a24;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  color: #eef4fb;
}

.bulk-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #2a394a;
}

.bulk-edit-head h2 {
  margin: 0;
}

.bulk-edit-head p {
  margin: 4px 0 0;
  color: #a6b7ca;
  font-size: 0.85rem;
}

.bulk-edit-close {
  border: 0;
  background: transparent;
  color: #a6b7ca;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.bulk-edit-hint {
  margin: 0;
  padding: 12px 18px 0;
  color: #a6b7ca;
  font-size: 0.82rem;
}

.bulk-edit-form {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
}

.bulk-edit-field {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid #243345;
  border-radius: 10px;
  background: #0d141d;
}

.bulk-edit-field.is-active {
  border-color: #e2c074;
  background: #16202c;
}

.bulk-edit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.bulk-edit-toggle input {
  flex: 0 0 auto;
}

.bulk-edit-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2a394a;
  border-radius: 8px;
  background: #0a1119;
  color: #eef4fb;
  font-size: 0.85rem;
}

.bulk-edit-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bulk-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #2a394a;
}

.bulk-edit-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: #e2c074;
  color: #202015;
  font-weight: 800;
  cursor: pointer;
}

.bulk-edit-actions button:last-child {
  background: #26384c;
  color: #eef4fb;
}

.posted-banner {
  margin: 0 0 4px;
  padding: 14px 16px;
  border-left: 5px solid var(--warning);
  border-radius: 16px;
  background: rgba(155, 107, 27, 0.16);
  color: var(--pine-950);
  font-size: 0.92rem;
  font-weight: 700;
}

.posted-banner.hidden {
  display: none !important;
}

.posted-lookup-modal {
  position: fixed;
  inset: 0;
  z-index: 10096;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 15, 0.72);
}

.posted-lookup-modal.hidden {
  display: none !important;
}

.posted-lookup-card {
  width: min(460px, 100%);
  overflow: hidden;
  border: 1px solid #2a394a;
  border-radius: 18px;
  background: #111a24;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  color: #eef4fb;
}

.posted-lookup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #2a394a;
}

.posted-lookup-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.posted-lookup-close {
  border: 0;
  background: transparent;
  color: #a6b7ca;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.posted-lookup-message {
  margin: 0;
  padding: 18px;
  color: #cdd9e6;
  font-size: 0.92rem;
  line-height: 1.4;
}

.posted-lookup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px 18px;
}

.posted-lookup-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: #e2c074;
  color: #202015;
  font-weight: 800;
  cursor: pointer;
}

.posted-lookup-actions button:last-child {
  background: #26384c;
  color: #eef4fb;
}

/*
  Print confirmation. This replaces a blocking window.confirm() fired on a
  timer right after print(): a modal dialog parks the renderer's main thread at
  exactly the moment Chrome is still handing pages to the spooler, which is the
  last thing a job that already loses pages needs.
*/
.print-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10097;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 8, 15, 0.72);
}

.print-confirm-modal.hidden {
  display: none !important;
}

.print-confirm-card {
  width: min(480px, 100%);
  overflow: hidden;
  border: 1px solid #2a394a;
  border-radius: 18px;
  background: #111a24;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  color: #eef4fb;
}

.print-confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid #2a394a;
}

.print-confirm-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.print-confirm-message {
  margin: 0;
  padding: 18px 18px 0;
  color: #cdd9e6;
  font-size: 0.92rem;
  line-height: 1.4;
}

.print-confirm-hint {
  margin: 10px 0 0;
  padding: 0 18px;
  color: #a6b7ca;
  font-size: 0.82rem;
  line-height: 1.4;
}

.print-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px;
}

.print-confirm-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: #e2c074;
  color: #202015;
  font-weight: 800;
  cursor: pointer;
}

.print-confirm-actions button:last-child {
  background: #26384c;
  color: #eef4fb;
}

/*
  On-screen preview card only. It carries no pagination properties on purpose:
  the app document is never the thing that prints -- labels are always printed
  from the dedicated print frame built in buildPrintDocumentHtml(), which owns
  its own page geometry. Padding is kept in step with that frame so the preview
  matches the paper.
*/
.shop-label {
  position: relative;
  width: 4in;
  height: 6in;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.16in 0.15in 0.17in;
  border: 2px solid #111;
  background: #fff;
  color: #2f3a4a;
  font: 16px/1.22 "Courier New", Consolas, monospace;
}

.company-name {
  letter-spacing: 0.02em;
}

.sales-order-row {
  min-height: 0.55in;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  gap: 8px;
}

.sales-order-row strong {
  justify-self: end;
  color: #2f3a4a;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.label-rule {
  margin: 0.02in 0 0.04in;
  border-top: 1px solid #111;
}

.shop-order-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  column-gap: 8px;
}

.shop-order-caption {
  align-self: start;
}

.shop-order-value {
  justify-self: end;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.label-meta-grid {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 2px 16px;
  margin-top: 0.12in;
}

.label-meta-grid span {
  letter-spacing: 0.02em;
}

.label-meta-grid strong,
.label-count {
  font-size: 18px;
}

.label-count {
  text-align: right;
}

.description-block {
  min-height: 1.25in;
  display: grid;
  place-items: start center;
  padding-top: 0.14in;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.22;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ship-to-block {
  min-height: 1.05in;
  margin-top: auto;
}

.ship-to-block p {
  margin: 0.13in 0 0;
  line-height: 1.15;
}

.ship-to-data {
  font-weight: 800;
}

.opening-block {
  margin-top: 0.08in;
  text-align: left;
}

.opening-block strong {
  font-size: 28px;
  line-height: 1.1;
}

.opening-value-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
}

.opening-value-row strong {
  text-align: center;
}

.opening-value-row span {
  color: #2f3a4a;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.barcode-block {
  min-height: 0.37in;
  display: grid;
  place-items: center;
  margin-top: 0.08in;
  border: 0;
}

.barcode-value {
  display: block;
  width: 100%;
  color: #20242c;
  font-family: "Free 3 of 9", "3 of 9 Barcode", "Libre Barcode 39", "Code 39", monospace;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  transform: scaleX(0.78);
  transform-origin: center;
}

.hardware-label {
  position: relative;
  width: 3in;
  height: 2in;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.02in;
  padding: 0.04in;
  border: 2px solid #111;
  background: #fff;
  color: #000;
  font: 12px/1.08 Arial, Helvetica, sans-serif;
}

/*
  Job-position stamp. Absolutely positioned so it costs zero flow height inside
  the fixed-height label box, and clipped by the label's own overflow:hidden.
  It reads "12/150" -- the label's place in the whole print job, not the
  per-line copy count -- so a missing label can be named exactly.
*/
.job-stamp {
  position: absolute;
  left: 0.15in;
  bottom: 0.05in;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.hardware-label .job-stamp {
  left: 0.05in;
  bottom: 0.02in;
  font-size: 7px;
}

.hardware-top-grid {
  display: grid;
  grid-template-columns: 1fr 0.70in 0.60in;
  gap: 0.02in 0.04in;
  align-items: start;
}

.hardware-top-grid span,
.hardware-left span,
.hardware-order-row span {
  font-weight: 400;
}

.hardware-tag {
  display: grid;
  grid-template-columns: 0.34in 1fr;
  gap: 0.03in;
  font-size: 10px;
}

.hardware-tag strong {
  font-size: 14px;
  line-height: 1;
}

.hardware-location {
  grid-column: 2 / 4;
  align-self: start;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.05;
  text-align: right;
  overflow-wrap: anywhere;
}

.hardware-qty {
  display: grid;
  grid-template-columns: 0.34in 1fr;
  gap: 0.03in;
  font-size: 9px;
}

.hardware-qty strong,
.hardware-item,
.hardware-left strong,
.hardware-job-block strong {
  font-weight: 800;
}

.hardware-item {
  grid-column: 2 / 4;
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
}

.hardware-body-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.12in 1fr;
  gap: 0.08in;
}

.hardware-left {
  display: grid;
  align-content: start;
  gap: 0.02in;
  font-size: 9px;
}

.hardware-description {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.hardware-order-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.04in;
  justify-items: end;
  font-size: 9px;
}

.hardware-order-row span {
  justify-self: start;
}

.hardware-job-block {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.08;
  white-space: nowrap;
}

.hardware-barcode-block {
  height: 0.22in;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
}

.hardware-barcode-value {
  width: 100%;
  overflow: hidden;
  font-family: "Free 3 of 9", "Free 3 of 9 Extended", "3 of 9 Barcode", "Libre Barcode 39", "Code 39", monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .app-shell {
    width: min(100vw - 20px, 100%);
    padding-top: 20px;
  }

  .hero-card,
  .table-card {
    border-radius: 22px;
    padding: 20px;
  }

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

  .bc-context-panel,
  .filter-bar {
    grid-template-columns: 1fr;
  }

  .lookup-row {
    grid-template-columns: 1fr;
  }

  .table-head {
    align-items: stretch;
    flex-direction: column;
  }

  .table-actions {
    justify-content: stretch;
  }

  .table-actions button,
  .table-actions .csv-import-btn {
    flex: 1 1 auto;
  }

  .session-panel {
    left: 10px;
    right: 10px;
    width: auto;
  }
}

/*
  The app document has no printable label layout -- deliberately. It used to
  carry a full @media print block that unhid the preview modal and printed the
  on-screen cards, which meant Ctrl+P produced labels from a completely
  separate (and unhardened) set of rules than the Print Labels button. Two
  print paths meant one of them was always wrong. Ctrl+P is now intercepted in
  main.js and routed into the print frame; this block is only the backstop for
  a browser menu print that JavaScript cannot intercept, and it prints a note
  rather than a batch of mis-paginated labels.
*/
@media print {
  body > * {
    display: none !important;
  }

  body::before {
    content: "To print labels, use the Print Labels button in MBI Order Labels.";
    display: block;
    padding: 0.5in;
    color: #000;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
  }
}

@media (max-width: 560px) {
  .app-title-lockup {
    gap: 10px;
  }

  .app-title-lockup h1 {
    font-size: 2rem;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}