/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Login — page-specific only.
   Buttons, form controls and focus rings come from wwwroot/app.css. They were
   duplicated here previously, which is how the sign-in screen drifted away from
   the rest of the app. */

.login-card[b-jrskmzmx4x] {
    border-top: 2px solid var(--brand-navy);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

/* Logo */
.logo-image[b-jrskmzmx4x] {
    filter: drop-shadow(0 2px 4px rgba(16, 26, 45, 0.1));
}

/* ---------------------------------------------------------------------------
   PIN login
   The keypad is the primary input on a front-desk terminal, so it uses the
   brand navy rather than the stray brown this file carried before.
   --------------------------------------------------------------------------- */

.pin-display[b-jrskmzmx4x] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
}

.pin-dot[b-jrskmzmx4x] {
    font-size: 2rem;
    color: var(--brand-navy);
    transition: all 0.1s;
}

.pin-numpad[b-jrskmzmx4x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-numpad .pin-btn[b-jrskmzmx4x] {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.pin-numpad .pin-btn:hover[b-jrskmzmx4x] {
    background: var(--brand-navy-light);
    border-color: var(--brand-navy);
    color: var(--brand-navy);
}

.pin-numpad .pin-btn:active[b-jrskmzmx4x] {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-gold);
}

.pin-numpad .pin-btn.pin-clear[b-jrskmzmx4x] {
    color: var(--danger);
    border-color: var(--danger);
}

.pin-numpad .pin-btn.pin-clear:hover[b-jrskmzmx4x] {
    background: var(--danger-soft);
    color: var(--danger);
}

.pin-numpad .pin-btn.pin-back[b-jrskmzmx4x] {
    color: var(--text-muted);
}

/* Keyboard hint */
.pin-hint kbd[b-jrskmzmx4x] {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

/* Passkey button — a secondary sign-in route, so it reads as an outline action
   rather than competing with the primary submit. */
.btn-passkey[b-jrskmzmx4x],
button.btn-passkey[b-jrskmzmx4x] {
    background-color: transparent !important;
    color: var(--brand-navy) !important;
    border: 1px solid var(--brand-navy) !important;
    font-weight: 500;
    transition: all 0.15s ease !important;
    cursor: pointer;
}

.btn-passkey:hover[b-jrskmzmx4x],
button.btn-passkey:hover[b-jrskmzmx4x] {
    background-color: var(--brand-navy) !important;
    color: var(--brand-gold) !important;
    border-color: var(--brand-navy) !important;
}

.btn-passkey:focus[b-jrskmzmx4x],
.btn-passkey:active[b-jrskmzmx4x],
button.btn-passkey:focus[b-jrskmzmx4x],
button.btn-passkey:active[b-jrskmzmx4x] {
    background-color: var(--brand-navy) !important;
    color: var(--brand-gold) !important;
    border-color: var(--brand-navy-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-navy-rgb), 0.25) !important;
}

.border-secondary-subtle[b-jrskmzmx4x] {
    border-color: var(--border) !important;
}

/* Responsive */
@media (max-width: 576px) {
    .login-card[b-jrskmzmx4x] {
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid var(--border);
    }

    .col-md-6[b-jrskmzmx4x] {
        width: 100%;
    }
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Register — page-specific only.
   Buttons, links and form-control focus come from wwwroot/app.css; they were
   duplicated here previously and are removed so this screen cannot drift. */

.register-card[b-o1nucl14jg] {
    border-top: 2px solid var(--brand-navy);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

/* Logo */
.logo-image[b-o1nucl14jg] {
    filter: drop-shadow(0 2px 4px rgba(16, 26, 45, 0.1));
}

.border-secondary-subtle[b-o1nucl14jg] {
    border-color: var(--border) !important;
}

/* Responsive */
@media (max-width: 576px) {
    .register-card[b-o1nucl14jg] {
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid var(--border);
    }

    .col-md-5[b-o1nucl14jg] {
        width: 100%;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-layout-container[b-ujcpv3wztt] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 1rem;
}

@media (max-width: 576px) {
    .auth-layout-container[b-ujcpv3wztt] {
        padding: 1rem 0.5rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-q5y9a1cljx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-q5y9a1cljx] {
    flex: 1;
}

.sidebar[b-q5y9a1cljx] {
    background-image: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-dark) 70%);
    /* box-shadow rather than a border: the park layout grid on /reservations is
       sized in fixed px against the main content width, so the sidebar must not
       take an extra pixel of layout space. */
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.18), 4px 0 16px rgba(16, 26, 45, 0.06);
    z-index: 2;
}

.top-row[b-q5y9a1cljx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-q5y9a1cljx]  a, .top-row[b-q5y9a1cljx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-q5y9a1cljx]  a:hover, .top-row[b-q5y9a1cljx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-q5y9a1cljx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-q5y9a1cljx] {
        justify-content: space-between;
    }

    .top-row[b-q5y9a1cljx]  a, .top-row[b-q5y9a1cljx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    /* Fixed app shell: the window itself never scrolls; the sidebar stays put
       and only the main content area scrolls internally when it overflows.
       This stops short pages from showing a spurious window scrollbar. */
    .page[b-q5y9a1cljx] {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    main[b-q5y9a1cljx] {
        height: 100vh;
        overflow-y: auto;
    }

    .sidebar[b-q5y9a1cljx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-q5y9a1cljx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-q5y9a1cljx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-q5y9a1cljx], article[b-q5y9a1cljx] {
        padding-left: 0.5rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-q5y9a1cljx] {
    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[b-q5y9a1cljx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-baxy5ehlho] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--brand-navy);
}

.navbar-toggler:checked[b-baxy5ehlho] {
    background-color: var(--brand-navy-dark);
}

/* Brand bar — the product's nameplate, so it gets the gold and a hairline that
   separates it from the navigation without drawing a hard line. */
.top-row[b-baxy5ehlho] {
    min-height: 3.25rem;
    background-color: rgba(0, 0, 0, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--brand-gold);
}

.navbar-brand[b-baxy5ehlho] {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--brand-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bi[b-baxy5ehlho] {
    display: inline-block;
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.6rem;
    vertical-align: middle;
    margin-top: -2px;
    flex: 0 0 auto;
    text-align: center;
    opacity: 0.75;
}

.nav-item[b-baxy5ehlho] {
    font-size: 0.8125rem;
    padding-bottom: 0.1rem;
}

    .nav-item:first-of-type[b-baxy5ehlho] {
        padding-top: 0.4rem;
    }

    .nav-item:last-of-type[b-baxy5ehlho] {
        padding-bottom: 0.4rem;
    }

/* Navigation labels are near-white so they read as text; gold is reserved for
   the active item and the brand, which is what makes the current location
   findable at a glance instead of every row shouting equally. */
.nav-item[b-baxy5ehlho]  .nav-link {
    color: rgba(255, 255, 255, 0.82);
    background: none;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius) var(--radius) 0;
    height: 2.15rem;
    display: flex;
    align-items: center;
    line-height: 1.3;
    width: 100%;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease,
                border-color 0.12s ease;
}

.nav-item[b-baxy5ehlho]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-item[b-baxy5ehlho]  .nav-link:hover .bi {
    opacity: 1;
}

.nav-item[b-baxy5ehlho]  a.active {
    background-color: rgba(255, 255, 255, 0.13);
    border-left-color: var(--brand-gold);
    color: var(--brand-gold);
    font-weight: 600;
}

.nav-item[b-baxy5ehlho]  a.active .bi {
    opacity: 1;
}

/* Section headings inside the sidebar ("Management", "Admin Controls"). */
.nav-section-label[b-baxy5ehlho] {
    display: block;
    padding: 0.55rem 0.75rem 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.nav-section[b-baxy5ehlho] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.4rem;
    padding-top: 0.3rem;
}

.nav-scrollable[b-baxy5ehlho] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-baxy5ehlho] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .navbar-toggler[b-baxy5ehlho] {
        display: none;
    }

    .nav-scrollable[b-baxy5ehlho] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3.25rem);
    }
}

