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

/* Bootstrap 5.1.3 gives `width: 1%; min-width: 0` only to .form-control and .form-select children of
   an .input-group — .form-floating was not added to that selector until 5.2. Without it a floating
   label's intrinsic input width can exceed the row, and .input-group's flex-wrap:wrap drops the field
   below its own prefix, stranding the "$" on its own line. Backport the 5.2 rule until we upgrade. */
.input-group > .form-floating {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Bank surfaces. These five primitives were each written two or three times across the bank's scoped
   stylesheets — CSS isolation gives every component its own copy, so there was nowhere else for a
   shared look to live. Anything genuinely specific to one surface (its accent tint, its grid) stays
   in that component's own .razor.css. */
.bank-section {
    margin-bottom: 1.5rem;
}

.bank-section__title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-gray-200);
}

.bank-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bank-chips .badge {
    font-weight: 500;
}

.bank-meter {
    height: 6px;
}

/* Width arrives from the caller as a percentage custom property; Bootstrap has no dynamic-width utility. */
.bank-meter .progress-bar {
    width: var(--progress);
}

/* --hero-accent is the one thing each hero sets for itself, so the rooms stay distinguishable.
   Light-on-dark renders over-thick under subpixel AA, and the theme ships Hind Vadodara at 400/500 only. */
.bank-hero-surface {
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(circle at 92% 12%, var(--hero-accent, rgba(var(--bs-success-rgb), 0.3)), transparent 30%),
        linear-gradient(135deg, var(--bs-dark) 0%, var(--bs-secondary) 55%, var(--bs-primary) 100%);
    color: var(--bs-white);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1rem 2.25rem rgba(var(--bs-dark-rgb), 0.2);
}

.bank-hero-surface__label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.bank-hero-surface__amount {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1.05;
    font-weight: 500;
}

.bank-hero-surface__note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}

.bank-hero-surface__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    background: rgba(var(--bs-success-rgb), 0.45);
    color: var(--bs-white);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

/* Bootstrap has no responsive size utility, so btn-sm cannot be applied per-breakpoint from markup.
   These mirror the app's effective .btn-sm above. 767.98 is the exact complement of the md breakpoint,
   so no width falls between the two rules. */
@media (max-width: 767.98px) {
    .bank-hero-surface__actions .btn {
        border-radius: 0.5rem;
        padding: 0.3rem 0.7rem;
    }
}
/* The category tint every bank surface paints its icon in — the cards had grown identical copies of
   these six modifiers, and a new category could reach one and miss the other. */
.bank-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.bank-cat-icon.is-savings {
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
}

.bank-cat-icon.is-locked {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.bank-cat-icon.is-time {
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--bs-info);
}

.bank-cat-icon.is-points {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.bank-cat-icon.is-investing {
    background: rgba(var(--bs-tertiary-rgb), 0.12);
    color: var(--bs-tertiary);
}

.bank-cat-icon.is-spending {
    background: var(--bs-light);
    color: var(--bs-body-color);
}

/* TheMealDB flag PNGs are a rounded rectangle on a transparent square canvas (the flag fills rows 9-52 of 64, with a
   soft shadow fading out below it), so inside a circle they show bands above and below. 1.75 puts the circle's edge
   ~8px inside the opaque rectangle on every side — 1.55 still caught the shadow at the bottom. The parent supplies
   the circle (border-radius: 50%; overflow: hidden). Five recipe components share it. */
.flag-round {
    object-fit: cover;
    transform: scale(1.75);
}

/* Who-voted initials, painted in the member's profile colour (--ring-color, the same property AvatarSelector uses).
   Adjacent avatars overlap into a stack; the white ring keeps each one legible. Shared by the dinner-vote panel and the recipe pages. */
.vote-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ring-color, var(--bs-primary));
    color: var(--bs-white);
    font-size: 0.65rem;
    font-weight: 500;
    box-shadow: 0 0 0 2px var(--bs-white);
}

.vote-avatar + .vote-avatar {
    margin-left: -0.4rem;
}

.vote-avatar--lg {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
    box-shadow: none;
}

/* One dish on one page, whether it came from TheMealDB (/recipes/meal) or the family wrote it down (/recipes/family):
   photo, title and chips up top, ingredients beside the method below. Global rather than scoped so the two pages share one owner. */
