/* /Components/Cards/ContractCard.razor.rz.scp.css */
.ccard[b-1xl6i3ygzq] {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background-color: var(--surface);
}

/* The status colour bar down the leading edge, matching the MAUI card's StatusColor block. */
.ccard__swatch[b-1xl6i3ygzq] { flex: 0 0 8px; }

.ccard__body[b-1xl6i3ygzq] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    min-width: 0;
}

.ccard__top[b-1xl6i3ygzq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ccard__status[b-1xl6i3ygzq] { color: var(--on-surface-variant); white-space: nowrap; }
.ccard__period[b-1xl6i3ygzq] { color: var(--on-surface-variant); }

.ccard__actions[b-1xl6i3ygzq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ccard__btn[b-1xl6i3ygzq] { padding: 0 16px; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-3lc4t8913b] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--background);
}

.shell__content[b-3lc4t8913b] {
    flex: 1;
    /* A column, so the page below the header can grow into the full height of the screen. */
    display: flex;
    flex-direction: column;
    /* Leave room for the fixed bottom tab bar, plus the iOS home indicator inset. */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Every signed-in page is a PageHeader followed by one root element. Growing that root is what
   lets a page - and the floating + button at its foot - reach the bottom of the screen, as the
   mobile pages do. Without it each page stopped wherever its content did, which on a tall monitor
   left the + button stranded mid-screen. One rule here instead of one per page. */
.shell__content[b-3lc4t8913b]  > .page-header + * {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .shell[b-3lc4t8913b] {
        flex-direction: row;
    }

    .shell__content[b-3lc4t8913b] {
        padding-bottom: 0;
        /* Clear the fixed side rail. */
        margin-left: 15rem;
        min-width: 0;
    }
}
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
.onboarding-shell[b-7iw479jl93] {
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    background-color: var(--background);
}

.onboarding-shell__panel[b-7iw479jl93] { width: 100%; max-width: 48rem; }
/* /Components/Layout/SignedOutLayout.razor.rz.scp.css */
.signed-out[b-8lruczfvdd] {
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px 16px;
    background-color: var(--background);
}

.signed-out__panel[b-8lruczfvdd] {
    width: 100%;
    max-width: 26rem;
}

@media (min-width: 768px) {
    .signed-out[b-8lruczfvdd] {
        align-items: center;
    }
}
/* /Components/Pages/Balance.razor.rz.scp.css */
.balance[b-bugtgkfwyq] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.balance__summary[b-bugtgkfwyq] { display: flex; flex-direction: column; gap: 4px; }
.balance__summary h2[b-bugtgkfwyq] { margin: 0; }
.balance__muted[b-bugtgkfwyq] { margin: 0; color: var(--on-surface-variant); }
.balance__total[b-bugtgkfwyq] { margin: 8px 0; }
.balance__actions[b-bugtgkfwyq] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.balance__list[b-bugtgkfwyq] {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-col-min)), 1fr));
    column-gap: 24px;
    align-content: start;
}

.balance__row[b-bugtgkfwyq] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 14px 4px; border: 0; border-bottom: 1px solid var(--outline-variant);
    background: transparent; color: var(--on-surface); text-align: left; cursor: pointer;
}

.balance__row:hover[b-bugtgkfwyq] { background-color: var(--surface-variant); }
.balance__row-main[b-bugtgkfwyq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.balance__row-side[b-bugtgkfwyq] { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dash[b-lpij6ywyav] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

/* Verification prompt. Tertiary container matches the mobile banner, which uses the same token to
   read as "attention needed" without the alarm of an error colour. */
.dash__banner[b-lpij6ywyav] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
    text-align: left;
    cursor: pointer;
}

.dash__banner:hover[b-lpij6ywyav] { filter: brightness(1.05); }

.dash__grid[b-lpij6ywyav] {
    display: grid;
    /* Single column on a phone, as on mobile; two or four across as width allows. */
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 600px) { .dash__grid[b-lpij6ywyav] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dash__grid[b-lpij6ywyav] { grid-template-columns: repeat(4, 1fr); } }

.dash__card[b-lpij6ywyav] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background-color: var(--surface);
    color: var(--on-surface);
    text-align: left;
}

