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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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: #1b6ec2;
            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");
    }

.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-primary);
/*    border-left-color: var(--bs-primary);
    border-top-color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);*/
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, .bs-tooltip-top .tooltip-arrow:before {
    border-top-color: var(--bs-primary);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before, .bs-tooltip-start .tooltip-arrow:before {
    border-left-color: var(--bs-primary);
}

.tooltip.show {
    opacity: 1;
}

@media (min-width: 769px) {
    .sticky-md-none {
        position: relative !important;
    }
}

/* Radzen conflicted with the menu of spark, the below is a hack to correct it*/
.sidebar-toggle {
    -webkit-appearance: none;
    border: none;
    padding: 0;
    /*margin: 0 1rem -2px 0;*/
    border-right: 0;
    background-color: #28304e;
    color: #000;
}

    .sidebar-toggle:hover {
        color: #479cc8;
        background: #28304e;
        border-radius: 0;
    }

.header {
    background-color: #28304e !important;
    min-height: 3.125rem;
    border-bottom: 0px;
    color: #212529;
    box-shadow: none;
}

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

.rz-chkbox-box.rz-state-active:hover {
    background-color: #334a7f;
}

.rz-chkbox-box.rz-state-active {
    background-color: #334a7f;
    border: 1px solid #dadfe2;
}

/* alter for small windows override so the close button is not hidden by sticky top */
.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    top: auto !important;
}


.rz-scheduler-nav-prev-next .rz-button {
    background-color: var(--bs-primary) !important;
}

.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--rz-scheduler-view-selected-color);
}

/* spark override */
.header {
    margin-bottom: 0 !important;
}

.badge {
    border-radius: .7rem;
    display: inline-block;
    font-size: 80%;
    font-weight: 500;
    line-height: 1;
    padding: 0.45em 0.7em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.badge-unread:before {
    content: "";
    width: 7px;
    height: 7px;
    background: #dc3545;
    border-radius: 50%;
    position: absolute;
    top: 24px;
    left: 6px;
}

/*.sidebar-item .sidebar-link.active::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0a9 \20";
    color: #153d77;
}*/

/* site css */
.gradient-border {
    --borderWidth: 3px;
    border-radius: var(--borderWidth);
    border: 3px solid;
    border-image: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) 1;
}

.gradient-border-equalizer {
    --borderWidth: 3px;
    border-radius: var(--borderWidth);
    border: 3px solid;
    border-color: #e9ecef;
}

#quick-menu {
    padding-top: 1px;
    padding-left: 9px;
    padding-right: 10px;
    padding-bottom: 0px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* radzen overrides*/

.rz-buttonset .rz-button {
    -webkit-appearance: none;
   /* border-radius: 0px;*/
    background-color: #334a7f !important;
    color: #ffffff;
    border: none;
    outline: none;
    line-height: initial;
    font-size: 1.0625rem;
    font-weight: normal;
    box-shadow: none;
    transition: none;
    background-size: auto;
    background-repeat: no-repeat;
}

.rz-splitbutton-menubutton {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: solid 0px #e5613a;
}

.rz-dropdown-item:hover, .rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-dropdown-items li:hover, .rz-autocomplete-items li:hover, .rz-multiselect-items li:hover {
     background-color: #334a7f;
    /* color: #ffffff; */
    border-radius: 0;
    cursor: pointer;
}

.rz-button.rz-secondary.rz-shade-default {
    background-color: var(--bs-dark);
    font-weight: normal;
}

.rz-button.rz-primary.rz-shade-default {
    background-color: var(--bs-primary);
    font-weight: normal;
    color: var(--bs-white);
}

/* remove padding on small screen */
@media (max-width: 480px) {
    .remove-padding-sm {
        padding: 0 !important;
    }
}

