@import "helper.css";
@import "components/app-loading-progress.css";
@import "components/global.css";
@import "components/button.css";
@import "components/app-bar.css";
@import "components/date-picker.css";
@import "components/dialog.css";
@import "components/table.css";
@import "components/card.css";
@import "components/input.css";
@import "components/nav-menu.css";

/* Dialogs on mobile: "height: 100%" of a fixed element is the layout viewport, which includes the area
   behind the browser's address bar, so the bottom of fullscreen dialogs (and their buttons) was cut off.
   Use the dynamic viewport height instead and let only the content scroll. */
.mud-dialog-container {
    height: 100dvh;
}

.mud-dialog.mud-dialog-fullscreen {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
}

.mud-dialog.mud-dialog-fullscreen .mud-dialog-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mud-dialog.mud-dialog-fullscreen .mud-dialog-actions {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ===== Dark mode =====
   data-theme is set on <html> by theme.js / ThemeService. MudBlazor switches its own --mud-palette-* variables;
   the tokens below cover hardcoded accent colors in component CSS. They are only defined in dark mode and are
   used with the light color as fallback, e.g. color: var(--bk-dark-red, #B91C1C), so light mode stays unchanged. */
:root[data-theme="dark"] {
    --bk-dark-green: #6EE7B7;
    --bk-dark-amber: #FCD34D;
    --bk-dark-red: #FCA5A5;
    --bk-dark-blue: #7DD3FC;
    --bk-dark-indigo: #A5B4FC;
    --bk-dark-violet: #C4B5FD;
    --bk-dark-pink: #F9A8D4;
    /* Heatmaps / activity levels: low activity must stay dim on a dark background */
    --bk-dark-day-0: #334155;
    --bk-dark-heat-1: #065F46;
    --bk-dark-heat-2: #059669;
    --bk-dark-heat-3: #34D399;
    --bk-dark-heat-4: #6EE7B7;
    --bk-dark-heat-mix: #10B981;
}

/* Loading screen before Blazor has started (theme.js has already set data-theme) */
:root[data-theme="dark"] body {
    background: #0B1310;
}

:root[data-theme="dark"] .loading-progress circle {
    stroke: #26352F;
}

:root[data-theme="dark"] .loading-progress circle:last-child {
    stroke: #10B981;
}