.dish {
    padding-bottom: 1rem;
}

.dish__top {
    margin-bottom: 2rem;
}

.dish__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--bs-light);
    box-shadow: 0 1rem 2rem rgba(var(--bs-dark-rgb), 0.15);
}

.dish__photo--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-success-rgb), 0.08);
    color: var(--bs-success);
    font-size: 3rem;
    box-shadow: none;
}

.dish__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The photo's footprint and three text lines while the dish loads, so nothing jumps when it lands. */
.dish__photo--skeleton,
.dish__line {
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-100) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: dish-shimmer 1.4s ease-in-out infinite;
}

.dish__line {
    display: block;
    width: 70%;
    height: 0.9rem;
    margin: 0.6rem 0;
    border-radius: 999px;
}

.dish__line--title {
    width: 85%;
    height: 1.6rem;
}

.dish__line--short {
    width: 45%;
}

.dish__photo-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
    font-size: 2.5rem;
}

.dish__photo-fallback.show {
    display: flex;
}

.dish__source {
    margin-bottom: 0.6rem;
}

.dish__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.dish__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.dish__tag {
    border-color: transparent;
    background: var(--bs-light);
}

.dish__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-gray-600);
    font-size: 0.85rem;
}

.dish__summary {
    max-width: 40rem;
    margin-bottom: 1.25rem;
    color: var(--bs-gray-700);
    line-height: 1.55;
    white-space: pre-wrap;
}

.dish__voters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem 0 1rem;
    color: var(--bs-gray-700);
    font-size: 0.9rem;
}

.dish__voter-avatars {
    display: inline-flex;
    flex: 0 0 auto;
}

.dish__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dish__actions--secondary {
    margin-top: 0.6rem;
}

.dish__ext {
    font-size: 0.7em;
    opacity: 0.7;
}

.dish__body {
    margin-bottom: 2.5rem;
}

.dish__ingredients {
    border: 1px solid var(--bs-gray-200);
    border-radius: 1rem;
    overflow: hidden;
}

.dish__ingredients-head {
    padding: 1rem 1.1rem 0.75rem;
}

.dish__ingredient-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dish__ingredient {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.dish__ingredient-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.dish__ingredient-link:hover .dish__ingredient-name {
    color: var(--bs-primary);
    text-decoration: underline;
}

.dish__ingredient-img {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.2rem;
    border-radius: 0.6rem;
    background: rgba(var(--bs-warning-rgb), 0.08);
    object-fit: contain;
    flex: 0 0 auto;
}

.dish__ingredient-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A family recipe's ingredient is a tick box (cross it off while cooking), not a link. */
.dish__ingredient-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 500;
}

.dish__ingredient-check .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.dish__ingredient-check.is-done .dish__ingredient-name {
    color: var(--bs-gray-500);
    text-decoration: line-through;
}

.dish__ingredient-measure {
    flex: 0 0 auto;
    color: var(--bs-gray-600);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* A bare glyph, not a second button: it acts on one row and should not compete with the row's link. */
.dish__cart {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--bs-gray-500);
    font-size: 0.9rem;
}

.dish__cart:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.dish__cart:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.dish__cart.is-added {
    color: var(--bs-success);
}

/* Steps are a genuine sequence, so the counter earns its place. */
.dish__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.dish__step {
    position: relative;
    padding: 0 0 1rem 2.6rem;
    line-height: 1.55;
    counter-increment: step;
}

.dish__step::before {
    content: counter(step);
    position: absolute;
    top: 0.05rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 0.8rem;
    font-weight: 500;
}

.dish__step.is-done {
    color: var(--bs-gray-500);
}

.dish__step.is-done::before {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.dish__step-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
}

.dish__step-check .form-check-input {
    flex: 0 0 auto;
    margin: 0.25rem 0 0;
}

.dish__step-timer {
    margin-top: 0.5rem;
}

.dish__missing {
    border: 1px solid var(--bs-gray-200);
    border-radius: 1rem;
}

.dish__missing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.85rem;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.45rem;
}

.dish__missing-title {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

@keyframes dish-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dish__photo--skeleton,
    .dish__line {
        animation: none;
    }
}