/* ============================================================
   PlumbRun Design System — shared by plumbrun.com (customer),
   plumbrun.tech (/pro), and plumbrun.app (Ops Command Center).
   Source of truth: PlumbRun-Ready/public/assets/plumbrun.css
   (ops/assets/plumbrun.css is a copy — keep them identical).
   ============================================================ */

:root {
  /* Brand */
  --pr-navy: #0A1524;      /* primary surface (dark) */
  --pr-navy-2: #0f1d33;    /* panel */
  --pr-navy-3: #132542;    /* raised panel / hover */
  --pr-line: #1e2f4d;      /* borders on dark */
  --pr-blue: #0B3FA8;      /* brand blue — primary actions, mark */
  --pr-blue-2: #1668E0;    /* hover / links on dark */
  --pr-orange: #F97316;    /* accent — conversion CTA, live dot */
  --pr-orange-2: #fb8a3c;

  /* Status */
  --pr-ok: #33D98A; --pr-warn: #F7C948; --pr-err: #ff6b6b; --pr-info: #4FB3FF;

  /* Cream */
  --pr-cream: #F6F0E2; --pr-cream-2: #EEE5D0; --pr-cream-3: #E3D8BE; --pr-cream-line: #D6C9A8;

  /* Text on dark — cream-tinted for warmth */
  --pr-text: #F3EDE0; --pr-muted: #A9B4C9; --pr-dim: #5c7089;

  /* Light surfaces (customer forms, docs) = cream */
  --pr-paper: var(--pr-cream); --pr-paper-2: var(--pr-cream-2); --pr-paper-3: var(--pr-cream-3); --pr-paper-line: var(--pr-cream-line);
  --pr-ink: #0A1524; --pr-ink-2: #3B4A63; --pr-ink-3: #6B7A93;

  --pr-radius: 14px; --pr-radius-sm: 10px; --pr-radius-xs: 8px;
  --pr-shadow: 0 2px 12px rgba(10,21,36,.08); --pr-shadow-lg: 0 20px 60px rgba(10,21,36,.35);
  --pr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --pr-mono: ui-monospace, Menlo, Consolas, monospace;

  /* ---- Legacy aliases (customer pages) ---- */
  --orange: var(--pr-orange); --navy: var(--pr-navy); --gold: var(--pr-warn); --white: var(--pr-cream);
  --blue: var(--pr-blue-2);
  --gray-50: var(--pr-paper-2); --gray-100: var(--pr-paper-3); --gray-200: var(--pr-paper-line); --gray-300: #C9BE9F;
  --gray-400: #93A1BA; --gray-500: var(--pr-ink-3); --gray-600: var(--pr-ink-2); --gray-700: #243147;
  --green: var(--pr-ok); --red: var(--pr-err);
  --radius: var(--pr-radius); --radius-sm: var(--pr-radius-sm);
  --shadow: var(--pr-shadow); --shadow-lg: 0 8px 32px rgba(10,21,36,.14);

  /* ---- Legacy aliases (ops pages) ---- */
  --bg: var(--pr-navy); --panel: var(--pr-navy-2); --panel2: var(--pr-navy-3); --line: var(--pr-line);
  --text: var(--pr-text); --muted: var(--pr-muted); --dim: var(--pr-dim);
  --brand: var(--pr-blue); --brand2: var(--pr-blue-2); --accent: var(--pr-orange);
  --ok: var(--pr-ok); --warn: var(--pr-warn); --err: var(--pr-err); --info: var(--pr-info);
}

