/**
 * Premium Dashboard Styles
 * Features: CSS Variables, Glassmorphism, Dark Mode, Animations
 */

:root {
    /* Light Theme Tokens - B2B Reference */
    --mjn-bg-base: #F5F6F8;
    --mjn-bg-surface: #ffffff;
    --mjn-bg-sidebar: #0F8A3E;
    --mjn-sidebar-text: #ffffff;
    --mjn-text-primary: #333333;
    --mjn-text-secondary: #6c757d;
    --mjn-border: #e3e6f0;
    
    --mjn-brand: #0F8A3E;
    --mjn-brand-hover: #0b6b30;
    
    --mjn-success: #198754;
    --mjn-warning: #ffc107;
    --mjn-danger: #dc3545;
    --mjn-info: #0dcaf0;
    
    --mjn-card-green: #28a745;
    --mjn-card-blue: #00a0f0;
    --mjn-card-purple: #7a3de8;
    --mjn-card-orange: #ff9800;

    --mjn-glass-blur: none;
    --mjn-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.dark-mode {
    /* Dark Theme Tokens - Rich Emerald Slate */
    --mjn-bg-base: #0B0F19;
    --mjn-bg-surface: #131B2E;
    --mjn-bg-body: #0E1526;
    --mjn-bg-sidebar: #090E1A;
    --mjn-sidebar-text: #F9FAFB;
    --mjn-text-primary: #F9FAFB;
    --mjn-text-secondary: #9CA3AF;
    --mjn-border: #1F293D;
    
    --mjn-brand: #0F8A3E;
    --mjn-brand-hover: #16A34A;
    --mjn-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Full Page Dark Background for body, html, and WP wrapper */
html.dark-mode,
body.dark-mode,
.dark-mode,
.dark-mode body,
.dark-mode #wpcontent,
.dark-mode #wpbody,
.dark-mode #wpbody-content,
.dark-mode #page,
.dark-mode #content,
.dark-mode #mjn-dashboard-app,
.dark-mode .mojeaga-page,
.dark-mode .mjn-app-layout,
.dark-mode .mjn-main-content,
body.mjn-dashboard-active.dark-mode {
    background-color: #0B0F19 !important;
    background: #0B0F19 !important;
    color: #F9FAFB !important;
}

.dark-mode #mjn-dashboard-app {
    box-shadow: none !important;
}

.dark-mode .mjn-sidebar {
    background: #090E1A !important;
    border-right: 1px solid #1F293D !important;
}

.dark-mode .mjn-main-content {
    background: #0B0F19 !important;
}

/* Base Cards & Widgets in Dark Mode */
.dark-mode .glass-card,
.dark-mode .mjn-stat-card:not([class*="bg-"]),
.dark-mode .mjn-widget,
.dark-mode .mjn-card,
.dark-mode .mjn-leg-card,
.dark-mode .mjn-stk-stat,
.dark-mode .mjn-quick-action-btn,
.dark-mode .mjn-member-card,
.dark-mode .mjn-report-filters {
    background: #131B2E !important;
    border-color: #1F293D !important;
    color: #F9FAFB !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Force dark theme backgrounds for all white/light inline styled containers */
.dark-mode div[style*="background: white"],
.dark-mode div[style*="background:white"],
.dark-mode div[style*="background: #ffffff"],
.dark-mode div[style*="background:#ffffff"],
.dark-mode div[style*="background: #FFFFFF"],
.dark-mode div[style*="background:#FFFFFF"],
.dark-mode div[style*="background: #fff"],
.dark-mode div[style*="background:#fff"],
.dark-mode div[style*="background: #FFF"],
.dark-mode div[style*="background:#FFF"],
.dark-mode div[style*="background: #f9fafb"],
.dark-mode div[style*="background:#f9fafb"],
.dark-mode div[style*="background: #f8fafc"],
.dark-mode div[style*="background:#f8fafc"],
.dark-mode div[v-if="shop.selectedProduct"] > div,
.dark-mode div[v-if="checkout.open"] > div,
.dark-mode .mjn-product-modal-dialog,
.dark-mode .mjn-checkout-modal-dialog {
    background-color: #131B2E !important;
    background: #131B2E !important;
    border-color: #1F293D !important;
    color: #F9FAFB !important;
}

/* Dark Mode Modal Dialogs & Inner Elements */
.dark-mode div[v-if="shop.selectedProduct"] h3,
.dark-mode div[v-if="shop.selectedProduct"] p,
.dark-mode div[v-if="checkout.open"] h3,
.dark-mode div[v-if="checkout.open"] h4,
.dark-mode div[v-if="checkout.open"] p,
.dark-mode div[v-if="checkout.open"] label,
.dark-mode div[v-if="checkout.open"] span,
.dark-mode div[v-if="checkout.open"] strong {
    color: #F9FAFB !important;
}

.dark-mode div[v-if="checkout.open"] select,
.dark-mode div[v-if="checkout.open"] input {
    background-color: #0B0F19 !important;
    background: #0B0F19 !important;
    border-color: #1F293D !important;
    color: #F9FAFB !important;
}

.dark-mode div[v-if="checkout.open"] select option {
    background-color: #0B0F19 !important;
    color: #F9FAFB !important;
}

.dark-mode div[v-if="checkout.open"] .mjn-btn-outline,
.dark-mode div[v-if="shop.selectedProduct"] .mjn-btn-outline,
.dark-mode .dark-mode-btn-outline,
.dark-mode button[style*="border-color:#d1d5db"],
.dark-mode button[style*="border-color: #d1d5db"] {
    background-color: #0B0F19 !important;
    background: #0B0F19 !important;
    border-color: #1F293D !important;
    color: #F9FAFB !important;
}

.dark-mode div[v-if="checkout.open"] .mjn-btn-outline:hover,
.dark-mode div[v-if="shop.selectedProduct"] .mjn-btn-outline:hover {
    background-color: #1F293D !important;
    color: #FFFFFF !important;
}

.dark-mode .mjn-product-modal-close {
    background: #1F293D !important;
    color: #F9FAFB !important;
    border-color: #374151 !important;
}


/* Sub-card headers and light gray sections in Dark Mode */
.dark-mode div[style*="background: #f8f9fa"],
.dark-mode div[style*="background:#f8f9fa"] {
    background-color: #1A243B !important;
    background: #1A243B !important;
    border-color: #1F293D !important;
    color: #F9FAFB !important;
}

.dark-mode div[style*="background: #f8f9fa"] *,
.dark-mode div[style*="background:#f8f9fa"] * {
    color: #F9FAFB !important;
}

/* Matching bonus qualification & cream callouts in Dark Mode */
.dark-mode div[style*="background: #fffcf5"],
.dark-mode div[style*="background:#fffcf5"] {
    background-color: #1A243B !important;
    background: #1A243B !important;
    border-color: #2D3A58 !important;
    color: #F9FAFB !important;
}

.dark-mode div[style*="background: #fffcf5"] *,
.dark-mode div[style*="background:#fffcf5"] * {
    color: #F9FAFB !important;
}
.dark-mode div[style*="background: #fffcf5"] i[data-lucide="clipboard-list"] {
    color: #F9FAFB !important;
}

/* ── GREEN CONTAINERS, BANNERS, CARDS & BADGES IN DARK MODE ── */
/* Deep Emerald Background for Light-Green Callouts in Dark Mode */
.dark-mode div[style*="background: #f0fdf4"],
.dark-mode div[style*="background:#f0fdf4"],
.dark-mode div[style*="background: #f0f9f4"],
.dark-mode div[style*="background:#f0f9f4"],
.dark-mode div[style*="background: #dcfce7"],
.dark-mode div[style*="background:#dcfce7"],
.dark-mode div[style*="background: #e6f4ea"],
.dark-mode div[style*="background:#e6f4ea"] {
    background-color: #064E3B !important;
    background: #064E3B !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
}

/* FORCE ALL TEXT inside ANY GREEN container to bright white in Dark Mode */
.dark-mode div[style*="background: var(--mjn-brand)"] *,
.dark-mode div[style*="background:var(--mjn-brand)"] *,
.dark-mode div[style*="background: #10B981"] *,
.dark-mode div[style*="background:#10B981"] *,
.dark-mode div[style*="background: #0F8A3E"] *,
.dark-mode div[style*="background:#0F8A3E"] *,
.dark-mode div[style*="background: #136836"] *,
.dark-mode div[style*="background:#136836"] *,
.dark-mode div[style*="background: #166534"] *,
.dark-mode div[style*="background:#166534"] *,
.dark-mode div[style*="background: #059669"] *,
.dark-mode div[style*="background:#059669"] *,
.dark-mode div[style*="background: #198754"] *,
.dark-mode div[style*="background:#198754"] *,
.dark-mode div[style*="background: #28a745"] *,
.dark-mode div[style*="background:#28a745"] *,
.dark-mode div[style*="background: linear-gradient"] *,
.dark-mode div[style*="background:linear-gradient"] *,
.dark-mode div[style*="background: #f0fdf4"] *,
.dark-mode div[style*="background:#f0fdf4"] *,
.dark-mode div[style*="background: #f0f9f4"] *,
.dark-mode div[style*="background:#f0f9f4"] *,
.dark-mode div[style*="background: #dcfce7"] *,
.dark-mode div[style*="background:#dcfce7"] *,
.dark-mode div[style*="background: #e6f4ea"] *,
.dark-mode div[style*="background:#e6f4ea"] * {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

div[style*="background: var(--mjn-brand)"] p,
div[style*="background:var(--mjn-brand)"] p,
.dark-mode div[style*="background: var(--mjn-brand)"] p,
.dark-mode div[style*="background:var(--mjn-brand)"] p {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Green Badges & Status Pills in Dark Mode */
.dark-mode .mjn-badge-pickup,
.dark-mode .mjn-badge-completed,
.dark-mode .mjn-badge-instock,
.dark-mode .badge-success,
.dark-mode .mjn-badge-success,
.dark-mode span[style*="background:#dcfce7"],
.dark-mode span[style*="background: #dcfce7"],
.dark-mode span[style*="background:#f0fdf4"],
.dark-mode span[style*="background: #f0f9f4"] {
    background-color: #047857 !important;
    background: #047857 !important;
    color: #FFFFFF !important;
}

.dark-mode .mjn-badge-pickup *,
.dark-mode .mjn-badge-completed *,
.dark-mode .mjn-badge-instock *,
.dark-mode .badge-success *,
.dark-mode .mjn-badge-success *,
.dark-mode span[style*="background:#dcfce7"] *,
.dark-mode span[style*="background: #dcfce7"] *,
.dark-mode span[style*="background:#f0fdf4"] *,
.dark-mode span[style*="background: #f0f9f4"] * {
    color: #FFFFFF !important;
}

/* ── AMBER / YELLOW CALLOUTS IN DARK MODE ── */
.dark-mode div[style*="background: #fffbeb"],
.dark-mode div[style*="background:#fffbeb"],
.dark-mode div[style*="background: #fef3c7"],
.dark-mode div[style*="background:#fef3c7"],
.dark-mode .mjn-low-stock-alert {
    background-color: #3F2C06 !important;
    background: #3F2C06 !important;
    border-color: #78350F !important;
    color: #FEF08A !important;
}

.dark-mode div[style*="background: #fffbeb"] *,
.dark-mode div[style*="background:#fffbeb"] *,
.dark-mode div[style*="background: #fef3c7"] *,
.dark-mode div[style*="background:#fef3c7"] *,
.dark-mode .mjn-low-stock-alert * {
    color: #FEF08A !important;
}

/* ── BLUE CALLOUTS IN DARK MODE ── */
.dark-mode div[style*="background: #eff6ff"],
.dark-mode div[style*="background:#eff6ff"] {
    background-color: #172554 !important;
    background: #172554 !important;
    border-color: #1E40AF !important;
    color: #BFDBFE !important;
}

.dark-mode div[style*="background: #eff6ff"] *,
.dark-mode div[style*="background:#eff6ff"] * {
    color: #FFFFFF !important;
}

/* ── RED / DANGER CALLOUTS IN DARK MODE ── */
.dark-mode div[style*="background: #fef2f2"],
.dark-mode div[style*="background:#fef2f2"] {
    background-color: #450A0A !important;
    background: #450A0A !important;
    border-color: #7F1D1D !important;
    color: #FECDD3 !important;
}

.dark-mode div[style*="background: #fef2f2"] *,
.dark-mode div[style*="background:#fef2f2"] * {
    color: #FFFFFF !important;
}

/* ── OTHER BADGES IN DARK MODE ── */
.dark-mode .mjn-badge-supply {
    background-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}
.dark-mode .mjn-badge-pending,
.dark-mode .mjn-badge-lowstock,
.dark-mode .badge-warning {
    background-color: #B45309 !important;
    color: #FFFFFF !important;
}
.dark-mode .mjn-badge-outofstock,
.dark-mode .badge-danger {
    background-color: #B91C1C !important;
    color: #FFFFFF !important;
}

/* Topbar & Headers */
.dark-mode .mjn-topbar {
    border-bottom-color: #1F293D !important;
    background: #0E1526 !important;
}

.dark-mode .page-title,
.dark-mode .stat-info h3,
.dark-mode .user-name,
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #F9FAFB !important;
}

/* Text and Spans Contrast Fix */
.dark-mode .stat-info p,
.dark-mode .user-rank,
.dark-mode p, .dark-mode label,
.dark-mode span:not(.mjn-btn *):not(.mjn-badge *):not(button *):not([style*="color:#0F8A3E"] *):not([style*="background: #0F8A3E"] *):not([style*="background:#0F8A3E"] *):not([style*="background: #166534"] *):not([style*="background:#166534"] *) {
    color: #D1D5DB;
}

/* Green Inline Styled Text Override in Dark Mode */
.dark-mode [style*="color: #0F8A3E"],
.dark-mode [style*="color:#0F8A3E"],
.dark-mode [style*="color: #166534"],
.dark-mode [style*="color:#166534"],
.dark-mode [style*="color: #059669"],
.dark-mode [style*="color:#059669"],
.dark-mode [style*="color: #15803d"],
.dark-mode [style*="color:#15803d"],
.dark-mode [style*="color: #065f46"],
.dark-mode [style*="color:#065f46"] {
    color: #34D399 !important;
}

/* Ensure ALL button text, icons, and inner spans are bright white */
.dark-mode button:not(.mjn-btn-outline),
.dark-mode .mjn-btn:not(.mjn-btn-outline),
.dark-mode .mjn-btn-primary,
.dark-mode .mjn-btn-success,
.dark-mode button:not(.mjn-btn-outline) *,
.dark-mode .mjn-btn:not(.mjn-btn-outline) *,
.dark-mode .mjn-btn-primary *,
.dark-mode .mjn-btn-success *,
.dark-mode button span,
.dark-mode button i,
.dark-mode button svg,
.dark-mode .mjn-shop-cart-sidebar button,
.dark-mode .mjn-shop-cart-sidebar button * {
    color: #ffffff !important;
}

/* Input, Select & Options in Dark Mode */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #1F293D !important;
    color: #F9FAFB !important;
    border: 1px solid #374151 !important;
}

.dark-mode select option {
    background-color: #131B2E !important;
    color: #F9FAFB !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: #0F8A3E !important;
    box-shadow: 0 0 0 3px rgba(15,138,62,0.2) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #9CA3AF !important;
}

/* ── Stockist tier badges ── */
.mjn-tier-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 20px;
    vertical-align: middle;
    white-space: nowrap;
}
.mjn-tier-lga { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.mjn-tier-state { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.mjn-tier-regional { background: #fae8ff; color: #86198f; border: 1px solid #e9d5ff; }

/* ── Internal registration form (Register Member): tighter spacing + visible placeholders ── */
.mjn-register-member .mjn-input-group {
    margin-bottom: 12px !important;
}
.mjn-register-member input::placeholder,
.mjn-register-member select::placeholder,
.mjn-register-member textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}
@media (max-width: 600px) {
    .mjn-register-member .mjn-input-group {
        margin-bottom: 10px !important;
    }
}

/* Table Dark Mode Contrast */
.dark-mode .mjn-table th {
    background-color: #182238 !important;
    color: #F9FAFB !important;
    border-bottom-color: #1F293D !important;
}

.dark-mode .mjn-table td {
    border-bottom-color: #1F293D !important;
    color: #E5E7EB !important;
}

.dark-mode .mjn-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Outline Buttons in Dark Mode */
.dark-mode .mjn-btn-outline {
    border-color: #374151 !important;
    color: #E5E7EB !important;
    background: transparent !important;
}

.dark-mode .mjn-btn-outline:hover {
    background: #1F293D !important;
    color: #FFFFFF !important;
}

/* Stockist Portal Dark Mode */
.dark-mode .mjn-stk-header,
.dark-mode .mjn-stk-section-bar {
    background: #064E3B !important;
    color: #FFFFFF !important;
}

.dark-mode .mjn-stk-tab {
    color: #D1D5DB !important;
}

.dark-mode .mjn-stk-tab.active {
    background: #0F8A3E !important;
    color: #FFFFFF !important;
}

.dark-mode code {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
}

.dark-mode .user-profile div[style*="position:absolute"] {
    background: #131B2E !important;
    border-color: #1F293D !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

[v-cloak] { display: none !important; }

/* ─── Global Reset & Layout ───────────────────────────── */
#mjn-dashboard-app {
    font-family: 'Inter', sans-serif;
    color: var(--mjn-text-primary);
    background: var(--mjn-bg-base);
    height: calc(100vh - 4vh);
    margin: 2vh calc(-48vw + 50%);
    width: 96vw;
    padding: 0;
    box-sizing: border-box;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

#mjn-dashboard-app * { box-sizing: inherit; }

.mjn-app-layout {
    display: flex;
    height: 100%;
}

/* ─── Sidebar ─────────────────────────────────────────── */
.mjn-sidebar {
    width: 260px;
    background: var(--mjn-bg-sidebar);
    border-right: none;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    transition: background 0.3s ease;
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    height: 100%;
    overflow-y: auto;
}

.mjn-brand {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 24px;
}

.mjn-mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
}

.mjn-hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

/* Animate to X when open */
.mjn-mobile-menu-toggle.is-open .mjn-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mjn-mobile-menu-toggle.is-open .mjn-hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mjn-mobile-menu-toggle.is-open .mjn-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mjn-sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mjn-nav { flex: 1; padding: 0 16px; }

.mjn-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 4px;
    opacity: 0.9;
}

.mjn-nav-btn i { width: 18px; height: 18px; }

.mjn-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.mjn-nav-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-weight: 600;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ─── Main Content ────────────────────────────────────── */
.mjn-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.mjn-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--mjn-bg-surface);
    border-bottom: 1px solid var(--mjn-border);
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.page-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 700;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    aspect-ratio: 1 / 1;
    background: var(--mjn-brand);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(15, 138, 62, 0.2);
    line-height: 1;
    flex: 0 0 44px;
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 600; font-size: 15px; }
.user-rank { font-size: 13px; color: var(--mjn-text-secondary); }

