:root {
    --granel-primary: #089569;
    --granel-primary-dark: #067a56;
    --granel-primary-soft: #e1f5ed;
    --granel-primary-focus: rgba(8, 149, 105, 0.45);
    --granel-chrome: #0f162a;
    --granel-border: #dfe2e8;
    --granel-text: #2f3035;
    --granel-muted: #666b75;
    --granel-surface: #fff;
    --granel-surface-muted: #f7f8fa;
}

.species-selector-popover,
.species-selector-popover .mud-paper {
    background: var(--granel-surface);
    border: 1px solid #dbe3ef;
    border-radius: 0.5rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.species-selector-popover {
    overflow: hidden;
}

.species-selector-list {
    padding: 0.25rem;
}

.species-selector-list .mud-list-item {
    border-radius: 0.375rem;
    color: #334155;
}

.species-selector-list .mud-list-item:hover {
    background: #f1f5f9;
}

.species-selector-list .mud-selected-item {
    background: #ecfdf5;
    color: var(--granel-primary);
}

.species-selector-list .mud-selected-item .mud-icon-root {
    color: var(--granel-primary);
}

html,
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
    color: var(--granel-primary-dark);
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.account-label {
    color: var(--granel-text);
    font-weight: 600;
    order: -1;
}

.account-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--granel-text);
    background: var(--granel-surface);
    border: 1px solid #aeb4c0;
    border-radius: 0.25rem;
}

.account-input:focus,
.account-checkbox:focus-visible {
    outline: none;
    border-color: var(--granel-primary);
    box-shadow: 0 0 0 0.2rem var(--granel-primary-focus);
}

.account-input:disabled {
    color: var(--granel-muted);
    background: var(--granel-surface-muted);
}

.account-validation-summary,
.account-validation-message {
    color: #b42318;
}

.account-checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.account-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--granel-primary);
}

.account-external-login-form {
    margin: 0;
}

.account-readonly-email {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.account-readonly-email .account-label {
    flex-basis: 100%;
}

.account-readonly-email .account-input {
    flex: 1 1 12rem;
}

.account-verification-status {
    display: inline-grid;
    min-height: 2.5rem;
    min-width: 2.5rem;
    place-items: center;
    color: #1b7f3a;
    font-weight: 700;
    background: #eaf7ee;
    border: 1px solid #a4d8b1;
    border-radius: 0.25rem;
}

.passkey-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: var(--granel-primary);
    border: 1px solid var(--granel-primary);
    border-radius: 0.25rem;
}

.passkey-submit:hover {
    background: var(--granel-primary-dark);
    border-color: var(--granel-primary-dark);
}

.passkey-submit:focus-visible {
    outline: 3px solid var(--granel-primary-focus);
    outline-offset: 2px;
}

.weather-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.weather-table th,
.weather-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--granel-border);
}

.weather-table th {
    color: var(--granel-text);
    background: var(--granel-surface-muted);
}

.content {
    padding-top: 1.1rem;
}

.mud-layout.page:has(.exporter-catalog) {
    background: #f9fafc;
    min-height: 100vh;
    min-height: 100dvh;
}

.mud-layout.page:has(.exporter-dashboard-viewport) {
    background: #fff;
    min-height: 100vh;
    min-height: 100dvh;
}

.mud-main-content:has(.exporter-catalog) {
    background: #f9fafc !important;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
}

.mud-main-content:has(.exporter-dashboard-viewport) {
    background: #fff !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    min-width: 0;
}

.mud-main-content:has(.exporter-dashboard-viewport) > .page-content,
.mud-main-content:has(.exporter-dashboard-viewport) > .page-content > article.content.px-4 {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

.mud-main-content:has(.exporter-dashboard-viewport) > .page-content > article.content.px-4 {
    padding: 0 !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background:
        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA1NiA0OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpleGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzk5L3hsaW5rIiBvdmVyZmxvdz0iaGlkZGVuIj48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB4PSIyMzUiIHk9IjUxIiB3aWR0aD0iNTYiIGhlaWdodD0iNDkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjM1IC01MSkiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTQuMzc5OSAyOTEuMDMxIDk0LjA4ODYgMjkxLjA4OSA5My44MDcye0wyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
        no-repeat 1rem / 1.8rem,
        #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Mud emits these chrome elements without MainLayout's isolated scope. */
@media (max-width: 1279.98px) {
    .mud-layout.page:has(.dashboard-topbar-title > h1) {
        --dashboard-title-row-height: 2.5rem;
        --dashboard-topbar-height: calc(var(--mud-appbar-height) + var(--dashboard-title-row-height));
    }

    .mud-layout.page:has(.dashboard-topbar-title > h1) > .mud-appbar > .mud-toolbar {
        height: var(--dashboard-topbar-height);
        min-height: var(--dashboard-topbar-height);
    }

    .mud-layout.page:has(.dashboard-topbar-title > h1) > .mud-main-content {
        padding-top: var(--dashboard-topbar-height);
    }
}

@media (min-width: 600px) and (max-width: 1279.98px) {
    .mud-layout.page:has(.dashboard-topbar-title > h1) > .mud-drawer.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-docked.mud-drawer-sm {
        top: var(--dashboard-topbar-height);
        height: calc(100% - var(--dashboard-topbar-height));
    }
}

/* MudDrawer renders its own root element, so scoped MainLayout CSS cannot style it. */
.mud-drawer#main-sidebar {
    border-right: 1px solid #e5e7eb;
}