/* ═════════════════════════════════════════════════════════════════════════
   PROCUREMENT INTELLIGENCE - PRICING AND LEAD TIMES (proc-pricing.css)

   Only new selectors, every one prefixed .pl-. The rail, strip, alerts,
   chips, drawer and activity list are the workspace's own ws-, op-, rc-,
   sr- and xf- classes and are not restyled here. Same tokens, same greens,
   ambers and reds, and a light pass for every colour set below.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── The bar above the table ─────────────────────────────────────────── */
.pl-bar-h {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin: 4px 0 14px;
}
.pl-bar-l h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.pl-bar-l span { display: block; margin-top: 3px; font-size: 12px; color: var(--gray-light); }
.pl-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-filters { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.pl-filter {
    font: inherit; font-size: 11.5px; font-weight: 650; padding: 6px 11px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--gray-light);
}
.pl-filter:hover { color: var(--white); }
.pl-filter.is-on { background: rgba(255,255,255,.09); color: var(--white); border-color: rgba(255,255,255,.12); }
.pl-reprice { white-space: nowrap; }
.pl-reprice[disabled] { opacity: .6; cursor: progress; }
.pl-strip .ws-kpi { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.pl-alerts { margin-bottom: 18px; }

/* ── The computed book, one paint only ───────────────────────────────── */
.pl-book-note {
    margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.55;
    border: 1px dashed rgba(107,166,255,.5); background: rgba(56,132,255,.08); color: var(--gray-light);
}
.pl-book-note b { color: #6ba6ff; }
.pl-book { background: rgba(56,132,255,.06); }

/* ── The table ───────────────────────────────────────────────────────── */
.pl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.015); }
.pl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 1180px; }
.pl-table th {
    text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gray-light); padding: 10px 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pl-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--white); line-height: 1.4; }
