/* Global theme aligning with ExchangiFi landing styles */
:root {
    --ef-contrast: #0f172a;
    /* slate-900 */
    --ef-contrast-2: #475569;
    /* slate-600 */
    --ef-contrast-3: #94a3b8;
    /* slate-400 */
    --ef-base-3: #ffffff;
    --ef-base-2: #f7f8f9;
    /* light bg */
    --ef-base: #f0f0f0;
    --ef-accent: #1e3a8a;
    /* deep blue */
    --ef-accent-2: #2563eb;
    /* brand blue */
}

html,
body {
    font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--ef-base-2);
    color: var(--ef-contrast);
}

/* Headings use Heebo for stronger personality */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
    font-family: "Heebo", "Lato", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Brand buttons (optional utility if not using Tailwind utilities) */
.cta-button {
    background-color: var(--ef-accent);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover,
.cta-button:focus {
    opacity: 0.9;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Light card surface */
.surface-card {
    background: var(--ef-base-3);
    border-radius: 1rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* Minimal dark theme overrides used across the app */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
.dark body {
    background-color: #0f172a;
    color: #e5e7eb;
}

:root[data-theme="dark"] .surface-card,
.dark .surface-card {
    background: #111827;
    color: #e5e7eb;
}

/* Home hero gradient controlled by data-theme to avoid tailwind dark: variants */
.ef-home-hero {
    background-image: linear-gradient(to bottom right, #f3f4f6, #dbeafe);
}

:root[data-theme="dark"] .ef-home-hero,
.dark .ef-home-hero {
    background-image: linear-gradient(to bottom right, #0f172a, #1f2937);
}

/* Dark-mode text utility overrides for common Tailwind classes used in templates */
:root[data-theme="dark"] .text-gray-900,
.dark .text-gray-900 {
    color: #e5e7eb !important;
}

:root[data-theme="dark"] .text-gray-800,
.dark .text-gray-800 {
    color: #e5e7eb !important;
}

:root[data-theme="dark"] .text-gray-700,
.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .text-gray-600,
.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

:root[data-theme="dark"] .text-gray-500,
.dark .text-gray-500 {
    color: #94a3b8 !important;
}

/* Dark-mode background utility overrides for dashboard templates */

:root[data-theme="dark"] .bg-gray-50,
.dark .bg-gray-50 {
    background-color: #1f2937 !important;
}

:root[data-theme="dark"] .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* Dark-mode border utility overrides for dashboard templates */
:root[data-theme="dark"] .border-gray-200,
.dark .border-gray-200 {
    border-color: #374151 !important;
}

:root[data-theme="dark"] .border-gray-300,
.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

:root[data-theme="dark"] .divide-gray-200> :not([hidden])~ :not([hidden]),
.dark .divide-gray-200> :not([hidden])~ :not([hidden]) {
    border-color: #374151 !important;
}

/* Dark-mode status color overrides for better visibility */
/* Error/Alert colors - restored for proper error styling, but not for buttons */
:root[data-theme="dark"] .bg-red-50:not(.delete-investor-btn),
.dark .bg-red-50:not(.delete-investor-btn) {
    background-color: #7f1d1d !important;
}

/* Keep red button backgrounds transparent as intended */
:root[data-theme="dark"] .delete-investor-btn.bg-red-50,
.dark .delete-investor-btn.bg-red-50 {
    background-color: transparent !important;
}

:root[data-theme="dark"] .text-red-700,
.dark .text-red-700 {
    color: #f87171 !important;
}

:root[data-theme="dark"] .text-red-600,
.dark .text-red-600 {
    color: #f87171 !important;
}

:root[data-theme="dark"] .text-red-400,
.dark .text-red-400 {
    color: #f87171 !important;
}

:root[data-theme="dark"] .border-red-200,
.dark .border-red-200 {
    border-color: #991b1b !important;
}

:root[data-theme="dark"] .border-red-500,
.dark .border-red-500 {
    border-color: #dc2626 !important;
}

:root[data-theme="dark"] .bg-red-100,
.dark .bg-red-100 {
    background-color: #7f1d1d !important;
}

:root[data-theme="dark"] .text-red-800,
.dark .text-red-800 {
    color: #fca5a5 !important;
}

:root[data-theme="dark"] .hover\:text-red-600:hover,
.dark .hover\:text-red-600:hover {
    color: #fca5a5 !important;
}

:root[data-theme="dark"] .hover\:bg-red-100:hover,
.dark .hover\:bg-red-100:hover {
    background-color: #b91c1c !important;
}

/* Success/Active colors */
:root[data-theme="dark"] .text-green-400,
.dark .text-green-400 {
    color: #4ade80 !important;
}

:root[data-theme="dark"] .bg-green-100,
.dark .bg-green-100 {
    background-color: #14532d !important;
}

:root[data-theme="dark"] .text-green-800,
.dark .text-green-800 {
    color: #86efac !important;
}

/* Processing/Warning colors */
:root[data-theme="dark"] .bg-yellow-100,
.dark .bg-yellow-100 {
    background-color: #713f12 !important;
}

:root[data-theme="dark"] .text-yellow-800,
.dark .text-yellow-800 {
    color: #fde047 !important;
}

/* Dark-mode overrides for generic white surfaces (non-inputs) */
/* Keep cards slightly lighter than section in dark mode */
/* Use a unified value to avoid conflicting rules */


:root[data-theme="dark"] .bg-gray-200,
.dark .bg-gray-200 {
    background-color: #374151 !important;
}

:root[data-theme="dark"] .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* Header dark mode support */
:root[data-theme="dark"] .custom-header,
.dark .custom-header {
    background: rgba(17, 24, 39, 0.95) !important;
    border-bottom: 1px solid #374151 !important;
}

/* Logo text dark mode support */
:root[data-theme="dark"] .logo-text-header,
.dark .logo-text-header {
    color: #ffffff !important;
}

:root[data-theme="dark"] .text-accent,
.dark .text-accent {
    color: #60a5fa !important;
}

/* Navbar text improvements for dark mode */

:root[data-theme="dark"] .hover\:text-gray-900:hover,
.dark .hover\:text-gray-900:hover {
    color: #ffffff !important;
}

:root[data-theme="dark"] .text-blue-700,
.dark .text-blue-700 {
    color: #60a5fa !important;
}

/* Dark-mode blue color overrides for buttons and links - conditional styling */
:root[data-theme="dark"] .bg-blue-50,
.dark .bg-blue-50 {
    background-color: transparent !important;
}

/* Exception: When bg-blue-50 is used in surface cards, use appropriate background */
:root[data-theme="dark"] .surface-card .bg-blue-50:not(input):not(select):not(textarea),
.dark .surface-card .bg-blue-50:not(input):not(select):not(textarea) {
    background-color: #1f2937 !important;
}

:root[data-theme="dark"] .hover\:bg-blue-100:hover,
.dark .hover\:bg-blue-100:hover {
    background-color: #2563eb !important;
}



:root[data-theme="dark"] .hover\:text-blue-600:hover,
.dark .hover\:text-blue-600:hover {
    color: #93c5fd !important;
}

:root[data-theme="dark"] .border-blue-600,
.dark .border-blue-600 {
    border-color: #2563eb !important;
}

/* Focus ring colors for dark mode */
:root[data-theme="dark"] .focus\:ring-blue-500:focus,
.dark .focus\:ring-blue-500:focus {
    --tw-ring-color: #3b82f6 !important;
}

:root[data-theme="dark"] .focus\:ring-indigo-500:focus,
.dark .focus\:ring-indigo-500:focus {
    --tw-ring-color: #6366f1 !important;
}

/* Dark-mode form containers (but NOT form inputs) */
:root[data-theme="dark"] .bg-white:not(input):not(select):not(textarea),
.dark .bg-white:not(input):not(select):not(textarea) {
    background-color: #1f2937 !important;
}

/* Never allow input/select/textarea to inherit #1f2937 background inadvertently */
:root[data-theme="dark"] .bg-white input,
.dark .bg-white input,
:root[data-theme="dark"] .bg-white select,
.dark .bg-white select,
:root[data-theme="dark"] .bg-white textarea,
.dark .bg-white textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Ensure form inputs always have light backgrounds regardless of other classes */
:root[data-theme="dark"] input.bg-white,
.dark input.bg-white,
:root[data-theme="dark"] select.bg-white,
.dark select.bg-white,
:root[data-theme="dark"] textarea.bg-white,
.dark textarea.bg-white {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Do NOT invert text-gray-900 in dark mode inside form controls; keep default only for headings elsewhere */

:root[data-theme="dark"] .text-gray-700,
.dark .text-gray-700 {
    color: #e5e7eb !important;
}

:root[data-theme="dark"] .border-gray-300,
.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

:root[data-theme="dark"] .border-gray-200,
.dark .border-gray-200 {
    border-color: #374151 !important;
}

:root[data-theme="dark"] .placeholder-gray-400::placeholder,
.dark .placeholder-gray-400::placeholder {
    color: #9ca3af !important;
}

/* ALL form inputs - light background with dark text for readability */
:root[data-theme="dark"] input,
.dark input,
:root[data-theme="dark"] select,
.dark select,
:root[data-theme="dark"] textarea,
.dark textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* High-specificity override inside cards/sections */
:root[data-theme="dark"] .surface-card input,
.dark .surface-card input,
:root[data-theme="dark"] .surface-card select,
.dark .surface-card select,
:root[data-theme="dark"] .surface-card textarea,
.dark .surface-card textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

:root[data-theme="dark"] .surface-card input::placeholder,
.dark .surface-card input::placeholder,
:root[data-theme="dark"] .surface-card textarea::placeholder,
.dark .surface-card textarea::placeholder {
    color: #6b7280 !important;
}

:root[data-theme="dark"] input::placeholder,
.dark input::placeholder,
:root[data-theme="dark"] select::placeholder,
.dark select::placeholder,
:root[data-theme="dark"] textarea::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Override for readonly inputs only */
:root[data-theme="dark"] input[readonly],
.dark input[readonly] {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
}

/* Gray backgrounds for non-input elements */
:root[data-theme="dark"] .bg-gray-100:not(input):not(select):not(textarea),
.dark .bg-gray-100:not(input):not(select):not(textarea) {
    background-color: #111827 !important;
}

/* Ensure form inputs with gray backgrounds stay light */
:root[data-theme="dark"] input.bg-gray-100,
.dark input.bg-gray-100,
:root[data-theme="dark"] select.bg-gray-100,
.dark select.bg-gray-100,
:root[data-theme="dark"] textarea.bg-gray-100,
.dark textarea.bg-gray-100 {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

:root[data-theme="dark"] .text-gray-500,
.dark .text-gray-500 {
    color: #9ca3af !important;
}

/* Cursor not allowed elements */
:root[data-theme="dark"] .cursor-not-allowed,
.dark .cursor-not-allowed {
    background-color: #111827 !important;
    color: #d1d5db !important;
}

/* Green success form elements - maintain light mode appearance with good contrast */
:root[data-theme="dark"] .bg-green-50,
.dark .bg-green-50 {
    background-color: #dcfce7 !important;
}

:root[data-theme="dark"] .border-green-200,
.dark .border-green-200 {
    border-color: #bbf7d0 !important;
}

:root[data-theme="dark"] .text-green-700,
.dark .text-green-700 {
    color: #15803d !important;
}

/* Ensure success result inputs keep green styling (override global input rule) */
:root[data-theme="dark"] input.bg-green-50,
.dark input.bg-green-50 {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

/* Profile form submit section - match surface-card background (but never override inputs) */
:root[data-theme="dark"] .surface-card .bg-white:not(input):not(select):not(textarea),
.dark .surface-card .bg-white:not(input):not(select):not(textarea) {
    background-color: #111827 !important;
}

/* Ensure blue-900 is dark blue in light mode */
:root[data-theme="light"] .text-blue-900,
html[data-theme="light"] .text-blue-900 {
    color: #1e3a8a !important;
}

/* Override blue-900 to light blue in dark mode */
:root[data-theme="dark"] .text-blue-900,
.dark .text-blue-900,
html.dark .text-blue-900,
html[data-theme="dark"] .text-blue-900 {
    color: #bfdbfe !important;
}

/* Preview notice dark adjustments */
:root[data-theme="dark"] .ef-preview-notice,
.dark .ef-preview-notice {
    background: rgba(30, 64, 175, 0.15);
    border-color: rgba(30, 64, 175, 0.35);
}

:root[data-theme="dark"] .ef-preview-notice p,
.dark .ef-preview-notice p {
    color: #bfdbfe;
}

/* Form controls in iframe: dark mode text should remain dark text on light inputs */
:root[data-theme="dark"] .ef-input,
.dark .ef-input {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

:root[data-theme="dark"] .ef-input::placeholder,
.dark .ef-input::placeholder {
    color: #64748b !important;
}

/* Ensure selects and options in dark mode render as light controls with dark text */
:root[data-theme="dark"] select.ef-input,
.dark select.ef-input {
    background-color: #ffffff !important;
    color: #111827 !important;
}

:root[data-theme="dark"] select.ef-input option,
.dark select.ef-input option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Focus state for better visibility on dark container */
:root[data-theme="dark"] .ef-input:focus,
.dark .ef-input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 0;
    border-color: #3b82f6 !important;
}

/* Header styles */
.custom-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e2e8f0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.logo-text-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ef-contrast);
}

.text-accent {
    color: var(--ef-accent-2);
}

.main-nav .menu-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-list li a {
    color: #475569;
    text-decoration: none;
    transition: color .2s;
}

.menu-list li a:hover {
    color: #1e293b;
}

.header-cta {
    display: flex;
    align-items: center;
}

.mobile-only {
    display: none;
}

.menu-toggle,
.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #475569;
}

.menu-toggle:hover,
.drawer-close:hover {
    background-color: #1e293b29;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    background: #fff;
    z-index: 60;
    padding: 1.5rem;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
    transition: right .3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mobile-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-header div {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list a {
    color: #475569;
    text-decoration: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important
    }

    .mobile-only {
        display: block !important
    }
}

/* Footer styles */
.custom-footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 4rem 1rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.logo-text {
    font-weight: 700;
    color: #fff;
}

.logo-text .text-blue {
    color: #3b82f6;
}

.footer-description {
    font-size: .95rem;
    margin-bottom: 1rem;
    color: #cbd5e1;
    max-width: 42rem;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu a {
    color: #cbd5e1;
    text-decoration: none;
}

.footer-menu a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid #334155;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: .875rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ETF Filters Dark Mode Support */
:root[data-theme="dark"] .etf-dropdown-panel,
.dark .etf-dropdown-panel {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

:root[data-theme="dark"] .etf-dropdown-panel div:hover,
.dark .etf-dropdown-panel div:hover {
    background-color: #4b5563 !important;
}

/* Active Filter Pills Dark Mode */
:root[data-theme="dark"] .bg-blue-50,
.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
    border-color: #1d4ed8 !important;
}

:root[data-theme="dark"] .bg-blue-100,
.dark .bg-blue-100 {
    background-color: #1e40af !important;
}

:root[data-theme="dark"] .text-blue-800,
.dark .text-blue-800,
:root[data-theme="dark"] .text-blue-600,
.dark .text-blue-600 {
    color: #bfdbfe !important;
}

:root[data-theme="dark"] .bg-green-100,
.dark .bg-green-100 {
    background-color: #14532d !important;
}

:root[data-theme="dark"] .text-green-800,
.dark .text-green-800,
:root[data-theme="dark"] .text-green-600,
.dark .text-green-600 {
    color: #bbf7d0 !important;
}

:root[data-theme="dark"] .bg-purple-100,
.dark .bg-purple-100 {
    background-color: #581c87 !important;
}

:root[data-theme="dark"] .text-purple-800,
.dark .text-purple-800,
:root[data-theme="dark"] .text-purple-600,
.dark .text-purple-600 {
    color: #e9d5ff !important;
}

:root[data-theme="dark"] .bg-orange-100,
.dark .bg-orange-100 {
    background-color: #9a3412 !important;
}

:root[data-theme="dark"] .text-orange-800,
.dark .text-orange-800,
:root[data-theme="dark"] .text-orange-600,
.dark .text-orange-600 {
    color: #fed7aa !important;
}

:root[data-theme="dark"] .bg-yellow-100,
.dark .bg-yellow-100 {
    background-color: #92400e !important;
}

:root[data-theme="dark"] .text-yellow-800,
.dark .text-yellow-800,
:root[data-theme="dark"] .text-yellow-600,
.dark .text-yellow-600 {
    color: #fef3c7 !important;
}

/* ETF Status indicators */
:root[data-theme="dark"] .bg-green-500,
.dark .bg-green-500 {
    background-color: #10b981 !important;
}

:root[data-theme="dark"] .bg-red-500,
.dark .bg-red-500 {
    background-color: #ef4444 !important;
}

/* Slate text colors for ETF cards dark mode */
:root[data-theme="dark"] .text-slate-900,
.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

:root[data-theme="dark"] .text-slate-600,
.dark .text-slate-600 {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] .text-slate-500,
.dark .text-slate-500 {
    color: #64748b !important;
}

/* Tags dropdown dark mode background */
:root[data-theme="dark"] #tags-dropdown-panel,
.dark #tags-dropdown-panel {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

:root[data-theme="dark"] #tags-dropdown-panel label:hover,
.dark #tags-dropdown-panel label:hover {
    background-color: #4b5563 !important;
}

/* Tags dropdown text dark mode */
:root[data-theme="dark"] #tags-dropdown-panel span,
.dark #tags-dropdown-panel span {
    color: #f9fafb !important;
}

/* Tags dropdown checked/selected state dark mode */
:root[data-theme="dark"] #tags-dropdown-panel input[type="checkbox"]:checked+span,
.dark #tags-dropdown-panel input[type="checkbox"]:checked+span {
    color: #f9fafb !important;
    background-color: transparent !important;
}

/* Tags dropdown selected labels dark mode */
:root[data-theme="dark"] #tags-dropdown-panel label:has(input:checked),
.dark #tags-dropdown-panel label:has(input:checked) {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Tags display button text when tags selected */
:root[data-theme="dark"] #tags-display,
.dark #tags-display {
    color: #111827 !important;
}

/* Tags dropdown button dark mode */
:root[data-theme="dark"] #tags-dropdown-button,
.dark #tags-dropdown-button {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Filter labels dark mode */
:root[data-theme="dark"] .text-slate-700,
.dark .text-slate-700 {
    color: #e2e8f0 !important;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}