/* Primary Action Button */
.btn-primary {
    background-color: #EA7351 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover {
    background-color: #E03274 !important;
}

/* Secondary Action Button */
.btn-secondary {
    background-color: #8B5CF6 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-secondary:hover {
    background-color: #000000 !important;
}

/* Show Button */
.show-button {
    background-color: #EA7351 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease-in-out !important;
}

.show-button:hover {
    background-color: #E03274 !important;
}


/* Text area width reduction */
#tab-installation textarea,
#tab-installation input[type="text"] {
    max-width: 70%;
}

/* API Token text area width */
input[x-model="apiToken"] {
    max-width: 70% !important;
}


/* Gradient for backgrounds - not for buttons */
.gradient-background {
    background-image: linear-gradient(to right, #EA7351, #E03274);
}

/* Global background for index.php */
body {
    background-color: #ffffff !important;
}

/* Prevent double scrollbars when authenticated account layout is active */
body.mc-account-body {
    overflow: hidden;
}

/* Montserrat font override */
body, h1, h2, h3, h4, h5, h6, p, a, span, div {
    font-family: 'Montserrat', sans-serif !important;
}

/* Enhanced Modal Width - Make modals wider when content is cut */
.mc-lightbox {
    width: auto !important;
    min-width: 400px !important;
    max-width: 95vw !important;
}

/* Dynamic width based on content - if content exceeds 80% of viewport, use 95% */
@media (min-width: 769px) {
    .mc-lightbox {
        width: min(1200px, 90vw) !important;
        max-width: 95vw !important;
    }
}

@media (min-width: 1200px) {
    .mc-lightbox {
        width: min(1400px, 85vw) !important;
        max-width: 95vw !important;
    }
}

/* Ultra-wide screens - allow even wider modals */
@media (min-width: 1920px) {
    .mc-lightbox {
        width: min(1600px, 80vw) !important;
        max-width: 95vw !important;
    }
}

/* Ensure modal content doesn't get cut */
.mc-lightbox .mc-main {
    max-height: 85vh !important;
    overflow-y: auto !important;
    width: 100% !important;
}

/* Responsive modal improvements */
@media (max-width: 768px) {
    .mc-lightbox {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: unset !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

@media (max-width: 480px) {
    .mc-lightbox {
        width: 98vw !important;
        max-width: 98vw !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Account area specific modal adjustments */
.mc-account-body .mc-lightbox {
    z-index: 9999 !important;
}

.mc-account-body .mc-lightbox-overlay {
    z-index: 9998 !important;
}

/* Rounded corners for square buttons */
.px-4.py-2.bg-gray-600 {
    border-radius: 0.5rem !important;
}

/* Fix double scroll issue in account UI - remove inner scroll, keep outer scroll */
.mc-account-body .mc-tab .mc-content.mc-scroll-area {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Ensure the outer scroll container maintains proper scrolling */
.mc-account-body main {
    overflow-y: auto !important;
}

/* Prevent content overflow issues */
.mc-account-body .mc-tab .mc-content {
    padding-bottom: 50px !important;
}

/* Force centering for "Share the Love, Get Rewards" heading */
#tab-referral h2.text-4xl {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1rem !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    font-weight: 900 !important;
    font-size: 3rem !important;
    line-height: 1.2 !important;
}

/* Force white color for earnings text */
#tab-referral .earnings-display p {
    color: white !important;
}

/* Force font size for earnings text */
#tab-referral .earnings-display p {
    font-size: 4rem !important; /* Equivalent to text-6xl */
}

/* Force white color for annual potential text */
.annual-potential-text {
    color: white !important;
}

/* Ensure page scrolls for registration/login forms */
body:not(.mc-account-body) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Registration forms should not scroll internally, only the page */
.mc-registration-box .mc-main,
.mc-reset-password-box .mc-main,
.mc-reset-password-box-2 .mc-main {
    max-height: none !important;
    overflow: visible !important;
}

/* Login form specifically - prevent bottom gap and internal scrolling */
.mc-login-box .mc-main {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

/* Remove bottom padding from login form box */
.mc-login-box {
    padding-bottom: 0 !important;
}

/* Remove bottom spacing/gaps from form boxes */
.mc-registration-box,
.mc-login-box,
.mc-reset-password-box,
.mc-reset-password-box-2 {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

/* Ensure forms take appropriate height without gaps */
.mc-registration-box,
.mc-login-box,
.mc-reset-password-box,
.mc-reset-password-box-2 {
    height: auto !important;
    min-height: auto !important;
}

/* Center forms vertically when content fits, allow scroll when it doesn't */
.mc-registration-box,
.mc-login-box,
.mc-reset-password-box,
.mc-reset-password-box-2 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Tablet and larger responsive notification dropdown styles - consistent behavior above 769px */
@media (min-width: 769px) {
    .mc-top-header .mc-notification-dropdown {
        width: 320px;
        right: -10px;
    }

    .mc-top-header .mc-notification-list {
        max-height: 300px;
    }
}

/* Tablet mode up to 769px - follow mobile mode styles to prevent margin breaches and ensure proper padding */
@media (max-width: 769px) {
    .mc-top-header .mc-notification-dropdown {
        width: 320px;
        right: -10px;
    }

    .mc-top-header .mc-notification-list {
        max-height: 300px;
    }
}

/* Override centering behavior - maintain right positioning like 480px+ screens */
@media (max-width: 480px) {
    .mc-top-header .mc-notification-dropdown {
        width: 320px;
        right: -10px;
        left: auto;
        transform: none;
    }
}

/* -------------------------------------------------------------------
 * DARK MODE SUPPORT
 * -------------------------------------------------------------------
 */

/* Base Dark Mode Backgrounds */
html.dark body,
html.dark.mc-account-body {
    background-color: #111827 !important; /* gray-900 */
    color: #F3F4F6 !important; /* gray-100 */
}

html.dark .mc-account-box {
    background-color: #1F2937 !important; /* gray-800 */
    color: #F3F4F6 !important;
}

/* Dark Mode Inputs & Selects */
html.dark .mc-input input,
html.dark .mc-input select,
html.dark .mc-input textarea {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4B5563 !important; /* gray-600 */
    color: #ffffff !important;
}

html.dark .mc-input input:focus,
html.dark .mc-input select:focus,
html.dark .mc-input textarea:focus {
    border-color: #EA7351 !important; /* Primary Action */
    box-shadow: 0 0 0 1px #EA7351 !important;
}

html.dark .mc-input span {
    color: #D1D5DB !important; /* gray-300 */
}

/* Dark Mode Cards / Modals / Lightboxes */
html.dark .mc-lightbox,
html.dark .mc-content, 
html.dark .mc-card {
    background-color: #1F2937 !important; /* gray-800 */
    color: #F3F4F6 !important;
    border-color: #374151 !important;
}

/* Dark Mode Tables & Rows */
html.dark .mc-invoice-row {
    background-color: #1F2937 !important;
    border-bottom: 1px solid #374151 !important;
    color: #F3F4F6 !important;
}

html.dark .mc-invoice-row:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* Dark Mode Text & Headers */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .mc-title {
    color: #ffffff !important;
}

html.dark p, 
html.dark .mc-text,
html.dark .mc-nav li {
    color: #9CA3AF !important; /* gray-400 */
}

html.dark .mc-nav li:hover {
    color: #F3F4F6 !important;
}

html.dark .mc-nav li.mc-active {
    color: #EA7351 !important; /* Primary Action */
    border-bottom-color: #EA7351 !important;
}

/* Dark Mode Buttons (Secondary) */
/* Primary usually stays the same color, but secondary might need adjustment */
html.dark .btn-secondary {
    background-color: #4B5563 !important; /* gray-600 */
    color: #ffffff !important;
}

html.dark .btn-secondary:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* Scrollbars in Dark Mode */
html.dark ::-webkit-scrollbar-track {
    background: #111827 !important;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #4B5563 !important;
    border-radius: 4px !important;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #6B7280 !important;
}

/* Specific fixes for dynamic elements */
html.dark .mc-close {
    color: #9CA3AF !important;
}
html.dark .mc-close:hover {
    color: #ffffff !important;
}

/* -------------------------------------------------------------------
 * GENERIC DARK MODE UTILITY OVERRIDES
 * -------------------------------------------------------------------
 */

/* Backgrounds */
html.dark .bg-white {
    background-color: #1F2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #F3F4F6 !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200 {
    background-color: #111827 !important; /* gray-900 */
    color: #F3F4F6 !important;
}

/* Text Colors */
html.dark .text-gray-500,
html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-gray-900,
html.dark .text-black {
    color: #9CA3AF !important; /* gray-400 */
}

html.dark .text-white {
    color: #ffffff !important;
}

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #374151 !important; /* gray-700 */
}

/* Specific Tab Installation Fix */
html.dark #tab-installation .grid > div {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F3F4F6 !important;
}

/* Code blocks in installation tab */
html.dark code,
html.dark pre {
    background-color: #111827 !important;
    color: #E5E7EB !important;
    border-color: #374151 !important;
}

/* -------------------------------------------------------------------
 * PROFILE & REFERRAL TAB SPECIFIC DARK MODE
 * -------------------------------------------------------------------
 */

/* Profile Tab Fixes */
html.dark #tab-profile .bg-white {
    background-color: #1F2937 !important;
    color: #F3F4F6 !important;
}

html.dark #tab-profile .mc-input input,
html.dark #tab-profile .mc-input select {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4B5563 !important;
}

/* Referral Tab Cards & Stats */
html.dark #tab-referral .bg-white {
    background-color: #1F2937 !important;
    color: #F3F4F6 !important;
    border-color: #374151 !important;
}

