/* /Components/BonusTimeEditRates/BonusTimeCleanFees.razor.rz.scp.css */
table > thead > tr > th[b-di78ltn8ww] {
    background-color: var(--roc-surface-muted);
    border-bottom: 1px solid var(--roc-border);
}

th.sortable[b-di78ltn8ww] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-di78ltn8ww] {
    background-color: var(--roc-surface-hover);
}

.clean-fee-modal-backdrop[b-di78ltn8ww] {
    background-color: rgba(0, 0, 0, 0.5);
}
/* /Components/BonusTimeEditRates/BonusTimeRates.razor.rz.scp.css */
table > thead > tr > th[b-n6ngjgja2q] {
    background-color: var(--roc-surface-muted);
    border-bottom: 1px solid var(--roc-border);
}

th.sortable[b-n6ngjgja2q] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-n6ngjgja2q] {
    background-color: var(--roc-surface-hover);
}
/* /Components/BonusTimeEditRates/BonusTimeRateSites.razor.rz.scp.css */
table > thead > tr > th[b-wzr56q2rdd] {
    background-color: var(--roc-surface-muted);
    border-bottom: 1px solid var(--roc-border);
}

th.sortable[b-wzr56q2rdd] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-wzr56q2rdd] {
    background-color: var(--roc-surface-hover);
}
/* /Layout/BonusTimeRatesLayout.razor.rz.scp.css */
.bonus-time-rates-layout[b-0fzo983t61] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.bonus-time-rates-sidebar[b-0fzo983t61] {
    width: 200px;
    flex-shrink: 0;
    background-color: var(--roc-surface);
    border: 1px solid var(--roc-border);
    border-radius: 0.2rem;
    /* Sticky so the resort selector stays visible while operators scroll long fee /
       rate tables. Top offset roughly matches the main-content's py-3 above. */
    position: sticky;
    top: 1rem;
}

.bonus-time-rates-body[b-0fzo983t61] {
    flex: 1;
    min-width: 0;
    /* min-width: 0 lets the flex item shrink — without it, a wide table forces the
       row to overflow the viewport instead of becoming horizontally scrollable. */
}

@media (max-width: 768px) {
    .bonus-time-rates-layout[b-0fzo983t61] {
        flex-direction: column;
    }

    .bonus-time-rates-sidebar[b-0fzo983t61] {
        width: 100%;
        position: static;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* .page and .main-content cover the body, so these are the page background in practice — they carry
   the white from app.css's html, body rule rather than the grey band colour. */
.page[b-s89k2txca4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--roc-surface);
}

/* BGV theming over Bootstrap's .navbar; navbar-dark whitens the toggler icon. */
.top-bar[b-s89k2txca4] {
    background-color: var(--roc-color-primary);
}

/* Anchor for the mobile sections dropdown. */
.top-bar .container-fluid[b-s89k2txca4] {
    position: relative;
}

/* Logo and Profile are fixed; Sections is the only flexible region. */
.nav-logo[b-s89k2txca4],
.nav-profile[b-s89k2txca4] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-sections[b-s89k2txca4] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* min-width:0 lets the collapse shrink so the list scrolls (overflow-x) instead of pushing
   into the profile — the navbar is nowrap at md+. */
.nav-sections .navbar-collapse[b-s89k2txca4] {
    min-width: 0;
}

/* Mobile: drop the sections collapse below the bar as a full-width panel. */
@media (max-width: 767.98px) {
    .nav-sections .navbar-collapse[b-s89k2txca4] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1030;
        padding: 0.5rem 1rem;
        background-color: var(--roc-color-primary);
        box-shadow: var(--roc-shadow-raised);
    }
}

/* Zero Bootstrap's brand margin/padding so the logo sits flush and centered. */
.brand[b-s89k2txca4] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* ~2.1rem ≈ the nav pill height, so the logo sits level with the pills and Log out button. */
.brand-logo[b-s89k2txca4] {
    display: block;
    height: 2.1rem;
    width: auto;
}

.main-content[b-s89k2txca4] {
    flex: 1;
    min-width: 0;
    background-color: var(--roc-surface);
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Single-line row that scrolls horizontally when the pills don't fit (rather than wrapping).
   On mobile the navbar collapse stacks them vertically, where flex-wrap and overflow-x are
   harmless.

   The block-axis padding below is a focus-ring fix. overflow-x: auto cannot be scoped to one axis:
   per CSS Overflow 3, when one axis is a scrolling value the other computes from `visible` to
   `auto`, so this box clips vertically too and takes the focus decoration off the top and bottom of
   a focused pill. `overflow-y: visible` would not help — it would compute back to `auto` for the
   same reason. So give the scroll box enough padding for the decoration to render inside it.
   Measure that against the decoration's full extent, not the ring alone: app.css's :focus-visible
   rule pairs the 3px --roc-focus-ring with `outline: 2px solid transparent` at `outline-offset: 2px`,
   whose outer edge is 4px out, and the outline is the only indicator forced-colors mode keeps. So
   the requirement is 4px, which is exactly what --roc-space-1 buys — flush, not spare.
   RocFocusRingClippingTests pins it, deriving the 4px from those declarations rather than repeating
   it. The matching negative margin keeps the margin box the height it was, so the row still centers
   in .nav-sections and nothing beside it shifts; that pairing is pinned by the same guard.

   This is the block axis only — inline padding stays 0, so a focused first/last pill has nothing but
   li.nav-item's Bootstrap mx-1 (NavMenu.razor:17) between it and the scrollport edge, and at the
   13px root that is 3.25px. Enough for the 3px ring, but 0.75px short of the 4px outline, so the
   outer sliver of a first/last pill's outline is clipped today — visible only in forced-colors mode,
   and only on those two pills. Widening it means overriding a Bootstrap utility on every pill, which
   is a design-system call, so it is recorded under AB#8173 with the scrollbar case below rather than
   fixed here. Nothing pins that utility either: it is Bootstrap's, not a ROC token, so a Bootstrap
   upgrade or a root-font change can move it with every guard green.

   Known limitation, tracked as AB#8173: once the pills actually overflow, the thin horizontal
   scrollbar renders inside the bottom of that padding and covers part of a focused pill's lower
   ring. Widening the padding to clear a scrollbar would push the pills off-centre in the far more
   common non-overflowing case, so the ring is left partly obscured in the overflow case on purpose
   until that item settles where the ring is drawn. Note that moving it to a plain outline would
   not clear the scrollbar either — an outline renders outside the pill's border box, in the same
   padding strip the scrollbar occupies. Only a ring drawn inside the pill's own box (a negative
   outline-offset) escapes both the clip and the scrollbar; see the focus block in app.css.

   On mobile these four declarations also eat 4px into .navbar-collapse's 0.5rem padding
   (MainLayout.razor.css). At ROC's 13px root that 0.5rem is 6.5px, so the panel keeps 2.5px of its
   block padding rather than 6.5px — a noticeably tighter panel, not a rounding difference. The ring
   still matters more. */
