/*
 * MudBlazor to Bootstrap Theme Bridge (Generic Version)
 * -----------------------------------------------------
 * This CSS file dynamically maps the CSS variables from your MudBlazor theme
 * to Bootstrap's CSS variables. This ensures that any changes in your
 * MudBlazor theme provider are automatically reflected in Bootstrap components.
 *
 * Make sure the MudBlazor theme provider styles are loaded before this file.
*/

/* * The @import for Google Fonts has been removed.
 * This file assumes you are loading the 'Inter' font family locally,
 * for example via a <link> tag in your HTML.
*/

:root {
    /* Font Family from MudBlazor Typography */
    --bs-body-font-family: var(--mud-typography-default-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
    /* MudBlazor 'Primary' -> Bootstrap 'Primary' */
    --bs-primary: var(--mud-palette-primary);
    --bs-primary-rgb: var(--mud-palette-primary-rgb);
    /* Using darker shades for better contrast on subtle backgrounds */
    --bs-primary-text-emphasis: var(--mud-palette-primary-darken);
    --bs-primary-bg-subtle: var(--mud-palette-primary-hover);
    --bs-primary-border-subtle: var(--mud-palette-primary-lighten);
    /* MudBlazor 'Secondary' -> Bootstrap 'Secondary' */
    --bs-secondary: var(--mud-palette-secondary);
    --bs-secondary-rgb: var(--mud-palette-secondary-rgb);
    --bs-secondary-text-emphasis: var(--mud-palette-secondary-darken);
    --bs-secondary-bg-subtle: var(--mud-palette-secondary-hover);
    --bs-secondary-border-subtle: var(--mud-palette-secondary-lighten);
    /* MudBlazor 'Tertiary' -> Bootstrap 'Light' */
    --bs-light: var(--mud-palette-tertiary);
    --bs-light-rgb: var(--mud-palette-tertiary-rgb);
    --bs-light-text-emphasis: var(--mud-palette-tertiary-darken);
    --bs-light-bg-subtle: var(--mud-palette-tertiary-hover);
    --bs-light-border-subtle: var(--mud-palette-tertiary-lighten);
    /* MudBlazor 'AppbarBackground' -> Bootstrap 'Dark' */
    --bs-dark: var(--mud-palette-appbar-background);
    /* Manually define RGB for bs-dark as MudBlazor doesn't provide a direct variable */
    --bs-dark-rgb: 139, 94, 60;
    --bs-dark-text-emphasis: var(--mud-palette-appbar-text);
    --bs-dark-bg-subtle: var(--mud-palette-dark-lighten);
    --bs-dark-border-subtle: var(--mud-palette-dark);
    /* Text & Background Colors */
    --bs-body-color: var(--mud-palette-text-primary);
    --bs-body-color-rgb: 62, 47, 33; /* Manual RGB from text-primary */
    --bs-secondary-color: var(--mud-palette-text-secondary);
    --bs-secondary-color-rgb: 110, 91, 75; /* Manual RGB from text-secondary */
    --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.65);
    --bs-body-bg: var(--mud-palette-background);
    --bs-body-bg-rgb: 250, 247, 240; /* Manual RGB from background */
    --bs-tertiary-bg: var(--mud-palette-surface);
    /* Link Color */
    --bs-link-color: var(--mud-palette-primary);
    --bs-link-color-rgb: var(--mud-palette-primary-rgb);
    --bs-link-hover-color: var(--mud-palette-primary-darken);
    /* Border Colors */
    --bs-border-color: var(--mud-palette-lines-default);
    --bs-border-color-translucent: rgba(var(--bs-body-color-rgb), 0.17);
    /* Component Specifics */
    --bs-emphasis-color: var(--mud-palette-text-primary);
    --bs-heading-color: var(--mud-palette-text-primary);
}

/* Button Adjustments */
.btn-primary {
    --bs-btn-color: var(--mud-palette-primary-text);
    --bs-btn-bg: var(--mud-palette-primary);
    --bs-btn-border-color: var(--mud-palette-primary);
    --bs-btn-hover-bg: var(--mud-palette-primary-darken);
    --bs-btn-hover-border-color: var(--mud-palette-primary-darken);
    --bs-btn-active-bg: var(--mud-palette-primary-darken);
    --bs-btn-active-border-color: var(--mud-palette-primary-darken);
    --bs-btn-disabled-bg: var(--mud-palette-action-disabled-background);
    --bs-btn-disabled-color: var(--mud-palette-action-disabled);
    --bs-btn-disabled-border-color: var(--mud-palette-action-disabled-background);
}

.btn-secondary {
    /* MudBlazor secondary-text is white, which is low contrast. Using text-primary instead. */
    --bs-btn-color: var(--mud-palette-text-primary);
    --bs-btn-bg: var(--mud-palette-secondary);
    --bs-btn-border-color: var(--mud-palette-secondary);
    --bs-btn-hover-bg: var(--mud-palette-secondary-darken);
    --bs-btn-hover-border-color: var(--mud-palette-secondary-darken);
    --bs-btn-active-bg: var(--mud-palette-secondary-darken);
    --bs-btn-active-border-color: var(--mud-palette-secondary-darken);
    --bs-btn-disabled-bg: var(--mud-palette-action-disabled-background);
    --bs-btn-disabled-color: var(--mud-palette-action-disabled);
    --bs-btn-disabled-border-color: var(--mud-palette-action-disabled-background);
}

/* Navbar (Appbar) Styling */
.navbar {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: var(--mud-palette-appbar-text);
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            color: rgba(255, 255, 255, 0.85); /* Use rgba for better compatibility */
        }

/* Custom rule for .text-tertiary if needed */
.text-tertiary {
    color: var(--bs-tertiary-color) !important;
}

.bg-surface {
    background-color: var(--bs-tertiary-bg) !important;
}

/*
 * Custom Horizontal NavLink Styling
 * -----------------------------------------------------
 * These rules replicate the user's specific component styles for nav-pills,
 * using the dynamic MudBlazor variables.
*/

.nav-pills .nav-link {
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
    border: none;
    font-weight: 500;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid transparent; /* Placeholder for active state */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .nav-pills .nav-link:hover {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-surface);
        border-bottom-color: transparent;
    }

    /* Blazor's NavLink adds the .active class */
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        color: var(--mud-palette-text-primary);
        background-color: transparent;
        border-bottom: 2px solid var(--mud-palette-primary);
    }

        .nav-pills .nav-link.active:hover {
            background-color: var(--mud-palette-surface);
            border-bottom-color: var(--mud-palette-primary);
        }

/* Icon spacing */
.nav-link svg {
    margin-right: 8px;
}

.nav-link:has(svg:only-child) svg {
    margin-right: 0;
}