.pl-table td i { display: block; font-style: normal; font-size: 10.5px; color: var(--gray-light); margin-top: 1px; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-row { border-left: 3px solid transparent; }
.pl-row.is-warn td:first-child { box-shadow: inset 3px 0 0 #e0a03b; }
.pl-row.is-bad td:first-child { box-shadow: inset 3px 0 0 #ff6b6b; }
.pl-row.is-stop td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.pl-row:hover td { background: rgba(255,255,255,.025); }
.pl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-desc-c { min-width: 260px; max-width: 360px; }
.pl-desc {
    font: inherit; font-weight: 650; text-align: left; cursor: pointer; padding: 0; border: 0; background: none; color: var(--white);
    line-height: 1.35;
}
.pl-desc:hover { color: #6ba6ff; text-decoration: underline; }
.pl-sub { display: block; font-size: 10.5px; color: var(--gray-light); margin-top: 2px; }
.pl-quiet { color: var(--gray-light); opacity: .8; }
.pl-quiet-box {
    padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--border);
    font-size: 12.5px; line-height: 1.6; color: var(--gray-light);
}
.pl-po {
    display: inline-block; margin-top: 2px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    padding: 1px 7px; border-radius: 100px; border: 1px solid rgba(107,166,255,.4); background: rgba(56,132,255,.12); color: #6ba6ff;
}
.pl-po:hover { background: rgba(56,132,255,.22); }
.pl-chip {
    display: inline-block; margin: 2px 4px 0 0; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 100px;
    background: rgba(255,255,255,.07); color: var(--gray-light);
}
.pl-chip.is-ok { background: rgba(20,168,106,.18); color: #2fc07d; }
.pl-chip.is-warn { background: rgba(224,160,59,.16); color: #e0a03b; }
.pl-chip.is-bad { background: rgba(255,107,107,.16); color: #ff8f8f; }
.pl-delta { font-weight: 750; color: var(--gray-light); }
.pl-delta.is-up { color: #ff8f8f; }
.pl-delta.is-down { color: #2fc07d; }
.pl-nc { font-size: 11px; color: #e0a03b; border-bottom: 1px dotted #e0a03b; cursor: help; }
.pl-slack { font-weight: 750; }
.pl-slack.is-ok { color: #2fc07d; }
.pl-slack.is-warn { color: #e0a03b; }
.pl-slack.is-bad, .pl-slack.is-critical { color: #ff8f8f; }
.pl-ms { font-size: 11.5px; color: var(--gray-light); }
.pl-table td.is-passed { color: #ff8f8f; }
.pl-legend { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--gray-light); }

/* ── The bar per line ────────────────────────────────────────────────── */
.pl-bar { position: relative; height: 6px; margin-top: 7px; border-radius: 100px; background: rgba(255,255,255,.07); overflow: visible; }
.pl-bar-fill { position: absolute; top: 0; height: 100%; border-radius: 100px; background: #2fc07d; }
.pl-bar.is-warn .pl-bar-fill { background: #e0a03b; }
.pl-bar.is-bad .pl-bar-fill, .pl-bar.is-critical .pl-bar-fill { background: #ff6b6b; }
.pl-bar.is-unknown .pl-bar-fill { background: rgba(255,255,255,.25); }
.pl-bar-need { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--white); }
.pl-bar-today { position: absolute; top: -2px; width: 1px; height: 10px; background: rgba(255,255,255,.35); }

/* ── The empty state ─────────────────────────────────────────────────── */
.pl-empty { padding-top: 40px; }
.pl-err { margin-bottom: 10px; }

/* ── The drawer ──────────────────────────────────────────────────────── */
.pl-rc-f { margin: 12px 0 6px; }
.pl-acts { margin-top: 12px; }
.pl-sec { margin-top: 18px; }
.pl-sec h4 { margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-light); }
.pl-p { margin: 6px 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-light); }
.pl-quote {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 6px;
    border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.025); font-size: 12px;
}
.pl-quote.is-excluded { opacity: .6; }
.pl-quote-v { font: inherit; font-weight: 700; cursor: pointer; padding: 0; border: 0; background: none; color: var(--white); }
.pl-quote-v:hover { color: #6ba6ff; text-decoration: underline; }
.pl-quote-p { font-variant-numeric: tabular-nums; color: var(--white); }
.pl-quote-l, .pl-quote-m { font-size: 11px; color: var(--gray-light); }
.pl-order { font-size: 12.5px; line-height: 1.7; color: var(--white); }
.pl-threat { display: block; white-space: normal; line-height: 1.5; }

/* ── Light theme ─────────────────────────────────────────────────────── */
html.light .pl-bar-l h2 { color: var(--black); }
html.light .pl-bar-l span { color: var(--gray-mid); }
html.light .pl-filters { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.12); }
html.light .pl-filter { color: var(--gray-mid); }
html.light .pl-filter:hover { color: var(--black); }
html.light .pl-filter.is-on { background: rgba(0,0,0,.06); color: var(--black); border-color: rgba(0,0,0,.1); }
html.light .pl-book-note { background: rgba(56,132,255,.07); border-color: rgba(56,132,255,.45); color: var(--gray-mid); }
html.light .pl-book-note b { color: #2b6fd6; }
html.light .pl-book { background: rgba(56,132,255,.06); }
html.light .pl-scroll { background: #fff; border-color: rgba(0,0,0,.12); }
html.light .pl-table th { color: var(--gray-mid); border-color: rgba(0,0,0,.1); }
html.light .pl-table td { color: var(--black); border-color: rgba(0,0,0,.08); }
html.light .pl-table td i { color: var(--gray-mid); }
html.light .pl-row:hover td { background: rgba(0,0,0,.025); }
html.light .pl-desc { color: var(--black); }
html.light .pl-desc:hover { color: #2b6fd6; }
html.light .pl-sub { color: var(--gray-mid); }
html.light .pl-quiet { color: var(--gray-mid); }
html.light .pl-quiet-box { color: var(--gray-mid); border-color: rgba(0,0,0,.14); }
html.light .pl-po { color: #2b6fd6; border-color: rgba(43,111,214,.4); background: rgba(56,132,255,.1); }
html.light .pl-chip { background: rgba(0,0,0,.06); color: var(--gray-dark); }
html.light .pl-chip.is-ok { background: rgba(20,168,106,.14); color: #14804f; }
html.light .pl-chip.is-warn { background: rgba(224,160,59,.16); color: #a8690e; }
html.light .pl-chip.is-bad { background: rgba(196,23,23,.1); color: #c41717; }
html.light .pl-delta { color: var(--gray-mid); }
html.light .pl-delta.is-up { color: #c41717; }
html.light .pl-delta.is-down { color: #14804f; }
html.light .pl-nc { color: #a8690e; border-color: #a8690e; }
html.light .pl-slack.is-ok { color: #14804f; }
html.light .pl-slack.is-warn { color: #a8690e; }
html.light .pl-slack.is-bad, html.light .pl-slack.is-critical { color: #c41717; }
html.light .pl-ms { color: var(--gray-mid); }
html.light .pl-table td.is-passed { color: #c41717; }
html.light .pl-legend { color: var(--gray-mid); }
html.light .pl-bar { background: rgba(0,0,0,.08); }
html.light .pl-bar.is-unknown .pl-bar-fill { background: rgba(0,0,0,.25); }
html.light .pl-bar-need { background: var(--black); }
html.light .pl-bar-today { background: rgba(0,0,0,.35); }
html.light .pl-sec h4 { color: var(--gray-mid); }
html.light .pl-p { color: var(--gray-mid); }
html.light .pl-quote { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.1); }
html.light .pl-quote-v { color: var(--black); }
html.light .pl-quote-v:hover { color: #2b6fd6; }
html.light .pl-quote-p { color: var(--black); }
html.light .pl-quote-l, html.light .pl-quote-m { color: var(--gray-mid); }
html.light .pl-order { color: var(--black); }

@media (max-width: 720px) {
    .pl-bar-h { align-items: flex-start; }
    .pl-desc-c { min-width: 200px; }
}