/* AutoComplete.razor */
.autocomplete {
    position: relative;
}

    .autocomplete .options {
        position: absolute;
        /* top: 40px; */
        left: 0;
        background: white;
        width: 100%;
        padding: 0px;
        z-index: 10;
        border: 1px solid #ced4da;
        /*border-radius: 0.5rem;*/
        box-shadow: 0 10px 10px 5px rgb(0 0 0 / 10%);
        overflow: auto;
        max-height: 250px;
        cursor: pointer;
    }

    .autocomplete .option {
        display: block;
        padding: 0.5rem;
    }

        .autocomplete .option .option-text {
            padding: 0.25rem 0.5rem;
        }

        .autocomplete .option:hover {
            background: #28304e;
            color: #fff;
        }

        .autocomplete .option.disabled {
            background-color: lightgrey;
            cursor: not-allowed;
        }

            .autocomplete .option.disabled:hover {
                background: lightgrey;
                color: var(--bs-body);
            }

/* Recipe.razor */
/* Small screen width classes */
@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }
}

/* Medium screen width classes */
@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }

    .w-md-auto {
        width: auto !important;
    }
}

/* Large screen width classes */
@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }
}

/* Extra-large screen width classes */
@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }
}

/* Extra-extra-large screen width classes */
@media (min-width: 1400px) {
    .w-xxl-25 {
        width: 25% !important;
    }

    .w-xxl-50 {
        width: 50% !important;
    }

    .w-xxl-75 {
        width: 75% !important;
    }

    .w-xxl-100 {
        width: 100% !important;
    }
}


.recipe-image-container {
    width: 100%;
    height: 250px;
    background-size: cover; /* or 'contain' */
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: .25rem .25rem 0 0;
}

@media screen and (min-width: 768px) {
    .recipe-description {
        min-height: 13rem;
    }
}

a.sidebar-link.active {
    background-color: #e9ecef;
}

a.sidebar-link:hover {
    background-color: #e9ecef !important;
}

/* calendar */

.rz-event-content {
    background: #334a7f
}

.rz-scheduler-nav-prev-next .rz-button, .rz-scheduler-nav-prev-next .rz-paginator-element {
    background-color: #223356;
    color: var(--rz-scheduler-prev-next-button-color);
    padding: var(--rz-scheduler-prev-next-button-padding);
    font-size: var(--rz-scheduler-prev-next-button-font-size);
}

.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active, .rz-scheduler-nav-views .rz-primary.rz-state-active.rz-paginator-element {
    background-color: #223356;
    border-color: #223356;
    color: var(--rz-scheduler-view-selected-color);
}

.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments {
    color: var(--rz-scheduler-event-color);
    background-color: #223356;
}