/* Referral Text Colors */
html.dark #tab-referral .text-gray-800,
html.dark #tab-referral .text-gray-700,
html.dark #tab-referral .text-gray-600 {
    color: #D1D5DB !important; /* gray-300 */
}

html.dark #tab-referral .text-gray-500 {
    color: #9CA3AF !important; /* gray-400 */
}

/* Green Stats (Earnings, Enroll) */
html.dark #tab-referral .bg-green-50,
html.dark #tab-referral .bg-green-100 {
    background-color: rgba(6, 95, 70, 0.3) !important; /* emerald-900/30 */
    border-color: #065F46 !important;
}

html.dark #tab-referral .text-green-600,
html.dark #tab-referral .text-green-700,
html.dark #tab-referral .text-green-800 {
    color: #34D399 !important; /* emerald-400 */
}

/* Blue Stats (Referrals) */
html.dark #tab-referral .bg-blue-50,
html.dark #tab-referral .bg-blue-100 {
    background-color: rgba(30, 64, 175, 0.3) !important; /* blue-900/30 */
    border-color: #1E40AF !important;
}

html.dark #tab-referral .text-blue-600,
html.dark #tab-referral .text-blue-700,
html.dark #tab-referral .text-blue-800 {
    color: #60A5FA !important; /* blue-400 */
}