/* The links scroll; the pinned footer below them does not. Holding the overflow
   here on <nav> instead of on .nav-scrollable is what keeps the footer still: a
   margin-top:auto footer sharing the scroll box collapses its auto margin and
   snaps up under the last link whenever the links momentarily overflow — which
   they do on every navigation, while the AuthorizeView sections re-resolve. */
.nav-scrollable > nav[b-baxy5ehlho] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Pinned to the foot of the sidebar so the diagnostics entry sits apart from
   the day-to-day navigation instead of trailing the last admin link. */
.nav-pin-bottom[b-baxy5ehlho] {
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.4rem;
}

.nav-version[b-baxy5ehlho] {
    padding: 0.4rem 1rem;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-duodjg3o9b],
.components-reconnect-repeated-attempt-visible[b-duodjg3o9b],
.components-reconnect-failed-visible[b-duodjg3o9b],
.components-pause-visible[b-duodjg3o9b],
.components-resume-failed-visible[b-duodjg3o9b],
.components-rejoining-animation[b-duodjg3o9b] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-retrying[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-failed[b-duodjg3o9b],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-duodjg3o9b] {
    display: block;
}


#components-reconnect-modal[b-duodjg3o9b] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-duodjg3o9b 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-duodjg3o9b 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-duodjg3o9b 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-duodjg3o9b]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-duodjg3o9b 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-duodjg3o9b {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-duodjg3o9b {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-duodjg3o9b {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-duodjg3o9b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-duodjg3o9b] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-duodjg3o9b] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-duodjg3o9b] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-duodjg3o9b] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-duodjg3o9b] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-duodjg3o9b] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-duodjg3o9b 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-duodjg3o9b] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-duodjg3o9b {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/BusinessSettings.razor.rz.scp.css */
[b-qd6edqxlhn] .card-header h5 {
    margin: 0;
}

