/* ============================================================
   MLM CMS — Base Layer (shared by ALL layouts)
   Design tokens • Reset • Typography • Scrollbars • Focus
   • Selection • Motion • Dark mode • Responsive helpers
   ============================================================ */

:root {
    /* Breakpoints (documented for JS use) */
    --bp-mobile: 575.98px;
    --bp-tablet: 767.98px;
    --bp-small:  991.98px;
    --bp-medium: 1199.98px;
    --bp-large:  1399.98px;

    /* Type families */
    --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Motion */
    --t-fast: 0.15s ease;
    --t-base: 0.22s ease;
    --t-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* Surface tokens (light, theme-agnostic) */
    --ui-radius-sm: 8px;
    --ui-radius:    12px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 24px;

    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --ui-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
    --ui-shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, 0.18);
    --ui-shadow-xl: 0 30px 80px -20px rgba(15, 23, 42, 0.28);
}

/* ---------- Reset / Box model ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    margin: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); font-weight: 750; }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.1rem;  font-weight: 700; }
h5 { font-size: 1rem;    font-weight: 700; }
h6 { font-size: .9rem;   font-weight: 650; }
p  { margin: 0 0 1em; }
small { font-size: 80%; }
code, kbd, pre, samp { font-family: var(--font-mono); }

/* ---------- Slim, themed scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(99, 102, 241, .55) rgba(148, 163, 184, .12); }
::-webkit-scrollbar         { width: 7px; height: 7px; }
::-webkit-scrollbar-track   { background: rgba(148, 163, 184, .12); border-radius: 8px; }
::-webkit-scrollbar-thumb   {
    background: linear-gradient(180deg, var(--scroll-a, #6366f1), var(--scroll-b, #9333ea));
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--scroll-b, #9333ea), var(--scroll-a, #6366f1));
}
::-webkit-scrollbar-corner { background: transparent; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1);
    border: none; border-radius: 999px;
}

/* ---------- Focus / Selection ---------- */
:focus-visible {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }
::selection {
    background: rgba(var(--primary-rgb, 99, 102, 241), .25);
    color: inherit;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Smooth, layered surface background ---------- */
body.has-aurora::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 90% -10%,  rgba(var(--primary-rgb, 99, 102, 241), .10), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(var(--secondary-rgb, 118, 75, 162), .08), transparent 60%);
}

/* ---------- Responsive chart wrappers ---------- */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 220px;
}
@media (max-width: 991.98px) { .chart-wrap { height: 240px; } }
@media (max-width: 767.98px) { .chart-wrap { height: 220px; } }
@media (max-width: 575.98px) { .chart-wrap { height: 200px; } }

/* ---------- Responsive tables (mobile-first horizontal scroll) ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--ui-radius);
}
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb, 99, 102, 241), .5);
    border-radius: 999px;
}

@media (max-width: 767.98px) {
    .table-responsive > .table { min-width: 640px; }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        white-space: nowrap;
        font-size: 12.5px;
        padding: 10px 10px !important;
    }
}
@media (max-width: 575.98px) {
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 9px 8px !important; font-size: 12px; }
}

/* ---------- Equal-height grid cards ---------- */
.row.g-3 > .col > .card,
.row.g-3 > .col > .stat-card,
.row.g-3 > .col > .wallet-card { height: 100%; }

/* ---------- Spacing helpers ---------- */
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.25rem; }

