/* ==========================================================================
   partners.jhaenajewels.com — theme
   Gold/champagne lifted straight from the logo and the afd- admin component
   so the partner side and the staff side read as one system.
   Prefix: pp-
   ========================================================================== */

:root {
    --pp-gold: #C5A44E;
    --pp-gold-2: #E8D5A3;
    --pp-silver: #8C8C8C;
    --pp-ink: #20242b;

    --pp-bg-page: #f6f7f9;
    --pp-bg-card: #ffffff;
    --pp-bg-rail: #14171d;
    --pp-rail-text: #b9c0cc;
    --pp-text: #374151;
    --pp-heading: #20242b;
    --pp-muted: #6b7280;
    --pp-border: rgba(128, 128, 128, .16);

    --pp-ok: #047857;
    --pp-warn: #92400e;
    --pp-bad: #b91c1c;
    --pp-info: #1e40af;
}

[data-theme="dark"] {
    --pp-bg-page: #10131a;
    --pp-bg-card: #171b24;
    --pp-bg-rail: #0c0e13;
    --pp-text: #d7dce5;
    --pp-heading: #f3f4f6;
    --pp-muted: #929baa;
    --pp-border: rgba(148, 163, 184, .17);
    --pp-ok: #34d399;
    --pp-warn: #fbbf24;
    --pp-bad: #fca5a5;
    --pp-info: #93c5fd;
}

body {
    margin: 0;
    background: var(--pp-bg-page);
    color: var(--pp-text);
    font-size: 14px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pp-muted { color: var(--pp-muted); }
.pp-ok { color: var(--pp-ok); }
.pp-bad { color: var(--pp-bad); }
.pp-warn { color: var(--pp-warn); }
.min-w-0 { min-width: 0; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.pp-shell { display: flex; min-height: 100vh; }

.pp-rail {
    width: 244px; min-width: 244px; display: flex; flex-direction: column;
    background: var(--pp-bg-rail); color: var(--pp-rail-text);
    position: sticky; top: 0; height: 100vh;
}
.pp-rail-brand { padding: 20px 18px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.07); }
.pp-rail-brand img { width: 62px; height: auto; display: block; margin: 0 auto 8px; }
.pp-rail-brand strong { display: block; font-size: 12px; letter-spacing: 1.6px; color: var(--pp-gold); text-transform: uppercase; }
.pp-rail-brand span { display: block; font-size: 9px; letter-spacing: 2px; opacity: .55; text-transform: uppercase; margin-top: 2px; }

.pp-rail-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; }
.pp-rail-group { margin: 14px 8px 5px; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .38; }
.pp-nav {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 2px;
    border-radius: 8px; color: var(--pp-rail-text); text-decoration: none; font-size: 13px;
    border-left: 3px solid transparent;
}
.pp-nav i { width: 17px; font-size: 15px; text-align: center; opacity: .85; }
.pp-nav:hover { background: rgba(255,255,255,.06); color: #fff; }
.pp-nav.is-active {
    background: linear-gradient(90deg, rgba(197,164,78,.20), transparent);
    border-left-color: var(--pp-gold); color: #fff; font-weight: 600;
}
.pp-nav.is-active i { color: var(--pp-gold); opacity: 1; }
.pp-nav-badge {
    margin-left: auto; padding: 0 7px; border-radius: 999px;
    font-size: 10px; font-weight: 800; color: var(--pp-ink); background: var(--pp-gold);
}

.pp-rail-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.pp-rail-user { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; min-width: 0; }
.pp-rail-user strong { display: block; font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rail-user small { display: block; font-size: 10px; opacity: .55; }

.pp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pp-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 22px; background: var(--pp-bg-card); border-bottom: 1px solid var(--pp-border);
    position: sticky; top: 0; z-index: 20;
}
.pp-topbar h1 { margin: 0; font-size: 17px; font-weight: 800; color: var(--pp-heading); }
.pp-topbar p { margin: 1px 0 0; font-size: 11px; color: var(--pp-muted); }
.pp-body { flex: 1 1 auto; padding: 20px 22px 40px; }
.pp-burger { display: none; }

/* ── Avatar / badges / chips ───────────────────────────────────────────── */
.pp-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 800;
    color: var(--pp-ink); background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-2));
}
.pp-avatar-lg { width: 60px; height: 60px; border-radius: 17px; font-size: 20px; }