[b-qd6edqxlhn] .card-header span {
    margin-right: 0.5rem;
}

/* Form-control borders and focus rings come from wwwroot/app.css; only the
   z-index fix for focused controls inside an input group is page-specific. */
[b-qd6edqxlhn] .input-group .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-navy-rgb), 0.25);
    z-index: 3;
}

[b-qd6edqxlhn] .alert {
    border: 1px solid;
}

@media (max-width: 768px) {
    .d-md-flex[b-qd6edqxlhn] {
        flex-direction: column !important;
    }

    .d-md-flex .btn[b-qd6edqxlhn] {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
/* /Components/Pages/Customers.razor.rz.scp.css */
/* Customers — no page-specific styling needed.

   This file previously repainted every `.badge` on the page gold and overrode
   `.text-muted` to a brown that appeared nowhere else in the app. Both are
   removed: a status badge must read the same here as it does on Payments or the
   dashboard, and shared primitives live in wwwroot/app.css. */
/* /Components/Pages/Home.razor.rz.scp.css */
/* Dashboard — page-specific layout only.
   Shared primitives (.card, .table, .badge, .btn, .progress-bar, .page-header)
   live in wwwroot/app.css and must not be redefined here: Blazor's scoped-CSS
   attribute would make this copy outrank the global rule and the dashboard
   would drift away from the rest of the app. */

/* Accent rules used only by the dashboard alert cards. */
.border-top-danger[b-8ecxxd6ads] {
    border-top: 2px solid var(--danger);
}

/* The three alert lists — ending soon, overdue payments, payment due — each grow
   with the number of matching reservations, and on a busy month they pushed the
   rest of the dashboard below the fold. Bound them and let the overflow scroll
   in place. Each table carries .table-sticky (app.css) so the header stays put
   while the body scrolls — its th background is already opaque, so rows do not
   show through. */
.dashboard-alert-list[b-8ecxxd6ads] {
    max-height: 15rem;
    overflow-y: auto;
}

.border-top-info[b-8ecxxd6ads] {
    border-top: 2px solid var(--info);
}

/* ---------------------------------------------------------------------------
   Stat tiles
   --------------------------------------------------------------------------- */

.stat-card[b-8ecxxd6ads] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Tighter tiles: drop the bottom padding to reduce overall height. */
.stat-card .card-body[b-8ecxxd6ads] {
    padding: 0.75rem 0.875rem 0;
}

/* Clickable drill-down tiles. Only these react to the pointer — a tile that
   does nothing should not look like it will. */
.stat-card-clickable[b-8ecxxd6ads] {
    cursor: pointer;
    position: relative;
}

.stat-card-clickable:hover[b-8ecxxd6ads] {
    border-color: var(--brand-navy-border);
    box-shadow: var(--shadow-md);
}

.stat-card-clickable:focus-visible[b-8ecxxd6ads] {
    outline: 2px solid var(--brand-gold-dark);
    outline-offset: 2px;
}

.stat-card-link[b-8ecxxd6ads] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-navy);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.stat-card-clickable:hover .stat-card-link[b-8ecxxd6ads],
.stat-card-clickable:focus-visible .stat-card-link[b-8ecxxd6ads] {
    opacity: 1;
}

.stat-label[b-8ecxxd6ads] {
    font-size: 0.6875rem;
    color: var(--text-subtle);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value[b-8ecxxd6ads] {
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 0;
}

.stat-value.stat-value-sm[b-8ecxxd6ads] {
    font-size: 1.35rem;
}

/* Icon sits behind the number as a quiet marker, not as decoration competing
   with the value it labels. */
.stat-icon[b-8ecxxd6ads] {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-subtle);
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Occupancy overview
   --------------------------------------------------------------------------- */

.occupancy-chart[b-8ecxxd6ads] {
    padding: 0;
}

/* Tighten the card padding around the occupancy bar to reduce overall height. */
.occupancy-chart-body[b-8ecxxd6ads] {
    padding: 0.75rem 1rem;
}

.stat-box[b-8ecxxd6ads] {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    text-align: center;
}

.stat-number[b-8ecxxd6ads] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.1rem;
}

.stat-text[b-8ecxxd6ads] {
    font-size: 0.6875rem;
    color: var(--text-subtle);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .stat-card[b-8ecxxd6ads] {
        margin-bottom: 1rem;
    }

    .table-responsive[b-8ecxxd6ads] {
        font-size: 0.8125rem;
    }

    .stat-box[b-8ecxxd6ads] {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
}
/* /Components/Pages/Payments.razor.rz.scp.css */
/* Payments — page-specific status badges only.

   The generic `.badge` and `.alert` overrides that lived here duplicated
   wwwroot/app.css and are removed. The badges below stay because they are
   payment/occupancy states this page owns — but they now draw from the same
   muted status family as the reservation badges in app.css, so "paid" here
   reads as the same green as "checked in" on the dashboard instead of the
   brighter, unrelated palette they used before. */

[b-uhxxbnhwlg] .payment-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

[b-uhxxbnhwlg] .selected-row {
    background-color: var(--brand-navy-light) !important;
}

/* ---- Payment state -------------------------------------------------------- */

[b-uhxxbnhwlg] .badge-payment-paid {
    background-color: #52b788;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-payment-partial {
    background-color: #d4a76a;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-payment-pending {
    background-color: #7c8798;
    color: #fff;
}

/* ---- Occupancy state ------------------------------------------------------ */

[b-uhxxbnhwlg] .badge-occupied {
    background-color: #d04a6f;
    border: 1px solid #b03a5b;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-reserved {
    background-color: #d4a76a;
    border: 1px solid #b8894f;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-maintenance {
    background-color: #7c8798;
    border: 1px solid #626c7d;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-available {
    background-color: transparent;
    border: 1px solid #52b788;
    color: #1f8a5b;
}

[b-uhxxbnhwlg] .badge-checked-out {
    background-color: #8b7355;
    border: 1px solid #6f5c44;
    color: #fff;
}

[b-uhxxbnhwlg] .badge-cancelled {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

/* Completed rows recede without disappearing. */
[b-uhxxbnhwlg] tr.row-completed {
    opacity: 0.55;
}

[b-uhxxbnhwlg] tr.row-completed:hover {
    opacity: 0.85;
}
/* /Components/Pages/ReservationCalendar.razor.rz.scp.css */
/* Compact calendar rows so more units fit on a single screen */
.calendar-grid td[b-rruy2s00qd],
.calendar-grid th[b-rruy2s00qd] {
    padding: 0 4px !important;
    line-height: 1.05;
    vertical-align: middle;
}

.calendar-grid tbody td[b-rruy2s00qd] {
    height: 20px;
}

.calendar-grid .badge[b-rruy2s00qd] {
    font-size: 0.6rem;
    padding: 1px 4px;
    font-weight: 600;
}
/* /Components/Pages/Reservations.razor.rz.scp.css */
[b-y50ecv4plv] .map-section-placeholder h5 {
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 0.5rem;
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 0.95rem;
}

[b-y50ecv4plv] .customer-lookup-results {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[b-y50ecv4plv] .customer-result-item {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

[b-y50ecv4plv] .customer-result-item:hover {
    background-color: #e7f3ff !important;
    transform: translateX(4px);
}

[b-y50ecv4plv] .map-section-placeholder h6 {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 1rem;
}

[b-y50ecv4plv] .reservation-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

[b-y50ecv4plv] .reservation-form .form-row {
    margin-bottom: 0.35rem;
}

[b-y50ecv4plv] .form-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    width: 100%;
}

[b-y50ecv4plv] .form-label-col {
    flex: 0 0 35%;
    min-width: 0;
    font-size: 0.85rem;
}

[b-y50ecv4plv] .form-input-col {
    flex: 0 0 65%;
    min-width: 0;
}

[b-y50ecv4plv] .text-muted {
    color: #8b7355 !important;
}

.park-map-container[b-y50ecv4plv] {
    padding: 0;
}

.map-section-placeholder[b-y50ecv4plv] {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 8px;
    min-height: auto;
    display: block;
    font-size: 0.9rem;
}

.park-layout[b-y50ecv4plv] {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.area-box[b-y50ecv4plv] {
    padding: 8px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    min-width: 75px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sewer-area[b-y50ecv4plv] {
    background-color: #d4a574;
    border: 2px solid var(--brand-navy);
    color: #fff;
}

.retention-area[b-y50ecv4plv] {
    background-color: var(--brand-gold);
    border: 2px solid var(--brand-navy);
    color: #fff;
}

.units-row[b-y50ecv4plv] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-grow: 1;
}

.unit-box[b-y50ecv4plv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid var(--brand-navy);
    border-radius: 4px;
    background-color: #e8f0fb;
    font-weight: 600;
    font-size: 14px;
    color: var(--brand-navy);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(var(--brand-navy-rgb), 0.1);
    flex-shrink: 0;
}
.unit-box-h[b-y50ecv4plv] {
    width: 65px;
    height: 55px;
}
.unit-box-hs[b-y50ecv4plv] {
    width: 60px;
    height: 55px;
}
.unit-box-v[b-y50ecv4plv] {
    width: 65px;
    height: 38px;
}
.unit-box[b-y50ecv4plv] {
    will-change: transform;
}

.unit-box:hover[b-y50ecv4plv] {
    background-color: #e0ceb5;
    border-color: var(--brand-navy-dark);
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(var(--brand-navy-rgb), 0.15);
}

.unit-available[b-y50ecv4plv] {
    background-color: #66BB6A;
    border-color: #4CAF50;
}

.unit-available:hover[b-y50ecv4plv] {
    background-color: #4CAF50;
}

.unit-number-circle[b-y50ecv4plv] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: white !important;
}

.unit-reserved[b-y50ecv4plv] {
    background-color: #ffd700;
    border-color: #b8860b;
    color: #333;
}

.unit-reserved:hover[b-y50ecv4plv] {
    background-color: #ffed4e;
}

.unit-occupied[b-y50ecv4plv] {
    background-color: #ff6b6b;
    border-color: #c92a2a;
    color: #fff;
}

.unit-occupied:hover[b-y50ecv4plv] {
    background-color: #ff8787;
}

.unit-maintenance[b-y50ecv4plv] {
    background-color: #868e96;
    border-color: #495057;
    color: #fff;
    opacity: 0.6;
    cursor: not-allowed;
}

.unit-maintenance:hover[b-y50ecv4plv] {
    background-color: #868e96;
    transform: none;
}

.unit-checkout-not-ready[b-y50ecv4plv] {
    background-color: #fd7e14;
    border-color: #c96109;
    color: #fff;
}

.unit-checkout-not-ready:hover[b-y50ecv4plv] {
    background-color: #e8690a;
    transform: scale(1.05);
}

.street-label[b-y50ecv4plv] {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    height: 36px;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    pointer-events: none;
}

.street-label-v[b-y50ecv4plv] {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    width: 36px;
    height: 100%;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    pointer-events: none;
}

.street-label-v span[b-y50ecv4plv] {
    background-color: gray;
    padding: 0 12px;
    position: relative;
    z-index: 1;
    transform: rotate(-90deg);
    white-space: nowrap;
    display: inline-block;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    image-rendering: crisp-edges;
    text-rendering: optimizeSpeed;
}

.street-label-v[b-y50ecv4plv]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px dashed white;
    pointer-events: none;
}

.street-label span[b-y50ecv4plv] {
    background-color: gray;
    padding: 0 12px;
    position: relative;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

.street-label[b-y50ecv4plv]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 2px dashed white;
    pointer-events: none;
}

.maintain-box[b-y50ecv4plv] {
    width: 100px;
    height: 75px;
    text-align: center;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}


.legend-color[b-y50ecv4plv] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.legend-label[b-y50ecv4plv] {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

.legend-item[b-y50ecv4plv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.legend-container[b-y50ecv4plv] {
    width: 240px;
}

.legend-section-title[b-y50ecv4plv] {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.deposit-section[b-y50ecv4plv] {
    background-color: #f0f7ff;
    border-color: #007bff !important;
}

.balance-display[b-y50ecv4plv] {
    background-color: #f8f9fa;
}

.balance-text[b-y50ecv4plv] {
    display: block;
}

.balance-due[b-y50ecv4plv] {
    font-weight: bold;
}

.unit-maintenance-container[b-y50ecv4plv] {
    background-color: #f8f9fa;
}
/* /Components/Pages/Units.razor.rz.scp.css */
/* Units — no page-specific styling needed.

   The `.badge` and `.alert` rules that lived here duplicated wwwroot/app.css.
   Shared primitives belong there so this page cannot drift from the rest of
   the app. */
/* /Components/Shared/LicenseGate.razor.rz.scp.css */
.license-gate-loading[b-tr7acjx84v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.license-expiry-warning[b-tr7acjx84v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-left: 4px solid #ffc107;
    border-radius: 0.375rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.license-lock[b-tr7acjx84v] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem;
}

.license-lock-card[b-tr7acjx84v] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #e9ecef;
    border-top: 4px solid #dc3545;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    padding: 2.5rem 2rem;
}

.license-lock-icon[b-tr7acjx84v] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 2rem;
}

.license-lock-title[b-tr7acjx84v] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #212529;
}

.license-lock-message[b-tr7acjx84v] {
    color: #495057;
    margin-bottom: 1.5rem;
}

.license-lock-hint[b-tr7acjx84v] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
}