/* ─── Partner Portal CSS ───────────────────────────────────────────────── */

:root {
    /* Brand forest and mint, matching finance-pages.css --fp-dark / --fp-green.
       These were #0f3d2c and #84ffc2 - near-misses of the real tokens, close
       enough to look right in isolation and wrong beside the rest of the site. */
    --pp-forest: #143A21;
    --pp-sidebar-bg: var(--pp-forest);
    --pp-sidebar-width: 230px;
    --pp-accent: #83ffc0;
    --pp-accent-dark: #1a7a4a;
    --pp-text: #434343;
    --pp-page-bg: #f5f6fa;
    --pp-card-bg: #ffffff;
    --pp-border: #e8eaed;
    --pp-muted: #6b7280;
    --pp-green-label: #15803d;
    --pp-orange-label: #b45309;
}

/* EasyAsset brand font, applied consistently across the whole portal
   (login + app). Overrides Bootstrap's and globals.css's default sans stacks
   at body level so no element falls back to a non-brand font. Icon fonts
   (bootstrap-icons / Font Awesome) set their own family and are unaffected. */
:root {
    --bs-body-font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-color: var(--pp-text);
}
body {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pp-text);
}

/* ─── Ops "viewing as" banner ─────────────────────────────────────────────
   Shown only when Ops is signed in as a partner. Amber rather than brand mint
   or forest on purpose: it must read as a state warning, not as portal chrome,
   so it can never be mistaken for part of the partner's own UI. */

.pp-imp-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1rem;
    background: #7c4a03;
    color: #fff;
    font-size: 12.5px;
}
.pp-imp-tag {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    background: rgba(255,255,255,0.16);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.pp-imp-who { font-weight: 700; }
.pp-imp-note { color: rgba(255,255,255,0.72); }
.pp-imp-exit-form { margin-left: auto; }
.pp-imp-exit {
    background: #fff; color: #7c4a03; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer;
    padding: 5px 12px; border-radius: 999px;
}
.pp-imp-exit:hover { background: rgba(255,255,255,0.88); }

/* Push the fixed sidebar and the page body clear of the banner. */
.pp-wrap-impersonating .pp-sidebar { top: 40px; height: calc(100vh - 40px); }
.pp-wrap-impersonating .pp-main { padding-top: 40px; }

@media (max-width: 640px) {
    .pp-imp-note { display: none; }
}

/* ─── Layout ──────────────────────────────────────────────────────────── */

.pp-wrap {
    display: flex;
    min-height: 100vh;
    background: var(--pp-page-bg);
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pp-text);
}

/* ─── Sidebar ─────────────────────────────────────────────────────────── */

.pp-sidebar {
    width: var(--pp-sidebar-width);
    min-width: var(--pp-sidebar-width);
    background: var(--pp-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    padding-bottom: 1rem;
}

.pp-sidebar-brand {
    padding: 1.25rem 1.25rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.5rem;
}

.pp-sidebar-brand-icon {
    width: 36px;
    height: 36px;
    background: var(--pp-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--pp-sidebar-bg);
    flex-shrink: 0;
}

.pp-sidebar-brand-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.pp-sidebar-brand-text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pp-sidebar-brand-sub {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-nav-section {
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-top: 0.25rem;
}

.pp-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1.25rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    border-radius: 0 6px 6px 0;
    margin: 1px 0.5rem 1px 0;
}

.pp-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    text-decoration: none;
}

.pp-nav-item.active {
    color: var(--pp-accent);
    border-left-color: var(--pp-accent);
    background: rgba(131,255,192,0.1);
    font-weight: 600;
}

.pp-nav-item svg, .pp-nav-item .pp-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}

.pp-nav-item.active svg, .pp-nav-item.active .pp-nav-icon {
    opacity: 1;
}