.dash__card--action[b-lpij6ywyav] { cursor: pointer; }
.dash__card--action:hover[b-lpij6ywyav] { border-color: var(--primary); }

.dash__label[b-lpij6ywyav] { color: var(--on-surface-variant); }
.dash__value[b-lpij6ywyav] { color: var(--on-surface); }
.dash__link[b-lpij6ywyav] { color: var(--primary); }

/* Skeleton while the queries are in flight, matching where SfShimmer sits on mobile. */
.dash__card--loading[b-lpij6ywyav] {
    min-height: 104px;
    border-color: transparent;
    background: linear-gradient(90deg, var(--surface-variant) 25%, var(--surface-container-high) 37%, var(--surface-variant) 63%);
    background-size: 400% 100%;
    animation: dash-shimmer-b-lpij6ywyav 1.4s ease infinite;
}

@keyframes dash-shimmer-b-lpij6ywyav { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .dash__card--loading[b-lpij6ywyav] { animation: none; }
}

.dash__more[b-lpij6ywyav] { align-self: flex-start; }
/* /Components/Pages/DashboardDetails.razor.rz.scp.css */
.charts[b-a5spy5imqj] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.charts__card[b-a5spy5imqj] {
    padding: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background-color: var(--surface);
    /* A chart that cannot shrink forces the page to scroll sideways on a phone. */
    min-width: 0;
    overflow-x: auto;
}

.charts__heading[b-a5spy5imqj] { margin: 0 0 12px; color: var(--on-surface); }
.charts__note[b-a5spy5imqj] { margin: 0; color: var(--on-surface-variant); }

.charts__card--loading[b-a5spy5imqj] {
    min-height: 320px;
    border-color: transparent;
    background: linear-gradient(90deg, var(--surface-variant) 25%, var(--surface-container-high) 37%, var(--surface-variant) 63%);
    background-size: 400% 100%;
    animation: charts-shimmer-b-a5spy5imqj 1.4s ease infinite;
}

@keyframes charts-shimmer-b-a5spy5imqj { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) { .charts__card--loading[b-a5spy5imqj] { animation: none; } }

/* Two across once there is room, so the column and pie can be compared side by side. */
@media (min-width: 1000px) {
    .charts[b-a5spy5imqj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .charts__card:last-child[b-a5spy5imqj] { grid-column: 1 / -1; }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.auth[b-r0g84hvo1q] { display: flex; flex-direction: column; gap: 24px; }

.auth__header[b-r0g84hvo1q] { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth__logo[b-r0g84hvo1q] { width: 72px; height: 72px; }
.auth__subtitle[b-r0g84hvo1q] { color: var(--on-surface-variant); }

/* No gap here on purpose: field spacing is owned by the --field-gap rule in
   syncfusion-overrides.css, so forms do not each invent their own. */
.auth__form[b-r0g84hvo1q] { display: flex; flex-direction: column; }
.auth__error[b-r0g84hvo1q] { color: var(--error); min-height: 1rem; }

.auth__forgot[b-r0g84hvo1q] { align-self: flex-end; height: auto; padding: 8px 0; }
.auth__submit[b-r0g84hvo1q] { margin-top: 12px; width: 100%; }

.auth__footer[b-r0g84hvo1q] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth__version[b-r0g84hvo1q] { color: var(--on-surface-variant); margin-top: 16px; }

/* Terms acceptance row */
.auth__terms[b-r0g84hvo1q] { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.auth__terms input[b-r0g84hvo1q] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--primary); }

/* Inline link rendered as a button so it runs the shared ViewModel command rather than
   navigating on its own. */
.auth__link[b-r0g84hvo1q] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
/* Full-viewport carousel. Mobile shows this as the whole screen, so the web version fills the
   window rather than sitting in a narrow column. */
.boarding[b-0m9cnfgl70] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 24px 0 32px;
    outline: none;          /* focus is shown on the slide content, not the whole region */
}

.boarding__viewport[b-0m9cnfgl70] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;       /* clips the off-screen slides */
}