/* Radzen Notification Overrides - Based on ACTUAL Radzen CSS */
/* Override Radzen CSS Variables */
:root {
    --rz-notification-success-color: #ffffff !important;
    --rz-notification-success-background-color: #198754 !important;
    --rz-notification-success-icon-color: #ffffff !important;
    
    --rz-notification-warning-color: #000000 !important;
    --rz-notification-warning-background-color: #ffc107 !important;
    --rz-notification-warning-icon-color: #000000 !important;
    
    --rz-notification-error-color: #ffffff !important;
    --rz-notification-error-background-color: #dc3545 !important;
    --rz-notification-error-icon-color: #ffffff !important;
    
    --rz-notification-info-color: #000000 !important;
    --rz-notification-info-background-color: #0dcaf0 !important;
    --rz-notification-info-icon-color: #000000 !important;
    
    --rz-notification-border-radius: 0.375rem !important;
    --rz-notification-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Base notification container */
.rz-notification {
    background-color: transparent !important;
}

/* Notification item wrapper */
.rz-notification-item-wrapper {
    background-color: transparent !important;
}

/* Individual notification items */
.rz-notification-item {
    background-color: #28304e !important;
    color: #ffffff !important;
    border: 1px solid #334a7f !important;
    border-radius: var(--rz-notification-border-radius) !important;
    box-shadow: var(--rz-notification-shadow) !important;
    font-family: inherit !important;
}

/* Notification content */
.rz-notification-message {
    color: inherit !important;
}

.rz-notification-title {
    color: inherit !important;
    font-weight: normal !important;
}

/* Notification icon */
.rz-notification-icon {
    color: #479cc8 !important;
}

/* Notification close button */
.rz-notification-close {
    color: #ffffff !important;
    opacity: 0.8;
}

.rz-notification-close:hover {
    color: #479cc8 !important;
    opacity: 1;
}

/* Success notification - clean green styling */
.rz-notification-success .rz-notification-item {
    background-color: var(--rz-notification-success-background-color) !important;
    color: var(--rz-notification-success-color) !important;
    border: 1px solid var(--rz-notification-success-background-color) !important;
    border-radius: var(--rz-notification-border-radius) !important;
    box-shadow: var(--rz-notification-shadow) !important;
}

.rz-notification-success .rz-notification-icon {
    color: var(--rz-notification-success-icon-color) !important;
}

.rz-notification-success .rz-notification-close {
    color: var(--rz-notification-success-color) !important;
}

.rz-notification-success .rz-notification-close:hover {
    color: var(--rz-notification-success-color) !important;
    opacity: 0.7;
}

/* Error notification - clean red styling */
.rz-notification-error .rz-notification-item {
    background-color: var(--rz-notification-error-background-color) !important;
    color: var(--rz-notification-error-color) !important;
    border: 1px solid var(--rz-notification-error-background-color) !important;
    border-radius: var(--rz-notification-border-radius) !important;
    box-shadow: var(--rz-notification-shadow) !important;
}

.rz-notification-error .rz-notification-icon {
    color: var(--rz-notification-error-icon-color) !important;
}

.rz-notification-error .rz-notification-close {
    color: var(--rz-notification-error-color) !important;
}

.rz-notification-error .rz-notification-close:hover {
    color: var(--rz-notification-error-color) !important;
    opacity: 0.7;
}

/* Warning notification - clean yellow styling */
.rz-notification-warn .rz-notification-item {
    background-color: var(--rz-notification-warning-background-color) !important;
    color: var(--rz-notification-warning-color) !important;
    border: 1px solid var(--rz-notification-warning-background-color) !important;
    border-radius: var(--rz-notification-border-radius) !important;
    box-shadow: var(--rz-notification-shadow) !important;
}

.rz-notification-warn .rz-notification-icon {
    color: var(--rz-notification-warning-icon-color) !important;
}

.rz-notification-warn .rz-notification-close {
    color: var(--rz-notification-warning-color) !important;
}

.rz-notification-warn .rz-notification-close:hover {
    color: var(--rz-notification-warning-color) !important;
    opacity: 0.7;
}

/* Info notification - clean cyan styling */
.rz-notification-info .rz-notification-item {
    background-color: var(--rz-notification-info-background-color) !important;
    color: var(--rz-notification-info-color) !important;
    border: 1px solid var(--rz-notification-info-background-color) !important;
    border-radius: var(--rz-notification-border-radius) !important;
    box-shadow: var(--rz-notification-shadow) !important;
}

.rz-notification-info .rz-notification-icon {
    color: var(--rz-notification-info-icon-color) !important;
}

.rz-notification-info .rz-notification-close {
    color: var(--rz-notification-info-color) !important;
}

.rz-notification-info .rz-notification-close:hover {
    color: var(--rz-notification-info-color) !important;
    opacity: 0.7;
}

/* Clean notification styling - no debug CSS */

/* form toggles & checkboxes */
.form-check-label {
    cursor: pointer;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:disabled,
.form-check-input:disabled + .form-check-label {
    cursor: not-allowed;
}

/* QuickGrid styling */
.quickgrid-padded th,
.quickgrid-padded td {
    padding: 0.4rem 0.6rem !important;
}

.quickgrid-pager .page-link {
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
}


/* Brand wordmark: the logo glyph IS the "G" of "Girmanators", so the markup renders the logo
   followed by a literal "G" in this span plus the visible text "irmanators". This class hides the
   letter visually while keeping it in the text and accessibility trees, so extracted page text reads
   "Girmanators" and matches the OAuth consent screen app name.

   Do NOT swap this for Bootstrap's .visually-hidden: that sets position:absolute, which makes
   innerText emit "G\nirmanators" (a line break, not a contiguous name) and reintroduces the
   home-page/consent-screen name mismatch that Google rejected this app for. Verified in-browser:
   this rule yields contiguous "Girmanators" at identical rendered width. */
.brand-hidden-initial {
    display: inline-block;
    width: 0;
    overflow: hidden;
}

/* Scoped CSS cannot reach body, and Bootstrap's modal writes an inline overflow — a class sits in a
   different slot, so the two locks coexist instead of one clearing the other's. */
body.sheet-open {
    overflow: hidden;
}