.pp-sidebar-footer {
    margin-top: auto;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.pp-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pp-accent-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.pp-sidebar-footer-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.pp-sidebar-footer-tier {
    font-size: 10px;
    color: var(--pp-accent);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-sidebar-footer-logout {
    margin-left: auto;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.pp-sidebar-footer-logout:hover {
    color: #fff;
}

/* ─── Main Content ────────────────────────────────────────────────────── */

.pp-main {
    margin-left: var(--pp-sidebar-width);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pp-topbar {
    background: #fff;
    border-bottom: 1px solid var(--pp-border);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.pp-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.2;
}

.pp-page-subtitle {
    font-size: 13.5px;
    color: var(--pp-muted);
    margin: 0.2rem 0 0;
}

.pp-content {
    padding: 1.75rem 2rem;
    flex: 1;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    text-decoration: none;
    border: none;
}

.pp-btn-primary {
    background: var(--pp-sidebar-bg);
    color: #fff;
}

.pp-btn-primary:hover { opacity: 0.88; color: #fff; }

.pp-btn-accent {
    background: var(--pp-accent);
    color: var(--pp-sidebar-bg);
}

.pp-btn-accent:hover { opacity: 0.88; color: var(--pp-sidebar-bg); }

.pp-btn-outline {
    background: transparent;
    color: var(--pp-accent-dark);
    border: 1.5px solid var(--pp-accent-dark);
}

.pp-btn-outline:hover { background: var(--pp-accent-dark); color: #fff; }

.pp-btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 12px;
}

/* ─── Stat Cards ──────────────────────────────────────────────────────── */

.pp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pp-stat-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.pp-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 0.35rem;
}

.pp-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--pp-text);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.pp-stat-meta {
    font-size: 12px;
    color: var(--pp-muted);
}

.pp-stat-delta {
    font-size: 12px;
    color: var(--pp-green-label);
    font-weight: 600;
}

.pp-stat-value.green { color: var(--pp-green-label); }
.pp-stat-value.orange { color: var(--pp-orange-label); }
.pp-stat-value.accent-green { color: var(--pp-accent-dark); }

/* ─── Tier Banner ─────────────────────────────────────────────────────── */

.pp-tier-banner {
    background: var(--pp-sidebar-bg);
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.pp-tier-badge {
    display: inline-block;
    background: rgba(131,255,192,0.2);
    color: var(--pp-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}

.pp-tier-heading {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.pp-tier-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1rem;
}

.pp-tier-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.4rem;
}

.pp-tier-bar {
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
    overflow: hidden;
}

.pp-tier-bar-fill {
    height: 100%;
    background: var(--pp-accent);
    border-radius: 99px;
}

/* ─── Deal Cards ──────────────────────────────────────────────────────── */

.pp-deal-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
}

.pp-deal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.pp-deal-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pp-text);
}

.pp-deal-id {
    font-size: 12px;
    color: var(--pp-muted);
    font-weight: 500;
    margin-left: 0.4rem;
}

/* Where the lead came from. Neutral by default (a portal referral is the norm);
   mint for a widget lead, so a partner can see at a glance which of their own
   site's enquiries are converting. */
.pp-deal-source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #f3f4f6;
    color: var(--pp-muted);
    vertical-align: 2px;
}
.pp-deal-source.widget {
    background: rgba(131,255,192,0.22);
    color: var(--pp-forest);
}
.pp-deal-source i { font-size: 10px; }

.pp-deal-meta {
    font-size: 12px;
    color: var(--pp-muted);
    margin-bottom: 0.75rem;
}

.pp-deal-details {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pp-deal-detail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 0.15rem;
}

.pp-deal-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-text);
}

.pp-deal-detail-value.green { color: var(--pp-green-label); }

.pp-pipeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 12px;
    color: var(--pp-muted);
    margin-bottom: 0.4rem;
}

.pp-pipeline-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.pp-pipeline-bar-fill {
    height: 100%;
    background: var(--pp-accent-dark);
    border-radius: 99px;
    transition: width 0.3s;
}

.pp-pipeline-bar-fill.complete { background: var(--pp-accent-dark); }

/* ─── Status Badges ───────────────────────────────────────────────────── */

.pp-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pp-badge-blue { background: #dbeafe; color: #1d4ed8; }
.pp-badge-green { background: #dcfce7; color: #15803d; }
.pp-badge-orange { background: #fef3c7; color: #b45309; }
.pp-badge-gray { background: #f3f4f6; color: #6b7280; }
.pp-badge-purple { background: #ede9fe; color: #6d28d9; }
.pp-badge-accent { background: rgba(131,255,192,0.25); color: var(--pp-accent-dark); }

/* ─── Commission Table ────────────────────────────────────────────────── */

.pp-table-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    overflow: hidden;
}

.pp-table-header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--pp-border);
}

.pp-table-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-text);
}

.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pp-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pp-muted);
    background: #fafafa;
    border-bottom: 1px solid var(--pp-border);
}

