html body{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F7F8E8;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #F7F8E8;
    overflow: auto;
}
.page {
    height: 100vh;          /* fallback */
    height: 100svh;
    padding-top: 10vh;
    padding-bottom: 10vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.main{
    display: flex;
    flex-direction: column;
}
.mobile-top-row {         /* or just flex: 0 0 30%; if parent is stable */
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-content-row {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;   /* center content vertically */
    align-items: center;
}
.mobile-top-row img {
    max-height: 15vh;     /* tweak this */
    max-width: 80%;
    height: auto;
    width: auto;
    object-fit: contain;
}
.admin-content{
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    overflow-y: scroll;
}
.sidebar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar,
.admin-content {
    min-height: 0;
    margin:10px;
}
.admin-cap-layout {
    height: 100%;
    width: 100%;
    min-height: 0;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: auto 1fr;
    
}

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu button next to the logo: phones only. */
.admin-menu-toggle {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .admin-cap-layout .sidebar,
    .admin-menu-toggle .mud-icon-root {
        transition: none !important;
    }
}

/* Admin on phones/tablets. One spacing unit: 12px for the page edge, the gap
   between header/menu/content and the content padding; 8px between blocks. */
@media (max-width: 768px) {
    .page:has(.admin-cap-layout) {
        padding: 12px !important;
        height: auto;
    }
    .admin-cap-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        height: auto;
    }
    .admin-spacer {
        display: none;
    }
    /* Logo centred, menu button on the right */
    .logo-area {
        position: relative;
        justify-content: center;
        min-height: 44px;
    }
    .logo-area img {
        max-height: 40px !important;
    }
    .admin-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: 1px solid #C0D100;
        border-radius: 8px;
        background-color: white;
        color: #424242;
        cursor: pointer;
    }
    /* Menu: a dropdown panel with full-width buttons. Collapsed (not display:none)
       so opening/closing can slide and fade; its 12px top margin only exists
       while open, so a closed menu leaves no gap. */
    .admin-cap-layout .sidebar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 0 12px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        border-radius: 8px;
        background-color: white;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease,
                    opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .admin-cap-layout .sidebar.open {
        margin-top: 12px;
        padding: 12px;
        max-height: 240px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease,
                    opacity 0.2s ease, transform 0.25s ease, visibility 0s;
    }
    /* Menu icon turns as it switches between menu and close */
    .admin-menu-toggle .mud-icon-root {
        transition: transform 0.25s ease;
    }
    .admin-menu-toggle.open .mud-icon-root {
        transform: rotate(90deg);
    }
    .admin-cap-layout .nav-button {
        width: 100%;
        margin: 0;
    }
    .admin-content {
        margin: 12px 0 0;
        padding: 12px;
        overflow: visible;
    }
    /* Tighter, even gutters inside the content (MudGrid defaults to 24px) */
    .admin-content .mud-grid {
        margin: -4px !important;
        width: calc(100% + 8px) !important;
    }
    .admin-content .mud-grid > .mud-grid-item {
        padding: 4px !important;
    }
    .admin-content .cap-point-header {
        margin-bottom: 0;
    }
    .admin-content .cap-point-card {
        margin-bottom: 0;
        min-height: 0;
    }
    .admin-content h5 {
        font-size: 1.15rem;
    }
}

/* Segmented switch (Dag/Week/Maand, photo filter): same look as the admin sidebar's .nav-button. */
/* Extra class in the selector: MudBlazor's stylesheet loads after this one and
   would otherwise win with its own (purple) outline colour. */
.timeframe-toggle.mud-toggle-group.mud-toggle-group-outlined {
    border: 1px solid #C0D100;
    border-color: #C0D100;
    border-radius: 8px;
}
.timeframe-toggle .mud-toggle-item-delimiter {
    border-color: #C0D100 !important;
}
.timeframe-toggle.mud-toggle-group .mud-toggle-item,
.timeframe-toggle.mud-toggle-group .mud-toggle-item .mud-button-label {
    color: #424242;
}
/* No colour fade: it showed a grey flash when the switch is re-enabled after loading. */
.timeframe-toggle.mud-toggle-group .mud-toggle-item {
    transition: none;
}
/* ".mud-toggle-group" in the selectors: the selected option is a MudBlazor
   filled-primary button, whose own (purple) hover colour would win otherwise. */