.boarding__track[b-0m9cnfgl70] {
    display: flex;
    width: 100%;
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .boarding__track[b-0m9cnfgl70] { transition: none; }
}

.boarding__slide[b-0m9cnfgl70] {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 32px;
    text-align: center;
    /* Stops a partially visible neighbour from being dragged/selected mid-swipe. */
    user-select: none;
}

/* Reserves the animation's space so the text does not jump when a Lottie loads - or shift
   permanently if one is missing. */
.boarding__art[b-0m9cnfgl70] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.boarding__title[b-0m9cnfgl70] { margin: 0; max-width: 32rem; }
.boarding__body[b-0m9cnfgl70] { margin: 0; max-width: 36rem; color: var(--on-surface-variant); }

/* --- Arrows --- */
/* Hidden below 768px, where the pointer-drag gesture is the natural interaction and the arrows
   would only crowd the slide. */
.boarding__arrow[b-0m9cnfgl70] {
    display: none;
    position: absolute;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--outline-variant);
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--primary);
    cursor: pointer;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.boarding__arrow:hover:not(:disabled)[b-0m9cnfgl70] { background-color: var(--surface-variant); }
.boarding__arrow:focus-visible[b-0m9cnfgl70] { outline: 2px solid var(--primary); outline-offset: 2px; }

.boarding__arrow:disabled[b-0m9cnfgl70] {
    opacity: 0.35;
    cursor: default;
}

.boarding__arrow--prev[b-0m9cnfgl70] { left: 16px; }
.boarding__arrow--next[b-0m9cnfgl70] { right: 16px; }

@media (min-width: 768px) {
    .boarding__arrow[b-0m9cnfgl70] { display: flex; }
    .boarding__slide[b-0m9cnfgl70] { padding: 0 96px; }
}

/* --- Footer --- */
.boarding__footer[b-0m9cnfgl70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
}

.boarding__dots[b-0m9cnfgl70] { display: flex; gap: 8px; }

.boarding__dot[b-0m9cnfgl70] {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--outline-variant);
    cursor: pointer;
    transition: background-color 150ms ease, width 150ms ease;
}

.boarding__dot--active[b-0m9cnfgl70] { width: 24px; border-radius: 4px; background-color: var(--tertiary); }
.boarding__dot:focus-visible[b-0m9cnfgl70] { outline: 2px solid var(--primary); outline-offset: 2px; }

.boarding__actions[b-0m9cnfgl70] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 28rem;
}

/* Kept in the layout even on the last slide (rendered blank) so the primary button does not
   jump sideways when Skip disappears. */
.boarding__skip[b-0m9cnfgl70] { flex: 0 0 6rem; visibility: visible; }
.boarding__start[b-0m9cnfgl70] { flex: 1; }
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile[b-16kyhj93an] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

/* Wide screens: who you are on the left, what you can do on the right, rather than one column of
   rows each stretched across the monitor. */
@media (min-width: 1100px) {
    .profile[b-16kyhj93an] {
        display: grid;
        grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        align-items: start;
    }

    .profile__head[b-16kyhj93an] { grid-column: 1; grid-row: 1; }
    .profile__section[b-16kyhj93an] { grid-column: 1; grid-row: 2; }
    .profile__menu[b-16kyhj93an] { grid-column: 2; grid-row: 1 / span 2; }
}