.pp-table td {
    padding: 0.75rem 1rem;
    color: var(--pp-text);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.pp-table tr:last-child td { border-bottom: none; }
.pp-table td.green { color: var(--pp-green-label); font-weight: 700; }

/* ─── Calculator ──────────────────────────────────────────────────────── */

.pp-calc-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.pp-calc-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.pp-calc-subtitle {
    font-size: 12.5px;
    color: var(--pp-muted);
    margin-bottom: 1.25rem;
}

.pp-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pp-calc-field label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 0.35rem;
}

.pp-calc-input-wrap {
    position: relative;
}

.pp-calc-input-wrap input, .pp-calc-input-wrap select {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid var(--pp-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--pp-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.pp-calc-input-wrap input:focus, .pp-calc-input-wrap select:focus {
    border-color: var(--pp-accent-dark);
}

.pp-calc-suffix {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: var(--pp-muted);
    pointer-events: none;
}

.pp-calc-result {
    background: var(--pp-sidebar-bg);
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.pp-calc-result-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.35rem;
}

.pp-calc-result-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--pp-accent);
    margin-bottom: 0.25rem;
}

.pp-calc-result-sub { font-size: 12px; color: rgba(255,255,255,0.6); }

.pp-calc-breakdown {
    margin-top: 1rem;
    font-size: 13px;
}

.pp-calc-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    color: rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pp-calc-breakdown-row:last-child { border-bottom: none; }

.pp-calc-commission {
    background: rgba(131,255,192,0.1);
    border: 1px solid rgba(131,255,192,0.25);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.pp-calc-commission-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pp-accent-dark);
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.pp-calc-commission-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pp-accent-dark);
}

.pp-calc-commission-sub { font-size: 12px; color: var(--pp-muted); }

/* ─── Leaderboard ─────────────────────────────────────────────────────── */

.pp-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pp-podium-card {
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.25rem;
    background: var(--pp-card-bg);
    text-align: center;
}

.pp-podium-card.rank-1 {
    background: var(--pp-sidebar-bg);
    color: #fff;
    border-color: var(--pp-sidebar-bg);
}

.pp-podium-medal { font-size: 2rem; margin-bottom: 0.35rem; }
.pp-podium-rank { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 0.15rem; }
.pp-podium-card.rank-1 .pp-podium-rank { color: rgba(255,255,255,0.6); }
.pp-podium-name { font-size: 15px; font-weight: 800; color: var(--pp-text); margin-bottom: 0.3rem; }
.pp-podium-card.rank-1 .pp-podium-name { color: #fff; }
.pp-podium-volume { font-size: 1.1rem; font-weight: 800; color: var(--pp-accent-dark); }
.pp-podium-card.rank-1 .pp-podium-volume { color: var(--pp-accent); }

.pp-lb-current-row { background: rgba(131,255,192,0.08) !important; font-weight: 700; }

/* ─── Resources ───────────────────────────────────────────────────────── */

.pp-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.pp-resource-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-resource-icon {
    width: 40px;
    height: 40px;
    background: rgba(131,255,192,0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-accent-dark);
}

.pp-resource-title { font-size: 14px; font-weight: 700; color: var(--pp-text); }
.pp-resource-meta { font-size: 12px; color: var(--pp-muted); }

/* ─── Training ────────────────────────────────────────────────────────── */

.pp-training-progress-banner {
    background: var(--pp-sidebar-bg);
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pp-training-progress-text {
    font-size: 1.4rem;
    font-weight: 800;
}

.pp-training-progress-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-top: 0.2rem;
}

.pp-training-pct {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pp-accent);
}