.timeframe-toggle.mud-toggle-group .mud-toggle-item:hover {
    background-color: #c0d100d2;
}
/* Background only on the button itself (not the label), so no ring can appear
   when MudBlazor changes the button's background (hover, disabled). */
.timeframe-toggle.mud-toggle-group .mud-toggle-item.timeframe-toggle-selected {
    background-color: #C0D100;
    color: white;
}
.timeframe-toggle.mud-toggle-group .mud-toggle-item.timeframe-toggle-selected .mud-button-label {
    background-color: transparent;
    color: white;
}
/* While the switch is disabled (e.g. the graph is loading) the selected option
   keeps its look instead of MudBlazor's grey disabled background (which
   MudBlazor sets with !important, hence the !important here). */
.timeframe-toggle.mud-toggle-group .mud-toggle-item.timeframe-toggle-selected:disabled {
    background-color: #C0D100 !important;
    color: white;
}
/* The selected option looks the same when hovered (no hover effect). */
.timeframe-toggle.mud-toggle-group .mud-toggle-item.timeframe-toggle-selected:hover {
    background-color: #C0D100;
}

h1:focus {
    outline: none;
}
.nav-button{
    background-color: transparent;
    border: 1px solid #C0D100;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 0.25rem 0.125rem;
    cursor: pointer;
    width: 100%;
}
.nav-button:hover {
    background-color: #c0d100d2;
}
.nav-button:active {
    background-color: #C0D100;
}
.nav-button.active{
    background-color: #C0D100;
    color: white;
}
.nav-button:disabled {
    background-color: #b5b5b5;
    cursor: not-allowed;
}

.main-button {
    background-color: #C0D100;
    border: #C0D100;
    border-radius: 8px;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 0.25rem 0.125rem;
    cursor: pointer;
}
.main-button:hover {
    background-color: #c0d100d2;
    border: #C0D100;
}

.main-button:active {
    background-color: #C0D100;
    border: #C0D100;
}
.main-button:disabled {
    background-color: #f2f2f2;
    border: 1px solid #e5e5e5;
    color: #b5b5b5;
    cursor: not-allowed;
}
/* Busy (request running): stays green with a spinner instead of looking disabled. */
.main-button.is-loading:disabled {
    background-color: #C0D100;
    border: #C0D100;
    color: white;
    cursor: progress;
}

.secondary-button {
    background-color: #D0D0D0;
    border: 1px solid #D0D0D0;
    border-radius: 8px;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 0.25rem 0.125rem;
    cursor: pointer;
}

.secondary-button:hover {
    background-color: #b4b4b4;
    color: white;
}

.secondary-button:active {
    background-color: #D0D0D0;
    color: white;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #C0D100;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.highlight {
    background-color: #ff0101;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control:focus {
    border-color: #C0D100; /* your border color */
    box-shadow: 0 0 0 0.2rem rgba(192, 209, 0, 0.25); /* your glow */
    outline: none;
}

.form-control {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card {
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 1rem;
    background-color: white;
    width: min(80%, 400px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.cap-point-card{
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0;
}
.cap-point-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cap-details-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Status cards that stretch to their grid cell (equal heights in a row). */
.cap-details-card-fill {
    width: 100%;
}
@media (max-width: 768px) {
    .cap-details-card {
        padding: 12px 6px;
        gap: 6px;
        text-align: center;
    }
    .cap-details-card h4 {
        font-size: 1rem;
        line-height: 1.25;
    }
}
.graph-card {
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    height: 450px;
}
/* Cards beside a graph: stacked next to it on wide screens, side by side below it on phones. */
.detail-side-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
@media (max-width: 959.98px) {
    /* Informative cards above the graph (they follow it in the markup) */
    .detail-graph-item {
        order: 1;
    }
    .detail-after-graph {
        order: 2;
    }
    .graph-card {
        height: auto;
        padding: 0.5rem;
    }
    .detail-side-cards {
        flex-direction: row;
        gap: 8px;
    }
}
h4{
    margin: 0;
}
.dialog-background-blur {
    backdrop-filter: blur(5px);
}

.code-input {
    text-align: center;
    max-width: 2rem;
    height: 3rem;
    padding: 0;
}

.warning {
    background-color: #ff0101;
    border-color: #ff0101;
    color: white;
}

.warning:hover {
    background-color: #fc4646;
    border-color: #fc4646;
}   

.warning:active {
    background-color: #ff0101;
    border-color: #ff0101;
    color: white;
}