/* ═══════════════════════════════════════════════════════════════
   Paper v2 design bridge
   Maps the existing tab markup (legacy class names like .sidebar,
   .field-input, .pile-card, .fin-kpi-value, etc.) onto the new
   design's visual language without rewriting the render functions.
   Loaded LAST so it wins on conflicts. Anything in here is purely
   cosmetic — no JS hooks touch these selectors.
   ═══════════════════════════════════════════════════════════════ */

/* ───── Dark-mode legacy var aliases ─────
   shared.css :root defines --surface/--text/--border/etc. as light
   values. pv2-dark only redefines the new --panel/--ink/--line/etc.
   Without these aliases the old vars stay light and form panels,
   borders, and text all stay light in dark mode. */
.pv2-root.pv2-dark{
  /* Legacy alias values for dark — kept in sync with the brand dark tokens in
     v7-paper-v2.css (this file loads last, so these win for the aliases). */
  --bg:#16150f;
  --surface:#211f16;
  --surface2:#29261b;
  --border:#302d21;
  --border-light:#423e2e;
  --text:#f4f1e6;
  --text-dim:#c0baa6;
  --text-faint:#8d8773;
  --accent:#74c274;
  --accent-dim:#9bcf90;
  --green:#74c274;
  --green-dim:rgba(116,194,116,.16);
  --red:#d67088;
  --red-dim:rgba(214,112,136,.16);
  --yellow:#e2b552;
  --yellow-dim:rgba(226,181,82,.16);
  --orange:#c9895f;
}
/* Dark-mode patches for legacy inline backgrounds/colors that hard-code
   light values (some markup uses style="background:#fff" etc.). These
   force-override the most common offenders. */
.pv2-root.pv2-dark .pile-backlog-card,
.pv2-root.pv2-dark .pile-card,
.pv2-root.pv2-dark .pile-comment,
.pv2-root.pv2-dark .pile-backlog-panel,
.pv2-root.pv2-dark .ph-row-stats{background:var(--bg-2);border-color:var(--line);color:var(--ink)}
.pv2-root.pv2-dark .pile-backlog-card *,
.pv2-root.pv2-dark .pile-card *{color:inherit}
.pv2-root.pv2-dark .pile-backlog-card .pile-card-title,
.pv2-root.pv2-dark .pile-card-title{color:var(--ink)}
.pv2-root.pv2-dark .pile-backlog-card-sub,
.pv2-root.pv2-dark .pile-card-row2{color:var(--ink-3)}
.pv2-root.pv2-dark select,
.pv2-root.pv2-dark input,
.pv2-root.pv2-dark textarea{background:var(--panel-2);color:var(--ink);border-color:var(--line);color-scheme:dark}
.pv2-root.pv2-dark .section{background:var(--panel);border-color:var(--line);color:var(--ink)}

/* ───── Suppliers tab — sidebar (#sidebar = sup-rail) ───── */
.pv2-root #view-suppliers{background:var(--bg)}
.pv2-root #sidebar{background:var(--bg-2);border-right:1px solid var(--line);padding:14px 14px 28px}
.pv2-root .sidebar-header{padding:0;border-bottom:0;display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.pv2-root .sidebar-header h2{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0;display:inline-flex;align-items:baseline;gap:10px}
.pv2-root .sidebar-header h2 .count,
.pv2-root .sidebar-header .count{font-family:var(--font);font-size:11px;font-weight:700;background:var(--panel);color:var(--ink-2);padding:1px 8px;border-radius:999px;border:1px solid var(--line);letter-spacing:0}
.pv2-root #search{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font:inherit;font-size:12.5px;color:var(--ink);outline:none;width:100%}
.pv2-root #search:focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.pv2-root #search::placeholder{color:var(--ink-3)}
.pv2-root .sidebar-header select{appearance:none;border:1px solid var(--line);background:var(--panel-2);border-radius:6px;padding:4px 22px 4px 10px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.pv2-root #supplier-list{flex:1;overflow:auto;padding:4px 0 0}

/* Sidebar group headers + supplier rows */
.pv2-root .group-header,
.pv2-root .state-group-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:8px 6px 4px;background:transparent;border:0}
.pv2-root .supplier-item,
.pv2-root .sb-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:6px;border:0;background:transparent;color:var(--ink);font-size:12.5px;cursor:pointer;border-left:2px solid transparent;text-align:left;font-family:inherit}
.pv2-root .supplier-item:hover,
.pv2-root .sb-item:hover{background:var(--panel)}
.pv2-root .supplier-item.active,
.pv2-root .sb-item.active,
.pv2-root .supplier-item.selected{background:var(--panel);border-left-color:var(--green);font-weight:600}