.profile__head[b-16kyhj93an] { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.profile__avatar[b-16kyhj93an] {
    width: 104px; height: 104px; padding: 0;
    border: 2px solid var(--outline-variant); border-radius: 50%;
    overflow: hidden; background: transparent; cursor: pointer;
}

.profile__avatar img[b-16kyhj93an] { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile__email[b-16kyhj93an] { margin: 0; color: var(--on-surface-variant); }
.profile__unverified[b-16kyhj93an] { margin: 4px 0 0; color: var(--error); }

.profile__section[b-16kyhj93an] { display: flex; flex-direction: column; gap: 12px; }
.profile__row-head[b-16kyhj93an] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile__row-head h3[b-16kyhj93an] { margin: 0; }

/* .profile__menu* live in components.css: EditProfile uses them too, and scoped CSS
   does not cross components. */
/* /Components/Pages/Properties.razor.rz.scp.css */
.props[b-8e7j07wn89] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.props__banner[b-8e7j07wn89] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
    text-align: left;
    cursor: pointer;
}

.props__grid[b-8e7j07wn89] { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 700px) { .props__grid[b-8e7j07wn89] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .props__grid[b-8e7j07wn89] { grid-template-columns: repeat(3, 1fr); } }

.props__card[b-8e7j07wn89] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background-color: var(--surface);
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.props__card:hover[b-8e7j07wn89] { border-color: var(--primary); }
.props__card:focus-visible[b-8e7j07wn89] { outline: 2px solid var(--primary); outline-offset: 2px; }

.props__name[b-8e7j07wn89] { margin: 0; }
.props__address[b-8e7j07wn89] { color: var(--on-surface-variant); }

/* Status chip. Colours mirror the per-status treatment PropertyCard uses on mobile. */
.props__status[b-8e7j07wn89] {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    background-color: var(--surface-variant);
    color: var(--on-surface-variant);
}

.props__status--approved[b-8e7j07wn89] { background-color: var(--secondary-container); color: var(--on-secondary-container); }
.props__status--rejected[b-8e7j07wn89] { background-color: var(--error-container); color: var(--on-error-container); }
.props__status--submitted[b-8e7j07wn89] { background-color: var(--tertiary-container); color: var(--on-tertiary-container); }

.props__card--loading[b-8e7j07wn89] {
    min-height: 108px;
    border-color: transparent;
    background: linear-gradient(90deg, var(--surface-variant) 25%, var(--surface-container-high) 37%, var(--surface-variant) 63%);
    background-size: 400% 100%;
    animation: props-shimmer-b-8e7j07wn89 1.4s ease infinite;
}

@keyframes props-shimmer-b-8e7j07wn89 { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .props__card--loading[b-8e7j07wn89] { animation: none; } }
/* /Components/Pages/PropertyDetail.razor.rz.scp.css */
.prop[b-jtm1otwm49] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.prop__banner[b-jtm1otwm49] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

.prop__banner--rejected[b-jtm1otwm49] { background-color: var(--error-container); color: var(--on-error-container); }
.prop__banner-text[b-jtm1otwm49] { margin: 0; }

.prop__section[b-jtm1otwm49] { display: flex; flex-direction: column; }
.prop__heading[b-jtm1otwm49] { margin: 0 0 4px; }
.prop__hint[b-jtm1otwm49] { margin: 0; color: var(--on-surface-variant); }

.prop__steps[b-jtm1otwm49], .prop__list[b-jtm1otwm49] { list-style: none; margin: 8px 0 0; padding: 0; }

.prop__step-btn[b-jtm1otwm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.prop__step-btn:hover:not(:disabled)[b-jtm1otwm49] { background-color: var(--surface-variant); }
.prop__step-btn:disabled[b-jtm1otwm49] { color: var(--on-surface-variant); cursor: not-allowed; opacity: 0.6; }

.prop__step-state[b-jtm1otwm49] { color: var(--on-surface-variant); }
.prop__step-btn--completed .prop__step-state[b-jtm1otwm49] { color: var(--secondary); }

.prop__list-item[b-jtm1otwm49] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--outline-variant);
}

.prop__actions[b-jtm1otwm49] { display: flex; flex-wrap: wrap; gap: 12px; }

/* Address block. The hint button sits directly under the alias field, so it loses the button's
   default horizontal padding to line up with the field's text. */
.prop__hint-btn[b-jtm1otwm49] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding-inline: 0;
}

.prop__address[b-jtm1otwm49] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    min-height: 30px;   /* holds its space before an address is chosen, so the Save button
                           does not jump when FullAddress is first set */
}

.prop__save[b-jtm1otwm49] { margin-top: 16px; align-self: flex-start; }

