/**
 * ═══════════════════════════════════════════════════════════════
 * Majaarh Theme Polish Fix — v1.0
 * ═══════════════════════════════════════════════════════════════
 * Fixes spacing, light/dark theme consistency, mobile responsiveness,
 * button/field sizing, and color harmony across Landing + Dashboard.
 * LOADED LAST to override without breaking existing design.
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   1. LANDING PAGE — Light Mode Precision Fixes
   ═══════════════════════════════════════════════════════════════ */

/* Fix: landing-light-mode.css L422-430 forces color on ALL p/span/div
   which breaks icons, badges, colored spans. Override with more specific. */
html.light .section-premium p,
html.light .section-premium span:not(.btn):not(.badge):not([style*="color"]),
html.light .section-premium .lead {
    color: #475569 !important;
}

html.light .section-premium h1,
html.light .section-premium h2,
html.light .section-premium h3,
html.light .section-premium h4,
html.light .section-premium h5 {
    color: #0f172a !important;
}

/* Restore branded icon colors that get overridden in light mode */
html.light .text-cyan,
html.light .text-glow-cyan {
    color: #0891b2 !important;
}
html.light .text-red,
html.light .text-glow-red {
    color: #E31B23 !important;
}
html.light .text-green {
    color: #059669 !important;
}
html.light .text-gold {
    color: #b45309 !important;
}