/* Suppliers detail panel header */
.pv2-root #main{background:var(--bg);min-height:100%}
.pv2-root #empty-state{font-family:var(--font-serif);font-size:24px;font-weight:600;color:var(--ink-3);text-align:center;padding:120px 28px;letter-spacing:-.015em}
.pv2-root .detail-header{padding:18px 28px 16px;border-bottom:1px solid var(--line);background:var(--bg);display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.pv2-root .detail-header h1,
.pv2-root #d-name{font-family:var(--font-serif);font-size:28px;font-weight:600;margin:0;letter-spacing:-.02em;color:var(--ink)}
.pv2-root .detail-header .handle,
.pv2-root #d-handle{font-family:var(--font);font-size:12px;color:var(--ink-3);margin-top:4px}
.pv2-root .detail-header .header-actions{display:flex;gap:6px}

/* Sub-tab nav (sup-subtabs / sup-subtab) — styling comes from v10-suppliers.css.
   Tab bodies default-hidden; switchSupplierTab() toggles is-active. */
.pv2-root #sup-subtabs{display:flex;gap:2px;padding:0 28px;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:14px}
.pv2-root .sup-tabbody{display:none}
.pv2-root .sup-tabbody.is-active{display:block}
.pv2-root #detail{padding:0}
.pv2-root #detail > .sup-tabbody.is-active,
.pv2-root #detail > .section.sup-tabbody.is-active{margin:0 28px 14px}

/* ───── Orders table scroll fix ─────
   v7-paper-v2.css sets .pv2-table-wrap { overflow:hidden }, which loads after
   orders.css and clobbers its overflow:auto. With 1000+ orders the table
   gets clipped and there's no way to see rows past the first ~13. Force
   internal vertical scroll here, scoped under .pv2-root so the rule wins. */
.pv2-root .pv2-table-wrap{overflow:auto;max-height:calc(100vh - 200px)}
/* Keep the rail in view while the table scrolls — sticky to the top of
   #view-orders so the action-queue ledger doesn't disappear behind the
   user as they scan the table. */
.pv2-root .pv2-body{align-items:start}
.pv2-root .pv2-rail{position:sticky;top:0;align-self:start;max-height:calc(100vh - 56px);overflow-y:auto}

/* ───── MM order rows: same chrome as everyone else ─────
   orders.css gives .mm and .mm-matched a green-tint background + light-
   pastel border-left, which in dark mode makes the Order column visibly
   lighter than the rest of the row. User wants no MM differentiation.
   Strip the tint + border, re-declare queue stripes so they still color
   the row's left edge for rows that also have a q-* class. */
.pv2-root .io-tbl tbody tr.mm,
.pv2-root .io-tbl tbody tr.mm-matched{background:transparent;border-left-color:transparent}
.pv2-root .io-tbl tbody tr.mm:hover,
.pv2-root .io-tbl tbody tr.mm-matched:hover{background:var(--bg-2)}
.pv2-root .io-tbl tbody tr.q-call    {border-left-color:var(--rust)}
.pv2-root .io-tbl tbody tr.q-nudge   {border-left-color:var(--amber)}
.pv2-root .io-tbl tbody tr.q-watch   {border-left-color:var(--sage)}
.pv2-root .io-tbl tbody tr.q-callin  {border-left-color:var(--plum)}
.pv2-root .io-tbl tbody tr.q-weborder{border-left-color:var(--blue)}
.pv2-root .io-tbl tbody tr.q-source  {border-left-color:var(--orange)}
.pv2-root .io-tbl tbody tr.q-sourcefu{border-left-color:var(--sage)}
.pv2-root .io-tbl tbody tr.q-cost    {border-left-color:#3b82f6}

/* Field/form styling for suppliers detail */
.pv2-root .field-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pv2-root .field-input{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);outline:none}
.pv2-root .field-input:focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-bg)}
.pv2-root .field-input.mono,
.pv2-root textarea.field-input{font-family:var(--font);font-size:12px}
.pv2-root .section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.pv2-root .section h3,
.pv2-root .section-title{font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px}

/* Product / schedule tables in suppliers detail */
.pv2-root .product-table,
.pv2-root .schedule-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12.5px}
.pv2-root .product-table th,
.pv2-root .schedule-table th{text-align:left;font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:9px 10px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.pv2-root .product-table td,
.pv2-root .schedule-table td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink)}
.pv2-root .product-table tbody tr:hover{background:var(--bg-2)}

