/**
 * Dark Theme Overrides for Dash Mantine Components
 * Matches the original OG Met App styling for cards, navigation, header, etc.
 */

/* ========================================
   CARD STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Card-root {
    background-color: var(--card-background-color-dark);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    margin: var(--card-margin);
    padding: var(--card-padding);
    border: 0px solid transparent;
}

/* ========================================
   CARD STYLING (Light Mode)
   ======================================== */
[data-mantine-color-scheme="light"] .mantine-Card-root {
    background-color: var(--card-background-color-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    margin: var(--card-margin);
    padding: var(--card-padding);
    border: 1px solid #e0e0e0;
}

/* ========================================
   CARD HEADER STYLING
   ======================================== */
.card-header--title {
    font-weight: 400 !important;
    padding: 10px;
    margin: 0px;
}

[data-mantine-color-scheme="dark"] .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--card-header-border-color);
    box-shadow: none;
    margin: 0px;
    padding: 10px;
}

[data-mantine-color-scheme="light"] .card-header {
    background-color: transparent;
    border-bottom: 1px solid #d0d0d0;
    box-shadow: none;
    margin: 0px;
    padding: 10px;
}

/* ========================================
   PAGE TITLE STYLING
   ======================================== */
/* Main page titles should be light/white in dark mode */
[data-mantine-color-scheme="dark"] .mantine-Title-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="light"] .mantine-Title-root {
    color: var(--text-light);
}

/* ========================================
   TEXT COLOR OVERRIDES
   ======================================== */
/* Default text colors */
[data-mantine-color-scheme="dark"] .mantine-Text-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="light"] .mantine-Text-root {
    color: var(--text-light);
}

/* Dimmed text should be lighter in dark mode */
[data-mantine-color-scheme="dark"] .mantine-Text-root[data-c="dimmed"],
[data-mantine-color-scheme="dark"] [data-c="dimmed"] {
    color: #aaa !important;
}

[data-mantine-color-scheme="light"] .mantine-Text-root[data-c="dimmed"],
[data-mantine-color-scheme="light"] [data-c="dimmed"] {
    color: #666 !important;
}

/* ========================================
   CARD SECTION TITLE COLORS - FORCE WHITE
   ======================================== */
/* Force ALL card section titles to be plain white/gray like OG app */
/* Override DMC's c="blue.4", c="green.4", etc. color attributes with maximum specificity */

/* Dark mode - force white text on ALL title variants */
[data-mantine-color-scheme="dark"] .mantine-CardSection .mantine-Title-root,
[data-mantine-color-scheme="dark"] .mantine-Card .mantine-CardSection .mantine-Title-root,
[data-mantine-color-scheme="dark"] .mantine-Title-root[class*="mantine-Title"],
[data-mantine-color-scheme="dark"] h1.mantine-Title-root,
[data-mantine-color-scheme="dark"] h2.mantine-Title-root,
[data-mantine-color-scheme="dark"] h3.mantine-Title-root,
[data-mantine-color-scheme="dark"] h4.mantine-Title-root,
[data-mantine-color-scheme="dark"] h5.mantine-Title-root,
[data-mantine-color-scheme="dark"] h6.mantine-Title-root {
    color: rgb(245, 245, 245) !important; /* Force white text - use explicit rgb instead of var */
}

/* Light mode - force dark text */
[data-mantine-color-scheme="light"] .mantine-CardSection .mantine-Title-root,
[data-mantine-color-scheme="light"] .mantine-Card .mantine-CardSection .mantine-Title-root,
[data-mantine-color-scheme="light"] .mantine-Title-root[class*="mantine-Title"],
[data-mantine-color-scheme="light"] h1.mantine-Title-root,
[data-mantine-color-scheme="light"] h2.mantine-Title-root,
[data-mantine-color-scheme="light"] h3.mantine-Title-root,
[data-mantine-color-scheme="light"] h4.mantine-Title-root,
[data-mantine-color-scheme="light"] h5.mantine-Title-root,
[data-mantine-color-scheme="light"] h6.mantine-Title-root {
    color: rgb(33, 33, 33) !important; /* Force dark text in light mode */
}