/* ─── Views & Grid ────────────────────────────────────── */
.mjn-view-container {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.mjn-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.mjn-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.mjn-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.w-100 { width: 100%; }

/* ─── Glass Cards -> Solid Cards ─────────────────────────────────────── */
.glass-card {
    background: var(--mjn-bg-surface);
    border: 1px solid var(--mjn-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--mjn-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.mjn-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.mjn-stat-card .stat-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.3;
}

.mjn-stat-card .stat-icon i { width: 40px; height: 40px; color: #fff; }

.mjn-stat-card.bg-green { background: var(--mjn-card-green); border: none; }
.mjn-stat-card.bg-blue { background: var(--mjn-card-blue); border: none; }
.mjn-stat-card.bg-purple { background: var(--mjn-card-purple); border: none; }
.mjn-stat-card.bg-orange { background: var(--mjn-card-orange); border: none; }

.stat-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    color: #f8fafc;
}

.stat-info h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: #ffffff;
}

.stat-action {
    margin-top: 16px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
.stat-action:hover { opacity: 1; text-decoration: underline; }

/* ─── Widgets ─────────────────────────────────────────── */
.widget-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mjn-border);
}

.binary-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.leg-stat { flex: 1; }
.right-align { text-align: right; }
.leg-label { font-size: 13px; color: var(--mjn-text-secondary); font-weight: 500; display: block; margin-bottom: 4px; }
.leg-value { font-size: 24px; font-weight: 700; margin: 0; font-family: 'Outfit', sans-serif; }
.vs-divider { font-size: 12px; font-weight: 700; color: var(--mjn-text-secondary); padding: 0 16px; }

