/* ============================================================================
   Portal — the hidden staff & member workspace. Deep console mood.
   ========================================================================= */

.portal {
    min-height: 100vh;
    background:
        radial-gradient(1100px 600px at 100% -10%, rgba(0, 98, 155, 0.14), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(108, 140, 255, 0.10), transparent 60%),
        var(--p-bg);
    color: var(--p-text);
    display: grid;
    grid-template-columns: var(--side-w, 272px) 1fr;
    position: relative;
}

/* ---- Sidebar --------------------------------------------------------- */

.side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem 1.1rem;
    background: linear-gradient(180deg, var(--p-panel), var(--p-bg-2));
    border-right: 1px solid var(--p-line);
    z-index: 40;
}
.side__brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.5rem 1rem; border-bottom: 1px solid var(--p-line); }
.side__brand .brand__mark { color: var(--p-accent); width: 30px; height: 30px; }
.side__brand b { font-family: var(--font-display); font-size: 1rem; color: #fff; letter-spacing: -0.02em; }
.side__brand small { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--p-muted); }

.side__nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1.4rem; padding-right: 0.2rem; }
.side__group { display: grid; gap: 0.2rem; }
.side__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-muted); padding: 0 0.7rem 0.4rem; }

.side__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.75rem;
    border-radius: var(--r-sm);
    color: var(--p-muted);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
    position: relative;
}
.side__link svg { width: 18px; height: 18px; flex: none; }
.side__link:hover { color: var(--p-text); background: rgba(255, 255, 255, 0.04); }
.side__link.active { color: #fff; background: rgba(0, 98, 155, 0.28); }
.side__link.active::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--p-accent);
}
.side__link .badge-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; padding: 0.15em 0.5em; border-radius: var(--r-pill); background: var(--p-accent); color: #fff; font-weight: 600; }

.side__user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--p-line);
}
.side__user b { display: block; font-size: 0.88rem; color: #fff; font-weight: 600; line-height: 1.2; }
.side__user span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-accent); }
.side__user button { margin-left: auto; color: var(--p-muted); padding: 0.4rem; border-radius: var(--r-sm); }
.side__user button:hover { color: var(--p-coral); background: rgba(255, 107, 74, 0.12); }

/* ---- Main / topbar --------------------------------------------------- */

.portal__main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem clamp(1rem, 3vw, 2.4rem);
    background: rgba(7, 11, 20, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--p-line);
}
.topbar__title h1 { font-size: 1.5rem; color: #fff; letter-spacing: -0.02em; }
.topbar__title p { font-size: 0.85rem; color: var(--p-muted); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

.side__toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--p-line); color: var(--p-text); place-items: center; }

.portal__content { padding: clamp(1.2rem, 3vw, 2.4rem); display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-content: start; }
.p-page { display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); }

/* ---- Page head ------------------------------------------------------- */

.p-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.p-head .eyebrow { color: var(--p-accent); }
.p-head .eyebrow::before { background: var(--p-accent); }
.p-head h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.p-head p { color: var(--p-muted); max-width: 56ch; }

/* ---- Panels (dark card) --------------------------------------------- */

