/* ===== Upnova MLM · app.extra.css — supplements for Laravel port ===== */

/* Badge variants per rank name */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;background:rgba(124,240,255,.08);color:#7cf0ff}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--starter{color:#8b8ea0;background:rgba(139,142,160,.1)}
.badge--bronze {color:#f7b267;background:rgba(247,178,103,.1)}
.badge--silver {color:#d9e2ff;background:rgba(217,226,255,.08)}
.badge--gold   {color:#ffd56b;background:rgba(255,213,107,.1)}
.badge--platinum{color:#7cf0ff;background:rgba(124,240,255,.1)}
.badge--diamond{color:#b68bff;background:rgba(182,139,255,.12)}
.badge--crown  {color:#c6ff3d;background:rgba(198,255,61,.12)}

/* Users table: avatar+name cell */
.cell-user{display:flex;align-items:center;gap:10px}
.cell-user .avatar{width:30px;height:30px;font-size:11px;flex:0 0 auto}
.cell-user small{display:block;font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* Pills */
.pill--err{color:#ff6b6b;background:rgba(255,107,107,.12)}

/* Gateway tag in orders table */
.gw-tag{display:inline-block;padding:3px 8px;border-radius:6px;background:rgba(124,240,255,.08);color:#7cf0ff;font-size:11px;font-weight:600}

/* Bars */
.chart--bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.chart--bars .bar i{display:block;width:100%;min-height:8px;background:linear-gradient(180deg,#c6ff3d,#7cf0ff);border-radius:8px 8px 2px 2px;box-shadow:0 0 28px rgba(198,255,61,.2)}
.chart--bars .bar span{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* Gateway cards (Blade structure) */
.gw{padding:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s}
.gw:hover{border-color:var(--border-2)}
.gw header{display:flex;align-items:center;gap:12px}
.gw header > div{flex:1;min-width:0}
.gw header strong{display:block;font-size:14px;font-weight:600}
.gw header small{display:block;font-size:11px;color:var(--muted)}
.gw__logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#1a1d28,#0b0d14);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;color:#c6ff3d}
.gw--on .gw__logo{color:#c6ff3d;border-color:rgba(198,255,61,.3);background:linear-gradient(135deg,rgba(198,255,61,.08),rgba(11,13,20,.9))}
.gw footer{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.gw footer .mono{flex:1;font-family:'JetBrains Mono',monospace;color:var(--text)}
.gw__flag{padding:3px 8px;border-radius:6px;background:rgba(139,142,160,.12);color:#8b8ea0;font-weight:600;font-size:10.5px}

/* Tree (genealogy) — SVG layout */
.tree__canvas{padding:20px;overflow:auto;min-height:460px;max-height:640px;background:radial-gradient(ellipse at center,rgba(124,240,255,.04),transparent 60%);display:flex;justify-content:center}
.treeSvg{width:100%;min-width:900px;max-width:100%;height:auto;transition:transform .2s}
.gnode{cursor:pointer}
.gnode__box{fill:rgba(17,20,28,.95);stroke:rgba(255,255,255,.08);stroke-width:1;transition:stroke .2s,filter .2s}
.gnode:hover .gnode__box{stroke:rgba(198,255,61,.5);filter:drop-shadow(0 6px 18px rgba(198,255,61,.15))}
.gnode__av{fill:url(#gnAv);stroke:rgba(255,255,255,.08);stroke-width:1}
.gnode__av-t{fill:#0b0d14;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.02em}
.gnode__name{fill:#e6eaf2;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600}
.gnode__rank{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600}
.gnode--hi .gnode__av{fill:url(#gnAvHi)}
.gnode--off{opacity:.55}
.gnode--off .gnode__av{fill:#2a2d38}
.gnode--off .gnode__av-t{fill:#8b8ea0}
.treeSvg::before{content:""}
/* inject gradients via defs at runtime — fallback gradients here as SVG mask fills */
.gnode__av{fill:#c6ff3d}
.gnode--hi .gnode__av{fill:#7cf0ff}
.gnode__rank.badge--starter {fill:#8b8ea0}
.gnode__rank.badge--bronze  {fill:#f7b267}
.gnode__rank.badge--silver  {fill:#d9e2ff}
.gnode__rank.badge--gold    {fill:#ffd56b}
.gnode__rank.badge--platinum{fill:#7cf0ff}
.gnode__rank.badge--diamond {fill:#b68bff}
.gnode__rank.badge--crown   {fill:#c6ff3d}

/* Toasts */
.toastHost{position:fixed;top:80px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:280px;max-width:420px;padding:12px 16px;background:rgba(17,20,28,.96);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#e6eaf2;font-size:13px;box-shadow:0 10px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px);transform:translateX(140%);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .3s}
.toast.is-in{transform:translateX(0);opacity:1}
.toast i{width:8px;height:8px;border-radius:50%;background:#7cf0ff;flex:0 0 auto;box-shadow:0 0 12px currentColor}
.toast--ok i  {background:#c6ff3d}
.toast--info i{background:#7cf0ff}
.toast--warn i{background:#f7b267}
.toast--err i {background:#ff6b6b}
.toast b{color:#fff;font-weight:600}

/* Small icon button variant */
.iconBtn--sm{width:28px;height:28px;font-size:14px}

/* Design live preview vars */
.preview{--pv-prim:#c6ff3d;--pv-sec:#7cf0ff;--pv-acc:#b68bff;--pv-bg:#0b0d14;--pv-rad:14px}
.preview,.preview *{border-radius:var(--pv-rad)}
.preview{background:var(--pv-bg);padding:16px;border:1px solid var(--border)}
.preview__top{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid var(--border)}
.preview__mark{width:22px;height:22px;background:linear-gradient(135deg,var(--pv-prim),var(--pv-sec));border-radius:6px}
.preview__top strong{flex:1;font-size:13px}
.preview__nav{display:inline-flex;gap:6px}
.preview__nav i{width:22px;height:3px;background:var(--border-2);border-radius:3px}
.preview__hero{margin-top:12px;padding:20px;background:linear-gradient(135deg,rgba(198,255,61,.08),rgba(124,240,255,.05));border:1px solid var(--border)}
.preview__hero small{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.preview__hero h4{margin:6px 0 12px;font-size:17px;font-weight:600}
.preview__hero em{color:var(--pv-prim);font-style:normal;font-weight:700}
.preview__btn{padding:8px 14px;background:var(--pv-prim);color:#0b0d14;border:0;font-weight:700;font-size:12px;cursor:pointer}
.preview__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.preview__cards > div{padding:12px;background:rgba(255,255,255,.02);border:1px solid var(--border)}
.preview__cards small{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.preview__cards b{display:block;margin-top:4px;font-size:15px;color:var(--pv-sec)}

/* Bar chart: ensure `.bar` uses flex-end label at bottom */
.chart--bars{display:flex;align-items:flex-end;gap:8px;height:220px;padding-top:20px}

/* ===== DEMOS VIEW ===== */
.demos__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;align-items:start}
.demoCard{border-radius:16px;border:1px solid var(--border);overflow:hidden;background:var(--bg-1);display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.demoCard:hover{border-color:rgba(198,255,61,.25);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.demoCard__hero{position:relative;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.demoCard__logo{max-height:110px;max-width:220px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.6))}
.demoCard__badge{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;padding:4px 10px;border-radius:20px;background:rgba(11,13,20,.8);backdrop-filter:blur(8px)}
.badge--live{color:#c6ff3d;border:1px solid rgba(198,255,61,.3)}
.badge--live .dot{width:6px;height:6px;border-radius:50%;background:#c6ff3d;animation:pulse-dot 1.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.demoCard__body{padding:24px;display:flex;flex-direction:column;gap:18px;flex:1}
.demoCard__meta h2{font-size:20px;font-weight:700;margin-bottom:6px}
.demoCard__desc{font-size:13px;color:var(--muted);line-height:1.6}
.demoCard__features{display:flex;flex-wrap:wrap;gap:6px}
.demoCard__features span{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(198,255,61,.07);border:1px solid rgba(198,255,61,.15);color:#c6ff3d;letter-spacing:.04em}
.demoCard__creds{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.creds__head{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.creds__rows{display:grid;grid-template-columns:1fr 1fr;gap:0}
.creds__rows>div{padding:9px 14px;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.creds__rows>div:nth-child(even){border-right:none}
.creds__rows>div:nth-last-child(-n+2){border-bottom:none}
.creds__rows span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.creds__rows code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text);background:none}
.demoCard__actions{display:flex;gap:10px;flex-wrap:wrap}
.demoCard__actions .btn{flex:1;justify-content:center;gap:8px;font-size:13px}
.demoCard--soon{opacity:.65}
.demoCard--soon:hover{opacity:.9}
.demoCard__soon-icon{display:flex;align-items:center;justify-content:center}
@media(max-width:700px){.demos__grid{grid-template-columns:1fr}.creds__rows{grid-template-columns:1fr}.creds__rows>div{border-right:none}.creds__rows>div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}.creds__rows>div:last-child{border-bottom:none}}