.section-nav[b-9ytotgkw3s] {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-top: var(--roc-space-1);
    padding-bottom: var(--roc-space-1);
    margin-top: calc(-1 * var(--roc-space-1));
    margin-bottom: calc(-1 * var(--roc-space-1));
}

/* Keep each pill at its natural width so the row scrolls rather than squishing. */
.section-nav .nav-item[b-9ytotgkw3s] {
    flex-shrink: 0;
}
/* /Layout/ResortTabs.razor.rz.scp.css */
.resort-tabs[b-eqttjh7zdy] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
}

.resort-tab[b-eqttjh7zdy] {
    display: block;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    color: var(--roc-color-primary);
    padding: 0.55rem 0.75rem;
    border-radius: 0;
    cursor: pointer;
    line-height: 1.2;
}

.resort-tab:hover[b-eqttjh7zdy] {
    background-color: var(--roc-surface-hover);
    color: var(--roc-color-primary);
}

.resort-tab.active[b-eqttjh7zdy] {
    background-color: var(--roc-surface-hover);
    border-left-color: var(--roc-color-accent);
    color: var(--roc-color-primary);
}

.resort-tab-code[b-eqttjh7zdy] {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--roc-color-primary);
}

.resort-tab.active .resort-tab-code[b-eqttjh7zdy] {
    color: var(--roc-color-accent);
}

