/* 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;
}

/* Buttons. The vendor theme is Bootstrap-4-era: .2rem corners on a .25rem/.7rem box, which reads
   boxy and misses a comfortable touch target. These values are the Bank hero's, promoted from a
   one-off to the app-wide default.

   Deliberately global rather than scoped to AppButtonBase: scoped CSS cannot reach the ~130 raw
   <button class="btn"> still in the tree, and a half-rounded app is worse than either end state. */
.btn {
    border-radius: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    padding: 0.6rem 1.1rem;
}

/* The theme's own .btn-sm/.btn-lg live in dark.css, which loads first — at equal specificity the
   .btn rule above would otherwise win and collapse the size scale to one size. */
.btn-lg {
    border-radius: 0.75rem;
    padding: 0.7rem 1.35rem;
}

.btn-sm {
    border-radius: 0.5rem;
    padding: 0.3rem 0.7rem;
}

/* Sizing a group restyles its children through .btn-group-{sm,lg} > .btn, which out-specifies the
   rules above and would leave segmented controls on the old corner. The theme's own inner-corner
   reset carries more specificity still, so the joins stay square and only the outer edge changes. */
.btn-group-lg > .btn {
    border-radius: 0.75rem;
}

.btn-group-sm > .btn {
    border-radius: 0.5rem;
}