.progress-bar-container {
    height: 8px;
    border-radius: 4px;
    background: var(--mjn-border);
    display: flex;
    overflow: hidden;
}

.mar-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
}

.mar-active { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
.mar-inactive { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }

.mar-active .mar-icon { color: var(--mjn-success); }
.mar-inactive .mar-icon { color: var(--mjn-danger); }

.mar-details h4 { margin: 0 0 4px 0; font-size: 16px; }
.mar-details p { margin: 0; font-size: 13px; color: var(--mjn-text-secondary); }

/* ─── Table ───────────────────────────────────────────── */
.mjn-table {
    width: 100%;
    border-collapse: collapse;
}

.mjn-table th {
    text-align: left;
    padding: 12px;
    font-size: 13px;
    color: var(--mjn-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid var(--mjn-border);
}

.mjn-table td {
    padding: 16px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--mjn-border);
    color: var(--mjn-text-primary);
}

.tx-type {
    text-transform: capitalize;
    font-weight: 500;
}

.text-success { color: var(--mjn-success); font-weight: 600; }
.text-danger { color: var(--mjn-danger); font-weight: 600; }

.mjn-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success { background: rgba(16, 185, 129, 0.15); color: var(--mjn-success); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--mjn-warning); }

/* ─── Buttons ─────────────────────────────────────────── */
.mjn-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.mjn-btn-primary {
    background: var(--mjn-brand);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(15, 138, 62, 0.2);
}