.pp-training-bar {
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.pp-training-bar-fill {
    height: 100%;
    background: var(--pp-accent);
    border-radius: 99px;
}

.pp-module-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.pp-module-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.pp-module-icon.complete { background: #dcfce7; color: var(--pp-green-label); }
.pp-module-icon.in_progress { background: #dbeafe; color: #1d4ed8; }
.pp-module-icon.not_started { background: #f3f4f6; color: var(--pp-muted); }

.pp-module-num { font-size: 10px; color: var(--pp-muted); font-weight: 700; }
.pp-module-title { font-size: 14px; font-weight: 600; color: var(--pp-text); }
.pp-module-duration { font-size: 12px; color: var(--pp-muted); margin-left: auto; margin-right: 0.75rem; }

/* ─── Support ─────────────────────────────────────────────────────────── */

/* auto-fit rather than a fixed 3: the grid now holds two cards (live chat was
   removed) and shouldn't leave a third of the row empty. */
.pp-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pp-contact-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.pp-contact-icon {
    width: 44px;
    height: 44px;
    background: rgba(131,255,192,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-accent-dark);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.pp-contact-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pp-muted); margin-bottom: 0.25rem; }
.pp-contact-value { font-size: 14px; font-weight: 700; color: var(--pp-text); }

/* ─── Support FAQ ─────────────────────────────────────────────────────────
   Own class names rather than Bootstrap's accordion: globals.css imports
   Tailwind, whose `.collapse` utility is `visibility: collapse` and collides
   with Bootstrap's `.collapse`. That clash rendered every answer into the DOM
   and then hid it, so the panel opened to full height showing nothing. */

.pp-faq-item { border-bottom: 1px solid #f3f4f6; }
.pp-faq-item:last-child { border-bottom: none; }

.pp-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
}
.pp-faq-q i {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--pp-muted);
    transition: transform 0.2s ease;
}
.pp-faq-item.open .pp-faq-q i { transform: rotate(180deg); }
.pp-faq-q:focus-visible { outline: 2px solid var(--pp-accent-dark); outline-offset: 2px; border-radius: 6px; }

/* Height animates; the inner div carries the padding so there is nothing to
   collapse awkwardly at zero height. */
.pp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.pp-faq-item.open .pp-faq-a { max-height: 320px; }
.pp-faq-a-inner {
    padding: 0 0 1rem;
    font-size: 13.5px;
    color: var(--pp-muted);
    line-height: 1.65;
}

/* ─── Profile / Account ───────────────────────────────────────────────── */

.pp-form-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.pp-form-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 1.1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--pp-border);
}

.pp-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--pp-accent-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}

.pp-field-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 0.35rem;
    display: block;
}

.pp-field-input {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid var(--pp-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--pp-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.pp-field-input:focus { border-color: var(--pp-accent-dark); }

.pp-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.pp-badge-item {
    background: #f9fafb;
    border: 1px solid var(--pp-border);
    border-radius: 10px;
    padding: 0.85rem;
    text-align: center;
    font-size: 1.5rem;
}

.pp-badge-item.earned { background: rgba(131,255,192,0.1); border-color: rgba(131,255,192,0.4); }
.pp-badge-item.locked { opacity: 0.4; }

.pp-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 13.5px;
    color: var(--pp-text);
    border-bottom: 1px solid #f3f4f6;
}

.pp-notif-row:last-child { border-bottom: none; }

/* ─── Login Page ──────────────────────────────────────────────────────── */

.pp-login-wrap {
    min-height: 100vh;
    display: flex;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pp-login-panel {
    width: 45%;
    background: var(--pp-sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
}

.pp-login-panel-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.pp-login-panel-brand-icon {
    width: 40px;
    height: 40px;
    background: var(--pp-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: var(--pp-sidebar-bg);
}

/* Kept deliberately smaller than the "Refer. Track. Earn." headline below - at
   40px the lockup competed with it for first read. */
.pp-login-panel-brand-img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: contain;
}

/* Goldplay semibold italic - the wordmark's own typeface, the same face and file
   the finance home page loads for its hero headline. Set at 40px to match the
   logo icon beside it, so mark and wordmark read as one lockup. Falls back to
   proxima-nova (already loaded via Typekit) rather than to Arial if the file
   fails. Note the foundry's generator strips OpenType features, so there is no
   'fi' ligature to rely on. */
@font-face {
    font-family: 'Goldplay';
    src: url('/fonts/goldplay-600-italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

.pp-login-panel-brand-name {
    font-family: 'Goldplay', 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 600;
    font-style: italic;
    /* The face carries its own optical spacing; 1 keeps the cap height aligned
       with the icon rather than pushing the text off its baseline. */
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
}

.pp-login-headline {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
}

.pp-login-headline span { color: var(--pp-accent); }

.pp-login-tagline {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    max-width: 380px;
    line-height: 1.6;
}

.pp-login-footer-text {
    font-size: 11.5px;
    color: rgba(255,255,255,0.35);
}

.pp-login-form-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.5rem;
    background: #fff;
}

/* 320px matches the width Google renders its sign-in button at
   (GoogleSignIn.tsx passes width: 320), so the heading, the Google button, the
   password form and the links below all sit on ONE centre axis. At 380px the
   heading was flush left, the 320px Google button centred on 160px and the
   text-align:center links centred on 190px - three different alignments. */
.pp-login-form-inner {
    width: 100%;
    max-width: 320px;
    text-align: center;
}

/* Form rows opt back out - labels and inputs read better flush left. */
.pp-login-field { text-align: left; }

.pp-login-form-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pp-text);
    margin-bottom: 0.3rem;
}

.pp-login-form-sub {
    font-size: 13.5px;
    color: var(--pp-muted);
    margin-bottom: 2rem;
}

.pp-login-field {
    margin-bottom: 1.1rem;
}

/* Google injects a fixed-width iframe/div; centre it in the column so it can
   never drift off the shared axis if GSI returns a different width.
   Column, not row: GoogleSignIn renders the button, an optional error and the
   "Signing you in…" status as SIBLINGS, so a plain flex row laid the status
   text out beside the button in a squeezed column. */
.pp-login-google {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pp-login-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pp-muted);
    margin-bottom: 0.4rem;
}

.pp-login-field input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--pp-border);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--pp-text);
    outline: none;
    transition: border-color 0.15s;
}