/* Purple Stats (Monthly) */
html.dark #tab-referral .bg-purple-50,
html.dark #tab-referral .bg-purple-100 {
    background-color: rgba(91, 33, 182, 0.3) !important; /* violet-900/30 */
    border-color: #5B21B6 !important;
}

html.dark #tab-referral .text-purple-600,
html.dark #tab-referral .text-purple-700 {
    color: #A78BFA !important; /* violet-400 */
}

/* Orange Stats (Conversion) */
html.dark #tab-referral .bg-orange-50,
html.dark #tab-referral .bg-orange-100 {
    background-color: rgba(154, 52, 18, 0.3) !important; /* orange-900/30 */
    border-color: #9A3412 !important;
}

html.dark #tab-referral .text-orange-600 {
    color: #FB923C !important; /* orange-400 */
}

/* Gray backgrounds in Referral */
html.dark #tab-referral .bg-gray-50,
html.dark #tab-referral .bg-gray-100,
html.dark #tab-referral .bg-gray-200 {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

/* Referral Inputs */
html.dark #tab-referral input,
html.dark #tab-referral select,
html.dark #tab-referral textarea {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4B5563 !important;
}

html.dark #tab-referral .border-gray-200,
/* -------------------------------------------------------------------
 * ADDITIONAL PROFILE INPUT FIXES
 * -------------------------------------------------------------------
 */

/* Fix read-only inputs in dark mode */
html.dark .mc-input input[readonly],
html.dark .mc-input textarea[readonly] {
    background-color: #374151 !important;
    color: #9CA3AF !important; /* Slightly muted text for read-only */
    cursor: not-allowed;
}

/* Admin Profile Edit Box Specifics */
html.dark .mc-profile-edit-box .mc-input input,
html.dark .mc-profile-edit-box .mc-input select {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4B5563 !important;
}

html.dark .mc-profile-edit-box .mc-input span {
    color: #D1D5DB !important;
}

/* Ensure profile tab inputs are covered even if nested */
html.dark #tab-profile input,
html.dark #tab-profile select {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4B5563 !important;
}

/* -------------------------------------------------------------------
 * SEARCH BOX DARK MODE FIX (Revised based on modern-header.css)
 * -------------------------------------------------------------------
 */

html.dark .mc-top-header .mc-header-search .mc-search-input {
    background: #374151 !important; /* from modern-header.css */
    border-color: #4b5563 !important; /* from modern-header.css */
    color: #e5e7eb !important; /* from modern-header.css */
}

html.dark .mc-top-header .mc-header-search .mc-search-input:focus {
    border-color: #ea7351 !important; /* from modern-header.css */
    background: #1f2937 !important; /* from modern-header.css */
    box-shadow: 0 0 0 3px rgba(234, 115, 81, 0.2) !important; /* from modern-header.css */
}

html.dark .mc-top-header .mc-header-search .mc-search-input::placeholder {
    color: #9ca3af !important; /* from modern-header.css */
}

html.dark .mc-top-header .mc-header-search .mc-icon {
    color: #9ca3af !important; /* from modern-header.css */
}