.mjn-btn-primary:hover {
    background: var(--mjn-brand-hover);
    transform: translateY(-1px);
}

/* ─── Real-Time Live Indicator ─────────────────────────── */
@keyframes mjnLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ─── Splash Loader ───────────────────────────────────── */
.mjn-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--mjn-bg-base);
    color: var(--mjn-text-primary);
}

.mjn-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--mjn-border);
    border-top-color: var(--mjn-brand);
    border-radius: 50%;
    animation: mjn-spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes mjn-spin {
    to { transform: rotate(360deg); }
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .mjn-app-layout     { flex-direction: column; }
    .mjn-sidebar        { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--mjn-border); padding: 10px 16px; position: relative; z-index: 999 !important; background: var(--mjn-bg-sidebar); overflow: visible !important; }
    .mjn-brand          { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0; font-size: 18px; padding: 0; width: 100% !important; }
    .mjn-mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer; flex-shrink: 0; }
    
    .mjn-sidebar-content {
        display: none !important;
        position: fixed !important;
        top: 62px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 62px) !important;
        max-height: calc(100vh - 62px) !important;
        background: var(--mjn-bg-sidebar) !important;
        padding: 20px 20px 80px 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-direction: column !important;
    }

    .mjn-sidebar-content.mjn-mobile-open {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mjn-nav            { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; margin-bottom: 20px !important; width: 100% !important; }
    .mjn-nav-btn        { width: 100% !important; margin: 0; padding: 12px 16px; font-size: 14px; justify-content: flex-start; display: flex !important; align-items: center !important; gap: 12px !important; }
    .mjn-sidebar-footer { display: flex !important; flex-direction: column !important; gap: 8px !important; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 16px; margin-top: auto; padding-bottom: 50px !important; width: 100% !important; }
    
    .mjn-topbar         { padding: 12px 16px; }
    .mjn-view-container { padding: 16px; }
    .page-title         { font-size: 20px; }
    .user-rank          { display: none; }
    .mjn-grid-4, .mjn-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .leg-value          { font-size: 18px; }
    .mjn-table          { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

@media (max-width: 480px) {
    .mjn-topbar         { padding: 10px 12px; }
    .page-title         { font-size: 16px; }
    .user-name          { font-size: 13px; }
    .mjn-view-container { padding: 10px; }
    .glass-card         { padding: 16px; border-radius: 12px; }
    .stat-icon          { width: 44px; height: 44px; }
    .stat-info h3       { font-size: 18px; }
    .mjn-topbar .user-profile { gap: 8px; }
    .avatar             { width: 36px; height: 36px; font-size: 13px; }
}

@media (max-width: 768px) {
    .mjn-search-trigger-btn {
        padding: 0 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 2px solid #0F8A3E !important;
        background: rgba(15, 138, 62, 0.12) !important;
        color: #0F8A3E !important;
        border-radius: 50% !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(15,138,62,0.18) !important;
    }
    .mjn-search-txt, .mjn-search-kbd {
        display: none !important;
    }
    .topbar-right {
        gap: 8px !important;
    }
}

@media (max-width: 640px) {
    .user-info {
        max-width: 90px !important;
    }
    .user-rank {
        display: none !important;
    }
    .page-title {
        font-size: 16px !important;
        max-width: 130px !important;
    }
}

@media (max-width: 400px) {
    .user-info {
        display: none !important;
    }
    .page-title {
        font-size: 15px !important;
        max-width: 140px !important;
    }
}

/* ─── Stockist Portal Styles ─────────────────────────────── */
.mjn-stk-header { background:var(--mjn-brand); color:#ffffff; padding:14px 20px; border-radius:8px 8px 0 0; margin:-20px -20px 20px -20px; display:flex; align-items:center; justify-content:space-between; text-shadow:0 1px 2px rgba(0,0,0,0.1); }
.mjn-stk-header h3 { margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.mjn-stk-section-bar { background:var(--mjn-brand); color:#ffffff; padding:12px 20px; border-radius:8px 8px 0 0; display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,0.1); }
.mjn-stk-stat { background:#fff; border:1px solid var(--mjn-border); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--mjn-shadow); }
.mjn-stk-stat .stk-val { font-size:26px; font-weight:700; font-family:'Outfit',sans-serif; }
.mjn-stk-stat .stk-lbl { font-size:12px; color:var(--mjn-text-secondary); font-weight:500; text-transform:uppercase; }
.mjn-stk-stat.green .stk-val { color:var(--mjn-brand); }
.mjn-stk-stat.blue .stk-val { color:#00a0f0; }
.mjn-stk-stat.purple .stk-val { color:#7a3de8; }
.mjn-stk-stat.orange .stk-val { color:#f59e0b; }
.mjn-stk-grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.mjn-stk-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:20px; flex-wrap:wrap; gap:6px; padding-bottom:0; }
.mjn-stk-tab { padding:12px 18px; background:none; border:none; cursor:pointer; font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.7); transition:all .2s; display:flex; align-items:center; gap:8px; border-bottom:3px solid transparent; text-transform:uppercase; letter-spacing:0.5px; }
.mjn-stk-tab.active { color:#ffffff; background:rgba(255,255,255,0.15); border-bottom-color:#ffffff; font-weight:700; }
.mjn-stk-tab:hover:not(.active) { color:#ffffff; background:rgba(255,255,255,0.05); }
.mjn-badge-pickup { background:rgba(15,138,62,.12); color:var(--mjn-brand); padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.mjn-badge-supply { background:rgba(0,160,240,.12); color:#00a0f0; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.mjn-badge-completed { background:rgba(25,135,84,.12); color:#198754; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.mjn-badge-pending { background:rgba(245,158,11,.12); color:#f59e0b; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.mjn-badge-instock { background:rgba(25,135,84,.12); color:#198754; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.mjn-badge-lowstock { background:rgba(245,158,11,.12); color:#d97706; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.mjn-badge-outofstock { background:rgba(220,38,38,.1); color:#dc2626; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.mjn-stk-pkg-row { display:flex; gap:24px; flex-wrap:wrap; padding:16px 0; }
.mjn-stk-pkg-item .pkg-label { font-size:11px; color:var(--mjn-text-secondary); text-transform:uppercase; font-weight:600; margin-bottom:2px; }
.mjn-stk-pkg-item .pkg-val { font-size:20px; font-weight:700; color:var(--mjn-brand); font-family:'Outfit',sans-serif; }
.mjn-quick-actions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; }
.mjn-quick-action-btn { background:#fff; border:1px solid var(--mjn-border); border-radius:10px; padding:20px 16px; text-align:center; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:var(--mjn-shadow); }
.mjn-quick-action-btn:hover { border-color:var(--mjn-brand); transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,138,62,.15); }
.mjn-quick-action-btn .qa-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.mjn-quick-action-btn span { font-size:12px; font-weight:600; color:var(--mjn-text-primary); }
.mjn-low-stock-alert { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:14px 18px; margin-bottom:20px; }
.mjn-low-stock-alert h4 { margin:0 0 8px 0; font-size:14px; color:#92400e; display:flex; align-items:center; gap:6px; }
.mjn-low-stock-alert ul { margin:0; padding-left:20px; font-size:13px; color:#78350f; line-height:1.7; }
.mjn-pv-converter { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.mjn-stk-earnings-row { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.mjn-stk-earnings-card { flex:1; min-width:140px; border-radius:10px; padding:18px 20px; color:#fff; }
.mjn-stk-earnings-card .ec-val { font-size:22px; font-weight:700; font-family:'Outfit',sans-serif; }
.mjn-stk-earnings-card .ec-lbl { font-size:12px; opacity:.85; margin-top:4px; }
.mjn-order-search-bar { display:flex; gap:8px; align-items:center; }
.mjn-order-search-bar input { flex:1; padding:10px 14px; border:1px solid var(--mjn-border); border-radius:8px; font-size:14px; background:var(--mjn-bg-base); color:var(--mjn-text-primary); }
.mjn-member-card { border:1px solid var(--mjn-border); border-radius:10px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .2s; background:#fff; }
.mjn-member-card:hover { border-color:var(--mjn-brand); background:#f0faf4; }
.mjn-member-card .mc-avatar { width:40px; height:40px; background:var(--mjn-brand); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
.mjn-report-filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid var(--mjn-border); border-radius:10px; padding:16px; margin-bottom:24px; }
.mjn-report-filters label { font-size:12px; font-weight:600; color:var(--mjn-text-secondary); display:block; margin-bottom:4px; }
.mjn-report-filters select, .mjn-report-filters input[type=date] { padding:9px 12px; border:1px solid var(--mjn-border); border-radius:7px; font-size:14px; background:var(--mjn-bg-base); color:var(--mjn-text-primary); }
.mjn-shop-container { display:flex; gap:24px; align-items:flex-start; }
.mjn-shop-main { flex:1; min-width:0; }
.mjn-shop-cart-sidebar { width:300px; flex-shrink:0; position:sticky; top:20px; }
.mjn-product-modal-close {
    position:absolute;
    top:14px;
    right:14px;
    z-index:10;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(19,104,54,.22);
    border-radius:50%;
    background:rgba(19,104,54,.08);
    color:var(--mjn-brand);
    cursor:pointer;
    box-shadow:0 10px 24px rgba(19,104,54,.12);
    transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mjn-product-modal-close:hover {
    background:rgba(19,104,54,.14);
    border-color:rgba(19,104,54,.35);
    color:var(--mjn-brand-hover);
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(19,104,54,.18);
}
.mjn-product-modal-close:focus-visible {
    outline:3px solid rgba(19,104,54,.22);
    outline-offset:3px;
}
.dark-mode .mjn-product-modal-close {
    background:rgba(16,185,129,.10);
    border-color:rgba(16,185,129,.35);
    color:var(--mjn-brand-hover);
    box-shadow:0 10px 24px rgba(16,185,129,.10);
}
.dark-mode .mjn-product-modal-close:hover {
    background:rgba(16,185,129,.18);
    border-color:rgba(16,185,129,.55);
    color:#34d399;
}

/* Cart quantity +/- buttons (Shop) */
.mjn-qty-btn {
    width:22px;
    height:22px;
    border:1px solid rgba(19,104,54,.28);
    background:rgba(255,255,255,.72);
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mjn-brand);
    transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease, color .15s ease;
    box-shadow:0 6px 16px rgba(19,104,54,.10);
    user-select:none;
}
.mjn-qty-btn:hover {
    background:rgba(19,104,54,.10);
    border-color:rgba(19,104,54,.45);
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(19,104,54,.16);
}
.mjn-qty-btn:active {
    transform:translateY(0);
}
.mjn-qty-btn:focus-visible {
    outline:3px solid rgba(19,104,54,.18);
    outline-offset:2px;
}
.dark-mode .mjn-qty-btn {
    background:rgba(15,23,42,.75);
    border-color:rgba(16,185,129,.35);
    color:#34d399;
    box-shadow:0 6px 16px rgba(16,185,129,.10);
}
.dark-mode .mjn-qty-btn:hover {
    background:rgba(16,185,129,.15);
    border-color:rgba(16,185,129,.55);
    box-shadow:0 10px 24px rgba(16,185,129,.16);
}

@media (max-width: 1024px) { 
    .mjn-pv-converter{grid-template-columns:1fr;} 
    .mjn-stk-grid4{grid-template-columns:1fr 1fr;} 
    .mjn-stk-earnings-row{gap:10px;}
    .mjn-shop-container { flex-direction:column; }
    .mjn-shop-cart-sidebar { width:100%; position:static; }
}

/* ─── Table Responsive Wrapper ────────────────────────── */
.mjn-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Alert Messages ─────────────────────────────────── */
.mjn-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 16px;
}

.mjn-alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mjn-alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.mjn-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ─── Outline Button ─────────────────────────────────── */
.mjn-btn-outline {
    padding: 10px 20px;
    border: 1px solid var(--mjn-border);
    border-radius: 8px;
    background: transparent;
    color: var(--mjn-text-primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.mjn-btn-outline:hover {
    border-color: var(--mjn-brand);
    color: var(--mjn-brand);
    background: rgba(19, 104, 54, 0.04);
}

/* ─── Badge Error ─────────────────────────────────────── */
.badge-error {
    background: rgba(220, 53, 69, 0.15);
    color: var(--mjn-danger);
}

/* ─── Utility Classes ─────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--mjn-text-secondary); }
.py-4        { padding-top: 24px; padding-bottom: 24px; }
.py-5        { padding-top: 40px; padding-bottom: 40px; }
.mb-4        { margin-bottom: 24px; }

/* ─── Mobile: Overview Widgets ────────────────────────── */
@media (max-width: 1024px) {
    #mjn-dashboard-app {
        width: 100vw;
        margin: 0 calc(-50vw + 50%);
        border-radius: 0;
        height: 100vh;
    }
    .mjn-topbar { padding: 10px 16px; }
    .mjn-view-container { padding: 16px; }
    /* Team Volume widget: stack legs vertically */
    .mjn-team-volume-row {
        flex-direction: column !important;
    }
    .mjn-leg-card {
        border-right: none !important;
        border-bottom: 1px solid var(--mjn-border);
        padding: 16px !important;
    }
    .mjn-leg-card:last-child {
        border-bottom: none;
    }
    /* Smaller PV font on mobile */
    .mjn-pv-value {
        font-size: 22px !important;
    }
    /* Matching Bonus qualification grid */
    .mjn-overview .mjn-grid-4 {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Matching Bonus left/right leg cards stack */
    .mjn-overview .mjn-grid-2 {
        grid-template-columns: 1fr !important;
    }
    /* Registration form two-column stacking */
    .mjn-register-member .mjn-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    /* Extra small: qualification items single column */
    .mjn-overview .mjn-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .mjn-stk-grid4 {
        grid-template-columns: 1fr !important;
    }
    .mjn-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ─── WordPress Theme Integration ─────────────────────────── */
/* Removes white backgrounds, containers, and spacing behind the dashboard */
body.mjn-dashboard-active {
    background: var(--mjn-bg-base) !important;
}

body.mjn-dashboard-active.dark-mode {
    background: #0f172a !important;
}

body.mjn-dashboard-active #page,
body.mjn-dashboard-active #content,
body.mjn-dashboard-active .site-content,
body.mjn-dashboard-active .container,
body.mjn-dashboard-active .site-main,
body.mjn-dashboard-active .entry-content,
body.mjn-dashboard-active article,
body.mjn-dashboard-active .post-inner,
body.mjn-dashboard-active .entry-header,
body.mjn-dashboard-active .content-area,
body.mjn-dashboard-active #primary,
body.mjn-dashboard-active #main {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure parents of the dashboard are not adding hidden margins or white borders */
body.mjn-dashboard-active .hentry,
body.mjn-dashboard-active .post,
body.mjn-dashboard-active .page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Responsive adjustments for My Profile settings grid */
@media (max-width: 991px) {
    .mjn-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Responsive adjustments for Stockist Portal sub-navigation buttons */
@media (max-width: 768px) {
    .mjn-stk-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .mjn-stk-tab {
        flex: 1 1 calc(50% - 8px) !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-bottom: none !important;
        background: rgba(255,255,255,0.05) !important;
        border-radius: 6px !important;
    }
    .mjn-stk-tab.active {
        background: rgba(255,255,255,0.2) !important;
        color: #fff !important;
    }
}

/* ─── UI readability fixes (green backgrounds + logout) ───────────── */
.bg-green,
.bg-green * {
    color: #ffffff !important;
}

.badge-success,
.badge-success * {
    color: #ffffff !important;
}

.mjn-nav-btn.text-danger {
    background: #ffffff !important;
    border: 1px solid var(--mjn-border);
    color: var(--mjn-danger) !important;
    border-radius: 8px;
}

.mjn-nav-btn.text-danger:hover {
    background: rgba(220, 53, 69, 0.06) !important;
    border-color: rgba(220, 53, 69, 0.35);
}

.dark-mode .mjn-nav-btn.text-danger {
    background: #0b1220 !important;
}

/* ─── Mobile Responsiveness Enhancements ─────────────────── */
.mjn-logo-box {
    background: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: auto !important;
    max-width: fit-content !important;
    margin: 0 !important;
}

.mjn-logo-img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 768px) {
    /* Proportional logo container on mobile */
    .mjn-logo-box {
        padding: 6px 12px !important;
        border-radius: 8px !important;
    }
    
    .mjn-logo-img {
        height: 30px !important;
        max-height: 30px !important;
    }

    /* Mobile Notification Dropdown Popup positioning (full width, centered, top: 65px) */
    .mjn-notif-dropdown {
        position: fixed !important;
        top: 65px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 99999 !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
        border-radius: 12px !important;
    }
}

/* ─── My Stockist Package Card Responsive Styles ────────────────────────── */
.mjn-stk-pkg-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    text-align: center;
}

.mjn-stk-pkg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.dark-mode .mjn-stk-pkg-item {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

.mjn-stk-pkg-label {
    font-size: 11px;
    color: var(--mjn-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.mjn-stk-pkg-val {
    font-size: 15px;
    color: var(--mjn-text-primary);
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .mjn-stk-pkg-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding: 16px 14px !important;
    }
}

@media (max-width: 640px) {
    .mjn-stk-pkg-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 14px 10px !important;
    }
    .mjn-stk-pkg-item {
        padding: 12px 8px !important;
    }
    .mjn-stk-pkg-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.3px;
    }
    .mjn-stk-pkg-val {
        font-size: 14px !important;
    }
}

@media (max-width: 360px) {
    .mjn-stk-pkg-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 6px !important;
    }
}

/* ── Global Search Command Palette Styles (Ctrl + K) ── */
@keyframes mjnFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mjnSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mjn-search-trigger-btn:hover {
    border-color: var(--mjn-brand) !important;
    box-shadow: 0 4px 12px rgba(15,138,62,0.15) !important;
}

.dark-mode .mjn-search-trigger-btn {
    background: rgba(15, 138, 62, 0.18) !important;
    border: 2px solid #0F8A3E !important;
    border-color: #0F8A3E !important;
    color: #0F8A3E !important;
    box-shadow: 0 2px 8px rgba(15,138,62,0.25) !important;
}

.dark-mode .mjn-search-palette-card {
    background-color: #131B2E !important;
    border-color: #1F293D !important;
}

.dark-mode #mjn-global-search-input {
    color: #F9FAFB !important;
}

.dark-mode .mjn-search-palette-card kbd {
    background: #0B0F19 !important;
    border-color: #1F293D !important;
    color: #9CA3AF !important;
}

@media (max-width: 640px) {
    .mjn-search-trigger-btn kbd {
        display: none !important;
    }
}