/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/
html, body {
    height: 100%
}

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

/*
    Barlow font
*/

.heading-font {
    font-family: 'Barlow Condensed', sans-serif !important;
}

h1.heading-font {
    font-size: 3.5rem;
    font-weight: 700;
}

h5.heading-font {
    font-size: 1.5rem;
    font-weight: 700;
}

/*
    Hover elevate
*/
.hover-elevate {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.hover-elevate:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/*
    Login prompt
*/
.login-prompt-banner .mud-button-root {
    text-transform: none;
    font-weight: 700;
}

.login-prompt-copy {
    min-width: min(100%, 280px);
}


/*
    Cookie banner
*/

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    color: white;
    min-width: 250px;
}

.cookie-banner-text strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.cookie-banner-button {
    background: #b33612;
    color: white;
    border: none;
    padding: 0.55rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

    .cookie-banner-button:hover {
        background: #8c280c;
    }

@media (max-width: 600px) {
    .cookie-banner-content {
        align-items: center;
        flex-direction: row;
        gap: 0.75rem;
    }

    .cookie-banner-text {
        min-width: 0;
    }

    .cookie-banner-text strong {
        font-size: 0.9rem;
    }

    .cookie-banner-text p {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .cookie-banner-button {
        padding: 0.5rem 0.85rem;
    }
}
/* Both analytics choices have the same presentation and keyboard affordances. */
.cookie-choice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-shrink: 0;
}
.cookie-choice-actions .cookie-banner-button {
    flex: 1 1 auto;
}
.cookie-banner-button:focus-visible, .cookie-settings-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}
.cookie-settings-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}
#cookie-choice-status:empty {
    display: none;
}
@media (max-width: 600px) {
    .cookie-choice-actions {
        width: 100%;
    }
}

.fit-crop-panel {
    scroll-margin-top: 88px;
}

#fit-crop-heading:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 4px;
    border-radius: var(--mud-default-borderradius);
}

/* FIT statistics stay aligned on phones; enlarged text can scroll within the panel. */
.fit-statistics-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: var(--mud-default-borderradius);
}

.fit-statistics-scroll:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.fit-statistics-table {
    width: 100%;
    min-width: 18em;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fit-statistics-table th,
.fit-statistics-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fit-statistics-table th:first-child {
    width: 40%;
    text-align: left;
}

.fit-statistics-table th[scope="row"] {
    font-weight: 500;
}

.fit-statistics-table td {
    white-space: nowrap;
}

.fit-statistics-table tbody tr:last-child > * {
    border-bottom: 0;
}

.fit-statistics-metric {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fit-statistics-marker {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

.fit-statistics-unit {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875em;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .fit-statistics-table th,
    .fit-statistics-table td {
        padding: 8px 6px;
    }

    .fit-statistics-unit {
        display: block;
    }
}