/* ============================================================
   ProjectTelemetry — Production Tracking module
   assets/production.css   ·   Dashboard + Targets + Log
   Shares the app tokens (--accent, --ink, --bd …) and echoes the
   Cost Codes dashboard so the two read as one family.
   ============================================================ */

.pr-load, .pr-empty { text-align:center; padding:48px 20px; color:var(--ink-faint); }
.pr-load i { animation:spin 1s linear infinite; margin-right:6px; }
.pr-empty i { font-size:40px; opacity:.5; }
.pr-empty h3 { margin:12px 0 4px; color:var(--ink-soft); font-size:16px; }
.pr-empty p { margin:0 auto 14px; font-size:13px; max-width:480px; line-height:1.5; }

/* ── Header ────────────────────────────────────────────────────── */
.pr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.pr-title { font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.pr-sub { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.pr-head-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pr-seg { display:inline-flex; background:var(--bg2); border:1px solid var(--bd); border-radius:9px; padding:3px; gap:2px; }
.pr-seg-b { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--ink-soft);
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; white-space:nowrap; }
.pr-seg-b:hover { color:var(--ink); }
.pr-seg-b.active { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.pr-seg-b i { font-size:15px; }

/* ── KPI tiles ─────────────────────────────────────────────────── */
.pr-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.pr-kpi { position:relative; border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:14px 16px; overflow:hidden; box-shadow:var(--shadow); }
.pr-kpi-i { position:absolute; top:12px; right:12px; font-size:18px; color:var(--ink-faint); opacity:.6; }
.pr-kpi-v { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
.pr-kpi-l { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-top:5px; }
.pr-kpi.accent { border-color:color-mix(in srgb,var(--accent) 40%,var(--bd)); }
.pr-kpi.accent .pr-kpi-v, .pr-kpi.accent .pr-kpi-i { color:var(--accent); }
.pr-kpi.neg .pr-kpi-v, .pr-kpi.neg .pr-kpi-i { color:#DC2626; }
.pr-kpi.neg { border-color:color-mix(in srgb,#DC2626 35%,var(--bd)); }
.pr-kpi.pos .pr-kpi-v { color:#16A34A; }

/* ── Banner ────────────────────────────────────────────────────── */
.pr-banner { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:9px; margin-bottom:14px; }
.pr-banner i { font-size:16px; }
.pr-banner.neg { background:color-mix(in srgb,#DC2626 10%,transparent); color:#B91C1C; }
.pr-banner.pos { background:color-mix(in srgb,#16A34A 11%,transparent); color:#15803D; }
.pr-banner.ok  { background:var(--accent-bg); color:var(--accent); }

/* ── Trend sparkline ───────────────────────────────────────────── */
.pr-trend { border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:12px 14px 6px; margin-bottom:14px; box-shadow:var(--shadow); }
.pr-trend-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.pr-trend-t { font-size:12.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.pr-trend-t i { color:var(--accent); }
.pr-trend-meta { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.pr-trend-seg { margin-left:auto; display:inline-flex; gap:2px; background:var(--bg2); border:1px solid var(--bd); border-radius:7px; padding:2px; }
.pr-tp { border:none; background:transparent; color:var(--ink-soft); font-size:11px; font-weight:600; padding:3px 9px; border-radius:5px; cursor:pointer; }
.pr-tp:hover { color:var(--ink); }
.pr-tp.active { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.pr-spark { display:block; width:100%; height:90px; overflow:visible; }
.pr-spark-area { fill:color-mix(in srgb,var(--accent) 12%,transparent); stroke:none; }
.pr-spark-line { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }

/* ── Code cards (dashboard) ────────────────────────────────────── */
.pr-list { display:flex; flex-direction:column; gap:9px; }
.pr-card { border:1px solid var(--bd); border-radius:11px; background:var(--white); padding:12px 15px; box-shadow:var(--shadow); }
.pr-card.behind { border-color:color-mix(in srgb,#DC2626 45%,var(--bd)); }
.pr-card-top { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.pr-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--bg2); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.pr-desc { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-trade { font-size:11px; font-weight:600; color:var(--ink-faint); background:var(--bg2); border-radius:20px; padding:2px 8px; margin-left:6px; }
.pr-chip { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pr-chip.ok { background:color-mix(in srgb,#16A34A 14%,transparent); color:#15803D; }
.pr-chip.accent { background:var(--accent-bg); color:var(--accent); }
.pr-chip.neg { background:color-mix(in srgb,#DC2626 13%,transparent); color:#B91C1C; }
.pr-chip.muted { background:var(--bg2); color:var(--ink-faint); }
.pr-pf { font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.pr-pf.ok { background:color-mix(in srgb,#16A34A 13%,transparent); color:#15803D; }
.pr-pf.accent { background:var(--accent-bg); color:var(--accent); }
.pr-pf.neg { background:color-mix(in srgb,#DC2626 12%,transparent); color:#B91C1C; }

.pr-bars { display:flex; flex-direction:column; gap:7px; }
.pr-barrow { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:10px; }
.pr-barlbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.pr-bar { height:9px; background:var(--bg2); border-radius:6px; overflow:hidden; position:relative; }
.pr-bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));
  transition:width .3s ease; min-width:2px; }
.pr-bar-fill.over { background:linear-gradient(90deg,#F87171,#DC2626); }
.pr-bar-fill.prog { background:linear-gradient(90deg,#5EEAD4,#0D9488); }
.pr-barval { font-size:12px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.pr-barval b { color:var(--ink); font-weight:700; }
.pr-soft { color:var(--ink-faint); }

.pr-card-foot { margin-top:9px; padding-top:8px; border-top:1px dashed var(--bd); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.pr-metric { font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:4px; }
.pr-metric i { font-size:13px; color:var(--ink-faint); }
.pr-metric.pos { color:#15803D; font-weight:700; } .pr-metric.neg { color:#B91C1C; font-weight:700; }

.pr-foot { margin-top:14px; font-size:11.5px; color:var(--ink-faint); text-align:center; }

/* ── Targets / recent tables ───────────────────────────────────── */
.pr-hint { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-soft); background:var(--bg2);
  border:1px solid var(--bd); border-radius:9px; padding:9px 12px; margin-bottom:14px; line-height:1.5; }
.pr-hint i { color:var(--accent); font-size:15px; margin-top:1px; flex-shrink:0; }
.pr-manage { border:1px solid var(--bd); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); }
.pr-table { width:100%; border-collapse:collapse; font-size:13px; }
.pr-table thead th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); background:var(--bg2); padding:9px 14px; border-bottom:1px solid var(--bd); }
.pr-table tbody td { padding:11px 14px; border-bottom:1px solid var(--bd); color:var(--ink); vertical-align:middle; }
.pr-table tbody tr:last-child td { border-bottom:none; }
.pr-table tbody tr:hover { background:var(--bg2); }
.pr-table tbody tr.pr-has .pr-mono { color:var(--accent); }
.pr-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; }
.pr-r { text-align:right; font-variant-numeric:tabular-nums; }
.pr-actions { text-align:right; white-space:nowrap; }
.pr-actions .btn-icon { width:28px; height:28px; font-size:14px; }

/* ── Target modal ──────────────────────────────────────────────── */
.pr-modal-desc { font-size:13px; color:var(--ink-soft); margin-bottom:12px; }
.pr-rate-live { font-size:11.5px; color:var(--accent); font-weight:600; margin-top:5px; min-height:14px; font-variant-numeric:tabular-nums; }

/* ── Log production ────────────────────────────────────────────── */
.pr-log-head { display:flex; align-items:flex-end; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
.pr-log-head .field label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:4px; }
.pr-log-head input[type=date] { padding:7px 10px; border:1px solid var(--bd); border-radius:7px; background:var(--white); color:var(--ink); font-size:13px; }
.pr-log-hint { flex:1; min-width:220px; font-size:12px; color:var(--ink-faint); line-height:1.5; }

.pr-log-grid { border:1px solid var(--bd); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); }
.pr-log-ghead, .pr-log-row { display:grid; grid-template-columns:2fr 1.2fr 1.8fr 34px; gap:8px; align-items:center; padding:8px 12px; }
.pr-log-ghead { background:var(--bg2); border-bottom:1px solid var(--bd); }
.pr-log-ghead span { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.pr-log-row { border-bottom:1px solid var(--bd); }
.pr-log-row:last-child { border-bottom:none; }
.pr-log-row select, .pr-log-row input { width:100%; padding:7px 8px; border:1px solid var(--bd); border-radius:6px; background:var(--white); color:var(--ink); font-size:12.5px; box-sizing:border-box; }
.pr-lr-qtywrap { position:relative; display:flex; align-items:center; }
.pr-lr-qty { text-align:right; padding-right:36px !important; }
.pr-lr-unit { position:absolute; right:9px; font-size:11px; font-weight:600; color:var(--ink-faint); pointer-events:none; }
.pr-lr-rm { width:28px; height:28px; font-size:14px; }
.pr-lr-rm:hover { color:#DC2626; background:color-mix(in srgb,#DC2626 12%,transparent); }

.pr-log-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pr-log-actions .btn-accent { margin-left:auto; }

.pr-recent { margin-top:22px; border:1px solid var(--bd); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); }
.pr-recent-t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  padding:10px 14px; background:var(--bg2); border-bottom:1px solid var(--bd); }
.pr-del:hover { color:#DC2626; background:color-mix(in srgb,#DC2626 12%,transparent); }

@media (max-width:700px){
  .pr-log-ghead { display:none; }
  .pr-log-row { grid-template-columns:1fr 1fr; gap:6px; padding:12px; position:relative; }
  .pr-lr-rm { position:absolute; top:8px; right:8px; }
  .pr-table thead th:nth-child(4), .pr-table tbody td:nth-child(4) { display:none; }
}
@media (max-width:640px){
  .pr-barrow { grid-template-columns:52px 1fr; grid-template-areas:'lbl bar' '. val'; row-gap:3px; }
  .pr-barrow .pr-barlbl { grid-area:lbl; } .pr-barrow .pr-bar { grid-area:bar; } .pr-barrow .pr-barval { grid-area:val; }
}