.pp-login-field input:focus { border-color: var(--pp-accent-dark); }

/* Show/hide password. The button sits inside the field's box, and the input
   gets right padding so a long password never runs under the icon. */
.pp-pw-wrap { position: relative; }
.pp-pw-wrap input { padding-right: 2.75rem; }
.pp-pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--pp-muted);
    font-size: 15px;
    line-height: 1;
    border-radius: 6px;
}
.pp-pw-toggle:hover { color: var(--pp-text); }
.pp-pw-toggle:focus-visible { outline: 2px solid var(--pp-accent-dark); outline-offset: 1px; }

.pp-login-btn {
    width: 100%;
    padding: 0.8rem;
    background: var(--pp-accent-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.5rem;
}

.pp-login-btn:hover { background: var(--pp-sidebar-bg); }

.pp-login-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 13px;
    margin-bottom: 1rem;
}

.pp-login-apply-link {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 13px;
    color: var(--pp-muted);
}

.pp-login-apply-link a { color: var(--pp-forest); font-weight: 600; }

/* ─── Landing page ────────────────────────────────────────────────────── */

.pp-landing-hero {
    background: var(--pp-sidebar-bg);
    color: #fff;
    padding: 5rem 0 4rem;
}

.pp-landing-hero-headline {
    font-size: 3.25rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.pp-landing-hero-headline span { color: var(--pp-accent); }

.pp-landing-hero-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
    max-width: 540px;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.pp-landing-features {
    padding: 4rem 0;
    background: #fff;
}

.pp-landing-feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.pp-landing-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(131,255,192,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--pp-accent-dark);
    font-size: 1.4rem;
}

.pp-landing-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-text);
    margin-bottom: 0.5rem;
}

.pp-landing-feature-desc {
    font-size: 13.5px;
    color: var(--pp-muted);
    line-height: 1.6;
}

/* ─── Tab toggles ─────────────────────────────────────────────────────── */

.pp-tab-group {
    display: flex;
    gap: 0.25rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.25rem;
}

.pp-tab-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--pp-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: inline-block;
    text-decoration: none;
}

.pp-tab-btn:hover {
    color: var(--pp-text);
}

.pp-tab-btn.active {
    background: var(--pp-sidebar-bg);
    color: #fff;
}

.pp-tab-btn-green.active {
    background: var(--pp-accent-dark);
    color: #fff;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .pp-sidebar { display: none; }
    .pp-main { margin-left: 0; }
    .pp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-deal-details { grid-template-columns: repeat(3, 1fr); }
    .pp-podium-grid, .pp-contact-grid, .pp-resource-grid { grid-template-columns: 1fr; }
    .pp-login-panel { display: none; }
    .pp-login-form-wrap { width: 100%; }
    .pp-calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .pp-stats-grid { grid-template-columns: 1fr; }
    .pp-content { padding: 1rem; }
    .pp-topbar { padding: 1rem; }
}

/* Alternate sign-in links (password fallback / forgot password) */
.pp-login-alt { margin-top: 1rem; text-align: center; }
.pp-login-alt-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--pp-forest); font-size: 13px; font-weight: 600; text-decoration: none;
}
.pp-login-alt-link:hover { text-decoration: underline; }