/* =================================================================
   WC Multi-Level Affiliates — Affiliate Portal CSS v3.0.0
   Visually aligned with Admin Portal (admin-portal.css v2.4.3)
   Shared design tokens • Same Lucide icons • Same color palette
   ZERO functional changes — CSS only
   ================================================================= */

/* ── Design Tokens — identical to admin-portal.css :root ────── */
:root {
    --ap-bg:         #0f0f1e;
    --ap-surface:    #12122a;
    --ap-surface2:   #1a1a36;
    --ap-surface3:   #21213f;
    --ap-border:     #2d2d52;
    --ap-text:       #e8eaf0;
    --ap-text-muted: #9ca3c0;
    --ap-text-dim:   #6b7399;
    --ap-accent:     #60a5fa;
    --ap-accent-h:   #93c5fd;
    --ap-green:      #4ade80;
    --ap-yellow:     #fbbf24;
    --ap-red:        #f87171;
    --ap-purple:     #a78bfa;
    --ap-orange:     #fb923c;
    --ap-sidebar-w:  230px;
    --ap-topbar-h:   48px;
    --ap-radius:     10px;
    --ap-shadow:     0 4px 24px rgba(0,0,0,.4);
    --ap-transition: .15s ease;
}

/* ── Universal reset inside portal containers ─────────────── */
.wc-mla-auth-wrap *,  .wc-mla-auth-wrap *::before,  .wc-mla-auth-wrap *::after,
.wc-mla-portal *,     .wc-mla-portal *::before,     .wc-mla-portal *::after {
    box-sizing: border-box;
}
.wc-mla-auth-wrap { display: block; }

/* =================================================================
   AUTH PAGE — Login + Register
   Matches admin portal login card aesthetics
   ================================================================= */

.wc-mla-auth-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wc-mla-auth-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: var(--ap-bg) !important;
    padding: 32px 16px 48px !important;
}

/* Brand panel */
.wc-mla-auth-brand       { width: 100%; max-width: 480px; text-align: center; padding: 0 0 24px; }
.wc-mla-auth-brand-inner { width: 100%; }
.wc-mla-auth-logo        { margin-bottom: 14px; }
.wc-mla-auth-logo-img {
    max-height: 80px; max-width: 260px; width: auto; display: block;
    margin: 0 auto; object-fit: contain; border-radius: 8px;
    background: #000; padding: 6px 14px;
}
.wc-mla-portal-logo-img {
    height: 48px; width: auto; display: block; object-fit: contain;
    flex-shrink: 0; background: #000; border-radius: 4px; padding: 2px 8px;
}
.wc-mla-auth-logo-text { font-size: 22px; font-weight: 700; color: var(--ap-text); display: block; }
.wc-mla-brand-heading  { font-size: 20px; font-weight: 700; color: var(--ap-text); margin: 0 0 6px; }
.wc-mla-brand-sub      { font-size: 14px; color: var(--ap-text-muted); line-height: 1.6; margin: 0 0 20px; }

.wc-mla-auth-rates       { margin-bottom: 20px; text-align: left; }
.wc-mla-auth-rates-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ap-text-dim); margin-bottom: 8px;
}
.wc-mla-auth-rate-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px; color: var(--ap-text-muted);
}
.wc-mla-auth-rate-row:last-child { border-bottom: none; }
.wc-mla-auth-rate-pct { font-size: 15px; font-weight: 700; color: var(--ap-green); }

.wc-mla-auth-features    { list-style: none; margin: 0 0 8px; padding: 0; text-align: left; }
.wc-mla-auth-features li { font-size: 13px; color: var(--ap-text-muted); padding: 4px 0; }

/* Auth card — matches admin portal login card */
.wc-mla-auth-card {
    width: 100%; max-width: 480px;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: 14px;
    box-shadow: var(--ap-shadow);
    overflow: hidden;
}

/* Tab switcher */
.wc-mla-auth-tabs {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ap-surface2);
    border-bottom: 1px solid var(--ap-border);
}
.wc-mla-auth-tab {
    padding: 14px 12px; font-size: 14px; font-weight: 600;
    color: var(--ap-text-muted); background: transparent; border: none;
    cursor: pointer; position: relative; font-family: inherit;
    transition: color var(--ap-transition), background var(--ap-transition);
}
.wc-mla-auth-tab::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 2px; background: var(--ap-accent);
    transform: scaleX(0); transition: transform .22s cubic-bezier(.4,0,.2,1);
    border-radius: 2px 2px 0 0;
}
.wc-mla-auth-tab.active             { color: var(--ap-text); background: var(--ap-surface); }
.wc-mla-auth-tab.active::after      { transform: scaleX(1); }
.wc-mla-auth-tab:hover:not(.active) { color: var(--ap-text); background: var(--ap-surface3); }

/* Auth panels */
.wc-mla-auth-panel        { display: none; padding: 24px 24px 20px; }
.wc-mla-auth-panel.active { display: block; }

.wc-mla-auth-heading    { font-size: 18px; font-weight: 700; color: var(--ap-text); margin: 0 0 4px; }
.wc-mla-auth-subheading { font-size: 13px; color: var(--ap-text-muted); margin: 0 0 18px; line-height: 1.5; }

/* Messages */
.wc-mla-msg         { padding: 10px 14px; border-radius: var(--ap-radius); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.wc-mla-msg-error   { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--ap-red); }
.wc-mla-msg-success { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--ap-green); }

/* Fields */
.wc-mla-auth-panel .wc-mla-field { margin-bottom: 14px; }
.wc-mla-auth-panel .wc-mla-field label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--ap-text-muted);
    margin-bottom: 6px; font-family: inherit; flex-wrap: wrap; gap: 4px;
    text-transform: uppercase; letter-spacing: .04em;
}
.wc-mla-auth-panel .wc-mla-field input[type="text"],
.wc-mla-auth-panel .wc-mla-field input[type="email"],
.wc-mla-auth-panel .wc-mla-field input[type="password"] {
    display: block !important; width: 100% !important; min-width: 0 !important;
    padding: 10px 12px !important;
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important; font-size: 15px !important;
    color: var(--ap-text) !important; background: var(--ap-surface2) !important;
    outline: none !important; box-shadow: none !important;
    font-family: inherit !important; box-sizing: border-box !important;
    max-width: 100% !important;
    transition: border-color var(--ap-transition), box-shadow var(--ap-transition) !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.wc-mla-auth-panel .wc-mla-field input:focus {
    border-color: var(--ap-accent) !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.15) !important;
}
.wc-mla-auth-panel .wc-mla-field input::placeholder { color: var(--ap-text-dim); font-size: 14px; }