/* Tab strip. Routes, not in-page state, so these are real links - browser back moves between
   tabs and each one can be bookmarked. */
.prop__tabs[b-jtm1otwm49] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--outline-variant);
    overflow-x: auto;          /* four tabs do not fit a narrow phone viewport */
    scrollbar-width: none;
}

.prop__tabs[b-jtm1otwm49]::-webkit-scrollbar { display: none; }

.prop__tab[b-jtm1otwm49] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    color: var(--on-surface-variant);
    text-decoration: none;
    white-space: nowrap;
}

.prop__tab:hover[b-jtm1otwm49] { background-color: var(--surface-variant); }

.prop__tab--active[b-jtm1otwm49] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Grows to the bottom of the screen, so the + button and empty state sit where mobile puts them. */
.prop__panel[b-jtm1otwm49] { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; }

/* Placement only - size, radius and colour come from .btn-floating, which is the port of the
   FloatingButton style. Sticky rather than fixed so it stays inside the tab panel, matching the
   AbsoluteLayout bounds mobile gives it. */
.prop__fab[b-jtm1otwm49] {
    position: sticky;
    bottom: 16px;
    align-self: flex-end;
    /* auto rather than a fixed gap: pushes the button to the foot of the panel when the list is
       short, while sticky keeps it on screen when the list is long. */
    margin-top: auto;
}

.prop__verify[b-jtm1otwm49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    text-align: center;
}

.prop__verify-title[b-jtm1otwm49] { margin: 0; }

.prop__delete[b-jtm1otwm49] { align-self: flex-start; }

/* Card list, as opposed to .prop__list's plain rows. */
.prop__cards[b-jtm1otwm49] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-col-min)), 1fr));
    align-content: start;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
}

/* Fix Request rows. Mirrors TicketRowView: an accent stripe, the number, the title and status. */
.prop__ticket[b-jtm1otwm49] {
    display: flex;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    background-color: var(--surface);
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.prop__ticket:hover[b-jtm1otwm49] { background-color: var(--surface-variant); }
.prop__ticket-accent[b-jtm1otwm49] { flex: 0 0 8px; background-color: var(--primary-container); }
.prop__ticket-body[b-jtm1otwm49] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 0; }
/* /Components/Pages/Register.razor.rz.scp.css */
.auth[b-1c3msx1447] { display: flex; flex-direction: column; gap: 24px; }

.auth__header[b-1c3msx1447] { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth__logo[b-1c3msx1447] { width: 72px; height: 72px; }
.auth__subtitle[b-1c3msx1447] { color: var(--on-surface-variant); }

/* No gap here on purpose: field spacing is owned by the --field-gap rule in
   syncfusion-overrides.css, so forms do not each invent their own. */
.auth__form[b-1c3msx1447] { display: flex; flex-direction: column; }
.auth__error[b-1c3msx1447] { color: var(--error); min-height: 1rem; }

.auth__forgot[b-1c3msx1447] { align-self: flex-end; height: auto; padding: 8px 0; }
.auth__submit[b-1c3msx1447] { margin-top: 12px; width: 100%; }

.auth__footer[b-1c3msx1447] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth__version[b-1c3msx1447] { color: var(--on-surface-variant); margin-top: 16px; }

/* Terms acceptance row */
.auth__terms[b-1c3msx1447] { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.auth__terms input[b-1c3msx1447] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--primary); }

/* Inline link rendered as a button so it runs the shared ViewModel command rather than
   navigating on its own. */
.auth__link[b-1c3msx1447] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/RegisterConfirm.razor.rz.scp.css */
.auth[b-sxkd4w6sa9] { display: flex; flex-direction: column; gap: 24px; }