.resort-tab-name[b-eqttjh7zdy] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 0.15rem;
    color: var(--roc-color-primary);
}
/* /Layout/UserBar.razor.rz.scp.css */
/* flex-direction:row keeps the name pill + Log out side by side (.navbar-nav would stack them). */
.user-bar[b-0mfy11i432] {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.user-bar-badges[b-0mfy11i432] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* .roc-nav-pill styles the pill; this only lays the icon beside the name. */
.user-bar-name[b-0mfy11i432] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Sits on the --roc-color-primary top bar, so this is the token for text on a dark fill rather
   than a literal white — the same substitution .roc-nav-pill.active already made. */
.user-bar-login[b-0mfy11i432] {
    color: var(--roc-text-light);
}

.user-bar-login:hover[b-0mfy11i432],
.user-bar-login:focus[b-0mfy11i432] {
    color: var(--roc-text-light);
    text-decoration: underline;
}
/* /Pages/AppConfig.razor.rz.scp.css */
/* App Config editor re-style (AB#7873). Recolors the Bootstrap nav-tabs strip to the ROC
   accent palette, mirroring CalendarWeekAdmin.razor.css, so the active tab reads in BGV Blue
   rather than Bootstrap's default. All colors come from the --roc-* tokens in wwwroot/css/app.css;
   the active-tab surface white matches the card-body it sits above, per the app.css convention.
   Tabs are buttons rendered by this component (inside the card header), so no ::deep is needed. */
.appconfig-tabs .nav-link[b-cq86aucpma] {
    color: var(--roc-color-primary);
    border: 1px solid transparent;
    border-radius: 0.2rem 0.2rem 0 0;
    background-color: transparent;
}

.appconfig-tabs .nav-link:hover[b-cq86aucpma] {
    background-color: var(--roc-color-accent-tint);
    color: var(--roc-color-primary);
    border-color: transparent;
}

.appconfig-tabs .nav-link.active[b-cq86aucpma] {
    color: var(--roc-color-accent);
    font-weight: 600;
    background-color: #fff;
    border-color: var(--roc-border) var(--roc-border) #fff;
}

.appconfig-tabs .nav-link:disabled[b-cq86aucpma] {
    color: var(--roc-text-muted);
    background-color: transparent;
}
/* /Pages/BonusTimeDisable.razor.rz.scp.css */
/* Card wrap so each month reads as its own block on a busy page. Subtle border +
   shadow lift the calendar off the page background without competing with the
   tab strip above. */
.month-card[b-t1x9kisnpr] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.month-header[b-t1x9kisnpr] {
    margin: 0 0 0.75rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.5rem;
}

.month-header .year-suffix[b-t1x9kisnpr] {
    color: var(--bs-secondary-color);
    font-weight: 400;
    margin-left: 0.35rem;
}

/* Tighter than the default Bootstrap table; the calendar grid should read as a
   single dense block rather than a wide data table. */
.calendar-table[b-t1x9kisnpr] {
    margin-bottom: 0;
    table-layout: fixed;
}

.calendar-table thead th[b-t1x9kisnpr] {
    text-align: center;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.35rem 0;
    background: transparent;
    border-color: var(--bs-border-color-translucent);
}

.calendar-table tbody td[b-t1x9kisnpr] {
    text-align: center;
    padding: 0;
    border-color: var(--bs-border-color-translucent);
    /* Square-ish day cells. Height drives the box; width is governed by table-layout:
       fixed + the 7 thead columns at 14.28% each. */
    height: 2.5rem;
    vertical-align: middle;
}

/* Clickable cells get cursor + hover affordance. The empty leading / trailing cells
   in a partial first/last row remain inert (no .day-cell class). */
.day-cell[b-t1x9kisnpr] {
    cursor: pointer;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transition: background-color 80ms ease-in-out;
}

.day-cell:hover[b-t1x9kisnpr] {
    background-color: rgba(0, 0, 0, 0.06);
}

/* "Today" gets a subtle outline so operators can orient on the rolling 6-month
   window without scanning the top-left cell. Not a fill — fill collides with the
   disabled-state red and with hover. */
.day-cell.today[b-t1x9kisnpr] {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    font-weight: 600;
}

/* Disabled state. Bootstrap's bg-danger is what the legacy uses; we add white text
   and keep the cursor + hover affordance so a second click (to re-enable) is
   discoverable. Hover stays red — brightness filter so the change is visible
   against the saturated background rather than disappearing. */
.day-cell.disabled-day[b-t1x9kisnpr] {
    background-color: var(--bs-danger);
    color: #fff;
    font-weight: 600;
}

.day-cell.disabled-day:hover[b-t1x9kisnpr] {
    background-color: var(--bs-danger);
    filter: brightness(0.92);
}

/* In-flight toggle: dim + suppress hover/click so a second click can't double-fire
   the non-idempotent SP. Cleared in the finally block after the POST returns. */
.day-cell.toggling[b-t1x9kisnpr] {
    opacity: 0.55;
    pointer-events: none;
}

/* Tab strip polish — keep the legacy nav-tabs structure but tighten spacing so
   the logo images sit on a clean baseline. */
.site-tabs[b-t1x9kisnpr] {
    margin-bottom: 1rem;
}

.site-tabs .nav-tabs[b-t1x9kisnpr] {
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.25rem;
}

.site-tabs .resortTab[b-t1x9kisnpr] {
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    opacity: 0.7;
    transition: opacity 120ms ease-in-out;
}

.site-tabs .resortTab:hover[b-t1x9kisnpr],
.site-tabs .resortTab:focus-visible[b-t1x9kisnpr] {
    opacity: 1;
}

.site-tabs .resortTab.active[b-t1x9kisnpr] {
    opacity: 1;
    border-bottom: 2px solid var(--bs-primary);
}
/* /Pages/CalendarWeekAdmin.razor.rz.scp.css */
/* Calendar Week Admin re-style (AB#7722). All colors come from the --roc-* tokens defined
   in wwwroot/css/app.css; only Bootstrap-aligned status reds for the destructive-confirm
   callout are left literal here, per the app.css convention for status colors. */

/* --- Year / resort tab strips ---------------------------------------------------------
   Recolor Bootstrap's nav-tabs to the ROC accent palette so the active tab reads in BGV
   Blue rather than Bootstrap's default. Tabs are buttons rendered by this component, so
   no ::deep is needed. */
.cal-tabs[b-q2o1259z94] {
    border-bottom: 1px solid var(--roc-border);
}

.cal-tabs .nav-link[b-q2o1259z94] {
    color: var(--roc-color-primary);
    border: 1px solid transparent;
    border-radius: 0.2rem 0.2rem 0 0;
    background-color: transparent;
}

.cal-tabs .nav-link:hover[b-q2o1259z94] {
    background-color: var(--roc-color-accent-tint);
    color: var(--roc-color-primary);
    border-color: transparent;
}

.cal-tabs .nav-link.active[b-q2o1259z94] {
    color: var(--roc-color-accent);
    font-weight: 600;
    background-color: #fff;
    border-color: var(--roc-border) var(--roc-border) #fff;
}

.cal-tabs .nav-link:disabled[b-q2o1259z94] {
    color: var(--roc-text-muted);
    background-color: transparent;
}

/* "Add Year" is an action, not a tab — strip the tab chrome so the + reads as a control. */
.cal-tab-add[b-q2o1259z94],
.cal-tab-add:hover[b-q2o1259z94] {
    color: var(--roc-color-accent);
    border-color: transparent;
}

.cal-tab-add:hover[b-q2o1259z94] {
    color: var(--roc-color-accent-hover);
    background-color: var(--roc-surface-hover);
}

/* --- Resort logo tabs -----------------------------------------------------------------
   The tab treatment — chrome, logo art, and the narrow-viewport sizes — lives in app.css and is
   shared with the six other pages that use this strip (OwnerWeekCalendar, DayUseEditAvailability,
   DayUseParkingAvailability, DayUseParkingOverride, TheaterAvailability, TheaterOverride). What
   used to sit here was a copy of it that had already drifted: it named --roc-surface-muted and
   --roc-surface-hover where app.css still had #bbbbbb and #999999, spelled the radius 0.25rem
   rather than --roc-radius-control, and carried an extra .active:focus. That drift is the point —
   retinting one copy and not the other is what left CalendarWeekAdmin on a light band while every
   other page kept a mid-grey one. Scoped CSS
   wins on specificity (Blazor appends the [b-*] attribute), so a copy here does not merely
   duplicate the shared rule, it silently overrides it. Only the two rules the shared block
   genuinely lacks remain. */
.resort-logo-tabs[b-q2o1259z94] {
    border-bottom: 1px solid var(--roc-border);
}

.resort-logo-tab:disabled[b-q2o1259z94] {
    opacity: 0.6;
}

/* --- Calendar table -------------------------------------------------------------------
   Align the header and alternating week bands to the ROC data-table tokens. Bootstrap 5
   sets a per-cell background via --bs-table-bg on `.table > * > * > *`, so the band color
   must be applied at the `> td` level to win. */
.cal-table thead th[b-q2o1259z94] {
    background-color: var(--roc-surface-muted);
    border-color: var(--roc-border);
    color: var(--roc-color-primary);
    font-weight: 600;
}

.cal-table tbody tr.week-band-alt > td[b-q2o1259z94] {
    background-color: var(--roc-surface-hover);
}

/* --- Action clusters ------------------------------------------------------------------
   The season, check-in, and week button groups all wrap on narrow viewports so the dense
   rows never force horizontal overflow. */
.season-actions[b-q2o1259z94],
.checkin-row[b-q2o1259z94],
.week-actions[b-q2o1259z94] {
    row-gap: 0.35rem;
}

/* Day-of-week now has its own table column (AB#7781). Keep it on one line so the grid
   columns stay aligned across rows. */
.cal-dow-cell[b-q2o1259z94] {
    white-space: nowrap;
}

/* One row per check-in date, with Week Number / Season cells rowspanned over their group.
   Center the body cells against their date rows; anchor the Season cell to the top so its
   dropdown + actions align with the first date row rather than floating mid-span. */
.cal-table tbody td[b-q2o1259z94] {
    vertical-align: middle;
}

.cal-season-cell[b-q2o1259z94] {
    vertical-align: top;
}

/* Check-in input-group: the switch addon + both date fields + override pencil form one
   connected control. Size the group and its date fields to content so it stays compact
   rather than stretching to the full row width (the input-group default). */
.checkin-input-group[b-q2o1259z94] {
    width: auto;
    flex-wrap: nowrap;
}

.checkin-input-group .form-control[b-q2o1259z94] {
    flex: 0 0 auto;
    width: auto;
}

/* Square, evenly-sized icon-only buttons (override / delete) so they read as a set. */
.btn-icon[b-q2o1259z94] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
}