/* Two-col field row */
.wc-mla-field-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wc-mla-field-row .wc-mla-field { margin-bottom: 0; }

/* Password eye toggle */
.wc-mla-input-wrap       { position: relative; display: block; }
.wc-mla-input-wrap input { padding-right: 44px !important; }
.wc-mla-eye-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--ap-text-dim); display: flex; align-items: center;
    min-width: 32px; min-height: 32px; transition: color var(--ap-transition);
}
.wc-mla-eye-btn:hover { color: var(--ap-text-muted); }
.wc-mla-eye-btn svg   { width: 18px; height: 18px; display: block; }

.wc-mla-field-link { font-size: 12px; font-weight: 500; color: var(--ap-accent); text-decoration: none; white-space: nowrap; }
.wc-mla-field-link:hover { text-decoration: underline; color: var(--ap-accent-h); }

/* Checkbox row */
.wc-mla-check-row   { margin-bottom: 18px; }
.wc-mla-check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wc-mla-check-label input { margin-top: 3px; flex-shrink: 0; accent-color: var(--ap-accent); width: 16px; height: 16px; }
.wc-mla-check-label span  { font-size: 13px; color: var(--ap-text-muted); line-height: 1.5; }
.wc-mla-check-label a     { color: var(--ap-accent); text-decoration: none; }
.req { color: var(--ap-red); font-size: 12px; }

/* Submit button — matches admin portal primary button */
.wc-mla-submit-btn {
    display: block !important; width: 100% !important;
    padding: 12px 20px !important;
    background: var(--ap-accent) !important; color: #fff !important;
    border: none !important; border-radius: 8px !important;
    font-size: 14px !important; font-weight: 700 !important;
    cursor: pointer !important; letter-spacing: .02em !important;
    transition: background var(--ap-transition), box-shadow var(--ap-transition) !important;
    margin: 4px 0 !important; font-family: inherit !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(96,165,250,.35) !important;
    -webkit-appearance: none !important;
}
.wc-mla-submit-btn:hover  { background: var(--ap-accent-h) !important; box-shadow: 0 4px 14px rgba(96,165,250,.45) !important; }
.wc-mla-submit-btn:active { opacity: .92 !important; }

