/* ============================================================================
   ProPharma Inventory Platform — portal theme.

   Palette and type scale are the ProPharma portal standard, matching
   hq.propharmausa.com and abc.propharmausa.com so this reads as part of the
   same family. PRESENTATION ONLY: nothing here derives a figure.
   ========================================================================= */
:root{
  --navy:#0a2440; --navy2:#0e3358; --navy3:#0f4a5c;
  --ink:#0b1c2e; --text:#122238; --muted:#5c728c; --faint:#8296ab;
  --blue:#1a73c7; --blue2:#2e8bd6; --blue-pale:#e6f0fb;
  --green:#12996b; --green2:#20b47c; --green-pale:#e5f6ee;
  --teal:#0e8f8f; --teal-pale:#dff2f2;
  --amber:#c98a12; --amber-pale:#fbf1dc;
  --red:#c0392f; --red-pale:#fbecea;
  --bg:#f4f7fb; --card:#fff; --line:#e2e9f1; --line-strong:#cfdbe9;
  --on-navy:#c8dcf2; --on-navy-dim:#a9c6e6;
  --cls-hi:#0c7a52; --cls-hi-bg:#e5f6ee; --cls-hi-line:#b6e3cd;
  --cls-mid:#96660a; --cls-mid-bg:#fbf1dc; --cls-mid-line:#ecd8a8;
  --cls-lo:#4e6685; --cls-lo-bg:#eef2f7; --cls-lo-line:#d8e1ec;
  --shadow-sm:0 1px 2px rgba(10,36,64,.06);
  --shadow:0 2px 6px rgba(10,36,64,.07),0 10px 28px rgba(14,51,88,.07);
  --radius:11px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;
  -webkit-text-size-adjust:100%}
a{color:var(--blue);text-decoration:none}

/* ---- chrome ---- */
header.top{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;
  padding:14px 18px 12px;box-shadow:var(--shadow-sm)}
.top h1{margin:0;font-size:16px;font-weight:800;letter-spacing:.01em}
.top .sub{margin:2px 0 0;font-size:11.5px;color:var(--on-navy-dim);font-weight:600}
.top .built{font-size:10.5px;color:var(--on-navy-dim);font-family:var(--mono);margin-top:4px}
.wrap{max-width:1180px;margin:0 auto;padding:14px 16px 60px}

/* ---- target bar ---- */
.target{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.target .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.target .big{font-size:26px;font-weight:800;color:var(--ink);font-family:var(--mono)}
.target .tgt{font-size:12px;color:var(--muted);font-weight:700}
.bar{height:12px;background:var(--cls-lo-bg);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;margin:10px 0 6px;display:flex}
.bar i{display:block;height:100%}
.bar .ok{background:var(--green2)}
.bar .over{background:var(--red)}
.bar .headroom{background:var(--cls-lo-bg)}
.target .legend{font-size:11px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.target .legend b{font-family:var(--mono);color:var(--text)}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
  box-shadow:var(--shadow-sm)}
.card .v{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--ink)}
.card .l{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-top:3px}
.card .n{font-size:11px;color:var(--faint);margin-top:4px}
.card.buy .v{color:var(--blue)} .card.liq .v{color:var(--red)}
.card.trim .v{color:var(--amber)} .card.xfer .v{color:var(--teal)}

/* ---- the swap ---- */
.swap{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:var(--radius);padding:13px 15px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.swap h3{margin:0 0 6px;font-size:13px;font-weight:800;color:var(--ink)}
.swap p{margin:0 0 6px;font-size:12.5px}
.swap .flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px;font-size:12px}
.swap .leg{background:var(--cls-lo-bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.swap .leg b{font-family:var(--mono);display:block;font-size:14px}
.swap .arrow{color:var(--muted);font-weight:800}
.conflict{background:var(--amber-pale);border:1px solid var(--cls-mid-line);color:#6b4a06;
  border-radius:8px;padding:9px 11px;font-size:12px;margin-top:8px}

/* ---- tabs ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tab{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:7px 13px;
  font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tab b{font-family:var(--mono);margin-left:5px;font-size:11px}
.search{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:7px 13px;font-size:12px;font-family:inherit;color:var(--text)}

/* ---- table ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{background:#f7f9fc;text-align:left;padding:8px 10px;font-size:10.5px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);
  white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid #f0f4f8;vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
td.item{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
tr.r:hover{background:#fafcfe;cursor:pointer}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---- pills ---- */
.pill{display:inline-block;font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.pill.BUY{background:var(--blue-pale);color:#155aa0;border:1px solid #c2dbf3}
.pill.LIQUIDATE{background:var(--red-pale);color:#9b2c22;border:1px solid #efc7c1}
.pill.TRIM{background:var(--amber-pale);color:#8a5c05;border:1px solid var(--cls-mid-line)}
.pill.WATCH{background:var(--cls-lo-bg);color:var(--cls-lo);border:1px solid var(--cls-lo-line)}
.pill.TRANSFER{background:var(--teal-pale);color:#0a6c6c;border:1px solid #bfe3e3}
.pill.cls{background:var(--cls-hi-bg);color:var(--cls-hi);border:1px solid var(--cls-hi-line)}
.pill.cls.mid{background:var(--cls-mid-bg);color:var(--cls-mid);border-color:var(--cls-mid-line)}
.pill.cls.lo{background:var(--cls-lo-bg);color:var(--cls-lo);border-color:var(--cls-lo-line)}
.pill.sm{font-size:9px;padding:2px 6px}

/* ---- drill-down ---- */
.detail{background:#fafcfe;border-top:1px solid var(--line)}
.detail .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;
  padding:10px 12px}
.detail .f{font-size:11.5px}
.detail .f span{display:block;color:var(--muted);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.detail .f b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.detail .act{padding:0 12px 11px;font-size:12px;color:var(--text)}
.detail .act b{color:var(--ink)}

/* ---- caveats ---- */
.caveats{margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm)}
.caveats h3{margin:0 0 7px;font-size:12px;font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:.05em}
.caveats li{font-size:11.5px;color:var(--text);margin-bottom:6px;line-height:1.5}
.caveats ul{margin:0;padding-left:17px}
.caveats .sev{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 5px;border-radius:10px;margin-right:5px}
.caveats .blocking{background:var(--red-pale);color:#9b2c22}
.caveats .material{background:var(--amber-pale);color:#8a5c05}
.caveats .method,.caveats .scope{background:var(--cls-lo-bg);color:var(--cls-lo)}
.foot{margin-top:14px;font-size:11px;color:var(--faint);line-height:1.6}
.err{background:var(--red-pale);border:1px solid #efc7c1;color:#9b2c22;border-radius:var(--radius);
  padding:14px 16px;font-size:13px}

/* ---- mobile ---- */
@media (max-width:720px){
  .wrap{padding:12px 11px 50px}
  .target .big{font-size:22px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  table{font-size:12px}
  th,td{padding:7px 8px}
  .hide-sm{display:none}
  .swap .flow{flex-direction:column;align-items:stretch}
  .swap .arrow{text-align:center}
}