/* ---------- Utility classes ---------- */
.text-gradient {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #9333ea));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cursor-pointer { cursor: pointer; }
.fw-500 { font-weight: 500; }
.fw-550 { font-weight: 550; }
.fw-600 { font-weight: 600; }
.fw-650 { font-weight: 650; }
.fw-700 { font-weight: 700; }
.fw-750 { font-weight: 750; }
.fw-800 { font-weight: 800; }
.rounded-sm  { border-radius: var(--ui-radius-sm)  !important; }
.rounded     { border-radius: var(--ui-radius)     !important; }
.rounded-xl  { border-radius: 14px                 !important; }
.rounded-2xl { border-radius: var(--ui-radius-lg)  !important; }
.rounded-3xl { border-radius: var(--ui-radius-xl)  !important; }
.break-all   { word-break: break-all; }
.shadow-soft { box-shadow: var(--ui-shadow-sm); }
.shadow-md   { box-shadow: var(--ui-shadow-md); }
.shadow-lg   { box-shadow: var(--ui-shadow-lg); }
.truncate-1  { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.truncate-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.truncate-3  { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Print ---------- */
@media print {
    .sidebar, .topbar, .mobile-menu-toggle, .sidebar-overlay, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .stat-card, .card, .wallet-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
}

/* ============================================================
   Polish UI Layer (.px-) — shared by ALL layouts
   Foundation • Micro-interactions • Components
   (toasts • cmd palette • dark toggle • timeline • progress •
    heatmap • sparkline • share • leadership)
   ============================================================ */

.tnum,
.stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4,
.wallet-card h3, .px-money { font-variant-numeric: tabular-nums; }

.stat-card, .wallet-card, .card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }

.px-pop:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-lg);
}
.px-fade-in { animation: px-fade .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes px-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Gradient border ---------- */
.px-grad-border {
    position: relative;
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--px-card-bg, var(--box-soft, #fff)), var(--px-card-bg, var(--box-soft, #fff))) padding-box,
        linear-gradient(135deg, var(--primary), var(--secondary)) border-box !important;
}
body.px-dark .px-grad-border { --px-card-bg: #111827; }

/* ---------- Glass + noise overlay ---------- */
.px-glass {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .55) !important;
}
.px-noise { position: relative; }
.px-noise::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.4px);
    background-size: 4px 4px;
    -webkit-mask-image: linear-gradient(#000, transparent 80%);
            mask-image: linear-gradient(#000, transparent 80%);
}

/* ---------- Neon pulse (highlight card) ---------- */
[data-neon] { animation: px-neon 2.6s ease-in-out infinite; }
[data-neon] > .icon {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    animation: px-neon-halo 2.6s ease-in-out infinite;
}
@keyframes px-neon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 99, 102, 241), .35); }
    50%      { box-shadow: 0 14px 30px -8px rgba(var(--primary-rgb, 99, 102, 241), .55); }
}
@keyframes px-neon-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 99, 102, 241), .4); }
    50%      { box-shadow: 0 0 0 10px rgba(var(--primary-rgb, 99, 102, 241), 0); }
}

/* ---------- Skeleton shimmer ---------- */
.px-skel {
    position: relative;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
    border-radius: 8px;
    color: transparent !important;
}
.px-skel::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: px-shimmer 1.4s infinite;
}
@keyframes px-shimmer { 100% { transform: translateX(100%); } }