/* Switch text */
.wc-mla-auth-switch { text-align: center; font-size: 13px; color: var(--ap-text-dim); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--ap-border); }
.wc-mla-switch-btn  { background: none; border: none; color: var(--ap-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-left: 6px; font-family: inherit; }
.wc-mla-switch-btn:hover { text-decoration: underline; }

/* Password hints */
.wc-mla-field-hint          { font-size: 11px; color: var(--ap-text-dim); margin-top: 4px; display: block; }
.wc-mla-hint-ok             { color: var(--ap-green); }
.wc-mla-pw-strength-bar     { height: 3px; background: var(--ap-border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.wc-mla-pw-strength-bar div { height: 3px; border-radius: 2px; width: 0; transition: width .3s, background .3s; }
.wc-mla-pw-strength-txt     { font-size: 11px; font-weight: 600; margin-top: 3px; display: block; }
.wc-mla-pw-match            { font-size: 11px; font-weight: 600; margin-top: 5px; display: block; min-height: 16px; }

/* =================================================================
   PORTAL DASHBOARD
   Full-height sidebar layout — identical to admin portal structure
   ================================================================= */

.wc-mla-portal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px; line-height: 1.5;
    color: var(--ap-text);
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    overflow: hidden;
    max-width: 1200px; width: 100%;
    margin: 24px auto 40px;
    box-shadow: var(--ap-shadow);
    display: flex; flex-direction: column;
    min-height: 600px;
}

/* ── Logo bar — matches admin sidebar header ─────────────── */
.wc-mla-portal-logo-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px; height: var(--ap-topbar-h);
    background: var(--ap-surface);
    border-bottom: 2px solid var(--ap-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    flex-shrink: 0;
}
.wc-mla-portal-logo-text    { font-size: 15px; font-weight: 700; color: var(--ap-text); }
.wc-mla-portal-logo-tagline {
    font-size: 10px; color: var(--ap-text-dim); margin-left: auto;
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

/* ── Profile bar — matches admin topbar-right ────────────── */
.wc-mla-profile-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px; height: var(--ap-topbar-h);
    background: var(--ap-surface);
    border-bottom: 1px solid var(--ap-border);
    flex-wrap: nowrap; min-width: 0;
}
.wc-mla-profile-bar-name {
    font-size: 13px; font-weight: 600; color: var(--ap-text);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.wc-mla-profile-bar-sep     { color: var(--ap-border); user-select: none; flex-shrink: 0; }
.wc-mla-profile-bar-id      { font-size: 12px; color: var(--ap-text-muted); font-family: monospace; white-space: nowrap; flex-shrink: 0; }
.wc-mla-profile-bar-signout {
    font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; margin-left: auto;
    color: var(--ap-red); text-decoration: none;
    padding: 5px 12px; border: 1px solid rgba(248,113,113,.3);
    border-radius: 6px; background: rgba(248,113,113,.08);
    transition: background var(--ap-transition), color var(--ap-transition);
}
.wc-mla-profile-bar-signout:hover { background: rgba(248,113,113,.15); color: #fca5a5; text-decoration: none; }

/* ── Stats grid — matches admin dashboard KPI cards ────────── */
.wc-mla-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0; background: var(--ap-bg);
    border-bottom: 1px solid var(--ap-border);
}
.wc-mla-stat {
    background: var(--ap-surface2); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    border-right: 1px solid var(--ap-border);
    transition: background var(--ap-transition);
}
.wc-mla-stat:last-child { border-right: none; }
.wc-mla-stat:hover { background: var(--ap-surface3); }
.wc-mla-stat .label {
    font-size: 10px; color: var(--ap-text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-mla-stat .value { font-size: 18px; font-weight: 700; color: var(--ap-text); overflow-wrap: break-word; word-break: break-word; }
.wc-mla-promo-status-val { display: block; line-height: 1.3 !important; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }

/* ── Referral links box ──────────────────────────────────── */
.wc-mla-referral-box {
    background: var(--ap-surface); border-bottom: 1px solid var(--ap-border);
    padding: 12px 20px;
}
.wc-mla-referral-box h3 {
    font-size: 11px; font-weight: 700; color: var(--ap-text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px;
}
.wc-mla-ref-row       { margin-bottom: 10px; }
.wc-mla-ref-row label {
    display: block; font-size: 11px; color: var(--ap-text-muted);
    margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.wc-mla-copy-wrap       { display: flex; gap: 6px; min-width: 0; }
.wc-mla-copy-wrap input {
    flex: 1; min-width: 0; padding: 7px 10px;
    border: 1px solid var(--ap-border); background: var(--ap-bg);
    color: var(--ap-text-muted); border-radius: 6px; font-size: 12px;
    font-family: monospace; width: 100%; box-sizing: border-box;
    overflow: hidden; text-overflow: ellipsis;
}
.wc-mla-ref-code-hint { font-size: 11px; color: var(--ap-text-dim); margin-top: 4px; }

/* =================================================================
   LAYOUT — Sidebar + Content
   Identical structure to admin portal
   ================================================================= */

.wc-mla-layout {
    display: flex; flex: 1;
    min-height: 520px; overflow: hidden;
}

/* ── Sidebar nav — matches .wc-mla-ap-sidebar ───────────── */
.wc-mla-sidenav {
    width: var(--ap-sidebar-w); flex-shrink: 0;
    background: var(--ap-surface);
    border-right: 1px solid var(--ap-border);
    padding: 8px 0; display: flex; flex-direction: column; gap: 1px;
    overflow-y: auto; overflow-x: hidden;
}

/* Custom scrollbar — same as admin */
.wc-mla-sidenav::-webkit-scrollbar       { width: 4px; }
.wc-mla-sidenav::-webkit-scrollbar-track { background: transparent; }
.wc-mla-sidenav::-webkit-scrollbar-thumb { background: var(--ap-border); border-radius: 2px; }

/* Nav item — matches .wc-mla-ap-nav-item exactly */
.wc-mla-sidenav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; font-size: 13px; font-weight: 500;
    color: var(--ap-text-muted); text-decoration: none;
    border: none; border-left: 3px solid transparent;
    background: transparent;
    font-family: inherit; width: 100%; text-align: left; cursor: pointer;
    transition: background var(--ap-transition), color var(--ap-transition), border-color var(--ap-transition);
    white-space: nowrap; overflow: hidden;
}
.wc-mla-sidenav-item:hover {
    background: var(--ap-surface2); color: var(--ap-text);
    text-decoration: none;
}
.wc-mla-sidenav-item.active {
    background: var(--ap-surface2); color: var(--ap-accent);
    border-left-color: var(--ap-accent); font-weight: 600;
}

/* SVG icon — matches admin .wc-mla-ap-nav-icon */
.wc-mla-sidenav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0; opacity: .75;
    transition: opacity var(--ap-transition);
}
.wc-mla-sidenav-item:hover  .wc-mla-sidenav-icon { opacity: 1; }
.wc-mla-sidenav-item.active .wc-mla-sidenav-icon { opacity: 1; }
.wc-mla-sidenav-icon svg { width: 16px; height: 16px; stroke: currentColor; display: block; }

/* ── Main content area — matches .wc-mla-ap-content ─────── */
.wc-mla-main {
    flex: 1; min-width: 0; background: var(--ap-bg);
    overflow-x: hidden; overflow-y: auto;
}

.wc-mla-tabs { background: transparent; }

.wc-mla-tab-content {
    display: none !important; padding: 20px; min-width: 0;
    overflow-x: hidden;
}
.wc-mla-tab-content.active { display: block !important; }

/* Section headings — matches admin .wc-mla-ap-section-title */
.wc-mla-tab-content h3 {
    font-size: 15px; font-weight: 700; color: var(--ap-text); margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
}

/* =================================================================
   FORM INPUTS — matches admin portal forms exactly
   ================================================================= */

.wc-mla-portal input[type="text"],
.wc-mla-portal input[type="email"],
.wc-mla-portal input[type="url"],
.wc-mla-portal input[type="number"],
.wc-mla-portal input[type="password"],
.wc-mla-portal select,
.wc-mla-portal textarea {
    background: var(--ap-surface2);
    border: 1.5px solid var(--ap-border);
    color: var(--ap-text);
    border-radius: 8px; padding: 9px 12px;
    font-size: 13px; font-family: inherit;
    width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box; display: block;
    transition: border-color var(--ap-transition), box-shadow var(--ap-transition);
    -webkit-appearance: none;
}
.wc-mla-portal input:focus,
.wc-mla-portal select:focus,
.wc-mla-portal textarea:focus {
    outline: none; border-color: var(--ap-accent);
    box-shadow: 0 0 0 3px rgba(96,165,250,.12);
}

/* =================================================================
   TABLES — matches admin .wc-mla-table style
   ================================================================= */

.wc-mla-table-wrap      { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.wc-mla-portal-table    { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.wc-mla-portal-table th {
    padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700;
    color: var(--ap-text-muted); border-bottom: 1px solid var(--ap-border);
    text-transform: uppercase; letter-spacing: .05em;
    background: var(--ap-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.wc-mla-portal-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--ap-border);
    vertical-align: middle; color: var(--ap-text-muted); word-break: break-word;
}
.wc-mla-portal-table tr:last-child td { border-bottom: none; }
.wc-mla-portal-table tr:hover td { background: var(--ap-surface2); }

/* =================================================================
   STATUS BADGES — matches admin .wc-mla-badge
   ================================================================= */

.wc-mla-pill            { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wc-mla-pill-direct     { background: rgba(74,222,128,.1);  color: var(--ap-green);  border: 1px solid rgba(74,222,128,.3); }
.wc-mla-pill-override   { background: rgba(96,165,250,.1);  color: var(--ap-accent); border: 1px solid rgba(96,165,250,.3); }
.wc-mla-pill-approved   { background: rgba(74,222,128,.1);  color: var(--ap-green);  border: 1px solid rgba(74,222,128,.3); }
.wc-mla-pill-pending    { background: rgba(251,191,36,.1);  color: var(--ap-yellow); border: 1px solid rgba(251,191,36,.3); }
.wc-mla-pill-paid       { background: rgba(96,165,250,.1);  color: var(--ap-accent); border: 1px solid rgba(96,165,250,.3); }
.wc-mla-pill-cancelled  { background: rgba(248,113,113,.1); color: var(--ap-red);    border: 1px solid rgba(248,113,113,.3); }
.wc-mla-pill-active     { background: rgba(74,222,128,.1);  color: var(--ap-green);  border: 1px solid rgba(74,222,128,.3); }
.wc-mla-pill-inactive   { background: rgba(148,163,184,.1); color: var(--ap-text-muted); border: 1px solid rgba(148,163,184,.3); }

/* =================================================================
   BUTTONS — matches admin .ops-btn
   ================================================================= */

.wc-mla-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--ap-transition);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface2); color: var(--ap-text);
    text-decoration: none; font-family: inherit; white-space: nowrap;
}
.wc-mla-btn:hover        { background: var(--ap-surface3); text-decoration: none; }
.wc-mla-btn-primary      { background: var(--ap-accent); border-color: var(--ap-accent); color: #fff; }
.wc-mla-btn-primary:hover{ background: var(--ap-accent-h); border-color: var(--ap-accent-h); }
.wc-mla-btn-sm           { padding: 5px 10px; font-size: 12px; }
.wc-mla-btn-full         { width: 100%; justify-content: center; }
.wc-mla-copy-btn         { flex-shrink: 0; font-size: 12px; padding: 6px 12px; white-space: nowrap; }

/* =================================================================
   NOTICES & EMPTY STATES
   ================================================================= */

.wc-mla-empty  { color: var(--ap-text-dim); font-size: 13px; padding: 32px; text-align: center; }
.wc-mla-notice {
    background: var(--ap-surface2); border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius); padding: 11px 14px;
    font-size: 13px; color: var(--ap-text-muted); margin-bottom: 14px;
}
.wc-mla-notice-success { border-color: rgba(74,222,128,.3); color: var(--ap-green); background: rgba(74,222,128,.06); }
.wc-mla-notice-warning { border-color: rgba(251,191,36,.3); color: var(--ap-yellow); background: rgba(251,191,36,.06); }
.wc-mla-notice-error   { border-color: rgba(248,113,113,.3); color: var(--ap-red);    background: rgba(248,113,113,.06); }

/* =================================================================
   DASHBOARD FORM ROWS & INFO GRID
   ================================================================= */

.wc-mla-form-row         { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wc-mla-form-row-4       { grid-template-columns: repeat(4, 1fr); }
.wc-mla-field-group-label{
    font-size: 11px; font-weight: 700; color: var(--ap-text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px;
}
.wc-mla-field-hint-d     { font-size: 11px; color: var(--ap-text-dim); margin-top: 4px; display: block; }

.wc-mla-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 10px 0; }
.wc-mla-info-item {
    background: var(--ap-surface2); border-radius: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ap-border);
    transition: background var(--ap-transition);
}
.wc-mla-info-item:hover { background: var(--ap-surface3); }
.info-label { font-size: 11px; color: var(--ap-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.info-value { font-size: 13px; color: var(--ap-text); font-weight: 600; word-break: break-word; }

/* Settings sections */
.wc-mla-settings-section            { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ap-border); }
.wc-mla-settings-section:last-child { border-bottom: none; }
.wc-mla-settings-section h4         {
    font-size: 11px; font-weight: 700; color: var(--ap-text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px;
}

.wc-mla-campaigns-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }

/* Payout stats — matches admin KPI grid */
.wc-mla-payout-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; background: var(--ap-bg); border-radius: 10px;
    overflow: hidden; margin-bottom: 18px;
    border: 1px solid var(--ap-border);
}
.wc-mla-payout-stat {
    background: var(--ap-surface2); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
    border-right: 1px solid var(--ap-border);
    transition: background var(--ap-transition);
}
.wc-mla-payout-stat:last-child { border-right: none; }
.wc-mla-payout-stat:hover { background: var(--ap-surface3); }
.ps-label { font-size: 10px; color: var(--ap-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-value { font-size: 18px; font-weight: 700; color: var(--ap-text); }

/* =================================================================
   RANK JOURNEY — unchanged styles, tokenised colors
   ================================================================= */

.wc-mla-rj-header { font-size: 15px; font-weight: 700; color: var(--ap-text); margin-bottom: 18px; }
.wc-mla-rj-empty  { padding: 32px 20px; text-align: center; color: var(--ap-text-dim); font-size: 13px; }

.wc-mla-rj-timeline {
    display: flex; align-items: flex-start; overflow-x: auto;
    padding-bottom: 10px; margin-bottom: 22px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.wc-mla-rj-node     { display: flex; flex-direction: column; align-items: center; min-width: 64px; flex-shrink: 0; }
.wc-mla-rj-badge    {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid var(--ap-border); background: var(--ap-surface2);
    color: var(--ap-text-dim); cursor: default; flex-shrink: 0;
}
.wc-mla-rj-check   { font-size: 9px; color: rgba(255,255,255,.5); line-height: 1; margin-bottom: 1px; }
.wc-mla-rj-code    { font-size: 10px; font-weight: 700; line-height: 1; }

.wc-mla-rj-node.done    .wc-mla-rj-badge { background: #166534; border-color: var(--ap-green); color: #fff; }
.wc-mla-rj-node.current .wc-mla-rj-badge { background: #166534; border-color: var(--ap-green); color: #fff; box-shadow: 0 0 0 4px rgba(74,222,128,.2); }
.wc-mla-rj-node.next    .wc-mla-rj-badge { background: #92400e; border-color: var(--ap-yellow); color: #fff; box-shadow: 0 0 0 3px rgba(251,191,36,.2); }
.wc-mla-rj-node.future  .wc-mla-rj-badge { background: var(--ap-bg); border-color: var(--ap-border); color: var(--ap-text-dim); }
.wc-mla-rj-node-label   { margin-top: 6px; font-size: 10px; text-align: center; color: var(--ap-text-dim); white-space: nowrap; }
.wc-mla-rj-node.done    .wc-mla-rj-node-label { color: var(--ap-green); }
.wc-mla-rj-node.current .wc-mla-rj-node-label { color: var(--ap-green); font-weight: 600; }
.wc-mla-rj-node.next    .wc-mla-rj-node-label { color: var(--ap-yellow); font-weight: 600; }
.wc-mla-rj-node-tag         { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.wc-mla-rj-node-tag.current { background: rgba(74,222,128,.15); color: var(--ap-green); }
.wc-mla-rj-node-tag.next    { background: rgba(251,191,36,.15);  color: var(--ap-yellow); }
.wc-mla-rj-connector       { flex: 1; height: 2px; background: var(--ap-border); margin-top: 24px; min-width: 16px; flex-shrink: 0; }
.wc-mla-rj-connector.done  { background: var(--ap-green); }

.wc-mla-rj-card      { background: var(--ap-surface2); border: 1px solid var(--ap-border); border-radius: var(--ap-radius); padding: 18px 18px 0; margin-bottom: 16px; transition: background var(--ap-transition); }
.wc-mla-rj-card:hover{ background: var(--ap-surface3); }
.wc-mla-rj-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wc-mla-rj-card-title{ font-size: 14px; font-weight: 700; color: var(--ap-text); flex: 1; min-width: 0; word-break: break-word; }
.wc-mla-rj-card-pct  { font-size: 13px; font-weight: 600; color: var(--ap-yellow); white-space: nowrap; flex-shrink: 0; }
.wc-mla-rj-bar-wrap  { height: 6px; background: var(--ap-border); border-radius: 3px; overflow: hidden; margin-bottom: 20px; }
.wc-mla-rj-bar-fill  { height: 6px; background: linear-gradient(90deg, #92400e, #d97706, var(--ap-yellow)); border-radius: 3px; min-width: 2px; }

.wc-mla-rj-reqs      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding-bottom: 18px; }
.wc-mla-rj-req-block { display: flex; flex-direction: column; gap: 5px; }
.wc-mla-rj-req-lbl   { font-size: 11px; color: var(--ap-text-muted); font-weight: 500; word-break: break-word; }
.wc-mla-rj-req-nums  { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.wc-mla-rj-req-nums strong { font-size: 20px; font-weight: 700; color: var(--ap-text); line-height: 1; }
.wc-mla-rj-req-slash     { font-size: 13px; color: var(--ap-text-dim); }
.wc-mla-rj-req-bar-wrap  { height: 3px; background: var(--ap-border); border-radius: 2px; overflow: hidden; }
.wc-mla-rj-req-bar-fill  { height: 3px; background: #d97706; border-radius: 2px; min-width: 2px; }
.wc-mla-rj-req-bar-fill.met{ background: var(--ap-green); }
.wc-mla-rj-req-status      { min-height: 14px; }
.wc-mla-rj-met    { font-size: 11px; font-weight: 600; color: var(--ap-green); }
.wc-mla-rj-needed { font-size: 11px; font-weight: 600; color: #d97706; }
.wc-mla-rj-promo-type { grid-column: 1 / -1; }
.wc-mla-rj-promo-val  { display: flex; flex-direction: column; gap: 3px; }
.wc-mla-rj-promo-val strong{ font-size: 14px; font-weight: 700; color: var(--ap-text); }
.wc-mla-rj-promo-val span  { font-size: 12px; color: var(--ap-text-muted); }
.wc-mla-rj-expand-wrap { display: flex; justify-content: center; padding: 12px 0 14px; border-top: 1px solid var(--ap-border); margin-top: 2px; }
.wc-mla-rj-expand-btn  {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ap-border); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ap-text-muted); transition: background var(--ap-transition);
}
.wc-mla-rj-expand-btn:hover { background: var(--ap-surface3); }
.wc-mla-rj-chevron { width: 16px; height: 16px; transition: transform .25s; }
.wc-mla-rj-maxed  { text-align: center; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wc-mla-rj-trophy { font-size: 32px; }
.wc-mla-rj-maxed strong { color: var(--ap-text); font-size: 15px; }
.wc-mla-rj-maxed p      { color: var(--ap-text-muted); font-size: 13px; margin: 0; }

.wc-mla-rj-history-panel { margin-top: 14px; background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: 10px; padding: 16px; }
.wc-mla-rj-history-title { font-size: 13px; font-weight: 600; color: var(--ap-text); margin: 0 0 14px; }
.wc-mla-rj-history-empty { color: var(--ap-text-dim); font-size: 13px; text-align: center; padding: 10px; }
.wc-mla-rj-history-list  { display: flex; flex-direction: column; gap: 12px; }
.wc-mla-rj-history-item  { display: flex; gap: 12px; align-items: flex-start; }
.wc-mla-rj-history-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.wc-mla-rj-history-badge.met      { background: rgba(74,222,128,.15); color: var(--ap-green); }
.wc-mla-rj-history-badge.pending  { background: rgba(251,191,36,.15);  color: var(--ap-yellow); }
.wc-mla-rj-history-badge.rejected { background: rgba(248,113,113,.15); color: var(--ap-red); }
.wc-mla-rj-history-body  { flex: 1; min-width: 0; }
.wc-mla-rj-history-ranks { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; font-size: 12px; }
.wc-mla-rj-history-from  { color: var(--ap-text-muted); }
.wc-mla-rj-history-arrow { color: var(--ap-border); }
.wc-mla-rj-history-to    { color: var(--ap-text); font-weight: 600; word-break: break-all; }
.wc-mla-rj-history-status { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 20px; }
.wc-mla-rj-history-status.met      { background: rgba(74,222,128,.15); color: var(--ap-green); }
.wc-mla-rj-history-status.pending  { background: rgba(251,191,36,.15);  color: var(--ap-yellow); }
.wc-mla-rj-history-status.rejected { background: rgba(248,113,113,.15); color: var(--ap-red); }
.wc-mla-rj-history-date  { font-size: 11px; color: var(--ap-text-dim); margin-bottom: 5px; }
.wc-mla-rj-history-quals { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--ap-text-muted); }
.wc-mla-rj-history-quals span { background: var(--ap-surface2); border-radius: 4px; padding: 2px 6px; }
.wc-mla-rj-history-notes { margin-top: 5px; font-size: 11px; color: var(--ap-text-muted); background: var(--ap-surface2); border-radius: 5px; padding: 5px 8px; }

/* =================================================================
   RESPONSIVE — mirrors admin portal breakpoints
   ================================================================= */

/* Tablet ≤ 768px */
@media (max-width: 768px) {
    /* Auth */
    .wc-mla-auth-page    { padding: 20px 12px 36px !important; }
    .wc-mla-auth-panel   { padding: 20px 18px 16px; }
    .wc-mla-auth-heading { font-size: 16px; }
    .wc-mla-auth-brand   { padding-bottom: 16px; }
    .wc-mla-auth-brand-inner { text-align: center; }
    .wc-mla-auth-logo-img    { margin: 0 auto 12px; }
    .wc-mla-auth-features { display: none; }
    .wc-mla-auth-rates    { display: none; }

    /* Dashboard: sidebar → top horizontal scrollbar */
    .wc-mla-layout    { flex-direction: column; min-height: auto; }
    .wc-mla-sidenav   {
        width: 100%; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        border-right: none; border-bottom: 1px solid var(--ap-border);
        padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .wc-mla-sidenav::-webkit-scrollbar { display: none; }
    .wc-mla-sidenav-item {
        border-left: none; border-bottom: 2px solid transparent;
        padding: 10px 12px; white-space: nowrap; width: auto; flex: none; overflow: visible;
    }
    .wc-mla-sidenav-item.active { border-bottom-color: var(--ap-accent); border-left-color: transparent; }
    .wc-mla-sidenav-icon { display: none; } /* hide icons on horizontal bar — save space */

    /* Logo bar */
    .wc-mla-portal-logo-bar  { padding: 0 14px; }
    .wc-mla-portal-logo-tagline { display: none; }
    .wc-mla-profile-bar-name { max-width: 140px; }

    /* Content */
    .wc-mla-tab-content  { padding: 14px; }
    .wc-mla-payout-stats { grid-template-columns: 1fr 1fr; }
    .wc-mla-form-row, .wc-mla-form-row-4 { grid-template-columns: 1fr; }
    .wc-mla-rj-reqs      { grid-template-columns: 1fr; }
    .wc-mla-stats-grid   { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

/* Phone ≤ 480px */
@media (max-width: 480px) {
    .wc-mla-auth-page  { padding: 14px 10px 28px !important; }
    .wc-mla-auth-card  { border-radius: 10px; }
    .wc-mla-auth-panel { padding: 16px 14px 14px; }
    .wc-mla-auth-tab   { font-size: 13px; padding: 12px 8px; }
    .wc-mla-submit-btn { font-size: 14px !important; padding: 12px 14px !important; }
    .wc-mla-field-row  { grid-template-columns: 1fr; }

    .wc-mla-portal         { border-radius: 8px; margin: 12px auto 20px; }
    .wc-mla-portal-logo-img{ height: 34px; }
    .wc-mla-portal-logo-bar{ height: 42px; padding: 0 12px; }
    .wc-mla-profile-bar    { padding: 0 12px; height: 42px; gap: 6px; }
    .wc-mla-profile-bar-name{ max-width: 110px; font-size: 12px; }
    .wc-mla-profile-bar-id { font-size: 11px; }
    .wc-mla-stats-grid     { grid-template-columns: 1fr 1fr; }
    .wc-mla-stat           { padding: 10px 12px; }
    .wc-mla-stat .value    { font-size: 16px; }
    .wc-mla-tab-content    { padding: 12px; }
    .wc-mla-payout-stats   { grid-template-columns: 1fr 1fr; }
    .wc-mla-rj-badge       { width: 40px; height: 40px; }
    .wc-mla-rj-code        { font-size: 9px; }
    .wc-mla-rj-node        { min-width: 52px; }
}

/* Very small ≤ 360px */
@media (max-width: 360px) {
    .wc-mla-profile-bar-id            { display: none; }
    .wc-mla-profile-bar-sep:first-of-type { display: none; }
    .wc-mla-stats-grid                { grid-template-columns: 1fr; }
}

/* =================================================================
   ACCESSIBILITY
   ================================================================= */

/* Skip link */
.wc-mla-skip-link {
    position: absolute; top: -100px; left: 16px;
    background: var(--ap-accent); color: #fff;
    padding: 10px 18px; border-radius: 0 0 8px 8px;
    font-size: 14px; font-weight: 600; text-decoration: none; z-index: 9999;
    transition: top .15s;
}
.wc-mla-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* Focus rings — matches admin portal focus styles */
.wc-mla-auth-panel .wc-mla-field input:focus-visible {
    border-color: var(--ap-accent) !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.2) !important; outline: none !important;
}
.wc-mla-auth-tab:focus-visible      { outline: 2px solid var(--ap-accent); outline-offset: -2px; z-index: 1; }
.wc-mla-submit-btn:focus-visible    { outline: 3px solid #fff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(96,165,250,.4) !important; }
.wc-mla-switch-btn:focus-visible,
.wc-mla-field-link:focus-visible    { outline: 2px solid var(--ap-accent); outline-offset: 2px; border-radius: 3px; }
.wc-mla-eye-btn:focus-visible       { outline: 2px solid var(--ap-accent); outline-offset: 2px; border-radius: 50%; }
.wc-mla-sidenav-item:focus-visible  { outline: 2px solid var(--ap-accent); outline-offset: -2px; background: var(--ap-surface2); }
.wc-mla-portal input:focus-visible,
.wc-mla-portal select:focus-visible,
.wc-mla-portal textarea:focus-visible { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(96,165,250,.2); }
.wc-mla-btn:focus-visible           { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.wc-mla-rj-expand-btn:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.wc-mla-copy-btn:focus-visible      { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.wc-mla-tab-content:focus-visible,
.wc-mla-auth-panel:focus-visible    { outline: 2px solid rgba(96,165,250,.3); outline-offset: -2px; }
.wc-mla-auth-panel input[type="checkbox"]:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

/* Forced colors / high contrast */
@media (forced-colors: active) {
    .wc-mla-auth-tab.active::after  { background: ButtonText; }
    .wc-mla-sidenav-item.active     { border-left-color: Highlight; }
    .wc-mla-submit-btn              { forced-color-adjust: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wc-mla-auth-tab::after, .wc-mla-submit-btn, .wc-mla-sidenav-item,
    .wc-mla-rj-bar-fill, .wc-mla-rj-req-bar-fill, .wc-mla-rj-chevron,
    .wc-mla-pw-strength-bar div { transition: none !important; }
}

/* =================================================================
   DASHBOARD TAB — quick-access cards (tab-dashboard)
   ================================================================= */

.wc-mla-dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}
.wc-mla-dash-card {
    background: var(--ap-surface2);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background var(--ap-transition), border-color var(--ap-transition);
}
.wc-mla-dash-card:hover { background: var(--ap-surface3); border-color: var(--ap-accent); }

.wc-mla-dash-card-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: rgba(96,165,250,.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--ap-accent);
}
.wc-mla-dash-card-icon--green  { background: rgba(74,222,128,.12);  color: var(--ap-green); }
.wc-mla-dash-card-icon--purple { background: rgba(167,139,250,.12); color: var(--ap-purple); }

.wc-mla-dash-card-body   { flex: 1; min-width: 0; }
.wc-mla-dash-card-label  { font-size: 12px; font-weight: 700; color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.wc-mla-dash-card-value  { font-size: 20px; font-weight: 700; color: var(--ap-text); margin-top: 2px; }
.wc-mla-dash-card-hint   { font-size: 12px; color: var(--ap-text-muted); margin-top: 2px; }

/* =================================================================
   REFERRAL LINKS TAB — tab-referral-links
   ================================================================= */

.wc-mla-reflink-card {
    background: var(--ap-surface2);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 20px;
    transition: border-color var(--ap-transition);
}
.wc-mla-reflink-card:hover { border-color: var(--ap-accent); }

.wc-mla-reflink-card-header {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px;
}
.wc-mla-reflink-card-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: rgba(96,165,250,.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--ap-accent);
}
.wc-mla-reflink-card-icon--green { background: rgba(74,222,128,.12); color: var(--ap-green); }

.wc-mla-reflink-card-title {
    font-size: 15px; font-weight: 700; color: var(--ap-text); margin-bottom: 3px;
}
.wc-mla-reflink-card-desc {
    font-size: 13px; color: var(--ap-text-muted); line-height: 1.5;
}

/* URL + action row */
.wc-mla-reflink-url-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
}
.wc-mla-reflink-input {
    flex: 1; min-width: 0 !important;
    padding: 9px 12px !important;
    background: var(--ap-bg) !important;
    border: 1.5px solid var(--ap-border) !important;
    color: var(--ap-text-muted) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: monospace !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: text;
}
.wc-mla-reflink-input:focus { border-color: var(--ap-accent) !important; outline: none !important; }

.wc-mla-reflink-share-btn { color: var(--ap-text-muted); flex-shrink: 0; }
.wc-mla-reflink-share-btn:hover { color: var(--ap-accent); border-color: var(--ap-accent); }

.wc-mla-reflink-hint {
    font-size: 12px; color: var(--ap-text-dim); margin: 10px 0 0; line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wc-mla-dash-cards { grid-template-columns: 1fr; }
    .wc-mla-dash-card  { flex-wrap: wrap; }
    .wc-mla-reflink-url-row { flex-wrap: wrap; }
    .wc-mla-reflink-input { width: 100% !important; }
}
@media (max-width: 480px) {
    .wc-mla-reflink-card { padding: 14px; }
    .wc-mla-reflink-card-icon { width: 38px; height: 38px; border-radius: 9px; }
    .wc-mla-reflink-card-title { font-size: 14px; }
    .wc-mla-dash-card-icon { width: 36px; height: 36px; }
}

/* =================================================================
   ANALYTICS DASHBOARD — tab-dashboard redesign
   Matches Admin Portal card/chart/table design system
   ================================================================= */

/* ── Row 1 & 2: KPI Grid ──────────────────────────────────── */
.wc-mla-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.wc-mla-kpi-grid--sm .wc-mla-kpi-card { padding: 12px 14px; }

.wc-mla-kpi-card {
    background: var(--ap-surface2);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: background var(--ap-transition), border-color var(--ap-transition);
    position: relative;
    overflow: hidden;
}
.wc-mla-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ap-border);
    border-radius: var(--ap-radius) var(--ap-radius) 0 0;
}
.wc-mla-kpi-card:hover { background: var(--ap-surface3); border-color: var(--ap-accent); }
.wc-mla-kpi-card--accent::before { background: var(--ap-accent); }

.wc-mla-kpi-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(96,165,250,.12); color: var(--ap-accent);
}
.wc-mla-kpi-icon--sm    { width: 32px; height: 32px; border-radius: 8px; }
.wc-mla-kpi-icon--blue  { background: rgba(96,165,250,.12);  color: var(--ap-accent); }
.wc-mla-kpi-icon--green { background: rgba(74,222,128,.12);  color: var(--ap-green); }
.wc-mla-kpi-icon--yellow{ background: rgba(251,191,36,.12);  color: var(--ap-yellow); }
.wc-mla-kpi-icon--orange{ background: rgba(251,146,60,.12);  color: var(--ap-orange); }
.wc-mla-kpi-icon--purple{ background: rgba(167,139,250,.12); color: var(--ap-purple); }

.wc-mla-kpi-body   { flex: 1; min-width: 0; }
.wc-mla-kpi-label  { font-size: 10px; font-weight: 700; color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.wc-mla-kpi-value  { font-size: 22px; font-weight: 800; color: var(--ap-text); line-height: 1.1; }
.wc-mla-kpi-value--md    { font-size: 20px; font-weight: 700; }
.wc-mla-kpi-value--green { color: var(--ap-green); }
.wc-mla-kpi-value--accent{ color: var(--ap-accent); }
.wc-mla-kpi-sub    { font-size: 11px; color: var(--ap-text-dim); margin-top: 3px; }
.wc-mla-kpi-trend  { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; margin-top: 4px; }
.wc-mla-kpi-trend.up   { color: var(--ap-green); }
.wc-mla-kpi-trend.dn   { color: var(--ap-red); }
.wc-mla-kpi-trend span { font-weight: 400; color: var(--ap-text-dim); }

/* KPI small cards (row 2) */
.wc-mla-kpi-card--sm {
    flex-direction: row;
    align-items: center;
    padding: 12px 14px;
}

/* ── Main content: Charts + Sidebar ─────────────────────── */
.wc-mla-dash-main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 14px;
    align-items: start;
}
.wc-mla-dash-charts { min-width: 0; }
.wc-mla-dash-sidebar{ min-width: 0; display: flex; flex-direction: column; }

/* Chart cards */
.wc-mla-chart-card {
    background: var(--ap-surface2);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 16px;
    transition: border-color var(--ap-transition);
}
.wc-mla-chart-card:hover { border-color: rgba(96,165,250,.3); }

.wc-mla-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.wc-mla-chart-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--ap-text);
}
.wc-mla-chart-controls {
    display: flex; gap: 4px;
}
.wc-mla-chart-type {
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 6px; border: 1px solid var(--ap-border);
    background: transparent; color: var(--ap-text-muted); cursor: pointer;
    transition: all var(--ap-transition); font-family: inherit;
}
.wc-mla-chart-type.active    { background: var(--ap-accent); border-color: var(--ap-accent); color: #fff; }
.wc-mla-chart-type:hover:not(.active) { background: var(--ap-surface3); color: var(--ap-text); }

.wc-mla-chart-wrap { position: relative; width: 100%; }
.wc-mla-chart-wrap canvas { display: block; width: 100% !important; }

/* Insight sidebar cards */
.wc-mla-insight-card {
    background: var(--ap-surface2);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 14px;
    transition: border-color var(--ap-transition);
}
.wc-mla-insight-card:hover { border-color: rgba(96,165,250,.25); }
.wc-mla-insight-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--ap-text-muted);
    text-transform: uppercase; letter-spacing: .06em;
}

/* Quick Actions */
.wc-mla-quick-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wc-mla-qa-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 7px;
    font-size: 12px; font-weight: 600; color: var(--ap-text-muted);
    border: 1px solid var(--ap-border); background: var(--ap-bg);
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    transition: all var(--ap-transition);
}
.wc-mla-qa-btn:hover { background: var(--ap-surface3); color: var(--ap-accent); border-color: var(--ap-accent); }

/* Rank progress bar */
.wc-mla-prog-bar-wrap { height: 5px; background: var(--ap-border); border-radius: 3px; overflow: hidden; }
.wc-mla-prog-bar-fill { height: 5px; background: linear-gradient(90deg, var(--ap-accent), var(--ap-green)); border-radius: 3px; transition: width .5s ease; min-width: 2px; }

/* Table search + footer */
.wc-mla-dash-search {
    width: 180px !important; min-width: 0 !important;
    padding: 6px 10px !important; font-size: 12px !important;
    background: var(--ap-bg) !important; border: 1px solid var(--ap-border) !important;
    border-radius: 6px !important; color: var(--ap-text) !important;
}
.wc-mla-dash-search:focus { border-color: var(--ap-accent) !important; outline: none !important; }
.wc-mla-table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 2px 2px; flex-wrap: wrap; gap: 8px;
}
.wc-mla-table-info  { font-size: 11px; color: var(--ap-text-dim); }
.wc-mla-table-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.wc-mla-pg-btn {
    width: 28px; height: 28px; border-radius: 6px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--ap-border); background: transparent; color: var(--ap-text-muted);
    cursor: pointer; font-family: inherit; transition: all var(--ap-transition);
}
.wc-mla-pg-btn:hover  { background: var(--ap-surface3); color: var(--ap-text); }
.wc-mla-pg-btn.active { background: var(--ap-accent); border-color: var(--ap-accent); color: #fff; }

/* Sortable column headers */
.wc-mla-sort { cursor: pointer; user-select: none; }
.wc-mla-sort:hover { color: var(--ap-accent) !important; }
.wc-mla-sort-icon { font-size: 10px; opacity: .5; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
    .wc-mla-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
    .wc-mla-dash-main { grid-template-columns: 1fr; }
    .wc-mla-dash-sidebar { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .wc-mla-insight-card { flex: 1 1 calc(50% - 5px); min-width: 200px; }
}
@media (max-width: 768px) {
    .wc-mla-kpi-grid   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .wc-mla-kpi-value  { font-size: 18px; }
    .wc-mla-kpi-value--md { font-size: 16px; }
    .wc-mla-dash-search { width: 130px !important; }
    .wc-mla-dash-sidebar { flex-direction: column; }
    .wc-mla-insight-card { flex: unset; }
    .wc-mla-chart-card { padding: 12px; }
}
@media (max-width: 480px) {
    .wc-mla-kpi-grid   { grid-template-columns: 1fr 1fr; gap: 8px; }
    .wc-mla-kpi-card   { padding: 12px 10px; gap: 8px; }
    .wc-mla-kpi-icon   { width: 32px; height: 32px; border-radius: 8px; }
    .wc-mla-kpi-value  { font-size: 15px; }
    .wc-mla-kpi-label  { font-size: 9px; }
    .wc-mla-chart-header { flex-direction: column; align-items: flex-start; }
}

/* =================================================================
   PROFILE BAR — Promotion Status field
   ================================================================= */

.wc-mla-profile-bar-promo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.wc-mla-profile-bar-promo-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--ap-text-dim, #6b7399);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.wc-mla-profile-bar-promo-val {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    max-width: 180px;
}

/* =================================================================
   ROW 2 CARDS — Needed for Next Rank + Enhanced Current Rank
   ================================================================= */

/* Needed for Next Rank */
.wc-mla-kpi-card--nfnr {
    border-left-width: 4px !important;
    border-left-style: solid !important;
    padding-left: 12px !important;
}
.wc-mla-kpi-value--nfnr {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 3px;
    word-break: break-word;
}
.wc-mla-nfnr--success { color: var(--ap-green, #22c55e); }
.wc-mla-nfnr--warning { color: var(--ap-yellow, #f59e0b); }

/* Current Rank card — enhanced */
.wc-mla-kpi-card--rank {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.wc-mla-kpi-card--rank .wc-mla-kpi-icon {
    /* keep icon at top, not vertically centred with body */
    align-self: flex-start;
}
.wc-mla-kpi-value--rank {
    font-size: 13px;
    font-weight: 700;
    color: var(--ap-text, #e8eaf0);
    line-height: 1.3;
    word-break: break-word;
    margin-top: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wc-mla-profile-bar-promo { display: none; }  /* collapse on mobile — shown in KPI cards */
    .wc-mla-kpi-card--rank    { flex-direction: row; }
    .wc-mla-kpi-value--nfnr  { font-size: 12px; }
    .wc-mla-kpi-value--rank   { font-size: 12px; }
}
@media (max-width: 480px) {
    .wc-mla-profile-bar-promo { display: none; }
}