/* ══════════════════════════════════════════════════════════════
   Ginny — style.css (tokenised)
   ──────────────────────────────────────────────────────────────
   All hard-coded colours/fonts from the original style.css have
   been replaced with vars defined in `colors_and_type.css`.
   Load order in base.html:
       <link rel="stylesheet" href="{% static 'css/colors_and_type.css' %}" />
       <link rel="stylesheet" href="{% static 'css/style.css' %}" />
   Layout, selectors, sizing and class names are UNCHANGED.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--ink-strong);
  background: var(--surface-bg);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Nav ─────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border);
}

.site-nav a {
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.nav-brand img {
  display: block;
}
.nav-brand span {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.nav-brand:hover {
  text-decoration: none;
}

.site-nav span {
  margin-left: auto;
  color: var(--ink-medium);
  font-size: 0.9rem;
}

.site-nav button {
  padding: 0.3rem var(--space-3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  cursor: pointer;
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.site-nav button:hover {
  background: var(--surface-sunken);
}

/* ── Main Content ────────────────────────────────────── */
main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-6);
}

/* ── Typography ──────────────────────────────────────── */
h1,
h2,
h3 {
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
  color: var(--ink-strong);
}

h1 {
  font-size: var(--text-xl);
}
h2 {
  font-size: var(--text-lg);
}
h3 {
  font-size: var(--text-md);
}

p {
  margin-bottom: var(--space-4);
  color: var(--ink-strong);
}

/* ── Utility ─────────────────────────────────────────── */
a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

/* ── Login ───────────────────────────────────────────── */
.login-card {
  max-width: 400px;
  margin: 4rem auto;
  padding: var(--space-8);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.login-card h1 {
  font-size: var(--text-lg);
}

.btn-login {
  display: inline-block;
  padding: 0.6rem var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-inverse);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
}

.btn-login:hover {
  background: var(--color-primary-hover);
}

/* ── KPI Cards ──────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.kpi-label {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
}

.kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
}

.kpi-sub {
  font-size: 0.85rem;
  color: var(--ink-subtle);
}

.kpi-pct {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--ink-medium);
  margin-left: 0.25rem;
}

/* ── KPI delta pill (period-over-period %) ──────────── */
.kpi-delta {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: var(--text-micro);
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-wide);
  vertical-align: middle;
  white-space: nowrap;
}

.kpi-value .kpi-delta {
  font-size: 0.7rem;
  position: relative;
  top: -0.15em;
}

.kpi-delta-up {
  background: #d8eade;
  color: var(--color-success);
}

.kpi-delta-down {
  background: #f7e2de;
  color: var(--color-danger);
}

.kpi-delta-flat {
  background: var(--surface-sunken);
  color: var(--ink-subtle);
}

.kpi-delta-new {
  background: #e4e8f7;
  color: #3c478c;
}

/* ── KPI Grid: wide variant (fewer, wider columns) ─── */
.kpi-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

/* ── Layout A: Side-by-Side Comparison Card ────────── */
.kpi-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.kpi-compare-side {
  display: flex;
  flex-direction: column;
}

.kpi-compare-delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0 var(--space-2);
}

.kpi-compare-delta-label {
  font-size: var(--text-micro-xs);
  color: var(--ink-subtle);
  white-space: nowrap;
}

/* ── Layout B: Primary + Stacked Previous ──────────── */
.kpi-stacked .kpi-stacked-prev {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.kpi-stacked-prev-label {
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-subtle);
}

.kpi-stacked-prev-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-medium);
}

.kpi-stacked-prev-sub {
  font-size: 0.8rem;
  color: var(--ink-subtle);
}

/* ── Layout C: Compact Inline ──────────────────────── */
.kpi-compact {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kpi-compact-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.kpi-compact-label {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
  min-width: 6rem;
}

.kpi-compact-value {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
}

.kpi-compact-orders {
  font-size: 0.85rem;
  color: var(--ink-subtle);
}

.kpi-compact-prev {
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-soft);
}

.kpi-compact-prev .kpi-compact-label {
  color: var(--ink-subtle);
}

.kpi-compact-prev .kpi-compact-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-medium);
}

