/* Banyan Pharmacy — pharmacy-specific components, layered on styles.css */

/* ============ Format badge ============ */
.fmt { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 9px 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--rule); background: var(--stone); color: var(--body); white-space: nowrap; }
.fmt .gl { display: inline-flex; color: var(--mute); }
.fmt.hospital { border-color: var(--clay-tint); color: var(--clay-deep); background: var(--clay-wash); }
.fmt.hospital .gl { color: var(--clay); }
.fmt.flagship .gl { color: var(--amber); }

/* ============ Health pill helpers ============ */
.hpill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.hpill .dot { width: 6px; height: 6px; border-radius: 999px; }

/* ============ Provenance "from Terrace" tag ============ */
.prov { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--clay-deep); font-weight: 500; }
.prov .gl { display: inline-flex; color: var(--clay); }
.prov.muted { color: var(--mute); } .prov.muted .gl { color: var(--mute); }

/* ============ Map — pannable viewport ============ */
.map-viewport { position: relative; width: 100%; height: min(76vh, 760px); border: 1px solid var(--rule); border-radius: 14px; background: #F1EBDF; overflow: hidden; box-shadow: var(--shadow-1); touch-action: none; user-select: none; }
.map-pan { position: absolute; top: 0; left: 0; will-change: transform; }

.map-pin { transition: none; }
.map-pin .pin-body { transition: r 120ms var(--ease); transform-box: fill-box; transform-origin: center; }
.map-pin:hover .pin-body { r: 14.5px; }
.map-pin.flip-anim .pin-body { animation: pinFlip 900ms var(--ease); }
@keyframes pinFlip { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
.map-ring { animation: pinRing 1500ms var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pinRing { 0% { r: 13px; opacity: 0.6; } 100% { r: 30px; opacity: 0; } }

/* hover peek — lives inside the panned layer (anchored to pin coords) */
.peek { position: absolute; z-index: 30; background: var(--ink); color: var(--stone); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow-pop); width: 230px; pointer-events: none; transform: translate(-50%, calc(-100% - 20px)); }
.peek::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.peek .pk-name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.peek .pk-meta { font-size: 12px; color: var(--fade); margin-top: 3px; }
.peek .pk-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; color: #ece8df; font-weight: 500; }
.peek .pk-row .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.peek .pk-al { color: var(--fade); font-weight: 400; }
.peek .pk-mgr { font-size: 11.5px; color: var(--fade); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ink-3); }

/* ---- floating HUD (does not pan) ---- */
.map-hud-top { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; flex-wrap: wrap; }
.hud-meta { background: rgba(251,248,242,0.86); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 11px; padding: 11px 15px; box-shadow: var(--shadow-1); }
.hud-meta .hud-date { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.hud-meta .hud-sub { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.hud-meta .hud-sub span { color: var(--body); }
.hud-kpis { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hud-kpi { background: rgba(251,248,242,0.86); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 11px; padding: 10px 15px; min-width: 104px; box-shadow: var(--shadow-1); }
.hud-kpi.accent { border-color: var(--clay-tint); background: rgba(247,236,228,0.9); }
.hud-kpi .hk-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.hud-kpi .hk-v { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 3px; }
.hud-kpi .hk-v.sm { font-size: 18px; }
.hud-kpi .hk-v.clay { color: var(--clay-deep); }
.hud-kpi .hk-m { font-size: 11px; color: var(--mute); margin-top: 1px; }

/* ---- legend / compass / hint / north chip ---- */
.map-legend { position: absolute; left: 18px; bottom: 18px; z-index: 20; background: rgba(251,248,242,0.9); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 11px; padding: 12px 15px; box-shadow: var(--shadow-1); }
.map-legend .lg-t { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 9px; }
.map-legend .lg-items { display: flex; gap: 16px; flex-wrap: wrap; }
.map-legend .lg-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--body); }
.map-legend .lg-sw { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.map-compass { position: absolute; right: 18px; bottom: 18px; z-index: 20; filter: drop-shadow(var(--shadow-1)); }
.map-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; background: var(--ink); color: var(--stone); font-size: 12.5px; font-weight: 500; padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow-pop); pointer-events: none; animation: hintFade 480ms var(--ease); }
@keyframes hintFade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.map-chip-north { position: absolute; top: 50%; right: 18px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; background: rgba(251,248,242,0.92); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 500; color: var(--body); cursor: pointer; box-shadow: var(--shadow-1); transition: border-color 140ms, color 140ms; }
.map-chip-north:hover { border-color: var(--clay-tint); color: var(--clay-deep); }
.map-chip-north svg { color: var(--mute); }

/* ============ Alert cards (the loop hinge) ============ */
.alert-card { background: var(--stone-soft); border: 1px solid var(--rule); border-radius: 11px; border-left: 3px solid var(--mute); padding: 17px 19px; display: flex; flex-direction: column; gap: 13px; transition: box-shadow 200ms var(--ease), border-color 200ms; }
.alert-card.u-critical { border-left-color: var(--clay); }
.alert-card.u-transfer { border-left-color: var(--amber); }
.alert-card.u-expiry { border-left-color: var(--green); }
.alert-card.focus-glow { box-shadow: 0 0 0 2px var(--clay-wash), var(--shadow-pop); border-color: var(--clay-tint); }
.alert-card.resolved { opacity: 0.62; }
.alert-top { display: flex; align-items: flex-start; gap: 13px; }
.alert-top .a-main { flex: 1; min-width: 0; }
.alert-urg { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; }
.alert-urg.u-critical { color: var(--clay-deep); }
.alert-urg.u-transfer { color: var(--amber); }
.alert-urg.u-expiry { color: var(--green); }
.alert-urg .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.alert-hl { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; margin-top: 7px; }
.alert-what { font-size: 13.5px; color: var(--body); line-height: 1.55; }
.alert-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--mute); }
.chat-snip { background: var(--stone); border: 1px solid var(--rule-soft); border-left: 2px solid var(--green); border-radius: 8px; padding: 11px 13px; }
.chat-snip .cs-from { font-size: 11px; color: var(--mute); display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.chat-snip .cs-from .wa { width: 14px; height: 14px; border-radius: 4px; background: #25d366; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.chat-snip .cs-text { font-size: 14px; color: var(--ink); line-height: 1.5; font-style: italic; }
.suggest { background: var(--clay-wash); border-radius: 8px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; }
.suggest .sg-ic { color: var(--clay); flex-shrink: 0; margin-top: 1px; }
.suggest .sg-lab { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--clay-deep); margin-bottom: 3px; }
.suggest .sg-text { font-size: 13.5px; color: var(--body); line-height: 1.5; }
.alert-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.alert-done { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--green); font-weight: 500; }