.auth__header[b-sxkd4w6sa9] { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth__logo[b-sxkd4w6sa9] { width: 72px; height: 72px; }
.auth__subtitle[b-sxkd4w6sa9] { color: var(--on-surface-variant); }

/* No gap here on purpose: field spacing is owned by the --field-gap rule in
   syncfusion-overrides.css, so forms do not each invent their own. */
.auth__form[b-sxkd4w6sa9] { display: flex; flex-direction: column; }
.auth__error[b-sxkd4w6sa9] { color: var(--error); min-height: 1rem; }

.auth__forgot[b-sxkd4w6sa9] { align-self: flex-end; height: auto; padding: 8px 0; }
.auth__submit[b-sxkd4w6sa9] { margin-top: 12px; width: 100%; }

.auth__footer[b-sxkd4w6sa9] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth__version[b-sxkd4w6sa9] { color: var(--on-surface-variant); margin-top: 16px; }

/* Terms acceptance row */
.auth__terms[b-sxkd4w6sa9] { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.auth__terms input[b-sxkd4w6sa9] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--primary); }

/* Inline link rendered as a button so it runs the shared ViewModel command rather than
   navigating on its own. */
.auth__link[b-sxkd4w6sa9] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
.auth[b-y7bu7m9ysr] { display: flex; flex-direction: column; gap: 24px; }

.auth__header[b-y7bu7m9ysr] { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth__logo[b-y7bu7m9ysr] { width: 72px; height: 72px; }
.auth__subtitle[b-y7bu7m9ysr] { color: var(--on-surface-variant); }

/* No gap here on purpose: field spacing is owned by the --field-gap rule in
   syncfusion-overrides.css, so forms do not each invent their own. */
.auth__form[b-y7bu7m9ysr] { display: flex; flex-direction: column; }
.auth__error[b-y7bu7m9ysr] { color: var(--error); min-height: 1rem; }

.auth__forgot[b-y7bu7m9ysr] { align-self: flex-end; height: auto; padding: 8px 0; }
.auth__submit[b-y7bu7m9ysr] { margin-top: 12px; width: 100%; }

.auth__footer[b-y7bu7m9ysr] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth__version[b-y7bu7m9ysr] { color: var(--on-surface-variant); margin-top: 16px; }

/* Terms acceptance row */
.auth__terms[b-y7bu7m9ysr] { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.auth__terms input[b-y7bu7m9ysr] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--primary); }

/* Inline link rendered as a button so it runs the shared ViewModel command rather than
   navigating on its own. */
.auth__link[b-y7bu7m9ysr] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/Start.razor.rz.scp.css */
.start[b-qdyz8zx9qn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 60dvh;
}

.start__logo[b-qdyz8zx9qn] { width: 96px; height: 96px; }

.start__spinner[b-qdyz8zx9qn] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: start-spin-b-qdyz8zx9qn 900ms linear infinite;
}

.start__text[b-qdyz8zx9qn] { color: var(--on-surface-variant); }

@keyframes start-spin-b-qdyz8zx9qn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .start__spinner[b-qdyz8zx9qn] { animation-duration: 3s; }
}
/* /Components/Pages/TicketMessages.razor.rz.scp.css */
.chat[b-n6wb80xiye] { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

.chat__list[b-n6wb80xiye] { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }

.chat__item[b-n6wb80xiye] { display: flex; }

/* The user's own messages sit on the trailing edge, the same side SfChat puts them on. */
.chat__item--mine[b-n6wb80xiye] { justify-content: flex-end; }

.chat__bubble[b-n6wb80xiye] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Capped in absolute terms too: 78% of a monitor-wide thread makes lines too long to read. */
    max-width: min(78%, 40rem);
    padding: 10px 14px;
    border-radius: 16px;
    background-color: var(--surface-variant);
    color: var(--on-surface-variant);
}

.chat__item--mine .chat__bubble[b-n6wb80xiye] {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

.chat__author[b-n6wb80xiye] { font-weight: var(--weight-medium); }

/* Preserves the line breaks a tenant typed, without letting a long unbroken string
   stretch the bubble past its max-width. */
.chat__text[b-n6wb80xiye] { white-space: pre-wrap; overflow-wrap: anywhere; }

.chat__time[b-n6wb80xiye] { align-self: flex-end; opacity: 0.75; }

.chat__compose[b-n6wb80xiye] { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0; margin-top: auto; padding-block: 8px; background-color: var(--surface); }

.chat__input[b-n6wb80xiye] { flex: 1 1 auto; }
/* /Components/Pages/Vendors.razor.rz.scp.css */
.vendors[b-n62nxythxj] { display: flex; flex-direction: column; padding: 16px; }
.vendors__list[b-n62nxythxj] {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-col-min)), 1fr));
    column-gap: 24px;
    align-content: start;
}

