/* ============================================================
   WildCore Portal v2 — authenticated app chrome
   Mirrors the public v2 theme (theme-v2.css) EXACTLY in style.
   The ONLY difference: accent is GREEN instead of orange, so the
   authenticated portal is visually distinct from the public site.
   Loaded AFTER theme-v2.css, so these var overrides win.
   ============================================================ */

/* ---- GREEN ACCENT OVERRIDE (replaces theme-v2 orange) ---- */
:root{
    --accent:#19c37d;            /* was #f0683a */
    --accent-hi:#27d98f;         /* was #ff7a45 */
    --accent-glow:rgba(25,195,125,.45);
}

/* The public theme bakes the orange into a few literal gradients/colors
   (logo b, hero accent, btn-accent, prod img, cart badge). Re-point those
   to the green vars so nothing orange leaks into the portal. */
.logo b,.portal-brand .mark b{color:var(--accent)}
.btn-accent{background:linear-gradient(180deg,var(--accent-hi),var(--accent));border-color:rgba(110,230,170,.5);color:#04140d}
.btn-accent:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px var(--accent-glow);color:#03100a}
.eyebrow{color:var(--accent)}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow::after{background:linear-gradient(90deg,var(--accent),transparent)}

/* ---------- TOP NAV (portal flavor of the public header) ---------- */
/* Reuses public header/nav/.logo/.nav-links/.nav-cta from theme-v2.css.
   Portal-only: active link state + wider nav to match the wider content. */
header nav{max-width:1680px}
/* Crisper menu text in the portal: brighten the logo wordmark, nav links,
   and user/logout text toward near-white. Scoped to the portal header so
   the public site's softer palette is untouched. */
header .logo .mark{color:var(--platinum-hi)}
.nav-links a{color:var(--platinum)}
.nav-links a:hover{color:var(--platinum-hi)}
.nav-links a.active{color:var(--platinum-hi);background:rgba(255,255,255,.06);border-radius:3px}
.portal-userchip .pu-email{color:var(--platinum)}
.nav-cta .btn-ghost{color:var(--platinum)}
.portal-userchip{display:flex;align-items:center;gap:.6rem;font-family:var(--cond);font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim)}
.portal-userchip .pu-email{color:var(--platinum);text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.85rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- FULL-WIDTH BANNER ROW (under nav) ---------- */
/* Portal uses a wider content width than the public marketing pages so the
   app uses more horizontal real-estate. Override .container inside portal
   regions only (does not touch the public site, which has its own pages). */
.portal-banner .container,
.portal-body .container{max-width:1680px}

.portal-banner{
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--steel-800),var(--carbon-a));
    padding:1.8rem 0 1rem;
}
.portal-banner .container{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.portal-banner-lead{flex:1;min-width:220px}
.portal-banner-lead h1{
    font-family:var(--cond);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.3rem);text-transform:uppercase;letter-spacing:.01em;
    background:linear-gradient(180deg,var(--platinum-hi),var(--platinum-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25rem;
}
.portal-banner-lead .pb-sub{color:var(--ink-dim);font-size:.95rem}

/* metric tiles live in the banner row, full width — always one row */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;flex:2;min-width:300px}
.metric-tile{
    text-align:center;padding:1rem .9rem;border-radius:6px;
    background:linear-gradient(180deg,var(--steel-700),var(--steel-900));
    border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.metric-tile .mt-ico{font-size:1.4rem;line-height:1;margin-bottom:.35rem}
.metric-tile .mt-val{font-family:var(--disp);font-weight:900;font-size:1.6rem;color:var(--platinum-hi);line-height:1}
.metric-tile .mt-label{font-family:var(--cond);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-top:.3rem}

/* ---------- PAGE BODY ---------- */
.portal-body{padding:1.2rem 0 4rem}
.portal-body h2{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--platinum-hi);font-size:1.4rem;margin:.5rem 0 1.2rem}

/* ---------- VIEW TOGGLE ---------- */
.view-toggle{display:flex;gap:.6rem;margin:0 0 1.4rem}

/* ---------- FEEDER CARDS ---------- */
.feeder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.feeder-card{
    position:relative;overflow:hidden;border-radius:6px;transition:.22s;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,var(--steel-700),var(--steel-800) 55%,var(--steel-900));
    border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -22px rgba(0,0,0,.9);
}
.feeder-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 50px -26px #000,0 0 30px -18px var(--accent-glow)}
.feeder-model-bar{
    padding:.32rem .8rem;font-family:var(--cond);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--platinum-hi);
    border-bottom:1px solid var(--line);
}
.feeder-model-bar.model-wildcore-pro{background:linear-gradient(90deg,rgba(25,195,125,.22),transparent)}
.feeder-model-bar.model-wildcore-mini{background:linear-gradient(90deg,rgba(120,150,255,.18),transparent)}
.feeder-model-bar.model-feed-vault{background:linear-gradient(90deg,rgba(160,120,60,.22),transparent)}
.feeder-card-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.feeder-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.feeder-name{font-family:var(--body);font-weight:700;font-size:1.05rem;color:var(--platinum-hi);text-transform:uppercase;letter-spacing:.01em;margin-bottom:.2rem}
.feeder-imei{font-size:.72rem;color:var(--ink-dim);font-family:monospace}
.feeder-stats{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem}
.feeder-actions{margin-top:auto}
.feeder-stat{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border-radius:0;border-left:3px solid var(--sc,var(--line-2));background:var(--st,var(--carbon-b))}
.feeder-stat-label{font-size:.7rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:0}
.feeder-stat-value{font-family:var(--body);font-size:.95rem;font-weight:400;color:var(--platinum-hi)}
.feeder-actions{display:flex;gap:.6rem}

/* ---------- EMPTY STATE ---------- */
.portal-empty{text-align:center;padding:4rem 2rem;border-radius:8px;
    background:linear-gradient(180deg,var(--steel-700),var(--steel-900));border:1px solid var(--line)}
.portal-empty .pe-ico{font-size:3.4rem;margin-bottom:1rem;opacity:.8}
.portal-empty h2{font-family:var(--cond);text-transform:uppercase;color:var(--platinum-hi);margin-bottom:.6rem}
.portal-empty p{color:var(--ink-dim);margin-bottom:1.6rem}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
    .nav-links{display:none}        /* matches public theme breakpoint */
    .portal-banner .container{flex-direction:column;align-items:stretch}
}