/* ---------- Toast ---------- */
.px-toasts {
    position: fixed;
    top: 16px; right: 16px;
    z-index: 1080;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 340px;
}
.px-toast {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fff; color: #0f172a;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--ui-shadow-md);
    font-size: 13.5px;
    line-height: 1.45;
    animation: px-toast-in .3s cubic-bezier(.16, 1, .3, 1);
    max-width: 100%;
}
.px-toast.success { border-left-color: #22c55e; }
.px-toast.error   { border-left-color: #ef4444; }
.px-toast.warn    { border-left-color: #f59e0b; }
.px-toast.info    { border-left-color: #3b82f6; }
.px-toast i { margin-top: 2px; }
.px-toast.leaving { transition: opacity .25s, transform .25s; opacity: 0; transform: translateX(20px); }
@keyframes px-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 575.98px) { .px-toasts { left: 12px; right: 12px; max-width: none; } }

/* ---------- Command palette ---------- */
.px-cmd-backdrop {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1070;
    opacity: 0; visibility: hidden;
    transition: .18s;
}
.px-cmd-backdrop.open { opacity: 1; visibility: visible; }
.px-cmd {
    position: fixed;
    top: 12vh; left: 50%;
    transform: translate(-50%, -8px) scale(.98);
    width: min(560px, 92vw);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: var(--ui-shadow-xl);
    z-index: 1071;
    opacity: 0; visibility: hidden;
    transition: .18s;
    overflow: hidden;
}
.px-cmd.open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.px-cmd input {
    width: 100%;
    border: 0; outline: 0;
    font-size: 15px;
    padding: 16px 18px;
    background: transparent;
    color: inherit;
}
.px-cmd-list { max-height: 46vh; overflow: auto; border-top: 1px solid #eef2f7; padding: 6px; }
.px-cmd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.px-cmd-item .px-cmd-ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(var(--primary-rgb, 99, 102, 241), .12);
    color: var(--primary);
    font-size: 15px;
}
.px-cmd-item.active { background: rgba(var(--primary-rgb, 99, 102, 241), .14); }
.px-cmd-item kbd { margin-left: auto; font-size: 11px; color: #94a3b8; }
.px-cmd-item .px-cmd-hint { font-size: 12px; color: #94a3b8; }

/* ---------- Topbar plugin buttons ---------- */
.px-topbar-btn {
    display: inline-grid !important;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--box-line, #e2e8f0);
    background: var(--chip-bg, #fff);
    color: var(--chip-text, currentColor);
    font-size: 15px;
    cursor: pointer;
    transition: var(--t-base);
    position: relative;
}
.px-topbar-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.px-topbar { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Timeline ---------- */
.px-timeline { position: relative; padding-left: 4px; }
.px-tl-item {
    position: relative;
    padding: 0 0 14px 22px;
    border-left: 2px solid rgba(var(--primary-rgb, 99, 102, 241), .25);
}
.px-tl-item:last-child { padding-bottom: 2px; border-left-color: transparent; }
.px-tl-dot {
    position: absolute; left: -7px; top: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), .18);
}
.px-tl-dot.success { background: #22c55e; }
.px-tl-dot.warn    { background: #f59e0b; }
.px-tl-dot.danger  { background: #ef4444; }

/* ---------- Progress ---------- */
.px-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    overflow: hidden;
}
.px-progress > .px-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width .8s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Heatmap ---------- */
.px-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.px-heat .px-heat-cell { aspect-ratio: 1; border-radius: 7px; background: rgba(148, 163, 184, .18); min-height: 18px; }

/* ---------- Share buttons ---------- */
.px-share { display: inline-flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.px-share .btn { font-size: 13px; }
.px-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 1px solid var(--box-line, #cbd5e1);
    border-radius: 50%;
    color: var(--chip-text, #475569);
    background: transparent;
    text-decoration: none;
    transition: all .18s ease;
}
.px-share-btn svg { width: 15px; height: 15px; display: block; }
.px-share-btn:hover,
.px-share-btn:focus {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #9333ea));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb, 99, 102, 241), .6);
}

/* ---------- Dark mode override (client toggle) ----------
   Applies on top of ANY theme (modern/glass/classic/luxe/dark-pro/minimal/
   corporate) when the topbar "Toggle dark mode" button adds .px-dark to
   <body>. Every theme sets its own hardcoded colors (sidebar, headings,
   chips, buttons, badges, alerts...) with !important in its own <style>
   block, so this override has to (a) win on specificity/!important and
   (b) actually touch every one of those surfaces, not just cards/forms —
   otherwise the page ends up half-light/half-dark with unreadable text.
   It does two things together:
     1. Re-points the shared --ui-* design tokens (consumed by base.css,
        admin.css, user.css and tabs.css) at dark-safe values, so every
        component built on top of them (card-header/footer, form-text,
        dropdowns, pagination, nav-tabs/pills, table headers, stat-card
        icons, ref-code, progress bars...) repaints for free.
     2. Explicitly overrides the surfaces every theme hardcodes outside
        those tokens: sidebar, headings, text-muted, badges, alerts,
        buttons, and the topbar user chip.
   ---------------------------------------------------------- */
body.px-dark {
    background: #0b0f1a;
    color: #cbd5e1;
    /* Shared design tokens — re-themed for dark, cascades to every
       component in admin.css / user.css / tabs.css that reads var(--ui-*). */
    --ui-surface: #111827;
    --ui-text: #e2e8f0;
    --ui-muted: #94a3b8;
    --ui-line: #1f2937;
    --ui-soft: #1a2332;
    --ui-ink: #ffffff;
    --box-line: #1f2937;
    --box-soft: #1a2332;
    --box-soft-alt: #17202f;
    --chip-bg: #111827;
    --chip-text: #e2e8f0;
    --text-muted: #94a3b8;
    --line: #1f2937;
}
body.px-dark .main-content { background: #0b0f1a; }
body.px-dark .topbar { background: rgba(17, 24, 39, .92) !important; border-color: #1f2937 !important; color: #e2e8f0 !important; }
body.px-dark .topbar h5 { color: #f1f5f9 !important; }

/* ---------- Sidebar (every theme hardcodes this) ---------- */
body.px-dark .sidebar { background: #0f172a !important; border-color: #1f2937 !important; box-shadow: none !important; }
body.px-dark .sidebar .brand { color: #f1f5f9 !important; border-color: #1f2937 !important; }
body.px-dark .sidebar a { color: #94a3b8 !important; }
body.px-dark .sidebar a:hover { background: rgba(148, 163, 184, .1) !important; color: #f1f5f9 !important; }
body.px-dark .sidebar a.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #9333ea)) !important;
    color: var(--btn-ink, #fff) !important;
    border-right-color: transparent !important;
}
body.px-dark .sidebar hr { border-color: #1f2937 !important; opacity: 1; }
body.px-dark .sidebar::-webkit-scrollbar-thumb { background: #334155; }
body.px-dark .sidebar-overlay { background: rgba(0, 0, 0, .55); }
body.px-dark .mobile-menu-toggle { box-shadow: 0 4px 14px rgba(0, 0, 0, .5) !important; }

/* ---------- Headings & text (every theme hardcodes a light-mode color) ---------- */
body.px-dark h1, body.px-dark h2, body.px-dark h3,
body.px-dark h4, body.px-dark h5, body.px-dark h6 { color: #f1f5f9 !important; }
body.px-dark .text-muted { color: #94a3b8 !important; }
body.px-dark .text-dark { color: #e2e8f0 !important; }
body.px-dark .text-secondary { color: #94a3b8 !important; }
body.px-dark hr { border-color: #1f2937; }
body.px-dark code, body.px-dark pre { color: #e2e8f0; background: rgba(148, 163, 184, .1); }

/* ---------- Topbar user chip (each theme hardcodes its own look) ---------- */
body.px-dark .topbar .user-chip {
    background: rgba(148, 163, 184, .1) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ---------- Cards / tables / forms ---------- */
body.px-dark .stat-card,
body.px-dark .wallet-card,
body.px-dark .card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #e2e8f0;
}
body.px-dark .card-header,
body.px-dark .card-footer { background: #17202f !important; border-color: #1f2937 !important; color: #e2e8f0 !important; }
body.px-dark .table { --bs-table-bg: transparent; color: #cbd5e1; border-color: #1f2937; }
body.px-dark .table > thead > tr > th { color: #94a3b8 !important; border-color: #1f2937 !important; }
body.px-dark .table > tbody > tr > td { color: #cbd5e1 !important; border-color: #1f2937 !important; }
body.px-dark .table-hover > tbody > tr:hover > *,
body.px-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(148, 163, 184, .07) !important; }
body.px-dark .form-control,
body.px-dark .form-select,
body.px-dark textarea {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
}
body.px-dark .form-control::placeholder { color: #64748b !important; }
body.px-dark .form-label,
body.px-dark .form-check-label,
body.px-dark .form-text { color: #cbd5e1 !important; }
body.px-dark .input-group-text { background: #17202f !important; border-color: #1e293b !important; color: #cbd5e1 !important; }
body.px-dark select.form-select option { background: #0f172a; color: #e2e8f0; }

/* ---------- Browser autofill ----------
   Chrome/Safari/Edge paint autofilled inputs with their own yellow/blue
   palette that ignores the theme. Force the field to keep the current
   theme's surface + ink so autofilled values look native. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--chip-bg, #ffffff) inset !important;
    box-shadow: 0 0 0 1000px var(--chip-bg, #ffffff) inset !important;
    -webkit-text-fill-color: var(--chip-text, #334155) !important;
    caret-color: currentColor;
    transition: background-color 9999s ease-out 0s;
}
body.px-dark .form-control:-webkit-autofill,
body.px-dark .form-control:-webkit-autofill:hover,
body.px-dark .form-control:-webkit-autofill:focus,
body.px-dark .form-select:-webkit-autofill,
body.px-dark .form-select:-webkit-autofill:hover,
body.px-dark .form-select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    box-shadow: 0 0 0 1000px #0f172a inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* ---------- Buttons ---------- */
body.px-dark .btn-outline-secondary { color: #cbd5e1 !important; border-color: #334155 !important; }
body.px-dark .btn-outline-secondary:hover { background: #26334a !important; color: #fff !important; }
body.px-dark .btn-light { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }

/* ---------- Badges & alerts (light-mode versions use dark text on a
   near-white translucent chip — needs brighter text once the page behind
   it goes dark) ---------- */
body.px-dark .badge.bg-success, body.px-dark .badge.text-bg-success { background-color: rgba(34, 197, 94, .18) !important; color: #4ade80 !important; }
body.px-dark .badge.bg-danger,  body.px-dark .badge.text-bg-danger  { background-color: rgba(239, 68, 68, .18) !important; color: #f87171 !important; }
body.px-dark .badge.bg-warning, body.px-dark .badge.text-bg-warning { background-color: rgba(245, 158, 11, .2) !important;  color: #fbbf24 !important; }
body.px-dark .badge.bg-info,    body.px-dark .badge.text-bg-info    { background-color: rgba(59, 130, 246, .18) !important; color: #60a5fa !important; }
body.px-dark .alert-success { background-color: rgba(34, 197, 94, .12) !important; border-color: rgba(34, 197, 94, .3) !important; color: #4ade80 !important; }
body.px-dark .alert-danger  { background-color: rgba(239, 68, 68, .12) !important; border-color: rgba(239, 68, 68, .3) !important; color: #f87171 !important; }
body.px-dark .alert-warning { background-color: rgba(245, 158, 11, .14) !important; border-color: rgba(245, 158, 11, .32) !important; color: #fbbf24 !important; }
body.px-dark .alert-info    { background-color: rgba(59, 130, 246, .12) !important; border-color: rgba(59, 130, 246, .3) !important; color: #60a5fa !important; }

/* ---------- Pagination / tabs ---------- */
body.px-dark .pagination .page-link { background: #111827 !important; border-color: #1f2937 !important; color: #cbd5e1 !important; }
body.px-dark .pagination .page-item.disabled .page-link { background: #0f172a !important; color: #475569 !important; }
body.px-dark .nav-tabs .nav-link { border-color: #1f2937 !important; color: #94a3b8 !important; }
body.px-dark .nav-tabs .nav-link.active { background: #111827 !important; border-color: #1f2937 #1f2937 transparent !important; color: #f1f5f9 !important; }

/* ---------- Modals / dropdowns / lists / overlays ---------- */
body.px-dark .modal-content,
body.px-dark .modal-header,
body.px-dark .modal-footer {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}
body.px-dark .dropdown-menu { background: #111827 !important; border-color: #1f2937 !important; }
body.px-dark .dropdown-item,
body.px-dark .list-group-item { color: #cbd5e1 !important; }
body.px-dark .dropdown-item:hover, body.px-dark .dropdown-item:focus { background: rgba(148, 163, 184, .1) !important; color: #f1f5f9 !important; }
body.px-dark .dropdown-divider { border-color: #1f2937 !important; }
body.px-dark .list-group-item { background: #111827 !important; border-color: #1f2937 !important; }
body.px-dark .px-toast,
body.px-dark .px-cmd {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}
body.px-dark .px-cmd input { color: #e2e8f0; }
body.px-dark .px-cmd-list { border-color: #1f2937; }
body.px-dark .px-topbar-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.px-dark .px-grad-border { --px-card-bg: #111827; }
body.px-dark .table > :not(caption) > * > * { color: inherit; }
body.px-dark .px-cmd-item kbd,
body.px-dark .px-cmd-item .px-cmd-hint { color: #64748b; }

/* ---------- Bell badge ---------- */
.px-bell { position: relative; }
.px-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px; font-weight: 700;
    line-height: 17px;
    text-align: center;
    display: none;
}
.px-bell-badge.show {
    display: inline-block;
    animation: px-pop-badge .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes px-pop-badge { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Heatmap legend ---------- */
.px-heat-legend-wrap { font-size: 11px; color: var(--chip-text, inherit); }
.px-heat-legend { display: inline-flex; gap: 3px; }
.px-heat-legend i { width: 12px; height: 12px; border-radius: 3px; }
.px-heat-legend i:nth-child(1) { background: rgba(var(--primary-rgb, 99, 102, 241), .14); }
.px-heat-legend i:nth-child(2) { background: rgba(var(--primary-rgb, 99, 102, 241), .32); }
.px-heat-legend i:nth-child(3) { background: rgba(var(--primary-rgb, 99, 102, 241), .52); }
.px-heat-legend i:nth-child(4) { background: rgba(var(--primary-rgb, 99, 102, 241), .74); }
.px-heat-legend i:nth-child(5) { background: rgba(var(--primary-rgb, 99, 102, 241), .95); }

/* ---------- Sparkline ---------- */
.px-sparkline { width: 100%; height: 46px; display: block; }

/* ---------- Leaderboard rows + rank medals ---------- */
.px-lead-row { transition: background .15s; border-radius: 8px; }
.px-lead-row:hover { background: rgba(var(--primary-rgb, 99, 102, 241), .06); }
.px-rank {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(148, 163, 184, .15);
    font-size: 15px; font-weight: 800;
}
.px-rank[data-rank="0"] { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; box-shadow: 0 4px 12px -4px rgba(217, 119, 6, .6); }
.px-rank[data-rank="1"] { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.px-rank[data-rank="2"] { background: linear-gradient(135deg, #d97706, #92400e); color: #fff; }

/* ---------- Leadership rank badge ---------- */
.wt-rank-badge {
    display: inline-grid; place-items: center;
    width: 78px; height: 78px;
    border-radius: 50%;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow:
        0 0 0 6px rgba(var(--primary-rgb, 99, 102, 241), .18),
        0 14px 30px -12px rgba(var(--primary-rgb, 99, 102, 241), .6);
    animation: px-neon-halo 3s ease-in-out infinite;
}

/* ---------- Accessible focus ring for buttons/links ---------- */
.btn:focus-visible,
a:focus-visible,
.px-topbar-btn:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb, 99, 102, 241), .35);
    outline-offset: 2px;
}

/* ============================================================
   Universal responsive helpers (any layout)
   ============================================================ */
.container-narrow { max-width: 1200px; margin: 0 auto; }
.container-wide   { max-width: 1600px; margin: 0 auto; }

@media (max-width: 1399.98px) { .container-wide { max-width: 100%; } }
@media (max-width: 1199.98px) { .container-narrow { max-width: 100%; } }

/* Stack columns on small screens, side-by-side on large */
.stack-on-mobile > [class*="col-"] { width: 100% !important; }

/* ---------- Section title (used inside layouts) ---------- */
.section-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 4px 0 14px;
}
.section-title h5 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px; font-weight: 700;
    color: var(--chip-text, #1e293b);
    letter-spacing: -.01em;
}
.section-title small { color: var(--text-muted, #64748b); }

/* ---------- Empty state polish ---------- */
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--ui-muted, #64748b);
}
.empty-state i { font-size: 40px; opacity: .35; display: block; margin-bottom: 12px; }
.empty-state h6 { color: var(--chip-text, #1e293b); margin-bottom: 4px; font-weight: 700; }
.empty-state p  { color: var(--ui-muted, #64748b); font-size: 14px; margin: 0; }

/* ============================================================
   Topbar user-chip: name + ID badge (shared admin + user panels)
   ============================================================ */
.user-chip .uc-name { font-weight: 600; }
.user-chip .uc-id {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(var(--primary-rgb, 99, 102, 241), .14);
    color: var(--primary, #667eea);
    font-size: 11px; font-weight: 700; line-height: 1.5;
    letter-spacing: .2px; white-space: nowrap;
}
@media (max-width: 575.98px) {
    .user-chip .uc-id { display: none; }
}


/* ============================================================
   Full-width Bootstrap grid baseline
   Rows keep their gutter line; columns divide the available space.
   Do not cap rows with max-width:100%, which leaves side gaps.
   ============================================================ */
.main-content > .row {
    width: auto;
    max-width: none !important;
}
.main-content > .row > [class*="col-"] {
    min-width: 0;
}