.vendors__row[b-n62nxythxj] { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--outline-variant); }

.vendors__open[b-n62nxythxj] {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 14px 4px; border: 0; background: transparent; color: var(--on-surface);
    text-align: left; cursor: pointer;
}

.vendors__open:hover[b-n62nxythxj] { background-color: var(--surface-variant); }
.vendors__sub[b-n62nxythxj] { color: var(--on-surface-variant); }

.vendors__delete[b-n62nxythxj] { flex: 0 0 auto; padding: 8px; border: 0; background: transparent; color: var(--error); cursor: pointer; }

.vendors__fab[b-n62nxythxj] { position: sticky; bottom: 16px; align-self: flex-end; margin-top: auto; }
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-7k5msmn44s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    /* Centres the empty state in the space left over once a page fills the screen. In a parent
       that is not a flex column this resolves to 0 and changes nothing. */
    margin-block: auto;
}

.empty-state__title[b-7k5msmn44s] { margin: 0; max-width: 28rem; color: var(--on-surface-variant); }
.empty-state__actions[b-7k5msmn44s] { margin-top: 8px; }
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header[b-o1wz7ptfpz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 0;
}

.page-header__back[b-o1wz7ptfpz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--on-background);
    cursor: pointer;
}

.page-header__back:hover[b-o1wz7ptfpz] { background-color: var(--surface-variant); }

.page-header__title[b-o1wz7ptfpz] { margin: 0; flex: 1; }
.page-header__actions[b-o1wz7ptfpz] { display: flex; gap: 4px; }
/* /Components/Shared/TabBar.razor.rz.scp.css */
/* Mobile: fixed bottom bar, matching the MAUI Shell tab bar (background Primary,
   foreground OnPrimary, per the Shell style in Styles.xaml). */
.tabs[b-3vvznzd58a] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--primary);
}

.tabs__item[b-3vvznzd58a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    /* Full strength, no opacity. Dimming inactive items to 0.72 blended the label toward the bar
       colour and dropped it under the 4.5:1 contrast minimum. Active state is carried by the
       outlined-to-filled glyph swap - the same affordance the MAUI tab bar uses - and by the label
       weight below, neither of which costs contrast. */
    color: var(--on-primary);
}
.tabs__item:focus-visible[b-3vvznzd58a] { outline: 2px solid var(--on-primary); outline-offset: -2px; }

.tabs__label[b-3vvznzd58a] { white-space: nowrap; }

/* Reinforces the active tab on the narrow bottom bar, which has no pill behind it. */
.tabs__item--active .tabs__label[b-3vvznzd58a] { font-weight: var(--weight-medium); }

/* Desktop: the same destinations as a persistent side rail. Deliberate divergence from mobile,
   recorded in the parity exceptions register - a phone-width bar stranded at the bottom of a
   large monitor is worse than the equivalent navigation in the shape the platform expects. */
@media (min-width: 768px) {
    .tabs[b-3vvznzd58a] {
        inset: 0 auto 0 0;
        width: 15rem;
        height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        padding: 16px 12px;
    }

    .tabs__item[b-3vvznzd58a] {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        height: 48px;
        padding: 0 16px;
        border-radius: 8px;
    }

    /* The foreground MUST move with the background. Inheriting --on-primary from .tabs__item
       while painting a --primary-container pill pairs two tokens that were never meant to meet:
       in dark mode that is #002f66 text on #004b9b, about 1.2:1, which is what made the selected
       item unreadable. Every --x-container background needs its --on-x-container foreground. */
    .tabs__item--active[b-3vvznzd58a] {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
    }

    .tabs__label[b-3vvznzd58a] {
        font-size: 0.875rem;
        font-weight: var(--weight-medium);
    }
}