/* ============ Supplier reliability ============ */
.metric-bar { display: flex; flex-direction: column; gap: 6px; }
.metric-bar .mb-top { display: flex; align-items: baseline; justify-content: space-between; }
.metric-bar .mb-k { font-size: 12px; color: var(--mute); }
.metric-bar .mb-v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.metric-bar .track { height: 6px; border-radius: 999px; background: var(--stone-deep); overflow: hidden; }
.metric-bar .track > i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.metric-bar.warn .track > i { background: var(--amber); }
.metric-bar.bad .track > i { background: var(--clay); }
.rel-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.rel-chip .dot { width: 6px; height: 6px; border-radius: 999px; }
.rel-chip.reliable { background: var(--green-wash); color: var(--green); } .rel-chip.reliable .dot { background: var(--green); }
.rel-chip.watch { background: var(--amber-wash); color: var(--amber); } .rel-chip.watch .dot { background: var(--amber); }
.rel-chip.slipping { background: var(--clay-wash); color: var(--clay-deep); } .rel-chip.slipping .dot { background: var(--clay); }
.ord-status { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.ord-status.placed { color: var(--mute); }
.ord-status.partial, .ord-status.delayed { color: var(--amber); }
.ord-status.short { color: var(--clay-deep); }
.ord-status.delivered { color: var(--green); }

/* ============ Pilot chart ============ */
.pilot-chart { border: 1px solid var(--rule); border-radius: 12px; background: var(--stone-soft); padding: 22px 24px; }
.pc-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--mute); margin-bottom: 16px; }
.pc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pc-legend i { width: 14px; height: 3px; border-radius: 2px; }
.pc-legend i.test { background: var(--clay); } .pc-legend i.ctrl { background: var(--mute); }
.lift-badge { display: inline-flex; align-items: baseline; gap: 6px; }
.lift-badge .lb-v { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--clay-deep); font-variant-numeric: tabular-nums; }

/* ============ Loop player ============ */
.loop-bar { position: sticky; bottom: 0; z-index: 50; background: var(--ink); color: var(--stone); border-top: 1px solid var(--rule-dark); box-shadow: 0 -10px 30px -16px rgba(0,0,0,0.4); }
.loop-inner { max-width: 1180px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 18px; }
.loop-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--clay-tint); }
.loop-step-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; color: var(--stone); }
.loop-step-b { font-size: 12.5px; color: #b8b3a8; line-height: 1.5; margin-top: 3px; max-width: 720px; }
.loop-main { flex: 1; min-width: 0; }
.loop-ctrls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.loop-dots { display: flex; gap: 5px; margin-right: 6px; }
.loop-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--rule-dark); transition: background 200ms; }
.loop-dots i.on { background: var(--clay); }
.loop-dots i.done { background: var(--mute); }
.loop-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--rule-dark); background: transparent; color: var(--stone); transition: background 120ms, border-color 120ms; }
.loop-btn:hover { background: var(--ink-3); }
.loop-btn:disabled { opacity: 0.4; cursor: default; }
.loop-btn.primary { background: var(--clay); border-color: var(--clay); color: var(--stone); }
.loop-btn.primary:hover { background: var(--clay-deep); }
.loop-btn.field { border-color: var(--clay-tint); color: var(--clay-tint); }

/* launcher pill (when loop idle) */
.loop-launch { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--stone); font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; box-shadow: var(--shadow-pop); transition: transform 150ms var(--ease); }
.loop-launch:hover { transform: translateX(-50%) translateY(-2px); }
.loop-launch .gl { color: var(--clay-tint); display: inline-flex; }

/* generic focus glow for stores/suppliers rows during the loop */
.focus-glow { box-shadow: 0 0 0 2px var(--clay-wash), var(--shadow-pop) !important; border-color: var(--clay-tint) !important; }

/* mini map locator (store detail) */
.locator { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--stone); }
.locator svg { display: block; width: 100%; height: auto; }

/* KPI accent variants */
.stat .v.clay { color: var(--clay-deep); }

/* store list table tweaks */
.store-name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.006em; }
.store-sub { font-size: 12px; color: var(--mute); }
.mgr-cell { font-size: 13.5px; color: var(--body); white-space: nowrap; }
.mgr-cell { font-size: 13.5px; color: var(--body); white-space: nowrap; }

/* detail KV grid */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .kv-grid { grid-template-columns: 1fr; } }
.kv { border: 1px solid var(--rule-soft); border-radius: 9px; padding: 13px 15px; background: var(--stone); }
.kv .kv-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); }
.kv .kv-v { font-size: 14px; color: var(--ink); margin-top: 6px; line-height: 1.45; }