/* ==========================================
   DESIGN TOKENS & SYSTEM VARIABLES
   ========================================== */
:root {
    --font-primary: 'Outfit', sans-serif;
    
    /* Branding Colors */
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #e0e7ff;
    
    /* Neutral Palette overrides */
    --color-text-dark: #0f172a;
    --color-text-base: #1e293b;
    --color-text-muted: #64748b;
    --color-border-base: rgba(0, 0, 0, 0.08);
}

/* ==========================================
   GLOBAL GENERAL STYLES & RESET OVERRIDES
   ========================================== */
[x-cloak] {
    display: none !important;
}

body {
    font-family: var(--font-primary);
}

/* ==========================================
   PAGE-SPECIFIC BACKGROUNDS & TEXT COLORS
   ========================================== */

/* Auth Pages (Login, Register, Forgot Password, Verify Email) */

body.auth-page {
    background: linear-gradient(135deg, #f0f4ff, #e8edf8);
    color: #1e293b;
}

body.auth-page .glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-base);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}


body.auth-page .text-slate-400 {
    color: var(--color-text-muted) !important;
}

body.auth-page input, 
body.auth-page select {
    background: rgba(248, 250, 252, 0.9) !important;
    color: var(--color-text-dark) !important;
    border-color: #cbd5e1 !important;
}

body.auth-page input::placeholder {
    color: #94a3b8 !important;
}

/* Landing Index Page */
body.index-page {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 50%, #f5f0ff 100%);
    color: var(--color-text-dark);
}

body.index-page .glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-base);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

body.index-page header {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--color-border-base);
}

body.index-page main h1, 
body.index-page main h2, 
body.index-page main h3, 
body.index-page main .text-white {
    color: var(--color-text-dark) !important;
}

body.index-page main .text-slate-400 {
    color: var(--color-text-muted) !important;
}

body.index-page main .text-slate-300 {
    color: #475569 !important;
}

body.index-page main .text-slate-550,
body.index-page main .text-slate-500 {
    color: #94a3b8 !important;
}

body.index-page main .border-slate-900 {
    border-color: var(--color-border-base) !important;
}

body.index-page footer {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--color-border-base);
}

body.index-page .bg-slate-900\/60 {
    background-color: rgba(241, 245, 249, 0.9) !important;
}

body.index-page .glow {
    box-shadow: 0 0 40px rgba(99,102,241,0.15);
}

body.index-page .plan-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.index-page .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(99,102,241,0.2);
}

body.index-page .popular-badge {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

body.index-page .float-anim {
    animation: float 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

body.index-page .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Dashboard Console Page */
body.dashboard-page {
    background: #f6f7f9;
    color: #1e293b;
}

body.dashboard-page .glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-base);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}




body.dashboard-page h2,
body.dashboard-page h3,
body.dashboard-page h4,
body.dashboard-page h5,
body.dashboard-page h6,
body.dashboard-page .text-white {
    color: var(--color-text-dark) !important;
}

body.dashboard-page [class*="text-slate-"] {
    color: #475569 !important;
}

body.dashboard-page [class*="text-slate-100"],
body.dashboard-page [class*="text-slate-200"],
body.dashboard-page [class*="text-slate-300"],
body.dashboard-page [class*="text-white"] {
    color: var(--color-text-dark) !important;
}

body.dashboard-page [class*="text-slate-500"],
body.dashboard-page [class*="text-slate-550"] {
    color: var(--color-text-muted) !important;
}

body.dashboard-page [class*="border-slate-"] {
    border-color: var(--color-border-base) !important;
}

body.dashboard-page [class*="bg-slate-"] {
    background-color: #ffffff !important;
}

body.dashboard-page [class*="bg-slate-900"],
body.dashboard-page [class*="bg-slate-950/30"],
body.dashboard-page [class*="bg-slate-950/40"] {
    background-color: #f8fafc !important;
}

body.dashboard-page .glass,
body.dashboard-page [class*="bg-slate-950/60"],
body.dashboard-page [class*="bg-slate-950/65"],
body.dashboard-page [class*="bg-slate-950/80"],
body.dashboard-page [class*="bg-slate-950/50"] {
    background-color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
}

body.dashboard-page .bg-indigo-500\/10 {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary-hover) !important;
}

body.dashboard-page .text-indigo-400 {
    color: var(--color-primary) !important;
}

body.dashboard-page .text-indigo-300 {
    color: var(--color-primary-hover) !important;
}

body.dashboard-page [class*="bg-indigo-650/20"] {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary-hover) !important;
    border-color: #c7d2fe !important;
}

body.dashboard-page .bg-emerald-500\/10 {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

body.dashboard-page .bg-rose-500\/10 {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

body.dashboard-page input,
body.dashboard-page select,
body.dashboard-page textarea {
    background-color: #ffffff !important;
    color: var(--color-text-dark) !important;
    border-color: #cbd5e1 !important;
}

body.dashboard-page input[type="checkbox"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 1rem !important;
    height: 1rem !important;
    accent-color: var(--color-primary) !important;
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
}

body.dashboard-page input[type="checkbox"]:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

body.dashboard-page input::placeholder {
    color: #94a3b8 !important;
}

body.dashboard-page .bg-indigo-950\/65 {
    background-color: var(--color-primary-light) !important;
    border-color: #c7d2fe !important;
    color: var(--color-primary-hover) !important;
}

body.dashboard-page nav button,
body.dashboard-page nav a {
    color: #475569 !important;
}



/* Mobile Display Utility */
@media (max-width: 767px) {
    .sidebar-mobile-hidden {
        display: none !important;
    }
}


body.dashboard-page .active-tab {color: var(--color-primary) !important;font-weight: 600;position:relative;}
body.dashboard-page .active-tab:after {content: '';position: absolute;background: var(--color-primary);height: 100%;width: 10px;left: -17px;border-radius: 0 10px 10px 0;}
body.dashboard-page nav button:hover,body.dashboard-page nav a:hover {color: var(--color-primary) !important;}
body.dashboard-page button.text-white.bg-indigo-600 {color: #fff !important;}