/* ============================================================
Purchase Orders v2 — show + edit pages.
Show page is the canonical visual source (iterated past the
original spec/po_ui_v2/POViewPrototype.html). Edit page mirrors
show's DOM and patterns. Both wrap content in:
...
...
IMPORTANT: stylesheet_link_tag :app bundles every CSS file in
app/assets/stylesheets/ on every page, so every selector here
MUST be scoped under .po-v2 to prevent collisions with
replenishment_v2.css (.sku-cell), application.css (.po-tab-panel,
.pagination-*, etc.), or any future stylesheet.
Modals (.po-modal*) are rendered inside .po-v2 — their
position:fixed handles overlay z-index regardless of nesting.
============================================================ */
.po-v2 {
/* ---------- BASE TOKENS ----------
--bg, --ink, --border, --accent, --green, --amber, --red, --purple,
--muted, --light, --surface, --surface-alt, --border-light, --border-hover
come from application.css. PO show adds the rest. */
--row-divider: #f5f4f2;
--bg-healthy: #dcfce7; --fg-healthy: #16a34a;
--bg-low: #fffbeb; --fg-low: #d97706;
--bg-oos: #fef2f2; --fg-oos: #dc2626;
--bg-over: #f5f3ff; --fg-over: #7c3aed;
--bg-info: #eff6ff; --fg-info: #3b82f6;
--shadow-menu: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-focus: 0 0 0 2px rgba(26, 26, 26, 0.08);
--r-md: 6px;
--r-lg: 8px;
--r-xl: 10px;
--r-2xl: 12px;
--r-full: 999px;
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
}
/* ---------- BREADCRUMB ---------- */
.po-v2 .crumb { font-size: 12px; color: var(--muted); margin-bottom: 10px; padding: 0 4px; }
.po-v2 .crumb a { color: var(--muted); text-decoration: none; }
.po-v2 .crumb a:hover { color: var(--ink); }
/* ---------- UNIFIED PO SURFACE ---------- */
.po-v2 .po-surface {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden;
font-family: var(--font-sans);
color: var(--ink);
}
.po-v2 .po-sec { padding: 18px 24px; border-top: 1px solid var(--border-light); }
.po-v2 .po-sec:first-child { border-top: none; }
.po-v2 .po-sec.tight { padding: 14px 24px; }
.po-v2 .po-sec.flush { padding: 0; }
/* Defeat the legacy .po-tab-panel rule from application.css (display:none + padding-top:16px).
Our show page switches panels via inline style="display:..." but specificity matters
because .po-tab-panel.active sets display:block; we want neither rule to apply. */
.po-v2 .po-tab-panel { padding-top: 0; }
/* ---------- BUTTONS ---------- */
.po-v2 .btn {
font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px 14px;
border-radius: 8px; border: 1px solid transparent; cursor: pointer; display: inline-flex;
align-items: center; gap: 6px; transition: all .15s; line-height: 1; white-space: nowrap;
}
.po-v2 .btn svg { width: 14px; height: 14px; stroke-width: 2; }
.po-v2 .btn-accent { background: var(--accent); color: #fff; padding: 9px 18px; font-size: 13px; }
.po-v2 .btn-accent:hover { opacity: 0.9; }
.po-v2 .btn-secondary { background: #fff; border-color: var(--border-hover); color: var(--ink); }
.po-v2 .btn-secondary:hover { border-color: var(--ink); }
.po-v2 .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 7px 10px; font-weight: 500; }
.po-v2 .btn-ghost:hover { background: var(--surface-alt); color: var(--ink); }
.po-v2 .btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 6px; }
/* button_to wraps in