/* ── Dashboard Header ───────────────────────────────── */
.dashboard-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dashboard-header h1 {
  margin-bottom: 0;
}

.estimate-note {
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
  font-size: 0.8rem;
  color: var(--ink-subtle);
}

.btn-refresh {
  padding: 0.4rem var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-inverse);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
}

.btn-refresh:hover {
  background: var(--color-primary-hover);
}

.btn-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.refresh-status {
  font-size: 0.85rem;
  color: var(--ink-medium);
}

.refresh-status.success {
  color: var(--color-success);
}

.refresh-status.error {
  color: var(--color-danger);
}

.section-heading {
  margin-top: var(--space-8);
  margin-bottom: var(--space-1);
  font-size: 1.15rem;
  color: var(--ink-medium);
}

/* ── Product Table ──────────────────────────────────── */
.product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.product-table th {
  text-align: right;
  padding: 0.35rem var(--space-2);
  font-weight: 600;
  font-size: var(--text-micro-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: 2px solid var(--border);
  color: var(--ink-medium);
}

.product-table td {
  text-align: right;
  padding: 0.35rem var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.product-table th.col-date,
.product-table td.col-date {
  text-align: left;
}

.product-table .col-scented {
  color: var(--color-success);
}

.product-table .col-unscented {
  color: var(--color-info);
}

.product-table .col-buds {
  color: var(--birren-cologne);
}

.product-table .col-total {
  color: var(--ink-strong);
}

.product-table .col-spend {
  color: var(--ink-medium);
}

.product-table .day-name {
  color: var(--ink-subtle);
  font-size: var(--text-micro);
}

.product-table .row-today {
  background: var(--surface-overlay);
}

.product-table td.today {
  color: var(--color-info);
  font-weight: 600;
}

.product-table .bold {
  font-weight: 600;
}

.product-table tfoot .row-totals {
  border-top: 2px solid var(--border-strong);
}

.product-table tfoot .row-totals td {
  border-bottom: none;
}

.product-table tfoot .col-date {
  color: var(--color-primary);
  font-weight: 700;
}

.product-table tfoot .col-scented {
  font-weight: 700;
}

.product-table tfoot .col-unscented {
  font-weight: 700;
}

.product-table tfoot .col-buds {
  font-weight: 700;
}

.product-table tfoot .col-total {
  font-weight: 700;
  color: var(--color-primary);
}

.product-table tfoot .col-spend {
  font-weight: 700;
}

/* ── Section Divider ────────────────────────────────── */
.section-divider {
  margin: var(--space-12) 0 var(--space-8);
  border-top: 2px solid var(--border);
}

/* ── Amazon KPI accent ─────────────────────────────── */
.kpi-card.kpi-amazon {
  border-top: 3px solid var(--color-accent-amz);
}

/* ── Chart Cards ────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.chart-card {
  padding: var(--space-5);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.chart-card h2 {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  color: var(--ink-medium);
}

.chart-wide {
  grid-column: 1 / -1;
}

/* ── Nav Links (pill-group) ────────────────────────────── */
.nav-links {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: visible;
}

.nav-link {
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-strong);
  background: var(--surface-panel);
  border-right: 1px solid var(--border);
}

.nav-link:last-child {
  border-right: none;
}

.nav-link:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.nav-link.active {
  background: var(--color-primary, #0057b7);
  color: #fff;
}

.nav-link.active:hover {
  background: var(--color-primary, #0057b7);
}

.nav-dropdown {
  position: relative;
  display: flex;
}

.nav-dropdown .nav-link {
  border-right: 1px solid var(--border);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.35rem 0;
  z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.45rem var(--space-4);
  font-size: 0.85rem;
  color: var(--ink-strong);
  text-decoration: none;
}

.nav-dropdown-menu a:hover {
  background: var(--surface-sunken);
  color: var(--color-primary);
}

/* ── Production Pages ─────────────────────────────────── */
.prod-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.prod-header h1 {
  margin-bottom: 0;
  margin-right: auto;
}

.btn-primary {
  display: inline-block;
  padding: 0.45rem var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-inverse);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  color: var(--ink-inverse);
}

.btn-filter {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  cursor: pointer;
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.btn-filter:hover {
  background: var(--surface-sunken);
}

.breakdown-filter {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.breakdown-btn {
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-strong);
  background: var(--surface-panel);
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.breakdown-btn:last-child {
  border-right: none;
}

.breakdown-btn:hover {
  background: var(--surface-sunken);
}

.breakdown-btn.active {
  background: var(--color-primary, #0057b7);
  color: #fff;
}

.breakdown-btn.primary {
  background: var(--color-primary);
  color: #fff;
  border-right: none;
  border-radius: var(--radius-md);
}

.breakdown-btn.primary:hover {
  background: var(--color-primary-hover);
}

/* ── Breakdown buttons + date picker stay on one line ── */
.breakdown-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

/* ── Date Range Picker (breakdown bar) ─────────────── */
.date-range-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.date-range-picker input[type="date"] {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.date-range-picker input[type="date"]:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}

.date-range-sep {
  color: var(--ink-subtle);
  font-size: 0.85rem;
}

.date-range-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-subtle);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.date-range-clear:hover {
  background: var(--surface-sunken);
  color: var(--color-danger);
}

.btn-danger-sm {
  padding: 0.2rem 0.6rem;
  font-size: var(--text-micro);
  color: var(--color-danger);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
}

.btn-danger-sm:hover {
  background: #f7e2de; /* soft danger tint — derived from --birren-red */
  border-color: var(--color-danger);
}

/* ── Status Badges ────────────────────────────────────── */
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: var(--text-micro);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.status-active {
  background: #d8eade; /* soft success tint */
  color: var(--color-success);
}

.status-inactive {
  background: var(--surface-sunken);
  color: var(--ink-medium);
}

.status-discontinued {
  background: #f7e2de; /* soft danger tint */
  color: var(--color-danger);
}

.status-development {
  background: #fff4d6;
  color: #8a6200;
}

.status-subassembly {
  background: #e4e8f7;
  color: #3c478c;
}

/* ── BOM table / line types ───────────────────────────── */
.bom-summary {
  margin: var(--space-3) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.bom-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bom-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bom-qty-cell {
  white-space: nowrap;
}

.bom-qty-input {
  width: 6.5rem;
  padding: 0.25rem 0.4rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.btn-edit-sm {
  padding: 0.45rem var(--space-4);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-medium);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
}

.btn-edit-sm:hover {
  background: var(--surface-sunken);
  color: var(--ink-strong);
}

.line-type {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: var(--text-micro);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--surface-sunken);
  color: var(--ink-medium);
}

.line-type-material {
  background: #e4f1e8;
  color: var(--color-success);
}
.line-type-subassembly {
  background: #e4e8f7;
  color: #3c478c;
}
.line-type-labor {
  background: #fce6d4;
  color: #8a4a00;
}
.line-type-overhead {
  background: #efe4f7;
  color: #5b3c8c;
}
.line-type-wastage {
  background: #f7e2de;
  color: var(--color-danger);
}

.line-subassembly-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  font-size: var(--text-micro);
  border-radius: var(--radius-pill);
  background: #e4e8f7;
  color: #3c478c;
  text-transform: uppercase;
}

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

/* ── Filters ──────────────────────────────────────────── */
.prod-filters {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.prod-filters input[type="text"] {
  padding: 0.4rem var(--space-3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 220px;
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.prod-filters select {
  padding: 0.4rem var(--space-3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.prod-filters a {
  font-size: 0.85rem;
}

/* ── Production Tables ────────────────────────────────── */
.prod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.prod-table th {
  text-align: left;
  padding: var(--space-2) 0.65rem;
  font-weight: 600;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
  border-bottom: 2px solid var(--border);
}

.prod-table td {
  padding: var(--space-2) 0.65rem;
  border-bottom: 1px solid var(--border-soft);
}

.prod-table tbody tr:hover {
  background: var(--surface-overlay);
}

.prod-table a {
  font-weight: 500;
}

.prod-card > .prod-table:last-child {
  margin-bottom: 0;
}

.empty-state {
  text-align: center;
  color: var(--ink-subtle);
  padding: var(--space-8) var(--space-4);
}

/* ── Tabs ─────────────────────────────────────────────── */
.prod-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-6);
}

.prod-tab {
  padding: 0.6rem var(--space-5);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-medium);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.prod-tab:hover {
  color: var(--ink-strong);
}

.prod-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--border-strong);
  font-weight: 600;
}

/* ── Cards ────────────────────────────────────────────── */
.prod-card {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.prod-card h2 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
  color: var(--ink-strong);
}

.prod-card h3 {
  font-size: 0.95rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--ink-medium);
}

/* ── Form Grid ────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.form-grid input,
.form-grid select {
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 400;
  color: var(--ink-strong);
  background: var(--surface-panel);
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
}

.form-grid input:focus,
.form-grid select:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.form-actions a {
  font-size: 0.85rem;
}

/* ── Inline Form (add manufacturer/material rows) ─────── */
.inline-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.inline-form select,
.inline-form input {
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.inline-form select {
  min-width: 200px;
}

.inline-form input {
  max-width: 120px;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-medium);
}

/* ── Role Tags ────────────────────────────────────────── */
.role-tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-size: var(--text-micro-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.role-mfr {
  background: #dce7f2; /* soft info tint */
  color: var(--color-info);
}

.role-sup {
  background: #f6e3d2; /* soft hazard tint */
  color: var(--color-accent-amz);
}

/* ── Form Checkboxes ─────────────────────────────────── */
.form-checkboxes {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-strong);
  cursor: pointer;
}

/* ── History / Change fields ──────────────────────────── */
.change-field {
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Meta line ────────────────────────────────────────── */
.prod-meta {
  font-size: var(--text-caption);
  color: var(--ink-subtle);
  margin-top: var(--space-4);
}

/* ── Submit button: in-flight state ───────────────────── */
.btn-primary.is-saving {
  background: var(--ink-medium);
  cursor: progress;
  opacity: 0.85;
}

.btn-primary.is-saving::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  border: 2px solid rgba(244, 241, 232, 0.5); /* --ink-inverse @ 50% */
  border-top-color: var(--ink-inverse);
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Marketing Controls ───────────────────────────────── */
.marketing-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.marketing-controls select {
  padding: 0.4rem var(--space-3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.marketing-controls label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-medium);
}

.marketing-controls .date-display {
  font-size: 0.85rem;
  color: var(--ink-subtle);
}

/* ── Toast messages ───────────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 9999;
}

.toast {
  min-width: 12rem;
  padding: 0.6rem var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ink-strong);
  color: var(--ink-inverse);
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s var(--ease-out);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.toast-success {
  background: var(--color-success);
}

.toast-error {
  background: var(--color-danger);
}

.toast-hide {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   Dark-mode overrides for hardcoded light-tint backgrounds.
   These use rgba() so they work on the dark surface.
   ══════════════════════════════════════════════════════════════ */
:root.dark .kpi-delta-up,
[data-theme="dark"] .kpi-delta-up {
  background: rgba(107, 168, 126, 0.2);
  color: #8ecba1;
}

:root.dark .kpi-delta-down,
[data-theme="dark"] .kpi-delta-down {
  background: rgba(213, 90, 80, 0.2);
  color: #e88479;
}

:root.dark .kpi-delta-flat,
[data-theme="dark"] .kpi-delta-flat {
  background: rgba(168, 168, 158, 0.14);
  color: var(--ink-subtle);
}

:root.dark .kpi-delta-new,
[data-theme="dark"] .kpi-delta-new {
  background: rgba(111, 163, 209, 0.18);
  color: #9bbede;
}

/* Status badges */
:root.dark .status-active,
[data-theme="dark"] .status-active {
  background: rgba(107, 168, 126, 0.18);
  color: #8ecba1;
}

:root.dark .status-inactive,
[data-theme="dark"] .status-inactive {
  background: rgba(168, 168, 158, 0.14);
  color: #a8a89e;
}

:root.dark .status-discontinued,
[data-theme="dark"] .status-discontinued {
  background: rgba(213, 90, 80, 0.18);
  color: #e88479;
}

:root.dark .status-development,
[data-theme="dark"] .status-development {
  background: rgba(232, 196, 90, 0.15);
  color: #e8c45a;
}

:root.dark .status-subassembly,
[data-theme="dark"] .status-subassembly {
  background: rgba(111, 163, 209, 0.18);
  color: #9bbede;
}

/* Role tags */
:root.dark .role-mfr,
[data-theme="dark"] .role-mfr {
  background: rgba(111, 163, 209, 0.18);
  color: #9bbede;
}

:root.dark .role-sup,
[data-theme="dark"] .role-sup {
  background: rgba(232, 148, 86, 0.18);
  color: #f0b082;
}

/* BOM line-type badges */
:root.dark .line-type-material,
[data-theme="dark"] .line-type-material {
  background: rgba(107, 168, 126, 0.18);
  color: #8ecba1;
}

:root.dark .line-type-subassembly,
[data-theme="dark"] .line-type-subassembly {
  background: rgba(111, 163, 209, 0.18);
  color: #9bbede;
}

:root.dark .line-type-labor,
[data-theme="dark"] .line-type-labor {
  background: rgba(232, 148, 86, 0.18);
  color: #f0b082;
}

:root.dark .line-type-overhead,
[data-theme="dark"] .line-type-overhead {
  background: rgba(143, 100, 180, 0.18);
  color: #c0a0e0;
}

:root.dark .line-type-wastage,
[data-theme="dark"] .line-type-wastage {
  background: rgba(213, 90, 80, 0.18);
  color: #e88479;
}

/* Nav active + breakdown active buttons */
:root.dark .nav-link.active,
[data-theme="dark"] .nav-link.active,
:root.dark .breakdown-btn.active,
[data-theme="dark"] .breakdown-btn.active {
  background: var(--color-primary);
  color: var(--ink-inverse);
}

/* btn-primary in dark */
:root.dark .btn-primary,
[data-theme="dark"] .btn-primary {
  background: var(--color-primary);
  color: var(--ink-inverse);
}

:root.dark .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover {
  background: var(--color-primary-hover);
}

/* Toast dark overrides */
:root.dark .toast,
[data-theme="dark"] .toast {
  background: var(--surface-panel);
  color: var(--ink-strong);
  border-color: var(--border);
}

/* Amazon KPI accent border */
:root.dark .kpi-amazon,
[data-theme="dark"] .kpi-amazon {
  border-top-color: var(--birren-orange);
}

/* btn-danger-sm */
:root.dark .btn-danger-sm:hover,
[data-theme="dark"] .btn-danger-sm:hover {
  background: rgba(213, 90, 80, 0.15);
  border-color: var(--birren-red);
}

/* Theme toggle */
.theme-toggle {
  padding: 0.3rem var(--space-3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  cursor: pointer;
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.theme-toggle:hover {
  background: var(--surface-sunken);
}

/* ── Inventory On-Hand Grid ───────────────────────────── */
.inv-grid-wrap {
  overflow-x: auto;
}

.inv-grid {
  min-width: 100%;
  white-space: nowrap;
}

.inv-grid th.inv-grid-loc {
  text-align: center;
}

.inv-grid-loc-kind {
  font-weight: 400;
  font-size: var(--text-micro);
  color: var(--ink-subtle);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.inv-grid-cell {
  padding: 4px !important;
  text-align: center;
}

.inv-grid-input {
  width: 80px;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.inv-grid-input:focus {
  outline: none;
  border-color: var(--accent);
}

.inv-grid td.inv-grid-total {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inv-grid th.inv-grid-total {
  text-align: right;
}

.inv-grid-brand {
  color: var(--ink-subtle);
  font-size: var(--text-micro);
}

.status-fulfillment {
  background: var(--accent-soft);
  color: var(--accent);
}
.status-manufacturer {
  background: var(--surface-overlay);
  color: var(--ink-medium);
}
.status-transit {
  background: var(--surface-overlay);
  color: var(--ink-medium);
}
.status-receiving {
  background: var(--surface-overlay);
  color: var(--ink-medium);
}

/* ── Forecasting brand picker ─────────────────────────── */
.forecast-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.forecast-brand-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.12s,
    transform 0.12s;
}

.forecast-brand-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.forecast-brand-name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink-strong);
}

.forecast-brand-status {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-subtle);
}

.forecast-brand-card-active .forecast-brand-status {
  color: var(--accent);
}

.forecast-brand-desc {
  font-size: var(--text-sm);
  color: var(--ink-medium);
}

.fba-mix-col {
  text-align: right;
  width: 120px;
}

.fba-mix-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fba-mix-input {
  width: 90px;
}

/* ── CSV Import card ──────────────────────────────────── */
.csv-import-card {
  margin-bottom: var(--space-4);
}

.csv-import-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.csv-upload-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.csv-upload-form input[type="file"] {
  font-size: var(--text-sm);
  color: var(--ink-strong);
}

.csv-import-help {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-medium);
}

/* ── Forecast Editor Grid ─────────────────────────────── */
.forecast-grid-wrap {
  overflow-x: auto;
}

/* When the scroll container is the .prod-card itself, zero horizontal padding
   so the sticky-left column has nothing to its left to peek through. The
   table cells supply visual padding inside the cells. */
.prod-card.forecast-grid-wrap {
  padding-left: 0;
  padding-right: 0;
}

.forecast-grid {
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
}

.forecast-grid th,
.forecast-grid td {
  border-bottom: 1px solid var(--border-soft);
}

.forecast-grid-row-label {
  position: sticky;
  left: 0;
  background: var(--surface-panel);
  z-index: 1;
  min-width: 200px;
  border-right: 1px solid var(--border);
  padding: var(--space-2) 0.65rem !important;
  text-align: left;
  font-weight: normal;
}

.forecast-grid-month {
  text-align: center !important;
  min-width: 90px;
}

.forecast-grid-cell {
  padding: 4px !important;
  text-align: center;
}

.forecast-row-channel-label {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--ink-medium);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.forecast-row-fg-total td,
.forecast-row-category-total td,
.forecast-row-grand-total td {
  background: var(--surface-overlay);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.forecast-row-category-total td {
  background: var(--surface-sunken, var(--surface-overlay));
  border-top: 1px solid var(--border);
}

.forecast-grid-group-header {
  text-align: center !important;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-medium);
  font-weight: 600;
  padding: var(--space-2) 0.65rem !important;
  border-bottom: 1px solid var(--border);
}

.forecast-actual-col {
  background: var(--surface-sunken, var(--surface-overlay));
}

.forecast-grid-group-header.forecast-actual-group {
  border-right: 2px solid var(--border);
}

.forecast-actual-col-last {
  border-right: 2px solid var(--border) !important;
}

.forecast-row-grand-total td {
  border-top: 2px solid var(--border);
}

.forecast-row-category-header th,
.forecast-row-category-header td {
  background: var(--surface-sunken, var(--surface-overlay));
  border-top: 2px solid var(--border);
  padding: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-micro);
  color: var(--ink-medium);
  font-weight: 600;
}

/* Inner sticky wrapper so the category label/toggle stays visible
   while horizontally scrolling. The category cell spans the full row,
   so the inner content (not the cell itself) needs to stick. */
.forecast-row-category-content {
  position: sticky;
  left: 0;
  display: inline-block;
}

.forecast-category-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0.75rem;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.forecast-category-toggle:hover {
  background: var(--surface-overlay);
}

.forecast-category-chevron {
  display: inline-block;
  width: 0.75rem;
  color: var(--ink-medium);
  font-size: var(--text-small, 0.85rem);
}

.forecast-row-total-label {
  color: var(--ink-strong);
}

.forecast-cell-total,
.forecast-cell-grand-total,
.forecast-cell-spend-total {
  text-align: right !important;
  padding: var(--space-2) 0.65rem !important;
}

/* ── Sell-through ─────────────────────────────────────── */
.sell-through-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sell-through-source-label {
  color: var(--ink-medium);
  font-size: var(--text-small);
  margin-right: 0.25rem;
}

.sell-through-source-tab {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink-medium);
  font-size: var(--text-small);
}

.sell-through-source-tab:hover {
  background: var(--surface-overlay);
  color: var(--ink-strong);
}

.sell-through-source-tab.active,
.sell-through-source-tab.active:hover {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--surface-panel);
}

.sell-through-source-tab-disabled {
  opacity: 0.5;
}

.sell-through-grid .sell-through-info {
  text-align: right;
  padding: var(--space-2) 0.65rem !important;
  font-variant-numeric: tabular-nums;
  background: var(--surface-overlay);
  min-width: 70px;
}

/* Fix the row-label width in sell-through so we can sticky-pin the Start
   column at a known left offset. Names longer than this ellipsize. */
.sell-through-grid .forecast-grid-row-label {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sell-through-grid .sell-through-cell-start {
  position: sticky;
  left: 220px;
  z-index: 1;
  background-color: var(--surface-panel);
  background-image: linear-gradient(var(--surface-overlay), var(--surface-overlay));
  border-right: 1px solid var(--border);
}
.sell-through-grid th.sell-through-cell-start {
  z-index: 2;
}

.sell-through-cell {
  text-align: right !important;
  padding: var(--space-2) 0.5rem !important;
  font-variant-numeric: tabular-nums;
}

.sell-through-cell-demand {
  display: block;
  font-size: var(--text-micro);
  color: var(--ink-medium);
  font-variant-numeric: tabular-nums;
}
.sell-through-cell-on-hand {
  display: block;
  font-weight: 500;
}

.sell-through-cell.cell-warn {
  background: rgba(234, 179, 8, 0.18);
  color: #92400e;
}

.sell-through-cell.cell-stockout {
  background: rgba(239, 68, 68, 0.22);
  color: #991b1b;
  font-weight: 600;
}

.sell-through-cell.cell-reorder {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.sell-through-suggested {
  color: var(--ink-medium);
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
}
.sell-through-suggested-higher {
  color: #c77700;
}

.sell-through-suggest-po {
  display: block;
  margin-top: 0.15rem;
}
.sell-through-suggest-po button {
  font-size: var(--text-micro);
  padding: 1px 4px;
  border: 1px solid #2563eb;
  background: transparent;
  color: #2563eb;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.sell-through-suggest-po button:hover {
  background: #2563eb;
  color: #fff;
}

.sell-through-transfer-in,
.sell-through-transfer-out {
  display: block;
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
  font-style: italic;
  white-space: nowrap;
}
.sell-through-transfer-in {
  color: #047857;
}
.sell-through-transfer-out {
  color: #b45309;
}
[data-theme="dark"] .sell-through-transfer-in {
  color: #6ee7b7;
}
[data-theme="dark"] .sell-through-transfer-out {
  color: #fcd34d;
}

[data-theme="dark"] .sell-through-cell.cell-warn {
  color: #fde68a;
}
[data-theme="dark"] .sell-through-cell.cell-stockout {
  color: #fca5a5;
}

.legend-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
  font-size: var(--text-micro);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.legend-pill.legend-warn {
  background: rgba(234, 179, 8, 0.18);
  color: #92400e;
}
.legend-pill.legend-stockout {
  background: rgba(239, 68, 68, 0.22);
  color: #991b1b;
}
.legend-pill.legend-reorder {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  color: var(--ink-strong);
}

/* Bulk-edit grids (FinishedGood, RawMaterial) */
.bulk-edit-wrap { overflow-x: auto; padding: 0; }
.bulk-edit-table { font-size: var(--text-small); }
.bulk-edit-table th,
.bulk-edit-table td { white-space: nowrap; padding: 0.35rem 0.5rem; vertical-align: middle; }
.bulk-input {
  width: 100%; min-width: 6rem; box-sizing: border-box;
  padding: 0.25rem 0.4rem; font: inherit; font-size: var(--text-small);
  border: 1px solid var(--border-soft, #d8d8d8); border-radius: 3px;
  background: var(--surface-elevated, #fff);
}
.bulk-input:focus { outline: 2px solid var(--accent, #2e7d32); outline-offset: -2px; }
.bulk-input-wide   { min-width: 16rem; }
.bulk-input-lg     { min-width: 12rem; }
.bulk-input-md     { min-width: 9rem; }
.bulk-input-narrow { min-width: 3rem; max-width: 4.5rem; }
.bulk-input-num    { text-align: right; font-variant-numeric: tabular-nums; }
.bulk-edit-name-cell {
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 18rem;
}
.bulk-edit-name-cell .bulk-input { flex: 1; }
.bulk-edit-detail-link {
  flex: 0 0 auto; color: var(--ink-medium);
  text-decoration: none; font-size: 1rem;
}
.bulk-edit-detail-link:hover { color: var(--accent, #2e7d32); }
.bulk-edit-actions {
  position: sticky; bottom: 0; background: var(--surface-base, #fff);
  border-top: 1px solid var(--border-soft, #e0e0e0);
  padding: 0.75rem 0; margin-top: 1rem; display: flex;
  align-items: center; gap: 1rem;
}
.bulk-edit-count { color: var(--ink-medium); font-size: var(--text-small); }

.btn-link-inline {
  background: transparent;
  border: 1px solid var(--border-soft, #d8d8d8);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--text-micro);
  color: #2563eb;
  cursor: pointer;
  margin-left: 0.25rem;
}
.btn-link-inline:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* ============================================================
   Print stylesheet — Purchase Order document
   Screen UI hides .print-only; print hides .screen-only and
   reformats the page as a clean PO document.
   ============================================================ */
.print-only { display: none; }

/* PO document blocks (visible only when printing — display set in @media print) */
.po-print-doc {
  margin-bottom: 1.5rem;
}
.po-print-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #000;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.po-print-letterhead h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.po-print-letterhead p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #444;
}
.po-print-meta {
  text-align: right;
}
.po-print-meta h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.po-print-meta table {
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-left: auto;
}
.po-print-meta th {
  text-align: right;
  font-weight: 600;
  padding: 2px 0.6rem 2px 0;
  color: #444;
}
.po-print-meta td {
  text-align: left;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.po-print-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.po-print-addresses h3 {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  border-bottom: 1px solid #999;
  padding-bottom: 0.2rem;
}
.po-print-addresses p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.po-print-terms {
  font-size: 0.85rem;
  border-top: 1px solid #ccc;
  padding-top: 0.5rem;
  margin: 0;
}
.po-print-footer {
  margin-top: 2rem;
  page-break-inside: avoid;
}
.po-print-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.po-print-sig-line {
  border-bottom: 1px solid #000;
  height: 2.5rem;
}
.po-print-sig-label {
  font-size: 0.75rem;
  color: #444;
  margin-top: 0.25rem;
}
.po-print-notes {
  margin-top: 1.5rem;
  font-size: 0.85rem;
}
.po-print-notes h3 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  margin: 0 0 0.3rem;
}

@media print {
  /* Hide everything not part of the document */
  .screen-only,
  body > nav,
  nav,
  .messages,
  .messages-container { display: none !important; }

  .print-only { display: block !important; }

  /* Reset page chrome */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }
  .prod-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem 0 !important;
    border-radius: 0 !important;
  }
  .prod-card h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555 !important;
    border-bottom: 1px solid #999;
    padding-bottom: 0.2rem;
    margin: 0 0 0.5rem;
  }

  /* Tables — clean black-on-white, tight spacing */
  .prod-table {
    border-collapse: collapse !important;
    width: 100%;
    font-size: 9.5pt;
  }
  .prod-table th,
  .prod-table td {
    border-bottom: 1px solid #bbb !important;
    padding: 0.35rem 0.5rem !important;
    background: transparent !important;
    color: #000 !important;
  }
  .prod-table thead th {
    background: #eee !important;
    border-bottom: 1px solid #000 !important;
    font-weight: 600;
  }

  /* Don't break a table row across pages */
  .prod-table tr { page-break-inside: avoid; }

  /* Status badges — collapse to plain text in print */
  .status-badge {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    padding: 1px 4px !important;
    font-size: 0.75rem;
  }

  @page {
    size: letter;
    margin: 0.5in;
  }
}