.portal .card, .portal .tile {
    background: linear-gradient(180deg, var(--p-panel), var(--p-bg-2));
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow);
    color: var(--p-text);
}
.portal .card--hover:hover { border-color: var(--p-line-strong); }
.portal h1, .portal h2, .portal h3, .portal h4, .portal h5 { color: #fff; }
.portal .muted { color: var(--p-muted); }
.portal .divider { background: var(--p-line); }

.kpi {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.5rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--p-line);
    background: linear-gradient(180deg, var(--p-panel), var(--p-bg-2));
}
.kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(0,98,155,0.22), transparent 70%); }
.kpi__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); display: flex; align-items: center; gap: 0.5rem; }
.kpi__value { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 600; color: #fff; line-height: 1.1; margin-top: 0.6rem; letter-spacing: -0.02em; }
.kpi__foot { margin-top: 0.5rem; font-size: 0.82rem; color: var(--p-muted); display: flex; align-items: center; gap: 0.4rem; }
.kpi--mint::after { background: radial-gradient(circle, rgba(0,98,155,0.28), transparent 70%); }
.kpi--amber::after { background: radial-gradient(circle, rgba(255,194,75,0.20), transparent 70%); }
.kpi--coral::after { background: radial-gradient(circle, rgba(255,107,74,0.20), transparent 70%); }
.kpi--violet::after { background: radial-gradient(circle, rgba(155,123,255,0.22), transparent 70%); }

/* ---- Forms (dark) ---------------------------------------------------- */

.portal .input, .portal .select, .portal .textarea {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--p-line-strong);
    color: var(--p-text);
}
.portal .input:focus, .portal .select:focus, .portal .textarea:focus {
    border-color: var(--p-accent);
    box-shadow: 0 0 0 4px rgba(0, 98, 155, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
.portal .input::placeholder, .portal .textarea::placeholder { color: rgba(233,238,248,0.32); }
.portal .field > label, .portal .flabel { color: var(--p-muted); }
.portal .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238895AD' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.portal .hint { color: var(--p-muted); }

/* ---- Buttons (dark) -------------------------------------------------- */

.portal .btn--subtle { --btn-bg: rgba(255,255,255,0.06); --btn-fg: var(--p-text); }
.portal .btn--ghost { --btn-bg: transparent; --btn-fg: var(--p-text); --btn-line: var(--p-line-strong); }
.portal .btn--ghost:hover { --btn-bg: rgba(255,255,255,0.08); --btn-fg: #fff; --btn-line: var(--p-line-strong); }
.portal .btn--mint { --btn-bg: var(--p-accent); --btn-fg: #fff; }
.portal .btn--ink { --btn-bg: #fff; --btn-fg: var(--p-bg); }

/* ---- Tags (dark) ----------------------------------------------------- */

.portal .tag { background: rgba(255,255,255,0.06); color: var(--p-muted); }
.portal .tag--blue { background: rgba(108,140,255,0.16); color: #9FB4FF; }
.portal .tag--mint { background: rgba(0, 98, 155, 0.22); color: var(--p-accent); }
.portal .tag--amber { background: rgba(255,194,75,0.16); color: var(--p-amber); }
.portal .tag--coral { background: rgba(255,107,74,0.16); color: var(--p-coral); }
.portal .tag--violet { background: rgba(155,123,255,0.18); color: var(--p-violet); }

/* ---- Tables (dark) --------------------------------------------------- */

.portal .table-wrap { background: var(--p-panel); border-color: var(--p-line); }
.portal .table th { color: var(--p-muted); border-bottom-color: var(--p-line); }
.portal .table td { border-bottom-color: var(--p-line); }
.portal .table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ---- Empty (dark) ---------------------------------------------------- */

.portal .empty { color: var(--p-muted); }
.portal .empty h3 { color: #fff; }
.portal .empty__glyph { background: rgba(255,255,255,0.05); }
.portal .skeleton, .portal .skeleton-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.05) 63%);
    background-size: 400% 100%;
}
.portal .meter { background: rgba(255,255,255,0.08); }

/* ---- Rows / lists ---------------------------------------------------- */

.row-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--p-line);
}
.row-item:last-child { border-bottom: none; }
.row-item__main { min-width: 0; }
.row-item__main b { display: block; color: #fff; font-size: 0.95rem; font-weight: 600; }
.row-item__main span { color: var(--p-muted); font-size: 0.84rem; }
.row-item__side { margin-left: auto; text-align: right; display: flex; align-items: center; gap: 0.6rem; }

.stat-inline { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat-inline > div b { font-family: var(--font-display); color: #fff; font-size: 1.2rem; display: block; }
.stat-inline > div span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-muted); }

/* ---- Charts ---------------------------------------------------------- */

.bars { display: flex; align-items: flex-end; gap: 0.6rem; height: 190px; padding-top: 1rem; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; }
.bars__pair { display: flex; align-items: flex-end; gap: 3px; height: 150px; width: 100%; justify-content: center; }
.bars__bar { width: 40%; max-width: 16px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--p-accent), rgba(0, 98, 155, 0.30)); transition: height 0.8s var(--ease-out); min-height: 2px; }
.bars__bar--alt { background: linear-gradient(180deg, var(--p-accent-2), rgba(108,140,255,0.25)); }
.bars__label { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.06em; color: var(--p-muted); white-space: nowrap; }

/* ---- Scrim (mobile sidebar) ----------------------------------------- */

.scrim { display: none; }

@media (max-width: 1040px) {
    .portal { grid-template-columns: 1fr; }
    .side {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 84vw);
        transform: translateX(-105%);
        transition: transform 0.45s var(--ease);
        box-shadow: 40px 0 80px -40px #000;
    }
    .portal.side-open .side { transform: none; }
    .side__toggle { display: grid; }
    .portal.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
}

/* =========================================================================
   Auth (portal login) — hidden at /portal
   ========================================================================= */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: var(--p-bg);
    color: var(--p-text);
}
.auth__aside {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--p-panel), #04070E);
    border-right: 1px solid var(--p-line);
    padding: clamp(2rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(150,180,230,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,180,230,0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%);
    pointer-events: none;
}
.auth__aside .brand__mark { color: var(--p-accent); width: 40px; height: 40px; }
.auth__quote { position: relative; z-index: 1; }
.auth__quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; color: #fff; }
.auth__quote span { display: block; margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-accent); }
.auth__badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.6rem; }

.auth__panel { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem); }
.auth__form { width: min(420px, 100%); }
.auth__form h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; margin: 1.2rem 0 0.5rem; }
.auth__form > p { color: var(--p-muted); margin-bottom: 2rem; }
.auth__back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: var(--p-muted); margin-bottom: 1.5rem; }
.auth__back:hover { color: #fff; }
.auth__foot { margin-top: 1.5rem; font-size: 0.84rem; color: var(--p-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.auth__foot a { color: var(--p-accent); }

@media (max-width: 880px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
}

/* ---- Living portal chrome -------------------------------------------- */

.portal .ambient__orb { --orb-o: 0.55; }

.side__brand .brand__mark { animation: brand-breathe 4.5s var(--ease) infinite alternate; }
@keyframes brand-breathe {
    from { box-shadow: 0 0 0 0 rgba(0, 98, 155, 0); }
    to { box-shadow: 0 0 0 7px rgba(0, 98, 155, 0.20); }
}

.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--p-accent), transparent);
    background-size: 200% 100%;
    animation: pan 7s linear infinite;
}