.pp-badge {
    display: inline-block; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
}
.pp-badge-ok { color: var(--pp-ok); background: rgba(16,185,129,.14); }
.pp-badge-warn { color: var(--pp-warn); background: rgba(245,158,11,.17); }
.pp-badge-bad { color: var(--pp-bad); background: rgba(239,68,68,.14); }
.pp-badge-dead { color: #4b5563; background: rgba(107,114,128,.18); }
.pp-badge-info { color: var(--pp-info); background: rgba(59,130,246,.13); }
.pp-badge-muted { color: var(--pp-muted); background: rgba(128,128,128,.12); }

.pp-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
    font-size: 10px; background: rgba(128,128,128,.09); color: var(--pp-muted);
}
.pp-chip i { color: var(--pp-gold); }
.pp-code {
    font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .6px; color: var(--pp-gold);
}

/* ── Cards / KPIs ──────────────────────────────────────────────────────── */
.pp-card { background: var(--pp-bg-card); border: 1px solid var(--pp-border); border-radius: 13px; overflow: hidden; margin-bottom: 16px; }
.pp-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 15px; border-bottom: 1px solid var(--pp-border);
}
.pp-card-head h2 { margin: 0; font-size: 13px; font-weight: 800; color: var(--pp-heading); }
.pp-card-head h2 i { margin-right: 7px; color: var(--pp-gold); }
.pp-card-head small { font-size: 10px; color: var(--pp-muted); }
.pp-card-body { padding: 15px; }

.pp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pp-kpi { padding: 14px 15px; border: 1px solid var(--pp-border); border-radius: 12px; background: var(--pp-bg-card); min-width: 0; }
.pp-kpi span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; opacity: .66; }
.pp-kpi strong { display: block; margin: 5px 0 2px; font-size: 23px; font-weight: 800; color: var(--pp-heading); word-break: break-word; }
.pp-kpi small { display: block; font-size: 10px; color: var(--pp-muted); line-height: 1.45; }
.pp-kpi-hero {
    border-color: rgba(197,164,78,.42);
    background: linear-gradient(135deg, rgba(197,164,78,.13), rgba(232,213,163,.05));
}
.pp-kpi-hero strong { font-size: 27px; }

.pp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 9px; }
.pp-strip > div { padding: 8px 10px; border-radius: 8px; background: rgba(128,128,128,.05); min-width: 0; }
.pp-strip span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .68; }
.pp-strip strong { font-size: 14px; font-weight: 700; word-break: break-word; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.pp-tablewrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pp-table th {
    padding: 10px 11px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--pp-border); background: rgba(128,128,128,.04);
    font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--pp-muted);
}
.pp-table td { padding: 10px 11px; border-bottom: 1px solid rgba(128,128,128,.09); vertical-align: middle; }
.pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table tbody tr:hover { background: rgba(197,164,78,.05); }
.pp-table td small { display: block; margin-top: 2px; font-size: 10px; color: var(--pp-muted); }
.pp-table tfoot td { border-top: 2px solid var(--pp-border); background: rgba(128,128,128,.04); font-weight: 700; }
.pp-row-in { box-shadow: inset 3px 0 0 rgba(16,185,129,.55); }
.pp-row-out { box-shadow: inset 3px 0 0 rgba(107,114,128,.45); }
.pp-row-warn { background: rgba(245,158,11,.06); }
.pp-row-bad { background: rgba(239,68,68,.06); }

/* ── Notes / alerts / empty ────────────────────────────────────────────── */
.pp-note {
    display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px;
    border: 1px solid var(--pp-border); border-radius: 9px;
    background: rgba(128,128,128,.04); font-size: 11px; line-height: 1.6; color: var(--pp-muted);
}
.pp-note i { color: var(--pp-gold); margin-top: 1px; flex-shrink: 0; }
.pp-note code { padding: 1px 4px; border-radius: 3px; font-size: 10px; background: rgba(128,128,128,.14); }

