/**
 * Bento Box Design Style
 * 
 * Philosophy: Modular card-based layout inspired by Japanese bento boxes
 * Inspired by: Apple.com, Stripe.com, Linear.app
 * 
 * This CSS overrides the default neumorphic styles to create a bento box effect
 */

/* Override body */
body {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.dark {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* Override navigation */
nav {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: none !important;
}

body.dark nav {
    background: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
}

/* Override all cards and badges */
.neuro-card,
.neuro-badge,
.neuro-badge-accent,
.stat-item,
.pricing-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

body.dark .neuro-card,
body.dark .neuro-badge,
body.dark .neuro-badge-accent,
body.dark .stat-item,
body.dark .pricing-card {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

.neuro-card:hover,
.stat-item:hover,
.pricing-card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Override buttons - ONLY for hero/CTA buttons, NOT pricing buttons */
.hero-content .neuro-btn,
.hero-content .neuro-btn-primary,
.hero-content a.neuro-btn,
.hero-content a.neuro-btn-primary,
.hero-content a.neuro-btn-accent,
.nav-link-primary,
button[type="submit"],
button[type="button"]:not(.auth-method-card),
section a.neuro-btn-primary {
    background: #1a1a1a !important;
    color: white !important;
    padding: 1rem 2rem !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

body.dark .hero-content .neuro-btn,
body.dark .hero-content .neuro-btn-primary,
body.dark .hero-content a.neuro-btn,
body.dark .hero-content a.neuro-btn-primary,
body.dark .hero-content a.neuro-btn-accent,
body.dark .nav-link-primary,
body.dark button[type="submit"],
body.dark button[type="button"]:not(.auth-method-card),
body.dark section a.neuro-btn-primary {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

.hero-content .neuro-btn:hover,
.hero-content .neuro-btn-primary:hover,
.hero-content a.neuro-btn:hover,
.hero-content a.neuro-btn-primary:hover,
.hero-content a.neuro-btn-accent:hover,
.nav-link-primary:hover,
button[type="submit"]:hover,
button[type="button"]:not(.auth-method-card):hover,
section a.neuro-btn-primary:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    background: #1a1a1a !important;
    color: white !important;
}

body.dark .hero-content .neuro-btn:hover,
body.dark .hero-content .neuro-btn-primary:hover,
body.dark .hero-content a.neuro-btn:hover,
body.dark .hero-content a.neuro-btn-primary:hover,
body.dark .hero-content a.neuro-btn-accent:hover,
body.dark .nav-link-primary:hover,
body.dark button[type="submit"]:hover,
body.dark button[type="button"]:not(.auth-method-card):hover,
body.dark section a.neuro-btn-primary:hover {
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2) !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Auth method cards should not be styled as buttons */
.auth-method-card {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

.nav-link,
.nav-link-mobile,
a:not(.neuro-btn):not(.neuro-btn-primary):not(.neuro-btn-accent) {
    color: #1a1a1a !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
}

body.dark .nav-link,
body.dark .nav-link-mobile,
body.dark a:not(.neuro-btn):not(.neuro-btn-primary):not(.neuro-btn-accent) {
    color: #ffffff !important;
}

.nav-link:hover,
.nav-link-mobile:hover {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Override hero section */
.hero-parallax,
#hero-section {
    background: transparent !important;
    color: white !important;
    padding: 4rem 2rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.hero-title {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

body.dark .hero-title {
    color: #ffffff !important;
}

.hero-subtitle,
.hero-description {
    color: #1a1a1a !important;
}

body.dark .hero-subtitle,
body.dark .hero-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Override headings - but respect inline styles */
h1:not([style*="color"]), 
h2:not([style*="color"]), 
h3:not([style*="color"]), 
h4:not([style*="color"]), 
h5:not([style*="color"]), 
h6:not([style*="color"]) {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

body.dark h1:not([style*="color"]),
body.dark h2:not([style*="color"]),
body.dark h3:not([style*="color"]),
body.dark h4:not([style*="color"]),
body.dark h5:not([style*="color"]),
body.dark h6:not([style*="color"]) {
    color: #ffffff !important;
}

/* Override text colors - but NOT inside buttons or components with inline styles */
p:not([style*="color"]), 
span:not(.neuro-btn span):not(.neuro-btn-primary span):not(.neuro-btn-accent span):not(button span):not(a span):not([style*="color"]) {
    color: #1a1a1a !important;
}

body.dark p:not([style*="color"]),
body.dark span:not(.neuro-btn span):not(.neuro-btn-primary span):not(.neuro-btn-accent span):not(button span):not(a span):not([style*="color"]) {
    color: #ffffff !important;
}

/* Ensure button text is always correct color */
.neuro-btn span,
.neuro-btn-primary span,
.neuro-btn-accent span,
button span,
a.neuro-btn span,
a.neuro-btn-primary span,
a.neuro-btn-accent span {
    color: inherit !important;
}

/* Remove parallax effects */
.parallax-shape {
    display: none !important;
}

/* Override inputs */
input, textarea {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
    border-radius: 12px !important;
}

body.dark input,
body.dark textarea {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Override pricing section */
.pricing-section {
    background: transparent !important;
    padding: 4rem 2rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    padding: 0 !important;
}

.pricing-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid #e5e7eb !important;
    padding: 2.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

body.dark .pricing-card {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

.pricing-card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px) !important;
}

.pricing-card.featured {
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.2) !important;
    position: relative !important;
}

.pricing-card.featured::before {
    content: 'MOST POPULAR' !important;
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.pricing-tier {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #6b7280 !important;
    margin-bottom: 1rem !important;
}

body.dark .pricing-tier {
    color: #9ca3af !important;
}

.pricing-price {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
}

body.dark .pricing-price {
    color: #ffffff !important;
}

.pricing-price sub {
    font-size: 10pt !important;
    font-weight: 400 !important;
}

.pricing-period {
    font-size: 1rem !important;
    color: #6b7280 !important;
    margin-bottom: 2rem !important;
}

body.dark .pricing-period {
    color: #9ca3af !important;
}

.pricing-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    flex-grow: 1 !important;
}

.pricing-features li {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
    display: flex !important;
    align-items: center !important;
}

body.dark .pricing-features li {
    border-bottom-color: #2a2a2a !important;
    color: #ffffff !important;
}

.pricing-features li.included::before {
    content: '✓' !important;
    color: #10b981 !important;
    font-weight: bold !important;
    margin-right: 0.75rem !important;
    font-size: 1.25rem !important;
}

.pricing-features li.not-included {
    opacity: 0.5 !important;
}

.pricing-features li.not-included::before {
    content: '✗' !important;
    color: #ef4444 !important;
    font-weight: bold !important;
    margin-right: 0.75rem !important;
    font-size: 1.25rem !important;
}

.pricing-card .neuro-btn {
    margin-top: auto !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
}

body.dark .pricing-card .neuro-btn {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.pricing-card .neuro-btn:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

body.dark .pricing-card .neuro-btn:hover {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

.pricing-card.featured .neuro-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    border: none !important;
}

.pricing-card.featured .neuro-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}


/* ===================================
   Dashboard Sidebar Styles
   =================================== */

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    color: var(--neuro-text);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.sidebar-item:hover {
    background: var(--neuro-bg);
}

.sidebar-item.active {
    background: var(--neuro-accent);
    color: white;
}

.sidebar-sub-item {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    color: var(--neuro-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
}

.sidebar-sub-item:hover {
    background: var(--neuro-bg);
    color: var(--neuro-text);
}

.sidebar-sub-item.active {
    background: var(--neuro-accent);
    color: white;
}

.sidebar-section {
    margin-top: 0.5rem;
}

.rotate-180 {
    transform: rotate(180deg);
}