/* Fix: CTA section with gradient bg — keep text white in both themes */
html.light .cta-section,
html.light .cta-section * {
    color: #ffffff !important;
}
html.light .cta-section .btn {
    color: var(--brand-red, #E31B23) !important;
    background: #ffffff !important;
}

/* Fix: Badge/pill styles in light mode */
html.light .badge-premium {
    background: rgba(227, 27, 35, 0.08) !important;
    border: 1px solid rgba(227, 27, 35, 0.2) !important;
    color: #E31B23 !important;
}
html.light .badge-premium i,
html.light .badge-premium span {
    color: inherit !important;
}

/* Fix: Glass cards light mode — proper subtle background */
html.light .glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(20px) !important;
}
html.light .glass-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Fix: Currency Strength cards light bg */
html.light .cs-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
html.light .cs-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Fix: Inline style rgba(255,255,255,0.05) cards — more visible in light */
html.light [style*="rgba(255,255,255,0.03)"],
html.light [style*="rgba(255,255,255,0.05)"] {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Fix: Heatmap preset buttons light mode */
html.light .btn-theme-outline {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}
html.light .btn-theme-outline:hover {
    border-color: #0891b2 !important;
    color: #0891b2 !important;
}
html.light .btn-theme-active {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
    color: #ffffff !important;
}

/* Fix: Testimonial section text readability in light */
html.light .testi-role {
    color: #64748b !important;
}
html.light .testi-quote {
    color: #475569 !important;
}

/* Fix: Partner section bar chart light mode contrast */
html.light .partner-alliance-v9 .glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(227, 27, 35, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. LANDING PAGE — Dark Mode Polish
   ═══════════════════════════════════════════════════════════════ */

/* Fix: Ensure dark mode text vars work on landing */
.dark .section-premium h1,
.dark .section-premium h2,
.dark .section-premium h3 {
    color: var(--mj-text, #ffffff) !important;
}
.dark .section-premium p,
.dark .section-premium .lead {
    color: var(--mj-text-muted, rgba(255, 255, 255, 0.65)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. LANDING PAGE — Spacing & Mobile Responsiveness
   ═══════════════════════════════════════════════════════════════ */

/* Fix: Section padding consistency */
.section-premium {
    padding: 80px 0 !important;
}

@media (max-width: 768px) {
    .section-premium {
        padding: 50px 0 !important;
    }
    .section-premium .display-3 {
        font-size: 2rem !important;
    }
    .section-premium .display-4 {
        font-size: 1.75rem !important;
    }
    .section-premium .display-5 {
        font-size: 1.5rem !important;
    }
    .section-premium .lead {
        font-size: 1rem !important;
    }
    
    /* Fix: Tool cards grid on mobile */
    .section-premium .col-lg-3.col-md-6 {
        margin-bottom: 0 !important;
    }
    
    /* Fix: CTA section mobile spacing */
    .cta-section {
        padding: 60px 0 !important;
    }
    .cta-section .display-4 {
        font-size: 1.75rem !important;
    }

    /* Fix: Heatmap buttons wrap */
    .heatmap-presets {
        gap: 8px !important;
    }
    .heatmap-preset-btn,
    .btn-theme-outline,
    .btn-theme-active {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .section-premium {
        padding: 40px 0 !important;
    }
    .section-premium .display-3 {
        font-size: 1.6rem !important;
    }
    .section-premium .display-4 {
        font-size: 1.4rem !important;
    }
    
    /* Fix: Partner section columns stack */
    .partner-alliance-v9 .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   4. DASHBOARD — Light Mode Glass Panel Fix
   ═══════════════════════════════════════════════════════════════ */

/* Fix: glass-panel in light mode — transparent bg looks washed out */
html:not(.dark) .glass-panel,
[data-bs-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) .glass-panel:hover,
[data-bs-theme="light"] .glass-panel:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Fix: Dashboard text in light mode */
html:not(.dark) .text-mj-text,
[data-bs-theme="light"] .text-mj-text {
    color: #0f172a !important;
}
html:not(.dark) .text-dimmed,
[data-bs-theme="light"] .text-dimmed {
    color: #64748b !important;
}

/* Fix: Dashboard stat card borders — better visibility */
html:not(.dark) .border-mj-border,
[data-bs-theme="light"] .border-mj-border {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Fix: Dashboard inner panels (bg-mj-bg/60) in light mode */
html:not(.dark) [class*="bg-mj-bg"] {
    background-color: rgba(241, 245, 249, 0.6) !important;
}

/* Fix: Dashboard widget-content hardcoded white bg */
html.dark .widget-content,
.dark .widget-content {
    background: var(--mj-card, #0d111a) !important;
}

/* Fix: Dashboard widget-header border in dark mode */
.dark .widget-header {
    border-bottom-color: var(--mj-border, rgba(255, 255, 255, 0.08)) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Fix: Stat card premium in dark mode */
.dark .stat-card-premium {
    background: var(--mj-card, #0d111a) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
.dark .stat-card-premium .stat-label {
    color: var(--mj-text-dim, #94a3b8) !important;
}
.dark .stat-card-premium .stat-value {
    color: var(--mj-text, #ffffff) !important;
}

/* Fix: Activity/notification items in dark mode */
.dark .activity-item,
.dark .notification-item:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Fix: Dashboard header in dark mode */
.dark .dashboard-header {
    background: var(--mj-card, #0d111a) !important;
    border-color: var(--mj-border) !important;
}
.dark .dashboard-header h1 {
    color: var(--mj-text, #ffffff) !important;
}

/* Fix: Scrollbar in dark mode sidebar */
.dark .dashboard-sidebar::-webkit-scrollbar-track {
    background: #0a0e17 !important;
}
.dark .dashboard-sidebar::-webkit-scrollbar-thumb {
    background: #1e293b !important;
}

/* Fix: Submenu in light mode */
html:not(.dark) .dashboard-sidebar .submenu {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. DASHBOARD — Mobile Responsiveness
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Fix: Stat cards grid spacing */
    .scroll-viewport .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-3.xl\\:grid-cols-5 {
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    /* Fix: Dashboard main content padding */
    .scroll-viewport {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Fix: Glass panel inner padding on mobile */
    .glass-panel {
        padding: 16px !important;
        border-radius: 20px !important;
    }
    .glass-panel .p-7,
    .glass-panel .p-6 {
        padding: 16px !important;
    }
    
    /* Fix: Dashboard heading size on mobile */
    .scroll-viewport h3.text-3xl {
        font-size: 1.5rem !important;
    }
    .scroll-viewport h4.text-lg {
        font-size: 1rem !important;
    }
    
    /* Fix: Toggle/button tap area on mobile */
    .glass-panel .w-12.h-6 {
        width: 3.5rem !important;
        height: 1.75rem !important;
    }
    .glass-panel .w-5.h-5 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    /* Fix: ATS asset tags wrapping */
    .glass-panel .flex.flex-wrap.gap-1\\.5 {
        gap: 6px !important;
    }
    .glass-panel .flex.flex-wrap .text-\\[8px\\] {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }
    
    /* Fix: Dashboard 2-column grid stacks on mobile */
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        gap: 12px !important;
    }
}

@media (max-width: 576px) {
    .scroll-viewport {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Fix: Stat card very small screens */
    .glass-panel.p-6 {
        padding: 12px !important;
    }
    
    /* Fix: Icon sizes on small mobile */
    .glass-panel .w-14.h-14 {
        width: 3rem !important;
        height: 3rem !important;
    }
    .glass-panel .w-14.h-14 i {
        font-size: 1.25rem !important;
    }
    
    /* Fix: Package name truncation */
    .glass-panel h3.text-xl {
        font-size: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   6. UNIVERSAL — Button & Field Sizing
   ═══════════════════════════════════════════════════════════════ */

/* Fix: Minimum tap target for mobile buttons */
@media (max-width: 768px) {
    .btn,
    button,
    [role="button"],
    a.btn-sov,
    a.pkg-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Fix: Form inputs readable size on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select,
    .form-control {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px 14px !important;
        border-radius: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   7. UNIVERSAL — Color Harmony Fixes
   ═══════════════════════════════════════════════════════════════ */

/* Fix: Progress bars consistent in both themes */
.dark .progress {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
html:not(.dark) .progress {
    background-color: #e2e8f0 !important;
}

/* Fix: Alert colors in dark mode */
.dark .alert-success { background-color: rgba(5, 150, 105, 0.15) !important; color: #6ee7b7 !important; }
.dark .alert-info { background-color: rgba(0, 180, 216, 0.15) !important; color: #67e8f9 !important; }
.dark .alert-warning { background-color: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; }
.dark .alert-danger { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }

/* Fix: Table text in dark mode */
.dark .widget .table,
.dark .widget .table td,
.dark .widget .table th {
    color: var(--mj-text, #ffffff) !important;
}
.dark .widget .table thead {
    background: rgba(255, 255, 255, 0.03) !important;
}
.dark .widget .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Fix: Tooltip/popover consistency */
.dark .tooltip .tooltip-inner {
    background: var(--mj-card, #0d111a) !important;
    color: var(--mj-text) !important;
    border: 1px solid var(--mj-border) !important;
}