/* ---------- Shared chrome ---------- */
.pr-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,21,36,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pr-line); color: var(--pr-text); }
.pr-nav .pr-wrap { display: flex; align-items: center; gap: 14px; height: 58px; }
.pr-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.pr-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.pr-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--pr-blue); display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; position: relative; flex: none; font-family: var(--pr-font); }
.pr-mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pr-orange); }
.pr-mark.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
.pr-mark.lg::after { top: -4px; right: -4px; width: 12px; height: 12px; }
.pr-wordmark { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.pr-wordmark small { display: block; font-size: 11px; font-weight: 500; color: var(--pr-muted); letter-spacing: .02em; }
.pr-nav-links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.pr-nav-links a { color: var(--pr-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.pr-nav-links a:hover, .pr-nav-links a.on { color: #fff; }
.pr-cta { background: var(--pr-orange); color: #fff !important; padding: 9px 16px; border-radius: var(--pr-radius-sm); font-weight: 800 !important; font-size: 13px; }
.pr-cta:hover { background: var(--pr-orange-2); }

.pr-footer { background: var(--pr-navy); color: var(--pr-muted); padding: 36px 0; font-size: 13px; border-top: 1px solid var(--pr-line); }
.pr-footer .pr-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.pr-footer a { color: var(--pr-info); text-decoration: none; }
.pr-footer .legal { color: var(--pr-dim); font-size: 12px; margin-top: 6px; line-height: 1.6; }

/* ---------- Buttons ---------- */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--pr-radius-sm); font: 700 15px/1 var(--pr-font); cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .12s, background .15s; }
.pr-btn:active { transform: scale(.98); } .pr-btn:disabled { opacity: .5; cursor: not-allowed; }
.pr-btn-primary { background: var(--pr-orange); color: #fff; box-shadow: 0 6px 20px rgba(249,115,22,.35); }
.pr-btn-primary:hover { background: var(--pr-orange-2); }
.pr-btn-blue { background: var(--pr-blue); color: #fff; } .pr-btn-blue:hover { background: var(--pr-blue-2); }
.pr-btn-ghost { background: transparent; color: var(--pr-text); border-color: var(--pr-line); } .pr-btn-ghost:hover { border-color: var(--pr-blue-2); }
.pr-btn-light { background: var(--pr-cream); color: var(--pr-ink); border-color: var(--pr-paper-line); }

/* ---------- Pills / status ---------- */
.pr-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.pr-pill.pending   { background: rgba(247,201,72,.16);  color: var(--pr-warn); }
.pr-pill.active    { background: rgba(79,179,255,.16);  color: var(--pr-info); }
.pr-pill.done      { background: rgba(51,217,138,.16);  color: var(--pr-ok); }
.pr-pill.cancelled { background: rgba(255,107,107,.16); color: var(--pr-err); }
.pr-pill.light-ok  { background: #E3F8EE; color: #117A4B; }
.pr-pill.light-warn{ background: #FFF4D6; color: #8A5A00; }

/* ---------- Cards ---------- */
.pr-card { background: var(--pr-navy-2); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); color: var(--pr-text); }
.pr-card.light { background: var(--pr-cream); border-color: var(--pr-paper-line); color: var(--pr-ink); box-shadow: var(--pr-shadow); }

/* ---------- Live dot ---------- */
.pr-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pr-muted); }
.pr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-dim); }
.pr-dot.on { background: var(--pr-ok); box-shadow: 0 0 0 3px rgba(51,217,138,.2); animation: pr-blink 1.6s infinite; }
@keyframes pr-blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (max-width: 760px) {
  .pr-nav-links a:not(.pr-cta) { display: none; }
  .pr-footer .pr-wrap { flex-direction: column; }
}

/* ---------- Highlights ---------- */
.pr-hl { background: linear-gradient(transparent 55%, rgba(249,115,22,.35) 55%); padding: 0 2px; }
.pr-hl-cream { background: linear-gradient(transparent 55%, rgba(246,240,226,.28) 55%); padding: 0 2px; }
.pr-accent-bar { border-left: 3px solid var(--pr-orange); padding-left: 12px; }
.pr-kpi-hot { color: var(--pr-orange) !important; }
.pr-row-hl { background: rgba(249,115,22,.08) !important; box-shadow: inset 3px 0 0 var(--pr-orange); }
.pr-cream-panel { background: var(--pr-cream); color: var(--pr-ink); border: 1px solid var(--pr-cream-line); border-radius: var(--pr-radius); }
::selection { background: rgba(249,115,22,.35); }