.pp-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; border: 1px solid transparent; font-size: 12px; line-height: 1.6; }
.pp-alert > i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.pp-alert strong { display: block; }
.pp-alert-ok { color: var(--pp-ok); background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.25); }
.pp-alert-warn { color: var(--pp-warn); background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.26); }
.pp-alert-bad { color: var(--pp-bad); background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.25); }
.pp-alert-info { color: var(--pp-info); background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.22); }

.pp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; color: var(--pp-muted); }
.pp-empty i { font-size: 30px; color: var(--pp-gold); opacity: .5; margin-bottom: 9px; }
.pp-empty strong { color: var(--pp-heading); font-size: 13px; }
.pp-empty p { max-width: 440px; margin: 5px 0 0; font-size: 11px; line-height: 1.65; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.pp-label { display: block; font-size: 10px; font-weight: 700; color: var(--pp-muted); margin-bottom: 3px; }
.pp-section { margin: 18px 0 8px; padding-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--pp-gold); border-bottom: 1px dashed var(--pp-border); }
.pp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 14px; }
.pp-filters .form-select, .pp-filters .form-control { width: auto; min-width: 145px; }
.pp-filters .pp-search { width: 280px; max-width: 100%; }

.btn-gold { background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-2)); border: 0; color: var(--pp-ink); font-weight: 700; }
.btn-gold:hover { filter: brightness(1.06); color: var(--pp-ink); }

/* ── Link builder ──────────────────────────────────────────────────────── */
.pp-url {
    display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 9px;
    border: 1px dashed rgba(197,164,78,.5); background: rgba(197,164,78,.06);
}
.pp-url code { flex: 1; min-width: 0; font-size: 11px; overflow-wrap: anywhere; color: var(--pp-heading); }

/* ── Charts / progress ─────────────────────────────────────────────────── */
.pp-chart { width: 100%; min-height: 270px; }
.pp-bar { position: relative; height: 17px; border-radius: 5px; background: rgba(128,128,128,.14); overflow: hidden; margin-top: 4px; }
.pp-bar i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, var(--pp-gold), var(--pp-gold-2)); }
.pp-bar span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 7px; font-size: 9px; font-weight: 700; color: var(--pp-text); }

.pp-tier { padding: 11px 12px; border: 1px solid var(--pp-border); border-radius: 10px; margin-bottom: 8px; }
.pp-tier.is-current { border-color: rgba(197,164,78,.55); background: rgba(197,164,78,.05); }
.pp-tier.is-earned { box-shadow: inset 3px 0 0 var(--pp-ok); }

/* ── Auth ──────────────────────────────────────────────────────────────── */
.pp-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px; background: radial-gradient(1100px 520px at 50% -10%, rgba(197,164,78,.16), transparent), var(--pp-bg-page); }
.pp-auth-card { width: 100%; max-width: 428px; padding: 34px 30px; border-radius: 17px; background: var(--pp-bg-card); border: 1px solid var(--pp-border); box-shadow: 0 26px 70px rgba(0,0,0,.13); }
.pp-auth-logo { display: block; width: 92px; margin: 0 auto 14px; }
.pp-auth-card h1 { font-size: 20px; font-weight: 800; text-align: center; color: var(--pp-heading); margin: 0 0 4px; }
.pp-auth-card .pp-sub { text-align: center; font-size: 11px; color: var(--pp-muted); margin-bottom: 22px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .pp-rail {
        position: fixed; left: 0; top: 0; z-index: 1050; transform: translateX(-100%);
        transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.4);
    }
    .pp-shell.is-open .pp-rail { transform: translateX(0); }
    .pp-shell.is-open::after { content: ''; position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.5); }
    .pp-burger { display: inline-flex; }
    .pp-body { padding: 16px; }
    .pp-topbar { padding: 11px 16px; }
}
@media (max-width: 575.98px) {
    .pp-kpis { grid-template-columns: 1fr; }
    .pp-filters .form-select, .pp-filters .form-control, .pp-filters .pp-search { width: 100%; min-width: 0; }
    .pp-auth-card { padding: 26px 20px; }
}