/* =====================================================================
   OutMazed Tech · Wholesale & Distribution Suite
   Extension kit on top of the shared theme.css design system.
   Only wholesale-specific components live here (API/traffic/log widgets).
   Load AFTER theme.css. Change tokens in theme.css to restyle everything.
   ===================================================================== */

/* env switcher dot (prod = live green, sandbox/staging = amber) */
.env-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2s infinite}
.chip.sandbox{border-color:rgba(245,158,11,.4);background:var(--warn-soft)}
.chip.sandbox .env-dot{background:var(--warn);box-shadow:none;animation:none}

/* ---- HTTP method badges ---- */
.mth{display:inline-flex;align-items:center;justify-content:center;height:19px;padding:0 7px;border-radius:6px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.3px;border:1px solid transparent}
.mth.get{color:var(--info);background:var(--info-soft);border-color:rgba(56,189,248,.28)}
.mth.post{color:var(--ok);background:var(--ok-soft);border-color:rgba(16,185,129,.28)}
.mth.put{color:var(--warn);background:var(--warn-soft);border-color:rgba(245,158,11,.28)}
.mth.del{color:var(--danger);background:var(--danger-soft);border-color:rgba(244,63,94,.28)}
.endpoint{font-family:var(--mono);font-size:11.5px;color:var(--text-dim)}
.endpoint b{color:var(--text);font-weight:600}

/* ---- inline status dot ---- */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-mute);margin-right:6px;vertical-align:0}
.sdot.ok{background:var(--ok)} .sdot.warn{background:var(--warn)} .sdot.danger{background:var(--danger)} .sdot.info{background:var(--info)}
.sdot.live{box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2s infinite}

/* ---- live log / request stream ---- */
.logstream{font-family:var(--mono);font-size:11px;line-height:1.5;max-height:340px;overflow-y:auto;
  display:flex;flex-direction:column}
.logline{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;align-items:center}
.logline:hover{background:var(--panel-2)}
.logline .lt{color:var(--text-mute);flex:0 0 auto}
.logline .lv{color:var(--text-dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.logline .lv b{color:var(--text);font-weight:600}
.logline.ok{box-shadow:inset 3px 0 0 var(--ok)} .logline.warn{box-shadow:inset 3px 0 0 var(--warn)}
.logline.danger{box-shadow:inset 3px 0 0 var(--danger)} .logline.info{box-shadow:inset 3px 0 0 var(--info)}

/* ---- heatmap (traffic by hour/day, cache, etc.) ---- */
.heat{display:grid;gap:3px}
.heat .hcell{aspect-ratio:1;border-radius:3px;background:var(--panel-2);border:1px solid var(--border)}
.heat .hcell.h1{background:rgba(20,184,166,.18)} .heat .hcell.h2{background:rgba(20,184,166,.34)}
.heat .hcell.h3{background:rgba(20,184,166,.52)} .heat .hcell.h4{background:rgba(20,184,166,.72)}
.heat .hcell.h5{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.heat-x{display:flex;justify-content:space-between;margin-top:6px;font-size:9.5px;color:var(--text-mute)}

/* ---- key/value list ---- */
.kv{display:flex;flex-direction:column}
.kv .krow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.kv .krow:last-child{border-bottom:0}
.kv .kk{color:var(--text-dim);min-width:0}
.kv .kv2{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.kv .kk svg{width:15px;height:15px;color:var(--text-mute);vertical-align:-3px;margin-right:7px}

/* ---- two-sided flow diagram (supply-in → core → dist-out) ---- */
.flowmap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}
@media(max-width:1180px){.flowmap{grid-template-columns:1fr;gap:14px}}
.flownode{background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.flownode.core{border-color:var(--accent-line);background:var(--accent-soft)}
.flownode .fn-h{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-mute);font-weight:600;margin-bottom:9px}
.flownode .fn-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;color:var(--text-dim)}
.flownode .fn-row svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto}
.flowarrow{color:var(--accent);display:grid;place-items:center}
.flowarrow svg{width:26px;height:26px}
@media(max-width:1180px){.flowarrow{transform:rotate(90deg)}}

/* ---- supplier/agent connector tile ---- */
.ctile{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--radius-sm);
  background:var(--panel);border:1px solid var(--border);transition:.14s}
.ctile:hover{border-color:var(--border-2);background:var(--panel-2)}
.ctile .clogo{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:12px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim)}
.ctile .cmeta{min-width:0;flex:1}
.ctile .cmeta b{font-size:13px;font-weight:640;display:block}
.ctile .cmeta span{font-size:11px;color:var(--text-mute)}

/* ---- big gauge value pair ---- */
.gaugewrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ---- ring (reuse donut token but smaller helper) ---- */
.ring-sm{width:96px;height:96px}
.ring-sm::before{inset:11px}
.ring-sm .dc b{font-size:17px}

/* ---- horizontal ranked bar list ---- */
.rank{display:flex;flex-direction:column;gap:11px}
.rank .rrow{display:flex;align-items:center;gap:11px;font-size:12.5px}
.rank .rn{color:var(--text-dim);min-width:120px;display:flex;align-items:center;gap:8px}
.rank .rbar{flex:1;height:8px;border-radius:20px;background:var(--panel-2);overflow:hidden;border:1px solid var(--border)}
.rank .rbar > i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.rank .rbar.info > i{background:linear-gradient(90deg,var(--info),#7dd3fc)}
.rank .rbar.violet > i{background:linear-gradient(90deg,var(--violet),#c4b5fd)}
.rank .rbar.warn > i{background:linear-gradient(90deg,var(--warn),#fbbf24)}
.rank .rv{min-width:64px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}

/* ---- competitiveness indicator (extranet) ---- */
.comp{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650}
.comp::before{content:"";width:9px;height:9px;border-radius:50%}
.comp.green{color:var(--ok)} .comp.green::before{background:var(--ok)}
.comp.amber{color:var(--warn)} .comp.amber::before{background:var(--warn)}
.comp.red{color:var(--danger)} .comp.red::before{background:var(--danger)}

/* small caption under a metric */
.cap-lbl{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-mute);font-weight:600}