/* ───── Pile tab ───── */
.pv2-root #view-pile{background:var(--bg)}
.pv2-root .pile-wrap{padding:18px 28px 40px;max-width:1640px;margin:0 auto}
.pv2-root .pile-header{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:none}
.pv2-root .pile-week-title{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pv2-root .pile-week-range{font-family:var(--font);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.pv2-root .pile-sprint,
.pv2-root .pile-backlog{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:none}
.pv2-root .pile-section-head h3{font-family:var(--font-serif);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pv2-root .pile-section-count,
.pv2-root .pile-col-count{font-family:var(--font);background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line);font-weight:700}
.pv2-root .pile-card{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;transition:border-color .12s,transform .08s}
.pv2-root .pile-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.pv2-root .pile-card-title{color:var(--ink);font-weight:600}
.pv2-root .pile-card-row2{font-family:var(--font);color:var(--ink-3)}
.pv2-root .pile-hours-pill{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.pv2-root .pile-hours-pill.is-closed{background:var(--green-bg);border-color:color-mix(in oklab,var(--green) 30%,transparent)}
.pv2-root .pile-hours-name{color:var(--ink-3);font-weight:700;letter-spacing:.16em;font-size:10px;text-transform:uppercase}
.pv2-root .pile-comment{background:var(--bg-2);border:1px solid var(--line);border-radius:8px}

/* ───── Finance tab ───── */
.pv2-root #view-finance{background:var(--bg)}
.pv2-root .fin-wrap{padding:18px 28px 40px;max-width:1640px;margin:0 auto}
.pv2-root .fin-subtabs{padding:6px 28px 0;border-bottom:1px solid var(--line);background:var(--bg);display:flex;gap:4px}
.pv2-root .fin-subtab{appearance:none;border:0;background:transparent;padding:8px 14px 10px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;position:relative;top:1px;text-decoration:none}
.pv2-root .fin-subtab:hover{color:var(--ink)}
.pv2-root .fin-subtab.active,
.pv2-root .fin-subtab.is-active{color:var(--green);border-bottom-color:var(--green);font-weight:600}
.pv2-root .fin-header h2{font-family:var(--font-serif);font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.pv2-root .fin-sub{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.pv2-root .fin-kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pv2-root .fin-kpi-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.pv2-root .fin-kpi-value{font-family:var(--font-serif);font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--green);font-variant-numeric:tabular-nums;margin-top:4px}
/* A negative KPI (a loss, negative margin/net income) must NOT read green.
   Render functions tag negatives with either `neg` or `margin-neg`; cover both.
   Positives keep the default green above. */
.pv2-root .fin-kpi-value.neg,.pv2-root .fin-kpi-value.margin-neg{color:var(--red)}
.pv2-root .fin-kpi-value.pos,.pv2-root .fin-kpi-value.margin-pos{color:var(--green)}
.pv2-root .fin-kpi-sub{font-family:var(--font);font-size:11.5px;color:var(--ink-2);margin-top:6px}
.pv2-root .fin-sync-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.pv2-root .fin-monthly-wrap,
.pv2-root .fin-table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* Scrollable table boxes (Close worklists, Vendors lists): the card skin's
   overflow:hidden would clip them scrollbar-less — restore scrolling. */
.pv2-root .fin-monthly-wrap.fin-scrolly{overflow:auto}
.pv2-root .fin-monthly-table,
.pv2-root .fin-orders-table{font-family:inherit;font-size:12.5px;color:var(--ink)}
.pv2-root .fin-monthly-table thead th,
.pv2-root .fin-orders-table thead th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);text-align:left}
.pv2-root .fin-monthly-table tbody td,
.pv2-root .fin-orders-table tbody td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.pv2-root .fin-monthly-table tbody tr:hover,
.pv2-root .fin-orders-table tbody tr:hover{background:var(--bg-2)}
.pv2-root .month-cell{font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pv2-root .num{font-family:var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ───── Admin / Coverage / Analytics / Content — page-head polish ───── */
/* These tabs don't have a v* design — but their h1/h2 should match the
   same serif eyebrow pattern so the app reads as one app. */
.pv2-root #view-admin h1,
.pv2-root #view-admin h2,
.pv2-root #view-coverage h1,
.pv2-root #view-coverage h2,
.pv2-root #view-analytics h1,
.pv2-root #view-analytics h2,
.pv2-root #view-seo h1,
.pv2-root #view-seo h2{font-family:var(--font-serif);letter-spacing:-.015em;color:var(--ink);font-weight:600}

/* ───── Global polish ───── */
.pv2-root .btn{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font-weight:500;border-radius:7px;padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.pv2-root .btn:hover{background:var(--bg-2)}
.pv2-root .btn-accent{background:var(--green);color:var(--bg);border-color:var(--green-2)}
.pv2-root .btn-accent:hover{background:var(--green-2);color:var(--bg)}
.pv2-root .btn-sm{padding:3px 8px;font-size:11.5px;border-radius:5px}
.pv2-root .btn-red{color:var(--rust);border-color:color-mix(in oklab,var(--rust) 35%,var(--line-strong))}
.pv2-root .btn-red:hover{background:var(--rust-bg)}
.pv2-root .btn-green{color:var(--green);border-color:color-mix(in oklab,var(--green) 35%,var(--line-strong))}
.pv2-root .btn-green:hover{background:var(--green-bg)}
.pv2-root .btn-orange{color:var(--orange);border-color:color-mix(in oklab,var(--orange) 35%,var(--line-strong))}

/* ═══════════════════════════════════════════════════════════════
   Vertical collapsible sidebar nav (replaces the horizontal top bar).
   Logo → suMMa → tabs (icon + label) → bottom tools + bug/task/feature.
   Expanded shows icon+label; collapsed shows icon only.
   ═══════════════════════════════════════════════════════════════ */
.pv2-root{ --nav-w:184px; }
#app.nav-collapsed{ --nav-w:72px; }
#app{ padding-left:var(--nav-w); transition:padding-left .18s ease; }

#nav.pv2-nav{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--nav-w);
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
  padding:14px 8px;
  background:var(--bg-2); border-right:1px solid var(--line); border-bottom:0;
  z-index:40; overflow:hidden;
  transition:width .18s ease;
}

#nav .nav-brand{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 0 14px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--green);
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden;
}
#nav .nav-brand-logo{ width:46px; height:46px; flex:none; border-radius:11px; object-fit:cover; }

#nav .nav-tabs{
  display:flex; flex-direction:column; gap:2px; flex:1 1 auto;
  min-height:0; overflow-y:auto; overflow-x:hidden; margin:0;
}
#nav .nav-tab{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; cursor:pointer; text-decoration:none; border:0; background:transparent;
}
#nav .nav-tab:hover{ background:var(--panel); color:var(--ink); }
#nav .nav-tab.active, #nav .nav-tab.is-active{ background:var(--green); color:#fff; font-weight:600; }
#nav .nav-tab.active .nav-ico, #nav .nav-tab.is-active .nav-ico{ color:#fff; }
.nav-ico{ width:19px; height:19px; flex:none; }
#nav .nav-label{ overflow:hidden; text-overflow:ellipsis; }

#nav .nav-bottom{ display:flex; flex-direction:column; gap:2px; padding-top:8px; margin-top:4px; border-top:1px solid var(--line); }

/* Uniform bottom rows — identity, theme, bug/task/feature, collapse — all match the tab style */
#nav .nav-item,
#nav .nav-identity.pv2-you,
.nav-collapse-btn{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; cursor:pointer; text-align:left; border:0; background:transparent;
}
#nav .nav-item:hover,
#nav .nav-identity.pv2-you:hover,
.nav-collapse-btn:hover{ background:var(--panel); color:var(--ink); }
.nav-theme-glyph{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
#nav .nav-divider{ height:1px; background:var(--line); margin:6px 6px; }
.nav-fab-bug:hover{ color:var(--rust); background:var(--rust-bg); }
.nav-fab-task:hover{ color:var(--green); background:var(--green-bg); }
.nav-fab-feature:hover{ color:var(--amber); background:var(--amber-bg); }

/* Collapsed: hide labels + identity, center icons */
#app.nav-collapsed .nav-label,
#app.nav-collapsed .nav-brand-name,
#app.nav-collapsed #nav .nav-identity{ display:none; }
#app.nav-collapsed #nav .nav-brand{ padding:4px 0 14px; }
#app.nav-collapsed #nav .nav-tab,
#app.nav-collapsed #nav .nav-item,
#app.nav-collapsed .nav-collapse-btn{ justify-content:center; padding:11px 0; gap:0; }

/* The old floating bug/task/feature pill is now in the sidebar */
#pile-fab{ display:none !important; }