/* Note: the accent "create / save" buttons (Save, Add Check-in Date, Add Season for This Week)
   reuse the shared .btn-roc-accent class from wwwroot/css/app.css — no per-component copy. */

/* --- Inline destructive-confirm callout ----------------------------------------------
   Shared by all three confirm-toggle sites (delete last week, delete season, delete
   check-in date). Groups the prompt with its Confirm/Cancel pair into one danger-tinted
   pill so an armed delete is visually unmistakable. Status reds are intentionally literal
   (Bootstrap danger family), matching the app.css status-color convention. */
.confirm-inline[b-q2o1259z94] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    background-color: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 0.25rem;
}

.confirm-inline-text[b-q2o1259z94] {
    color: #b02a37;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Pages/DayUseEditAvailability.razor.rz.scp.css */
.preferred-owner-percentage-input[b-2u7ya6g413] {
    max-width: 200px;
}
/* /Pages/DayUseParkingAvailability.razor.rz.scp.css */
/* Two equal columns, each a big number over a small label. */
.parking-headline[b-nv3aua5na6] {
    display: flex;
}

.parking-headline-col[b-nv3aua5na6] {
    flex: 1 1 0;
}

.parking-headline-number[b-nv3aua5na6] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.parking-headline-label[b-nv3aua5na6] {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Both headline numbers are neutral; red is reserved for the negative/over states below. This
   restates what .card already inherits (app.css sets --bs-card-color: var(--roc-text)) rather than
   painting anything new — kept so both branches of the markup's ternary are visible in one place.
   Moving off Bootstrap's --bs-body-color (#212529) was still a real change: near-black to BGV Dark
   Grey, 6.90:1 on white. */
.parking-available[b-nv3aua5na6],
.parking-preferred[b-nv3aua5na6] {
    color: var(--roc-text);
}

/* The bare danger token, legal here only because this number is large (22.75px/700, sized by
   .parking-headline-number). The cue that keeps "never colour alone" true is .parking-state-label
   below, which renders on exactly the predicate this rule keys off (!NonPreferredAvailable).
   Why two reds rather than one, with the ratios, the deuteranopia argument and the proof that the
   card's other cues were complete only by coincidence: DayUseParkingCardColourTests, class comment.
   That file is the single authority for it, because it is the only copy anything checks — it pins the
   token hexes, the 13px root and this rule's font-size, so a claim that drifts there fails a build. */
.parking-full[b-nv3aua5na6] {
    color: var(--roc-danger);
}

/* 1.3px — below the smallest step on the --roc-space-* scale, so a hairline nudge off the number
   rather than a spacing value. */
.parking-star[b-nv3aua5na6] {
    font-size: 0.5em;
    vertical-align: super;
    margin-left: 0.1rem;
}

/* Over-booked / exception day, plus the full-state label. All three are normal-size text, so the
   4.5:1 floor applies and they take the darker red rather than .parking-full's. Why:
   DayUseParkingCardColourTests, class comment. */
.parking-overflow .card-header[b-nv3aua5na6] {
    color: var(--roc-danger-border);
}

.parking-exception[b-nv3aua5na6] {
    color: var(--roc-danger-border);
    font-weight: 600;
}

.parking-state-label[b-nv3aua5na6] {
    color: var(--roc-danger-border);
    font-weight: 600;
}

.parking-detail[b-nv3aua5na6] {
    font-size: 0.8rem;
}

.parking-detail dt[b-nv3aua5na6] {
    font-weight: 400;
}
/* /Pages/DayUseParkingOverride.razor.rz.scp.css */
/* Parking-availability card styles, ported from DayUseParkingAvailability.razor.css. Component-scoped
   CSS isn't shared, so these are a hand-kept copy — and the two sheets are NOT rule-for-rule twins.
   Read before editing, worst trap first:
     - .parking-headline — SAME NAME, DIFFERENT RULE. Here it sizes the number (1.75rem/700); over
       there it is `display: flex` and the sizing lives on .parking-headline-number. Copying this rule
       across collapses that page's two-column headline.
     - .parking-preferred — DIVERGES on purpose (see its comment); AB#8306 owns reconciling it.
     - .parking-available — same declaration, but grouped with .parking-preferred over there.
     - every other rule below is identical over there; change both together.
   Availability also has .parking-headline-col, -number, -label, .parking-detail and .parking-detail dt
   with no counterpart here, and the two cards differ structurally (this one has a Select /
   "Parking Full" footer, that one a detail list). Hoisting the shared rules into a role or a component
   is tracked separately.

   WHY there are two reds below: DayUseParkingCardColourTests, class comment. That file is the single
   authority for the contrast argument, because it is the only copy anything checks — it pins the token
   hexes, the 13px root and the headline's font-size, so a claim that drifts there fails a build. This
   header and its twin used to restate the whole derivation; three of those restatements were factually
   wrong at some point during this PR's own review, which is the argument against keeping a fourth
   hand-maintained copy rather than a pointer. */
.parking-headline[b-2w3085g3wg] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Non-preferred spaces still open: neutral. Restates .card's inherited --bs-card-color, same as the
   twin rule; moving off --bs-body-color was still near-black to BGV Dark Grey. */
.parking-available[b-2w3085g3wg] {
    color: var(--roc-text);
}

/* The bare danger token, legal here only because .parking-headline above sizes this to 22.75px/700.
   The cue that keeps "never colour alone" true is .parking-state-label below, which renders on this
   rule's own predicate. Why: DayUseParkingCardColourTests, class comment. */
.parking-full[b-2w3085g3wg] {
    color: var(--roc-danger);
}

/* Preferred-owner remainder, shown with a star. Still Bootstrap's --bs-success, and the twin rule on
   DayUseParkingAvailability.razor.css renders this same datum in --roc-text instead — a real
   divergence, not an oversight in one of the two. AB#8174 settled the general question and does not
   answer this one: green for preferred spaces is a feature's own status colour, so under that rule
   it stays local. What is still open is which of the two readings is right, and whether it should be
   an off-palette var(--bs-*) either way — AB#8306. Until then neither page's reading is
   authoritative. Not a contrast blocker either way: #198754 is 4.53:1 on white and this renders at
   22.75px/700. */
.parking-preferred[b-2w3085g3wg] {
    color: var(--bs-success);
}

/* 1.3px — below the smallest step on the --roc-space-* scale. */
.parking-star[b-2w3085g3wg] {
    font-size: 0.5em;
    vertical-align: super;
    margin-left: 0.1rem;
}

/* Over-booked / exception day, plus the full-state label. All three are normal-size text, so the
   4.5:1 floor applies and they take the darker red rather than .parking-full's. Why:
   DayUseParkingCardColourTests, class comment. */
.parking-overflow .card-header[b-2w3085g3wg] {
    color: var(--roc-danger-border);
}

.parking-exception[b-2w3085g3wg] {
    color: var(--roc-danger-border);
    font-weight: 600;
}

.parking-state-label[b-2w3085g3wg] {
    color: var(--roc-danger-border);
    font-weight: 600;
}
/* /Pages/EditBonusTimeRates.razor.rz.scp.css */
.edit-bonus-time-rates-tile[b-lvkjyw4kqj] {
    display: block;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.edit-bonus-time-rates-tile:hover[b-lvkjyw4kqj] {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.4);
}

.edit-bonus-time-rates-tile .card-title[b-lvkjyw4kqj] {
    font-size: 1.05rem;
    font-weight: 600;
}

.edit-bonus-time-rates-tile .card-title i[b-lvkjyw4kqj] {
    color: #0d6efd;
}
/* /Pages/ManageAudits.razor.rz.scp.css */
/* Manage Audits tab strip (#7874). Recolors the Bootstrap nav-tabs to the ROC accent palette,
   mirroring AppConfig.razor.css / CalendarWeekAdmin.razor.css, so the active tab reads in BGV Blue
   rather than Bootstrap's default. Colors come from the --roc-* tokens in wwwroot/css/app.css; the
   active-tab surface white matches the card body it sits in. Tabs are buttons rendered by this
   component, so no ::deep is needed. */
.manage-audits-tabs[b-vbe7n6usyg] {
    margin-bottom: 1rem;
}

.manage-audits-tabs .nav-link[b-vbe7n6usyg] {
    color: var(--roc-color-primary);
    border: 1px solid transparent;
    border-radius: 0.2rem 0.2rem 0 0;
    background-color: transparent;
}

.manage-audits-tabs .nav-link:hover[b-vbe7n6usyg] {
    background-color: var(--roc-color-accent-tint);
    color: var(--roc-color-primary);
    border-color: transparent;
}

.manage-audits-tabs .nav-link.active[b-vbe7n6usyg] {
    color: var(--roc-color-accent);
    font-weight: 600;
    background-color: #fff;
    border-color: var(--roc-border) var(--roc-border) #fff;
}

.manage-audits-tabs .nav-link:disabled[b-vbe7n6usyg] {
    color: var(--roc-text-muted);
    background-color: transparent;
}
/* /Pages/RateCalculator.razor.rz.scp.css */
/* Section 1 rates table: the figures size to their content with comfortable horizontal spacing
   (table-sm is otherwise quite tight), and the Notes column — the last one — absorbs the
   remaining width and is allowed to wrap since notes can be long. */
.rates-table th[b-4wt1v5wodo],
.rates-table td[b-4wt1v5wodo] {
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.rates-table th:last-child[b-4wt1v5wodo],
.rates-table td:last-child[b-4wt1v5wodo] {
    width: 100%;
    white-space: normal;
}

/* Rate calculator table conventions. Reach into child panels via ::deep so the
   conventions are owned at the feature level — adding a new panel requires no
   per-panel duplication of these rules.

   Row labels in any rate-calculator panel default to normal weight, overriding
   the browser's bold-on-<th>. Specific rows opt back into bold via their own
   row classes (rb-row-bold, quote-row-bold). */
[b-4wt1v5wodo] tbody th {
    font-weight: normal;
}

/* TSW transcription convention. A "TSW value" is a figure an OR Agent transcribes
   verbatim into TSW (a transaction code or a folio amount); a "TSW label" is the
   label paired with such a value. Labels get the text emphasis (bold + brand-navy);
   values also get a soft amber background to draw the eye to the figure being
   transcribed. The amber is intentionally distinct from the green used by the
   Total Savings row in the Rate Quote so the two signals don't collide. */
[b-4wt1v5wodo] th.tsw-label {
    color: var(--roc-color-primary);
    font-weight: 700;
}

[b-4wt1v5wodo] td.tsw-value {
    color: var(--roc-color-primary);
    font-weight: 700;
    background-color: #FFF3CD;
}

/* Negative TSW value: keep the amber background (TSW transcription signal) but flip
   the text to red so the negative signal isn't lost to the navy. Without this, the
   plain td.tsw-value rule above outranks AmountCell's .amount-negative on specificity. */
[b-4wt1v5wodo] td.tsw-value.amount-negative {
    color: var(--bs-danger, #dc3545);
}

/* Rate-quote table conventions — applied to any per-reservation-type panel that
   renders a Discounted-vs-Rack rate-quote table (Standard, Promotional, future
   discount-based types). The panel tags its table with the .rate-quote-table class
   and applies row / cell classes as needed. Owned at the feature level so the
   panels themselves stay free of styling duplication. */
[b-4wt1v5wodo] .rate-quote-table th,
[b-4wt1v5wodo] .rate-quote-table td {
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

[b-4wt1v5wodo] .rate-quote-table thead th[colspan] {
    text-align: center;
}

[b-4wt1v5wodo] .rate-quote-table .amount {
    text-align: right;
}

[b-4wt1v5wodo] .rate-quote-table .rack-rates-dim {
    color: var(--bs-secondary-color);
    opacity: 0.65;
}

/* Faint navy tint + thin separator anchor a rate-quote column group so its Total / Per Night
   sub-headers stay visually tied to their group head. The three classes are styled identically
   on purpose: discounted/rack name the two groups on the comparison panels (Standard,
   Promotional), while quote-amount names the single group on panels with no rack counterpart
   (Guest Member, Packed Rental). */
[b-4wt1v5wodo] .rate-quote-table colgroup.quote-discounted-group,
[b-4wt1v5wodo] .rate-quote-table colgroup.quote-rack-group,
[b-4wt1v5wodo] .rate-quote-table colgroup.quote-amount-group {
    background-color: rgba(31, 57, 86, 0.05);
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

[b-4wt1v5wodo] .rate-quote-table tr.quote-group-header th {
    color: var(--roc-color-primary);
}

[b-4wt1v5wodo] .rate-quote-table tr.quote-row-bold th,
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-bold td {
    font-weight: 700;
}

[b-4wt1v5wodo] .rate-quote-table tr.quote-row-italic th,
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-italic td {
    font-style: italic;
}

/* Headline Total-cell tint (Guest Member / Packed Rental / Complimentary): navy, distinct
   from the Total Savings green and the TSW amber. */
[b-4wt1v5wodo] .rate-quote-table td.quote-cell-highlight {
    background-color: rgba(31, 57, 86, 0.10);
}

/* Full Total-row tint (Standard / Promotional): the same navy on every cell of the row.
   Set per cell rather than on the <tr> so it paints over the cell background. */
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-highlight th,
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-highlight td {
    background-color: rgba(31, 57, 86, 0.10);
}

/* Total Savings row: bold green text on no background — the savings reads as a positive
   figure, distinct from the navy-highlighted Total row above it. */
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-savings th,
[b-4wt1v5wodo] .rate-quote-table tr.quote-row-savings td {
    color: var(--bs-success, #198754);
}

/* Rate-builder table conventions — applied to any per-reservation-type panel that
   renders a Rate Builder (TSW transcription) table. The panel tags its table with
   .rate-builder-table and applies row classes (rb-row-italic for derived figures,
   rb-row-bold for the Total row). Owned at the feature level so the panels stay
   free of styling duplication. */
[b-4wt1v5wodo] .rate-builder-table th,
[b-4wt1v5wodo] .rate-builder-table td {
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

[b-4wt1v5wodo] .rate-builder-table .amount {
    text-align: right;
}

/* Derived figures (Room Total, Pre-Tax Total): italic label + values. */
[b-4wt1v5wodo] .rate-builder-table tr.rb-row-italic th,
[b-4wt1v5wodo] .rate-builder-table tr.rb-row-italic td {
    font-style: italic;
}

/* Total row: bold label + values. */
[b-4wt1v5wodo] .rate-builder-table tr.rb-row-bold th,
[b-4wt1v5wodo] .rate-builder-table tr.rb-row-bold td {
    font-weight: 700;
}
/* /Pages/RateCalculatorAdmin.razor.rz.scp.css */
.rate-calculator-admin-tile[b-2wkkwe35pg] {
    display: block;
    cursor: pointer;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.rate-calculator-admin-tile:hover[b-2wkkwe35pg] {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: var(--roc-color-accent);
}

/* Focus keeps the lift but takes the shared --roc-focus-ring instead of the hover shadow: this
   scoped rule outranks the global :focus-visible, and reusing the hover shadow made a keyboard-
   focused tile pixel-identical to a moused-over one. */
.rate-calculator-admin-tile:focus-visible[b-2wkkwe35pg] {
    transform: translateY(-2px);
    border-color: var(--roc-color-accent);
    box-shadow: var(--roc-focus-ring);
}

.rate-calculator-admin-tile .card-title[b-2wkkwe35pg] {
    font-size: 1.05rem;
    font-weight: 600;
}

.rate-calculator-admin-tile .card-title i[b-2wkkwe35pg] {
    color: var(--roc-color-primary);
}
/* /Pages/RateCalculatorPanels/AmountCell.razor.rz.scp.css */
/* Accounting-style negative values: red. Pairs with FormatAsAmount's parenthesized
   absolute-value rendering. Applied by AmountCell whenever Value < 0. */
.amount-negative[b-neyvtrh6z1] {
    color: var(--bs-danger, #dc3545);
}
/* /Pages/RateCalculatorPanels/Instructions/RateCalculatorInstructionsPanel.razor.rz.scp.css */
/* Header acts as the collapse toggle: brand-navy, no underline, full-width so the whole
   bar is clickable. The caret flips when the panel is expanded. */
.instructions-toggle[b-j77hhqs0yq] {
    color: var(--roc-color-primary);
    font-weight: 600;
}

/* This toggle used to cancel Bootstrap's blue btn-link ring and draw its own inset outline. Both
   rules are gone: app.css now owns a single focus treatment for every surface (AB#8101), and a
   local override would reinstate the divergence that change exists to remove. */

.instructions-caret[b-j77hhqs0yq] {
    transition: transform 0.15s ease-in-out;
}

.instructions-caret.expanded[b-j77hhqs0yq] {
    transform: rotate(180deg);
}

/* A little breathing room between numbered steps; sub-steps inherit the list spacing. */
.instructions-steps > li[b-j77hhqs0yq] {
    margin-bottom: 0.35rem;
}

.instructions-steps > li:last-child[b-j77hhqs0yq] {
    margin-bottom: 0;
}

.instructions-note[b-j77hhqs0yq] {
    color: var(--bs-secondary-color);
}
/* /Pages/SkiLockers.razor.rz.scp.css */
table > thead > tr > th[b-qk4ohmmn07] {
    background-color: var(--roc-surface-muted);
    border-bottom: 1px solid var(--roc-border);
}

th.sortable[b-qk4ohmmn07] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-qk4ohmmn07] {
    background-color: var(--roc-surface-hover);
}

.ski-locker-modal-backdrop[b-qk4ohmmn07] {
    background-color: rgba(0, 0, 0, 0.5);
}
/* /Pages/TheaterAvailability.razor.rz.scp.css */
/* Spacing snapped to the --roc-space-* scale. app.css:133 sets the root to 13px, so these are
   not pure renames: 0.75rem was 9.75px and is now 8px, 0.35rem was 4.55px and is now 4px. Each
   value takes the nearest step — 9.75px falls between --roc-space-2 (8px, Δ1.75) and
   --roc-space-3 (12px, Δ2.25) and is closer to the former. Taking the nearest step is the point
   of the sweep. The border moves off Bootstrap's --bs-border-color (#dee2e6) onto --roc-border
   (#E4E4E4) in the same pass; that one is a colour change, not a spacing one. */
.theater-category + .theater-category[b-f8vz17u0nf] {
    margin-top: var(--roc-space-2);
    padding-top: var(--roc-space-2);
    border-top: 1px solid var(--roc-border);
}

.theater-category-name[b-f8vz17u0nf] {
    font-weight: 600;
    margin-bottom: var(--roc-space-1);
}

.theater-slots[b-f8vz17u0nf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-1);
}

/* The slot itself — open = BGV Blue (non-interactive), booked = red (opens holder detail).
   Occupied takes --roc-danger-bg/-text/-border, grouped in app.css's :root under the header
   "Danger — validation errors and the occupied time slot" — purpose-built for this element.
   Sizing (padding, radius, font-size, line-height) stays literal: those belong to the
   .roc-time-slot component, which AB#8158 owns wholesale. */
.theater-slot[b-f8vz17u0nf] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.3;
    border: 1px solid transparent;
}

/* Open takes --roc-color-accent-hover, not --roc-color-accent. AB#8203's screenshot samples the
   accent (#5E85B3 ~= #5B89B4), but --roc-text-light on the accent is 3.33:1 — below AA at this
   0.85rem size — where the darkened token is 4.76:1. Both figures are against #F2F3F4, which is
   what actually ships: --roc-color-accent-hover's own comment in app.css exists to stop the
   on-white number (3.70:1 for the accent) being quoted for a fill that carries light text. The
   darkened token is a visibly deeper blue, not the same one — 1.57x apart in relative luminance —
   and is the closest AA-clearing step toward the target.
   .roc-nav-pill.active is the one precedent for this token as a *resting* fill; on
   .btn-primary/.btn-roc-accent it is only --bs-btn-hover-bg/-border over a navy resting fill.
   The border matches the fill so the pill reads as solid — deliberately NOT .theater-booked's
   shape below, which pairs a pale fill with a dark --roc-danger-border.

   Not --roc-surface-tint, which app.css reserved for "available time slots": AB#8203 asks for a
   solid fill that separates from booked across an 8-day grid, and the palest blue is the pale read
   it replaces. This re-tokenizes the open half that AB#8150 left alone pending .roc-time-slot
   (AB#8158), and reverses the on-brand *neutral* AB#7959 chose deliberately for open — the palette
   is unchanged; what AB#8203 changed is whether open should read quiet or loud. Three declarations
   in the existing rule, accepted as throwaway if AB#8158 lands the component.

   Widening the gap does not satisfy CONTRIBUTING's "never colour alone" rule — both pills still
   render only the show time, so colour remains the sole channel. AB#8211 tracks giving both pills
   a ✔/✖ or Open/Held cue, and the related concern that the loud fill now sits on the
   non-interactive span while the clickable booked pill is the pale one. */
.theater-open[b-f8vz17u0nf] {
    background-color: var(--roc-color-accent-hover);
    color: var(--roc-text-light);
    border-color: var(--roc-color-accent-hover);
}

.theater-booked[b-f8vz17u0nf] {
    background-color: var(--roc-danger-bg);
    color: var(--roc-danger-text);
    border-color: var(--roc-danger-border);
    cursor: pointer;
}

.theater-booked:hover:not(:disabled)[b-f8vz17u0nf] {
    filter: brightness(0.95);
}

.theater-booked:disabled[b-f8vz17u0nf] {
    opacity: 0.65;
    cursor: default;
}
/* /Pages/TourReferralResults.razor.rz.scp.css */
/* The "For Office Use Only" header card sits right-aligned above the demographics.
   Capping the width keeps it from stretching across the page on wider viewports
   the way Bootstrap's default .card would. */
.office-card[b-ulr2ugn3yk] {
    max-width: 24rem;
}
/* /Pages/TourReferrals.razor.rz.scp.css */
/* Header cells wired to OnSort. Cursor + no-select communicate clickability and
   stop the double-click from highlighting the column label text. */
.sortable[b-21wcpnvi9g] {
    cursor: pointer;
    user-select: none;
}

/* Owner / Non-Owner Results button colors pinned to the legacy palette so operators
   can distinguish the two survey variants at a glance. Owner is the aqua/teal that
   the legacy CSS exposed as btn-aqua (#40C0CB); Non-Owner is the amber btn-amber
   (#EB9C4D). Hover/focus tones are ~10% darker. */
.btn-survey-owner[b-21wcpnvi9g] {
    color: #fff;
    background-color: #40C0CB;
    border-color: #40C0CB;
}

.btn-survey-owner:hover[b-21wcpnvi9g],
.btn-survey-owner:focus[b-21wcpnvi9g] {
    color: #fff;
    background-color: #39adb7;
    border-color: #39adb7;
}

.btn-survey-nonowner[b-21wcpnvi9g] {
    color: #fff;
    background-color: #EB9C4D;
    border-color: #EB9C4D;
}

.btn-survey-nonowner:hover[b-21wcpnvi9g],
.btn-survey-nonowner:focus[b-21wcpnvi9g] {
    color: #fff;
    background-color: #d68b41;
    border-color: #d68b41;
}
/* /Shared/DayUseCalendar.razor.rz.scp.css */
.dayuse-calendar[b-vi0z5c5rwm] {
    margin-top: 1rem;
}

.dayuse-calendar-nav[b-vi0z5c5rwm] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.dayuse-calendar-months[b-vi0z5c5rwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.dayuse-calendar-month[b-vi0z5c5rwm] {
    min-width: 220px;
}

.dayuse-calendar-month-header[b-vi0z5c5rwm] {
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dayuse-calendar-grid[b-vi0z5c5rwm] {
    border-collapse: collapse;
    width: 100%;
}

.dayuse-calendar-grid th[b-vi0z5c5rwm] {
    text-align: center;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.25rem;
}

.dayuse-calendar-grid td[b-vi0z5c5rwm] {
    text-align: center;
    padding: 0.35rem 0.25rem;
    border: 1px solid transparent;
    width: 14.28%;
}

/* Dates outside the rendered month — shown blank so the grid stays rectangular. */
.dayuse-calendar-grid td.out-of-month[b-vi0z5c5rwm] {
    color: transparent;
    cursor: default;
}

/* Dates inside the month but outside the [today, today+365] window — visible but dimmed.
   --roc-text-disabled (#B4B4B4) rather than the old #bbb: same grey to the eye, and this is
   exactly the disabled/dimmed role the token names. */
.dayuse-calendar-grid td.out-of-range[b-vi0z5c5rwm] {
    color: var(--roc-text-disabled);
}

/* Future dates that are NOT covered by a custom rule. Legacy class .dp-highlight
   on .ui-state-default: off-white background, green border + text.
   The old fill was #FAFAF4, one step off --roc-surface-subtle's #FAFAFA and indistinguishable from
   it; collapsed onto the token rather than carrying a second near-identical off-white.
   --roc-surface-subtle rather than its --roc-row-alt alias: this is a calendar cell, not a table
   row, and reaching for the row name would tie this fill to future zebra-banding decisions.
   The green stays literal — see the note on .rule-day below. */
.dayuse-calendar-grid td.non-rule-day[b-vi0z5c5rwm] {
    background: var(--roc-surface-subtle);
    color: #387436;
    border: 1px solid #387436;
}

/* Future dates that ARE covered by a custom rule. Legacy class .selectable a from
   bt_selector.css: solid green #387436 background, white text. The h4 above the
   calendar says these are "displayed with a green background" — this matches.
   #387436 is a legacy Bonus Time status colour, not a BGV palette value, and it stays literal
   here. AB#8174 settled that: :root owns *severity* — the four --roc-severity-* levels any surface
   can raise, which is why the toast bands moved there — but not a feature's own status colour.
   This green means "this day has a custom rule", a Bonus Time concept with exactly one consumer
   and a legacy screen it has to keep matching. In :root it would be a token no second surface
   could ever correctly reuse.
   The white stays literal for the same reason — it is the other half of one legacy pair, and
   swapping only the text to --roc-text-light (#F2F3F4) would both break the "matches legacy" claim
   above and drop contrast from 5.65:1 to 5.08:1. Both halves move together or neither does. */
.dayuse-calendar-grid td.rule-day[b-vi0z5c5rwm] {
    background: #387436;
    color: #fff;
    border: 1px solid #387436;
}
/* /Shared/SectionContent.razor.rz.scp.css */
.section-title[b-w74jk8xyiu] {
    text-align: center;
}

/* Each category lives in its own cell grouping the heading with its feature grid, so the three
   On Property categories read as distinct panels. The panel chrome — fill, border, radius, the
   accent spine, and the header band — is all .card's now (AB#8145); the only thing left that is
   this component's own business is how far each cell sits from the one above it. */
.section-group[b-w74jk8xyiu] {
    margin-top: 1.25rem;
}

.section-features[b-w74jk8xyiu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

/* Vertical icon-over-label tile (label on top, large icon below, transparent background)
   matching the legacy On Property dashboard. */
[b-w74jk8xyiu] .section-feature-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 1.25rem 0.75rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    color: var(--roc-color-primary);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.1s ease-in-out;
}

/* --roc-color-link, not --roc-color-accent: the accent must not carry text (CONTRIBUTING, "Design
   tokens"). On this rule's own --roc-surface-hover fill the accent computes to 3.24:1, below the
   4.5:1 AA floor; the link token is 4.75:1 on the same fill and is the documented substitute. */
[b-w74jk8xyiu] .section-feature-link:hover {
    background-color: var(--roc-surface-hover);
    color: var(--roc-color-link);
    text-decoration: none;
}

[b-w74jk8xyiu] .section-feature-icon {
    font-size: 2.5rem;
    color: var(--roc-color-primary);
    line-height: 1;
}

/* Follows the label above rather than staying on the accent. The icon is a graphical object at
   3:1, so the accent cleared that bar on its own — but the label and its icon are one hover
   treatment, and splitting them leaves a tile that hovers in two different blues. */
[b-w74jk8xyiu] .section-feature-link:hover .section-feature-icon {
    color: var(--roc-color-link);
}

[b-w74jk8xyiu] .section-feature-label {
    order: -1;
    font-size: 0.85rem;
}

/* Stub — feature not yet ported. Muted, non-interactive. */
[b-w74jk8xyiu] .section-feature-stub {
    color: var(--roc-text-muted);
}

[b-w74jk8xyiu] .section-feature-stub .section-feature-icon {
    color: var(--roc-border-muted);
}

[b-w74jk8xyiu] .section-feature-stub:hover {
    background-color: transparent;
    color: var(--roc-text-muted);
    cursor: default;
}

[b-w74jk8xyiu] .section-feature-stub:hover .section-feature-icon {
    color: var(--roc-border-muted);
}
/* /Shared/ToastContainer.razor.rz.scp.css */
.toast-container[b-sjix8oexk9] {
    z-index: 1080;
}

.toast[b-sjix8oexk9] {
    min-width: 18rem;
    margin-bottom: 0.5rem;
}

/* Severity bands come from the --roc-severity-* group in app.css (AB#8174), not from local
   literals. Same values as before, so this is a rename rather than a restyle.
   These are --roc-severity-danger-*, not --roc-danger-*; why, and why the two are not duplicates,
   is in app.css's note on the group, and pinned by ToastSeverityColourTests.
   .toast-error rather than .toast-danger because the class is generated from
   NotificationSeverity.Error (ToastContainer.razor) — ToastSeverityColourTests asserts every enum
   member has a rule here, so a rename cannot silently unstyle a toast. */
.toast-success[b-sjix8oexk9] {
    background-color: var(--roc-severity-success-bg);
    color: var(--roc-severity-success-text);
    border-color: var(--roc-severity-success-border);
}

.toast-info[b-sjix8oexk9] {
    background-color: var(--roc-severity-info-bg);
    color: var(--roc-severity-info-text);
    border-color: var(--roc-severity-info-border);
}

.toast-warning[b-sjix8oexk9] {
    background-color: var(--roc-severity-warning-bg);
    color: var(--roc-severity-warning-text);
    border-color: var(--roc-severity-warning-border);
}

.toast-error[b-sjix8oexk9] {
    background-color: var(--roc-severity-danger-bg);
    color: var(--roc-severity-danger-text);
    border-color: var(--roc-severity-danger-border);
}