/* Additional override for colored data-c attributes in titles only */
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="blue"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="blue.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="green"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="green.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="orange"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="orange.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="purple"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="purple.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="red"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="red.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="yellow"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="yellow.4"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="teal"],
[data-mantine-color-scheme="dark"] .mantine-Title-root[data-c="teal.4"] {
    color: rgb(245, 245, 245) !important;
}

[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="blue"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="blue.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="green"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="green.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="orange"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="orange.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="purple"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="purple.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="red"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="red.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="yellow"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="yellow.4"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="teal"],
[data-mantine-color-scheme="light"] .mantine-Title-root[data-c="teal.4"] {
    color: rgb(33, 33, 33) !important;
}

/* ========================================
   SELECT AND INPUT STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Select-input {
    background-color: var(--card-background-color-dark);
    color: var(--text-dark);
    border-color: var(--card-header-border-color);
}

[data-mantine-color-scheme="light"] .mantine-Select-input {
    background-color: white;
    color: var(--text-light);
    border-color: #d0d0d0;
}

[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
    background-color: var(--card-background-color-dark);
    border-color: var(--card-header-border-color);
}

[data-mantine-color-scheme="light"] .mantine-Select-dropdown {
    background-color: white;
    border-color: #d0d0d0;
}

[data-mantine-color-scheme="dark"] .mantine-Select-option {
    color: var(--text-dark);
}

[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
    background-color: rgba(124, 139, 177, 0.2);
}

[data-mantine-color-scheme="light"] .mantine-Select-option {
    color: var(--text-light);
}

[data-mantine-color-scheme="light"] .mantine-Select-option:hover {
    background-color: rgba(2, 73, 125, 0.1);
}

/* ========================================
   BADGE STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Badge-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="light"] .mantine-Badge-root {
    color: var(--text-light);
}

/* ========================================
   DMC TABLE STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Table-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="dark"] .mantine-Table-root th {
    color: var(--text-dark);
    background-color: rgba(124, 139, 177, 0.2);
}

[data-mantine-color-scheme="dark"] .mantine-Table-root td {
    color: var(--text-dark) !important;
}

/* Force all text and numbers inside tables to be white */
[data-mantine-color-scheme="dark"] .mantine-Table-root td *,
[data-mantine-color-scheme="dark"] .mantine-Table-root th *,
[data-mantine-color-scheme="dark"] .mantine-Table-root span,
[data-mantine-color-scheme="dark"] .mantine-Table-root div,
[data-mantine-color-scheme="dark"] .mantine-Table-root [class*="mantine"] {
    color: rgb(245, 245, 245) !important;
}

[data-mantine-color-scheme="light"] .mantine-Table-root {
    color: var(--text-light);
}

[data-mantine-color-scheme="light"] .mantine-Table-root th {
    color: var(--text-light);
    background-color: rgba(2, 73, 125, 0.1);
}

[data-mantine-color-scheme="light"] .mantine-Table-root td {
    color: var(--text-light) !important;
}

[data-mantine-color-scheme="light"] .mantine-Table-root td *,
[data-mantine-color-scheme="light"] .mantine-Table-root th *,
[data-mantine-color-scheme="light"] .mantine-Table-root span,
[data-mantine-color-scheme="light"] .mantine-Table-root div {
    color: rgb(33, 33, 33) !important;
}

/* ========================================
   LIST STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-List-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="dark"] .mantine-ListItem-root {
    color: var(--text-dark);
}

[data-mantine-color-scheme="light"] .mantine-List-root {
    color: var(--text-light);
}

[data-mantine-color-scheme="light"] .mantine-ListItem-root {
    color: var(--text-light);
}

/* ========================================
   HEADER (AppShellHeader) STYLING
   ======================================== */
.mantine-AppShell-header {
    height: var(--header-height) !important;
    box-shadow: var(--header-box-shadow);
}

/* ========================================
   NAVIGATION (AppShellNavbar) STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
    background-color: rgba(255, 255, 255, 0.0);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

[data-mantine-color-scheme="light"] .mantine-AppShell-navbar {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Navigation Links */
.mantine-NavLink-root {
    font-weight: 400;
    border-radius: 4px;
    transition: all var(--transition-speed);
}

.mantine-NavLink-label {
    font-weight: inherit;
}

/* Navigation hover effects - Dark Mode */
[data-mantine-color-scheme="dark"] .mantine-NavLink-root:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Navigation hover effects - Light Mode */
[data-mantine-color-scheme="light"] .mantine-NavLink-root:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Active navigation - Dark Mode - Remove background highlight, keep text color */
[data-mantine-color-scheme="dark"] .mantine-NavLink-root[data-active="true"] {
    background-color: transparent;
    color: var(--text-dark);
}

/* Active navigation - Light Mode - Remove background highlight, keep text color */
[data-mantine-color-scheme="light"] .mantine-NavLink-root[data-active="true"] {
    background-color: transparent;
    color: var(--text-light);
}

/* ========================================
   USER GREETING STYLING
   ======================================== */
.user-greeting {
    color: var(--trendline-logo-blue2);
    font-weight: 100;
    padding-left: calc(var(--logo-leftside-empty-space) * 2);
    font-size: 1em;
}

/* ========================================
   PAPER COMPONENT OVERRIDES
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Paper-root {
    background-color: var(--card-background-color-dark);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
}

[data-mantine-color-scheme="light"] .mantine-Paper-root {
    background-color: var(--card-background-color-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
}

/* ========================================
   DIVIDER STYLING
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-Divider-root {
    border-color: var(--card-header-border-color);
}

[data-mantine-color-scheme="light"] .mantine-Divider-root {
    border-color: #d0d0d0;
}

/* ========================================
   SCROLL AREA
   ======================================== */
.mantine-ScrollArea-viewport {
    padding-right: 0 !important;
}

/* ========================================
   DATE PICKER STYLING (Dark Mode)
   ======================================== */
[data-mantine-color-scheme="dark"] .mantine-DatePicker-calendar {
    background-color: var(--card-background-color-dark);
}

[data-mantine-color-scheme="dark"] .mantine-DatePicker-day {
    color: var(--text-dark);
}

[data-mantine-color-scheme="dark"] .mantine-DatePicker-day[data-disabled="true"] {
    opacity: 0.1;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */
.hover-shadow {
    transition: box-shadow var(--transition-speed);
}

.hover-shadow:hover {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   ACCENT COLOR UTILITIES
   ======================================== */
.accent-color {
    color: var(--accent);
}

.accent-bg {
    background-color: var(--accent);
}

.brand-blue {
    color: var(--trendline-logo-blue);
}

.brand-blue2 {
    color: var(--trendline-logo-blue2);
}

.brand-blue3 {
    color: var(--trendline-logo-blue3);
}

/* ========================================
   ADMIN BUTTON STYLING
   ======================================== */
.admin-button {
    border: 1px solid var(--accent);
    border-radius: var(--card-border-radius);
    text-align: center;
}

/* ========================================
   CONTENT VIEW PADDING
   ======================================== */
.content-view {
    padding: var(--card-margin);
    padding-top: 0;
}

/* ========================================
   PORTFOLIO/LANDING PAGE SPECIFIC
   ======================================== */
.map-container {
    height: calc(100vh - var(--header-height) - 3rem);
    max-height: 1480px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
@media (max-width: 1100px) {
    .mantine-Card-root {
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .mantine-AppShell-navbar {
        background-color: var(--background-page-dark);
    }

    [data-mantine-color-scheme="light"] .mantine-AppShell-navbar {
        background-color: var(--background-page-light);
    }
}