/* /Components/Registrations/CategoryPopover.razor.rz.scp.css */
.overlay[b-tgcin5yhvn] {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 54, .32);
    z-index: 50;
}

/* max-height plus a scrolling body is what keeps the list inside the viewport at any grid size —
   the anchored version could not, being clipped by the grid's scroll container. */
.picker[b-tgcin5yhvn] {
    position: fixed;
    z-index: 51;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--ob-surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 40, 54, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    text-align: left;
}

.pick-head[b-tgcin5yhvn] {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: center;
}

.pick-title[b-tgcin5yhvn] {
    font-size: 16px;
    font-weight: 700;
}

.pick-sub[b-tgcin5yhvn] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

.close[b-tgcin5yhvn] {
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: var(--ob-text-muted);
    flex: none;
}

.close:hover[b-tgcin5yhvn] {
    background: var(--ob-hover-strong);
}

.pick-list[b-tgcin5yhvn] {
    overflow: auto;
    padding: 8px 12px 14px;
}

.pick-option[b-tgcin5yhvn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--ob-radius);
    cursor: pointer;
}

.pick-option:hover[b-tgcin5yhvn] {
    background: var(--ob-hover);
}

.pick-option.selected[b-tgcin5yhvn] {
    background: var(--ob-primary-soft);
}

.dot[b-tgcin5yhvn] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.pick-option-text[b-tgcin5yhvn] {
    flex: 1;
}

.pick-option-name[b-tgcin5yhvn] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ob-text);
}

.pick-option-desc[b-tgcin5yhvn] {
    font-size: 12px;
    color: var(--ob-text-faint);
    line-height: 1.4;
}

.pick-readonly[b-tgcin5yhvn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px 20px 20px;
    font-size: 12.5px;
    color: var(--ob-text-muted);
    line-height: 1.45;
}
/* /Components/Registrations/ClientSidebar.razor.rz.scp.css */
.sidebar[b-6b173enw7i] {
    width: 296px;
    flex: none;
    background: var(--ob-surface);
    border-right: 1px solid var(--ob-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Folded: a strip just wide enough for the button that opens it again. The list, search and footer
   are not rendered at all in this state, so nothing below applies to it. */
.sidebar.collapsed[b-6b173enw7i] {
    width: 52px;
    align-items: center;
    padding: 12px 0;
    gap: 10px;
}

.sidebar-top[b-6b173enw7i] {
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.title-row[b-6b173enw7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-title[b-6b173enw7i] {
    font-size: 15px;
    font-weight: 600;
}

/* Same 34px square in both states, so the eye finds it in the same place after the fold. */
.fold[b-6b173enw7i] {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ob-border-input);
    border-radius: 8px;
    background: var(--ob-surface);
    color: var(--ob-text-muted);
    cursor: pointer;
}

.fold:hover[b-6b173enw7i] {
    background: var(--ob-hover);
    color: var(--ob-text);
}

/* The one fact the folded panel still has to carry. Also opens the panel — anyone tapping the count
   wants to see or change the selection behind it. */
.strip-count[b-6b173enw7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 40px;
    padding: 8px 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ob-text-faint);
    font-family: inherit;
    cursor: pointer;
}

.strip-count:hover[b-6b173enw7i] {
    background: var(--ob-hover-strong);
}

.strip-number[b-6b173enw7i] {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--ob-hover-strong);
    color: var(--ob-text-muted);
}

.strip-count.has[b-6b173enw7i] {
    color: var(--ob-primary);
}

.strip-count.has .strip-number[b-6b173enw7i] {
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
}

/* Reads bottom-to-top along the strip, like a book's spine. */
.strip-title[b-6b173enw7i] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ob-text-ghost);
    white-space: nowrap;
}

.search[b-6b173enw7i] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    background: var(--ob-hover);
}

.search input[b-6b173enw7i] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: inherit;
    flex: 1;
    color: var(--ob-text);
    min-width: 0;
}

.group-list[b-6b173enw7i] {
    flex: 1;
    overflow: auto;
    padding: 0 10px 10px;
}

.group-row[b-6b173enw7i] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 8px;
    border-radius: 9px;
    cursor: pointer;
}

.group-row:hover[b-6b173enw7i] {
    background: var(--ob-hover);
}

.chevron[b-6b173enw7i] {
    transition: transform .15s;
    flex: none;
}

.chevron.open[b-6b173enw7i] {
    transform: rotate(90deg);
}

.checkbox[b-6b173enw7i] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    padding: 0;
    background: var(--ob-surface);
    border: 1.6px solid var(--ob-checkbox-border);
}

.checkbox.on[b-6b173enw7i] {
    background: var(--ob-primary);
    border: none;
}

.group-name[b-6b173enw7i] {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-count[b-6b173enw7i] {
    margin-left: auto;
    font-size: 12px;
    color: var(--ob-text-ghost);
    flex: none;
}

.client-row[b-6b173enw7i] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 8px 0 34px;
    border-radius: 9px;
    cursor: pointer;
}

.client-row:hover[b-6b173enw7i] {
    filter: brightness(.98);
}

.client-row.on[b-6b173enw7i] {
    background: var(--ob-primary-soft);
}

.client-name[b-6b173enw7i] {
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-name.selected[b-6b173enw7i] {
    font-weight: 500;
}

.sidebar-foot[b-6b173enw7i] {
    padding: 14px 18px;
    border-top: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}

.count-label[b-6b173enw7i] {
    font-size: 13px;
    color: var(--ob-text-muted);
}

.count-label strong[b-6b173enw7i] {
    color: var(--ob-primary);
}

.clear[b-6b173enw7i] {
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ob-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.clear:hover[b-6b173enw7i] {
    text-decoration: underline;
}
/* /Components/Registrations/ContextPersonModal.razor.rz.scp.css */
.overlay[b-byl4m2mkl1] {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 54, .32);
    z-index: 50;
}

.picker[b-byl4m2mkl1] {
    position: fixed;
    z-index: 51;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--ob-surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 40, 54, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.picker-head[b-byl4m2mkl1] {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: start;
    gap: 12px;
}

.picker-title[b-byl4m2mkl1] {
    font-size: 16px;
    font-weight: 700;
}

.picker-sub[b-byl4m2mkl1] {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--ob-text-faint);
    line-height: 1.45;
}

.close[b-byl4m2mkl1] {
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: var(--ob-text-muted);
}

.close:hover[b-byl4m2mkl1] {
    background: var(--ob-hover-strong);
}

.search[b-byl4m2mkl1] {
    margin: 12px 16px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    height: 38px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    flex: none;
}

.search input[b-byl4m2mkl1] {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ob-text);
    width: 100%;
}

.picker-body[b-byl4m2mkl1] {
    overflow: auto;
    padding: 6px 12px 12px;
}

.row[b-byl4m2mkl1] {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--ob-radius);
}

.row.head[b-byl4m2mkl1] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ob-text-ghost);
    padding-bottom: 4px;
}

.row.option[b-byl4m2mkl1] {
    cursor: pointer;
}

.row.option:hover[b-byl4m2mkl1] {
    background: var(--ob-hover-strong);
}

.row.option.selected[b-byl4m2mkl1] {
    background: var(--ob-primary-soft);
}

.role[b-byl4m2mkl1] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.name[b-byl4m2mkl1] {
    font-size: 13.5px;
    font-weight: 600;
}

.picker-empty[b-byl4m2mkl1] {
    padding: 20px;
    font-size: 13px;
    color: var(--ob-text-faint);
    text-align: center;
}

.picker-foot[b-byl4m2mkl1] {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.required[b-byl4m2mkl1] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

.none[b-byl4m2mkl1], .cancel[b-byl4m2mkl1] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--ob-radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--ob-surface);
    color: var(--ob-text-muted);
    border: 1px solid var(--ob-border);
}

.none:hover[b-byl4m2mkl1], .cancel:hover[b-byl4m2mkl1] {
    background: var(--ob-hover-strong);
}

.cancel[b-byl4m2mkl1] {
    margin-left: auto;
}
/* /Components/Registrations/LegendModal.razor.rz.scp.css */
.overlay[b-fxi61uipmg] {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 54, .32);
    z-index: 50;
}

.legend[b-fxi61uipmg] {
    position: fixed;
    z-index: 51;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--ob-surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 40, 54, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.legend-head[b-fxi61uipmg] {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: center;
}

.legend-title[b-fxi61uipmg] {
    font-size: 16px;
    font-weight: 700;
}

.close[b-fxi61uipmg] {
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: var(--ob-text-muted);
}

.close:hover[b-fxi61uipmg] {
    background: var(--ob-hover-strong);
}

.legend-body[b-fxi61uipmg] {
    overflow: auto;
    padding: 10px 12px 16px;
}

.legend-item[b-fxi61uipmg] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: var(--ob-radius);
}

.dot[b-fxi61uipmg] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.legend-name[b-fxi61uipmg] {
    font-size: 13.5px;
    font-weight: 600;
}

.default-badge[b-fxi61uipmg] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
    border-radius: 99px;
    padding: 2px 8px;
    margin-left: 8px;
}

/* Mirrors the grid's hollow .pill.seeded at swatch size, in the neutral text colour: the outline is
   what carries the meaning, not the category hue. */
.legend-note[b-fxi61uipmg] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 6px 10px 0;
    padding-top: 12px;
    border-top: 1px solid var(--ob-border-soft);
    font-size: 12.5px;
    color: var(--ob-text-muted);
}

.note-sample[b-fxi61uipmg] {
    width: 34px;
    height: 20px;
    border: 1px dashed var(--ob-text-faint);
    border-radius: 99px;
    display: grid;
    place-items: center;
    flex: none;
}

.note-dot[b-fxi61uipmg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ob-text-faint);
}

.legend-desc[b-fxi61uipmg] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
    line-height: 1.45;
}

.legend-empty[b-fxi61uipmg] {
    padding: 20px;
    font-size: 13px;
    color: var(--ob-text-faint);
    text-align: center;
}
/* /Components/Registrations/PageHeader.razor.rz.scp.css */
.page-header[b-e5y1igdmkf] {
    min-height: 72px;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 24px;
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
}

.title-block[b-e5y1igdmkf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crumb[b-e5y1igdmkf] {
    font-size: 12px;
    color: var(--ob-text-faint);
}

.title[b-e5y1igdmkf] {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.actions[b-e5y1igdmkf] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Positioning context for the week picker, which the pill's overflow would otherwise clip. */
.stepper-wrap[b-e5y1igdmkf] {
    position: relative;
    display: flex;
}

.date-stepper[b-e5y1igdmkf] {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    background: var(--ob-surface);
    overflow: hidden;
}

.step[b-e5y1igdmkf] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--ob-text-muted);
    border: none;
    border-right: 1px solid var(--ob-border-soft);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.step-right[b-e5y1igdmkf] {
    border-right: none;
    border-left: 1px solid var(--ob-border-soft);
}

.step:hover[b-e5y1igdmkf] {
    background: var(--ob-hover);
}

/* Fourth segment of the stepper pill; the divider matches .step-right's. */
.today[b-e5y1igdmkf] {
    height: 46px;
    padding: 0 14px;
    border: none;
    border-left: 1px solid var(--ob-border-soft);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ob-text-soft);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
}

.today:hover:not(:disabled)[b-e5y1igdmkf] {
    background: var(--ob-hover);
}

.today:disabled[b-e5y1igdmkf] {
    cursor: default;
    opacity: .45;
}

/* A button since it opens the week picker, but styled as the plain label it has always looked like. */
.date-label[b-e5y1igdmkf] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: inherit;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
}

.date-label:hover[b-e5y1igdmkf] {
    background: var(--ob-hover);
}

.ghost[b-e5y1igdmkf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    min-width: 46px;
    padding: 0 12px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ob-text-soft);
    background: var(--ob-surface);
    cursor: pointer;
}

.ghost:hover[b-e5y1igdmkf] {
    background: var(--ob-hover);
}

@media (max-width: 1349px) {
    .ghost-label[b-e5y1igdmkf] {
        display: none;
    }
}

/* Tablet widths, in step with the grid and the page gutters. */
@media (max-width: 1199px) {
    .page-header[b-e5y1igdmkf] {
        padding: 10px 14px;
    }
}

.ghost:disabled[b-e5y1igdmkf] {
    cursor: default;
    opacity: .55;
}

.ghost:disabled:hover[b-e5y1igdmkf] {
    background: var(--ob-surface);
}

/* The count is what makes the button meaningful, so unlike .ghost-label it survives the collapse. */
.count[b-e5y1igdmkf] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ob-text-muted);
    background: var(--ob-hover-strong);
    border-radius: 99px;
    padding: 2px 8px;
}

/* Destructive, so it keeps its label at every width. */
.discard[b-e5y1igdmkf] {
    color: #b3362a;
    border-color: #e8c4bf;
}

.discard:hover:not(:disabled)[b-e5y1igdmkf] {
    background: #fbe9e7;
}

.discard:disabled[b-e5y1igdmkf] {
    cursor: default;
    opacity: .6;
}

.save[b-e5y1igdmkf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: none;
    border-radius: var(--ob-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--ob-primary-muted);
    box-shadow: 0 1px 2px rgba(14, 110, 92, .3);
    cursor: pointer;
}

.save.has-dirty[b-e5y1igdmkf] {
    background: var(--ob-primary);
}

.save:hover:not(:disabled)[b-e5y1igdmkf] {
    filter: brightness(1.06);
}

.save:disabled[b-e5y1igdmkf] {
    cursor: default;
    opacity: .8;
}

.badge[b-e5y1igdmkf] {
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, .22);
    border-radius: 99px;
    padding: 2px 8px;
}
/* /Components/Registrations/RegistrationGrid.razor.rz.scp.css */
/* The rounded corners are re-applied per corner cell below. Nothing overflows the card any more: the
   category picker is a dialog owned by the page, because .content scrolls and clipped it here. */
.grid-card[b-8vhbedmsv9] {
    --client-col: 210px;
    --day-col-min: 96px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    /* The floor follows the column count rather than being one fixed number: a 5-day tenant never
       needed the width a 7-day one does, and every pixel the floor gives up is one less the card
       scrolls sideways by on a tablet. Below the floor .content scrolls, as before. */
    min-width: calc(var(--client-col) + var(--day-count, 7) * var(--day-col-min));
}

/* --day-count is set inline from Days.Count: the tenant's WeekDays setting renders 5 or 7 columns.
   minmax(0, 1fr) rather than 1fr, so a long category label shrinks its pill instead of its column. */
.grid-row[b-8vhbedmsv9] {
    display: grid;
    grid-template-columns: var(--client-col) repeat(var(--day-count, 7), minmax(0, 1fr));
    border-bottom: 1px solid var(--ob-border-soft);
}

/* Tablet widths: the avatar goes, the client column narrows, and the day columns may get tighter. With
   the client panel folded a 7-day week then fits an iPad in landscape without scrolling. */
@media (max-width: 1199px) {
    .grid-card[b-8vhbedmsv9] {
        --client-col: 156px;
        --day-col-min: 84px;
    }

    .avatar[b-8vhbedmsv9],
    .avatar-spacer[b-8vhbedmsv9] {
        display: none;
    }

    .client-cell[b-8vhbedmsv9] {
        padding-left: 12px;
    }
}

.grid-row:last-child[b-8vhbedmsv9] {
    border-bottom: none;
}

.grid-head[b-8vhbedmsv9] {
    border-bottom: 1px solid var(--ob-border);
}

.corner[b-8vhbedmsv9] {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ob-text-faint);
    display: flex;
    align-items: end;
}

.day-head[b-8vhbedmsv9] {
    padding: 12px 6px;
    border-left: 1px solid var(--ob-border-soft);
    text-align: center;
}

.day-head.weekend[b-8vhbedmsv9] {
    background: var(--ob-weekend);
}

.grid-head .day-head:last-child[b-8vhbedmsv9] {
    border-top-right-radius: var(--ob-radius-lg);
}

.day-top[b-8vhbedmsv9] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-text-soft);
}

.day-top.today[b-8vhbedmsv9] {
    color: var(--ob-primary);
}

.today-badge[b-8vhbedmsv9] {
    font-size: 10px;
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
    border-radius: 99px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: 1px;
}

.day-sub[b-8vhbedmsv9] {
    font-size: 11.5px;
    color: var(--ob-text-ghost);
}

.client-cell[b-8vhbedmsv9] {
    padding: 0 12px 0 16px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar[b-8vhbedmsv9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.avatar-spacer[b-8vhbedmsv9] {
    width: 32px;
    flex: none;
}

.client-name[b-8vhbedmsv9] {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.part-chip[b-8vhbedmsv9] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ob-text-faint);
    background: var(--ob-hover-strong);
    border-radius: 6px;
    padding: 3px 7px;
    flex: none;
}

.cell[b-8vhbedmsv9] {
    border-left: 1px solid var(--ob-border-soft);
    display: grid;
    place-items: center;
    padding: 6px 4px;
    cursor: pointer;
    background: var(--ob-surface);
    /* A grid item's min-width is auto, which would let a wide pill push the column back out. */
    min-width: 0;
}

.cell.weekend[b-8vhbedmsv9] {
    background: var(--ob-weekend);
}

.cell:hover[b-8vhbedmsv9] {
    box-shadow: inset 0 0 0 2px var(--ob-focus-ring);
}

.grid-row:last-child .cell:last-child[b-8vhbedmsv9] {
    border-bottom-right-radius: var(--ob-radius-lg);
}

.cell-default[b-8vhbedmsv9] {
    font-size: 13px;
    color: var(--ob-text-ghost);
}

/* --pill-bg/--pill-fg are set inline from the cell's category colours; .seeded reads them back rather
   than being handed a fill it has to override. box-sizing is border-box (Bootstrap), so the dashed
   border below costs no extra height. */
.pill[b-8vhbedmsv9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    background: var(--pill-bg);
    color: var(--pill-fg);
    max-width: 100%;
}

/* The label yields before the dot or the lock do: those two are what identify the cell at a glance,
   and the full name is a tap away in the picker and the legend. */
.pill-label[b-8vhbedmsv9] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill svg[b-8vhbedmsv9] {
    flex: none;
}

/* The client's stored default for this weekday: shown, but no registration exists for it yet. Dimming
   the fill read as a paler registration, so the fill is dropped instead — a solid pill now always
   means "registered", and a dashed outline on the cell's own background means "default, not stored".
   The dot keeps its full-strength colour, so the category stays as easy to scan as before. */
.pill.seeded[b-8vhbedmsv9] {
    background: transparent;
    border-color: var(--pill-fg);
    border-style: dashed;
    font-weight: 500;
}

.pill-dot[b-8vhbedmsv9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.empty[b-8vhbedmsv9] {
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--ob-text-faint);
}

.empty-title[b-8vhbedmsv9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ob-text-muted);
}

.empty-text[b-8vhbedmsv9] {
    font-size: 13px;
}
/* /Components/Registrations/TabBar.razor.rz.scp.css */
.tabs[b-q8s7yalk76] {
    padding: 14px 24px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* Tablet widths, in step with the grid and the page gutters. */
@media (max-width: 1199px) {
    .tabs[b-q8s7yalk76] {
        padding: 12px 14px 0;
    }
}

.tab[b-q8s7yalk76] {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--ob-radius);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    background: var(--ob-surface);
    color: var(--ob-text-muted);
    border: 1px solid var(--ob-border);
    font-weight: 500;
}

.tab:hover[b-q8s7yalk76] {
    filter: brightness(.97);
}

.tab.off[b-q8s7yalk76] {
    cursor: not-allowed;
    color: var(--ob-text-ghost);
    background: var(--ob-hover);
    border-style: dashed;
}

.tab.off:hover[b-q8s7yalk76] {
    filter: none;
}

.tab.active[b-q8s7yalk76] {
    background: var(--ob-dark);
    color: #fff;
    border-color: var(--ob-dark);
    font-weight: 600;
}

/* Segmented, and shorter than the tabs: it selects a view of the active tab, not a sibling of it. */
.mode-toggle[b-q8s7yalk76] {
    margin-left: auto;
    align-self: center;
    display: flex;
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    overflow: hidden;
    background: var(--ob-surface);
}

.mode[b-q8s7yalk76] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 0;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--ob-text-muted);
}

.mode:hover[b-q8s7yalk76] {
    background: var(--ob-hover);
}

.mode.active[b-q8s7yalk76] {
    background: var(--ob-dark);
    color: #fff;
    font-weight: 600;
}
/* /Components/Registrations/WeekPicker.razor.rz.scp.css */
.scrim[b-zso2rir4aa] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.picker[b-zso2rir4aa] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    width: 300px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius-lg);
    box-shadow: 0 16px 40px rgba(20, 40, 54, .18);
    overflow: hidden;
    outline: none;
    text-align: left;
    cursor: default;
}

.pick-head[b-zso2rir4aa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--ob-border-soft);
}

.month-name[b-zso2rir4aa] {
    font-size: 13.5px;
    font-weight: 600;
}

.month-step[b-zso2rir4aa] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--ob-radius);
    color: var(--ob-text-muted);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.month-step:hover[b-zso2rir4aa] {
    background: var(--ob-hover);
}

.grid[b-zso2rir4aa] {
    padding: 6px;
}

/* Week-number gutter plus the seven days — the header row and every week share the tracks. */
.head-row[b-zso2rir4aa],
.week[b-zso2rir4aa] {
    display: grid;
    grid-template-columns: 26px repeat(7, 1fr);
}

.col-head[b-zso2rir4aa] {
    padding: 4px 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ob-text-faint);
    text-align: center;
}

.week[b-zso2rir4aa] {
    border-radius: var(--ob-radius);
    cursor: pointer;
}

.week:hover[b-zso2rir4aa] {
    background: var(--ob-hover);
}

.week.selected[b-zso2rir4aa] {
    background: var(--ob-primary-soft);
}

.cell[b-zso2rir4aa] {
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    color: var(--ob-text);
}

/* The week number, and the marker for the week containing today. */
.gutter[b-zso2rir4aa] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ob-text-ghost);
    border-left: 2px solid transparent;
    border-radius: 2px;
}

.week.current > .gutter[b-zso2rir4aa] {
    border-left-color: var(--ob-primary);
    color: var(--ob-primary);
}

/* Days spilling in from the neighbouring month. */
.outside[b-zso2rir4aa] {
    color: var(--ob-text-ghost);
}

/* Only shaded for Mon–Fri tenants, whose grid never shows these days. */
.weekend[b-zso2rir4aa] {
    background: var(--ob-weekend);
}

.today[b-zso2rir4aa] {
    font-weight: 700;
    color: var(--ob-primary);
}
/* /Components/Security/EmployeeMatrixPanel.razor.rz.scp.css */
.filters[b-a5vhd5wy13] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.field[b-a5vhd5wy13] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-a5vhd5wy13] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ob-text-faint);
}

.field select[b-a5vhd5wy13],
.field input[b-a5vhd5wy13] {
    font: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    background: var(--ob-surface);
    color: var(--ob-text);
    min-width: 220px;
}

.field select:focus[b-a5vhd5wy13],
.field input:focus[b-a5vhd5wy13] {
    outline: 2px solid var(--ob-focus-ring);
    outline-offset: 1px;
    border-color: var(--ob-primary-muted);
}

.apply[b-a5vhd5wy13] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--ob-primary);
    border: none;
    border-radius: var(--ob-radius);
    padding: 8px 18px;
    cursor: pointer;
}

.apply:hover:not(:disabled)[b-a5vhd5wy13] {
    background: var(--ob-primary-dark);
}

.apply:disabled[b-a5vhd5wy13] {
    background: var(--ob-primary-muted);
    cursor: default;
}

.clear[b-a5vhd5wy13] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-text-muted);
    background: transparent;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    padding: 8px 14px;
    cursor: pointer;
}

.clear:hover[b-a5vhd5wy13] {
    background: var(--ob-hover-strong);
}

.panel-intro[b-a5vhd5wy13] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.intro-text[b-a5vhd5wy13] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

.note[b-a5vhd5wy13] {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--ob-radius);
    background: #fdf4e7;
    border: 1px solid #f0dcc0;
    font-size: 12.5px;
    color: #8f5624;
}

.placeholder[b-a5vhd5wy13] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ob-text-faint);
    text-align: center;
}

/* Explains the screen's scope, which is why a search can legitimately find nobody. */
.placeholder-note[b-a5vhd5wy13] {
    font-size: 12px;
    color: var(--ob-text-ghost);
    max-width: 420px;
    line-height: 1.5;
}

.retry[b-a5vhd5wy13] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
    border: none;
    border-radius: var(--ob-radius);
    padding: 7px 16px;
    cursor: pointer;
}

.retry:hover[b-a5vhd5wy13] {
    background: var(--ob-primary-muted);
    color: #fff;
}
/* /Components/Security/RightsLegend.razor.rz.scp.css */
.legend[b-mdc7gz9vf0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.item[b-mdc7gz9vf0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.label[b-mdc7gz9vf0] {
    font-size: 12px;
    color: var(--ob-text-muted);
}

/* Same fills and glyphs as the matrix cells, at cell size, so the legend is a sample of the grid rather
   than a second set of symbols to learn — but a firm outline the cells do not have. In the grid a cell
   is bounded by its neighbours and the gridlines; a chip alone on the page has neither, and the whole
   point of the "denied" chip is that it is an empty bounded box. --ob-matrix-edge is 3:1 on the
   surface, which is the floor for a boundary the reader has to make out (WCAG 1.4.11). */
.swatch[b-mdc7gz9vf0] {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 4px;
    border: 1px solid var(--ob-matrix-edge);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.swatch.allowed[b-mdc7gz9vf0] {
    background: var(--ob-matrix-allowed);
    color: var(--ob-primary);
}

/* --ob-text-soft, not muted: on the deeper grey the muted glyph falls to 4.41:1, and a 12px bold glyph
   does not qualify as large text. */
.swatch.readonly[b-mdc7gz9vf0] {
    background: var(--ob-matrix-readonly);
    color: var(--ob-text-soft);
}

.swatch.denied[b-mdc7gz9vf0] {
    background: var(--ob-surface);
}

.swatch.unset[b-mdc7gz9vf0] {
    background: repeating-linear-gradient(
        45deg,
        var(--ob-surface),
        var(--ob-surface) 3px,
        var(--ob-matrix-hatch) 3px,
        var(--ob-matrix-hatch) 6px);
}

.swatch.overridden[b-mdc7gz9vf0] {
    background: var(--ob-matrix-override);
}
/* /Components/Security/RightsMatrixGrid.razor.rz.scp.css */
/* The scroller owns both axes. The grid inside is wider than the viewport by design — 60 modules at
   34px plus a 210px name column — so this is the only element that scrolls sideways. */
.matrix-scroll[b-c0xwchvcft] {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 300px);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    background: var(--ob-surface);
}

/* One grid for everything: bands, column heads and every cell are siblings, which is what guarantees
   they line up. --col-count is set inline from Modules.Count. */
.matrix[b-c0xwchvcft] {
    display: grid;
    grid-template-columns: 210px repeat(var(--col-count), 34px);
    width: max-content;
    font-size: 12px;
}

/* --- sticky corners --- */

.corner[b-c0xwchvcft] {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ob-surface);
    border-right: 1px solid var(--ob-border);
}

.corner-band[b-c0xwchvcft] {
    top: 0;
    border-bottom: 1px solid var(--ob-border-soft);
}

.corner-head[b-c0xwchvcft] {
    top: 26px;
    display: flex;
    align-items: flex-end;
    padding: 0 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ob-text-faint);
    border-bottom: 1px solid var(--ob-border);
}

/* --- header bands --- */

.band[b-c0xwchvcft] {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 6px;
    /* A step above the stripe: with the stripe at 1.13:1 the old --ob-hover-strong band came out
       lighter than the body rows it heads, which inverts the hierarchy. */
    background: var(--ob-matrix-band);
    border-right: 1px solid var(--ob-surface);
    border-bottom: 1px solid var(--ob-border-soft);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ob-text-muted);
    white-space: nowrap;
}

/* --- column heads: rotated, because 34px of width cannot hold a legacy module name --- */

/* A button so the full name is reachable by tap: on a touch screen there is no hover, and the label is
   abbreviated by design. Styled flat so it still reads as a header, not a control. */
.col-head[b-c0xwchvcft] {
    position: sticky;
    top: 26px;
    z-index: 1;
    /* Sized so the shortened labels fit outright rather than ellipsizing: on Binnenstad this holds 59
       of 60 in full. The last one is a 89-character name that no header height would fit, which is why
       the tap-to-read panel exists rather than this growing further. */
    height: 205px;
    background: var(--ob-surface);
    border: none;
    border-right: 1px solid var(--ob-border-soft);
    border-bottom: 1px solid var(--ob-border);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 8px;
    font: inherit;
    cursor: pointer;
}

.col-head:hover[b-c0xwchvcft] {
    background: var(--ob-hover);
}

.col-head.open[b-c0xwchvcft] {
    background: var(--ob-primary-soft);
}

.col-label[b-c0xwchvcft] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 186px;
    font-size: 11px;
    color: var(--ob-text-soft);
}

.col-head.open .col-label[b-c0xwchvcft] {
    color: var(--ob-primary);
    font-weight: 700;
}

/* The full name of the tapped column, as a bar directly above the grid: always on screen, never
   overlapping the headers, and short enough that opening it barely moves the grid. */
.col-detail[b-c0xwchvcft] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 9px 10px 9px 14px;
    background: var(--ob-primary-soft);
    border: 1px solid var(--ob-primary-muted);
    border-radius: var(--ob-radius);
}

.detail-band[b-c0xwchvcft] {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ob-primary);
}

.detail-name[b-c0xwchvcft] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ob-text);
    line-height: 1.35;
    min-width: 0;
}

.detail-id[b-c0xwchvcft] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--ob-text-muted);
}

.detail-close[b-c0xwchvcft] {
    margin-left: auto;
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ob-primary);
    cursor: pointer;
}

.detail-close:hover[b-c0xwchvcft] {
    background: var(--ob-primary-muted);
    color: #fff;
}

/* --- row heads --- */

.row-head[b-c0xwchvcft] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ob-surface);
    border-right: 1px solid var(--ob-border);
    border-bottom: 1px solid var(--ob-border-soft);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.row-head.muted .row-label[b-c0xwchvcft] {
    color: var(--ob-text-faint);
    font-style: italic;
}

.row-label[b-c0xwchvcft] {
    font-weight: 600;
    color: var(--ob-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --ob-text-muted rather than --ob-text-ghost: this carries real information (the role, and how many
   users hold it), and ghost is 2.47:1 against the row — below the 4.5:1 that 11px text needs. */
.row-sub[b-c0xwchvcft] {
    font-size: 11px;
    color: var(--ob-text-muted);
    white-space: nowrap;
    flex: none;
}

/* Count of overridden cells — the reason to look at this row at all, so it sits in the name column
   where it is visible without scrolling sideways. */
.row-flag[b-c0xwchvcft] {
    margin-left: auto;
    flex: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--ob-matrix-override-text);
    background: var(--ob-matrix-override);
    border: 1px solid var(--ob-matrix-override-edge);
    border-radius: 99px;
    padding: 0 6px;
}

/* --- cells --- */

.cell[b-c0xwchvcft] {
    height: 30px;
    display: grid;
    place-items: center;
    border-right: 1px solid var(--ob-border-soft);
    border-bottom: 1px solid var(--ob-border-soft);
}

.glyph[b-c0xwchvcft] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* The four level fills come from the matrix ramp, not from --ob-primary-soft/--ob-hover-strong: those
   two are a hover apart from white, which leaves them indistinguishable from a stripe that is actually
   visible. Each fill below holds against both the plain row and the striped one. */
.cell.allowed[b-c0xwchvcft] {
    background: var(--ob-matrix-allowed);
    color: var(--ob-primary);
}

/* --ob-text-soft, not muted: muted is 4.41:1 on this fill, under the 4.5:1 a 12px bold glyph needs. */
.cell.readonly[b-c0xwchvcft] {
    background: var(--ob-matrix-readonly);
    color: var(--ob-text-soft);
}

/* Denied and unset both render empty, so the difference has to be carried by the cell itself: plain
   surface for a deliberate "no", a hatch for "never configured". */
.cell.denied[b-c0xwchvcft] {
    background: var(--ob-surface);
}

.cell.unset[b-c0xwchvcft] {
    background: repeating-linear-gradient(
        45deg,
        var(--ob-surface),
        var(--ob-surface) 3px,
        var(--ob-matrix-hatch) 3px,
        var(--ob-matrix-hatch) 6px);
}

/* --- alternating rows ---
   Tracking one row across 60 columns is the hard part of reading this grid, and the empty cells are
   where the eye slips. Striping is applied to the row's own surface and to the two levels that render
   without a tint; the tinted levels keep their colour, which is doing more work than the stripe would.
   Each rule restates its level class so it out-specifies the plain .cell.zebra above it.
   The stripe is --ob-matrix-zebra (1.13:1) rather than --ob-hover (1.05:1): at 1.05 the stripe is
   present in the markup and absent to the eye, which is worse than no stripe, because the reader trusts
   a row boundary that is not actually being drawn. */
.row-head.zebra[b-c0xwchvcft] {
    background: var(--ob-matrix-zebra);
}

.cell.zebra[b-c0xwchvcft] {
    background: var(--ob-matrix-zebra);
}

.cell.zebra.allowed[b-c0xwchvcft] {
    background: var(--ob-matrix-allowed);
}

.cell.zebra.readonly[b-c0xwchvcft] {
    background: var(--ob-matrix-readonly);
}

.cell.zebra.unset[b-c0xwchvcft] {
    background: repeating-linear-gradient(
        45deg,
        var(--ob-matrix-zebra),
        var(--ob-matrix-zebra) 3px,
        var(--ob-matrix-hatch) 3px,
        var(--ob-matrix-hatch) 6px);
}

/* The tapped column, tinted down the whole grid so the cells being read line up with the header that
   names them — the vertical counterpart to the row striping. */
.cell.col-open[b-c0xwchvcft] {
    box-shadow: inset 1px 0 0 var(--ob-primary-muted), inset -1px 0 0 var(--ob-primary-muted);
}

/* An individual right departing from the role's — the salmon cells of the desktop grid. Last, so it
   wins over both the stripe and the level tint: it is the thing worth spotting. */
.cell.overridden[b-c0xwchvcft],
.cell.zebra.overridden[b-c0xwchvcft] {
    background: var(--ob-matrix-override);
    box-shadow: inset 0 0 0 1px var(--ob-matrix-override-edge);
    color: var(--ob-matrix-override-text);
}
/* /Components/Security/RoleMatrixPanel.razor.rz.scp.css */
.panel-intro[b-5tnjp2vprp] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.intro-text[b-5tnjp2vprp] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

/* A data-quality remark, not an error — amber rather than red, and it never blocks the grid. */
.note[b-5tnjp2vprp] {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--ob-radius);
    background: #fdf4e7;
    border: 1px solid #f0dcc0;
    font-size: 12.5px;
    color: #8f5624;
}

.placeholder[b-5tnjp2vprp] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--ob-text-faint);
}

.retry[b-5tnjp2vprp] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
    border: none;
    border-radius: var(--ob-radius);
    padding: 7px 16px;
    cursor: pointer;
}

.retry:hover[b-5tnjp2vprp] {
    background: var(--ob-primary-muted);
    color: #fff;
}
/* /Components/Shared/OrganisationPicker.razor.rz.scp.css */
/* The first screen anyone sees after signing in, and the only one that renders outside AppShell —
   so it carries its own full-page framing rather than inheriting the shell's. */
.picker-page[b-em2wk3j8fg] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ob-bg);
}

.picker-card[b-em2wk3j8fg] {
    width: 100%;
    max-width: 420px;
    padding: 32px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: 0 16px 40px rgba(20, 40, 54, .10);
    text-align: center;
}

/* The wordmark tile, not a tenant logo: which organisation this is, is the very question being asked. */
.picker-brand[b-em2wk3j8fg] {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border-radius: var(--ob-radius);
    background: var(--ob-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    letter-spacing: .04em;
}

.picker-title[b-em2wk3j8fg] {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: var(--ob-text);
}

.picker-text[b-em2wk3j8fg] {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ob-text-muted);
}

/* Names the organisation the message is about, between the heading and the explanation. Which one it
   was matters here: the remedy is a change to that organisation's data, and the user has to be able
   to tell an administrator which. */
.picker-org[b-em2wk3j8fg] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ob-text);
}

/* The server's own error text. Small and quiet, but present: it is what makes a failure reportable
   instead of a mystery. */
.picker-detail[b-em2wk3j8fg] {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-radius: var(--ob-radius);
    background: var(--ob-hover-strong);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ob-text-soft);
    text-align: left;
    overflow-wrap: anywhere;
}

/* Reads as a caution rather than an error: the list is usable, just possibly short. */
.picker-warning[b-em2wk3j8fg] {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--ob-matrix-override-edge);
    border-radius: var(--ob-radius);
    background: var(--ob-matrix-override);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ob-matrix-override-text);
    text-align: left;
}

.picker-list[b-em2wk3j8fg] {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.picker-option[b-em2wk3j8fg] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius);
    background: var(--ob-surface);
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.picker-option:hover[b-em2wk3j8fg] {
    border-color: var(--ob-primary-muted);
    background: var(--ob-primary-soft);
}

.option-name[b-em2wk3j8fg] {
    font-weight: 500;
}

.option-badge[b-em2wk3j8fg] {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--ob-matrix-override-edge);
    border-radius: 999px;
    background: var(--ob-matrix-override);
    color: var(--ob-matrix-override-text);
    font-size: 11px;
    font-weight: 600;
}

/* Spelled out under the option rather than hidden in a tooltip: it names an action for an
   administrator, and the person reading it is the one who has to pass it on. */
.option-note[b-em2wk3j8fg] {
    margin: 6px 2px 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ob-text-muted);
}

.picker-card .btn[b-em2wk3j8fg] {
    width: 100%;
}

.picker-card .btn + .btn[b-em2wk3j8fg] {
    margin-top: 8px;
}
/* /Components/Shared/SignInSplash.razor.rz.scp.css */
/* Rendered both full-page (while the authentication state resolves) and inside the picker card, so it
   centres itself without assuming either context's height. */
.splash[b-husfxpj1p3] {
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 32px 8px;
}

.splash-spinner[b-husfxpj1p3] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--ob-primary-soft);
    border-top-color: var(--ob-primary);
    border-radius: 50%;
    animation: splash-spin-b-husfxpj1p3 .8s linear infinite;
}

/* Respect a reduced-motion preference: hold the ring still rather than spinning it. */
@media (prefers-reduced-motion: reduce) {
    .splash-spinner[b-husfxpj1p3] {
        animation: none;
    }
}

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

.splash-text[b-husfxpj1p3] {
    margin: 0;
    font-size: 13.5px;
    color: var(--ob-text-muted);
}

/* Announced to screen readers, off-screen for everyone else. */
.visually-hidden[b-husfxpj1p3] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/TenantSettingsModal.razor.rz.scp.css */
.overlay[b-0p1pk8tnu5] {
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 54, .32);
    z-index: 50;
}

.panel[b-0p1pk8tnu5] {
    position: fixed;
    z-index: 51;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--ob-surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 40, 54, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.panel-head[b-0p1pk8tnu5] {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--ob-border-soft);
    display: flex;
    align-items: flex-start;
}

.head-text[b-0p1pk8tnu5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.panel-title[b-0p1pk8tnu5] {
    font-size: 16px;
    font-weight: 700;
}

.panel-sub[b-0p1pk8tnu5] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

.close[b-0p1pk8tnu5] {
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    color: var(--ob-text-muted);
}

.close:hover[b-0p1pk8tnu5] {
    background: var(--ob-hover-strong);
}

.panel-body[b-0p1pk8tnu5] {
    overflow: auto;
    padding: 10px 12px 16px;
}

/* Sticks the group heading to the top while its rows scroll past, so a value is never orphaned from
   the registration type it belongs to. */
.section[b-0p1pk8tnu5] {
    position: sticky;
    top: 0;
    background: var(--ob-surface);
    padding: 12px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ob-text-faint);
}

.row[b-0p1pk8tnu5] {
    padding: 8px 10px;
    border-radius: var(--ob-radius);
}

.row:hover[b-0p1pk8tnu5] {
    background: var(--ob-hover);
}

.row-main[b-0p1pk8tnu5] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.row-label[b-0p1pk8tnu5] {
    font-size: 13.5px;
    font-weight: 600;
}

.row-value[b-0p1pk8tnu5] {
    margin-left: auto;
    font-size: 13px;
    color: var(--ob-text-soft);
    text-align: right;
    /* Long values (a base URL) wrap rather than widen the panel. */
    overflow-wrap: anywhere;
}

/* Inline with the hex, so the reader can tell #4682b4 from #4682d4 without decoding it. */
.swatch[b-0p1pk8tnu5] {
    display: inline-block;
    vertical-align: -2px;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 3px;
    border: 1px solid var(--ob-border-input);
}

/* Contained on white for the same reason as the rail tile: tenant logos are any shape. */
.logo-preview[b-0p1pk8tnu5] {
    margin-left: auto;
    max-width: 160px;
    max-height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    padding: 4px;
}

.chip[b-0p1pk8tnu5] {
    margin-left: auto;
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 99px;
    padding: 2px 9px;
}

.chip.on[b-0p1pk8tnu5] {
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
}

.chip.off[b-0p1pk8tnu5] {
    color: var(--ob-text-faint);
    background: var(--ob-hover-strong);
}

/* The legacy column the value comes from — monospace, since it is an identifier to copy, not prose. */
.row-col[b-0p1pk8tnu5] {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--ob-text-ghost);
    overflow-wrap: anywhere;
}

.row-note[b-0p1pk8tnu5] {
    margin-top: 3px;
    font-size: 12px;
    color: var(--ob-text-faint);
    line-height: 1.45;
}

.empty[b-0p1pk8tnu5] {
    padding: 20px;
    font-size: 13px;
    color: var(--ob-text-faint);
    text-align: center;
}
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast-box[b-4kz5imqnhn] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ob-dark);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 40, 54, .3);
    animation: toast-in-b-4kz5imqnhn .2s ease;
}

.toast-error[b-4kz5imqnhn] {
    background: #4a1f1a;
}

@keyframes toast-in-b-4kz5imqnhn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
/* /Layout/AppShell.razor.rz.scp.css */
/* Grid rather than a flex row so the organization bar can span the full width beneath both the rail
   and the body without wrapping them in an extra element. The modal and toast are position: fixed,
   so being children here costs them nothing. */
.shell[b-3qves2hdaw] {
    height: 100vh;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    background: var(--ob-bg);
    color: var(--ob-text);
    overflow: hidden;
}

.shell-body[b-3qves2hdaw] {
    display: flex;
    min-width: 0;
    min-height: 0;
}

/* The tenant colour bar, mirroring the desktop app's status bar. Full width, below everything. */
.org-bar[b-3qves2hdaw] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    height: 26px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail[b-3qves2hdaw] {
    width: 78px;
    flex: none;
    background: var(--ob-surface);
    border-right: 1px solid var(--ob-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 6px;
}

.logo[b-3qves2hdaw] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ob-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
    flex: none;
}

/* Tenant logos are whatever the organization uploaded — the legacy picker accepts any aspect ratio,
   so contain it on a white ground rather than cropping someone's wordmark to a square. */
.logo-img[b-3qves2hdaw] {
    background: #fff;
    object-fit: contain;
    padding: 3px;
    border: 1px solid var(--ob-border);
}

/* ::deep so these also reach the <a> rendered by NavLink, which
   doesn't receive this component's CSS-isolation scope attribute. */
.rail[b-3qves2hdaw]  .rail-item {
    width: 62px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 10px;
    color: var(--ob-text-muted);
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.rail[b-3qves2hdaw]  .rail-item span {
    font-size: 10px;
    font-weight: 500;
}

.rail[b-3qves2hdaw]  .rail-item:hover:not(:disabled) {
    background: var(--ob-hover-strong);
}

.rail[b-3qves2hdaw]  .rail-item:disabled {
    opacity: .55;
    cursor: default;
}

.rail[b-3qves2hdaw]  .rail-link.active {
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
}

.rail[b-3qves2hdaw]  .rail-link.active span {
    font-weight: 600;
}

.rail-bottom[b-3qves2hdaw] {
    margin-top: auto;
}

/* The menu anchors to the rail's bottom slot, so it is positioned against this wrapper. */
.menu-wrap[b-3qves2hdaw] {
    position: relative;
}

.menu-scrim[b-3qves2hdaw] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.rail-menu[b-3qves2hdaw] {
    position: absolute;
    bottom: 0;
    left: calc(100% + 8px);
    z-index: 41;
    min-width: 168px;
    padding: 6px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border-input);
    border-radius: var(--ob-radius-lg);
    box-shadow: 0 16px 40px rgba(20, 40, 54, .18);
    text-align: left;
    outline: none;
}

.menu-label[b-3qves2hdaw] {
    padding: 5px 11px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ob-text-faint);
}

.menu-sep[b-3qves2hdaw] {
    height: 1px;
    margin: 5px 7px;
    background: var(--ob-border-soft);
}

.menu-option[b-3qves2hdaw] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: none;
    border-radius: var(--ob-radius);
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.menu-option:hover[b-3qves2hdaw] {
    background: var(--ob-hover-strong);
}

.menu-option.active .option-name[b-3qves2hdaw] {
    font-weight: 600;
    color: var(--ob-primary);
}

/* Its menu opens upward from the rail's foot, same as the system menu above it. */
.rail-account[b-3qves2hdaw] {
    margin-top: 10px;
}

/* Now a button rather than a div, so the base styles reset the control chrome. */
.avatar[b-3qves2hdaw] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ob-avatar-bg);
    color: var(--ob-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.avatar:hover[b-3qves2hdaw] {
    background: var(--ob-hover-strong);
}

/* The organisation under the user's name: which database this session is actually writing to, which
   matters to anyone who works for more than one. */
.menu-detail[b-3qves2hdaw] {
    padding: 0 11px 5px;
    font-size: 12px;
    color: var(--ob-text-faint);
    white-space: nowrap;
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
/* Full-viewport, no chrome — for the sign-in handshake, which runs before there is an organisation
   (and therefore before there is any branding to paint). */
.bare-layout[b-l9ng27kjtf] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ob-bg);
}
/* /Pages/AccessRights.razor.rz.scp.css */
/* Mirrors the registrations page shell: .main fills the shell body, a fixed header, and one scrolling
   .content beneath it. */
.main[b-33ytx2wmnv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-head[b-33ytx2wmnv] {
    flex: none;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--ob-border);
    background: var(--ob-surface);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.head-text[b-33ytx2wmnv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page-title[b-33ytx2wmnv] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.page-sub[b-33ytx2wmnv] {
    font-size: 12.5px;
    color: var(--ob-text-faint);
}

/* Pushed to the trailing edge so the title reads first; wraps under it on a narrow window. */
.identity[b-33ytx2wmnv] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ob-text-muted);
    flex-wrap: wrap;
}

.identity-name[b-33ytx2wmnv] {
    font-weight: 600;
    color: var(--ob-text);
}

.identity-sep[b-33ytx2wmnv] {
    color: var(--ob-text-ghost);
}

.chip-admin[b-33ytx2wmnv] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
    border-radius: 99px;
    padding: 2px 9px;
}

/* Same underline-tab idiom as the registrations TabBar, so the two screens read as one app. */
.tabs[b-33ytx2wmnv] {
    flex: none;
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--ob-border);
    background: var(--ob-surface);
}

.tab[b-33ytx2wmnv] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    cursor: pointer;
}

.tab:hover[b-33ytx2wmnv] {
    color: var(--ob-text);
    background: var(--ob-hover);
}

.tab.active[b-33ytx2wmnv] {
    color: var(--ob-primary);
    border-bottom-color: var(--ob-primary);
}

.content[b-33ytx2wmnv] {
    flex: 1;
    padding: 16px 24px 28px;
    min-height: 0;
    overflow: auto;
}

/* --- filter chips: also the legend and the summary --- */

.filters[b-33ytx2wmnv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.chip[b-33ytx2wmnv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 12.5px;
    padding: 5px 12px 5px 8px;
    border: 1px solid var(--ob-border-input);
    border-radius: 99px;
    background: var(--ob-surface);
    cursor: pointer;
    /* Switched-off chips stay legible rather than disappearing: they still carry a count, which is the
       reason to switch them back on. */
    opacity: .5;
}

.chip.active[b-33ytx2wmnv] {
    opacity: 1;
    border-color: var(--ob-primary-muted);
    background: var(--ob-primary-soft);
}

.chip:hover[b-33ytx2wmnv] {
    border-color: var(--ob-primary);
}

.chip-name[b-33ytx2wmnv] {
    font-weight: 600;
    color: var(--ob-text-soft);
}

.chip-count[b-33ytx2wmnv] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ob-text-muted);
    background: var(--ob-hover-strong);
    border-radius: 99px;
    padding: 1px 7px;
}

.chip.active .chip-count[b-33ytx2wmnv] {
    background: var(--ob-surface);
}

/* --- groups --- */

.group[b-33ytx2wmnv] {
    margin-bottom: 24px;
}

.group-head[b-33ytx2wmnv] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ob-bg);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
}

.group-title[b-33ytx2wmnv] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ob-text-faint);
}

.group-count[b-33ytx2wmnv] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ob-text-muted);
    background: var(--ob-hover-strong);
    border-radius: 99px;
    padding: 1px 7px;
}

/* auto-fill rather than breakpoints: four columns on a wide window, one on a phone, nothing to
   maintain in between. */
.module-grid[b-33ytx2wmnv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
}

.module[b-33ytx2wmnv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
}

/* Names run to 89 characters, so two lines is the cap and the tooltip carries the rest. */
.module-name[b-33ytx2wmnv] {
    font-size: 13px;
    color: var(--ob-text-soft);
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* An individual right that departs from the role's — the salmon cells of the desktop grid. Reuses the
   destructive palette from the discard button rather than introducing a second red. */
.module.overridden[b-33ytx2wmnv] {
    background: var(--ob-matrix-override);
    border-color: var(--ob-matrix-override-edge);
}

.override-flag[b-33ytx2wmnv] {
    margin-left: auto;
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ob-matrix-override-text);
    border: 1px solid var(--ob-matrix-override-edge);
    border-radius: 99px;
    padding: 1px 7px;
}

/* --- level badges, shared by cells and chips --- */

.badge[b-33ytx2wmnv],
.chip-badge[b-33ytx2wmnv] {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Fills come from the matrix ramp so this tab and the two grid tabs teach one key rather than three
   variants of it. The frames stay at --ob-matrix-edge (3:1) rather than --ob-border-input (1.3:1): a
   badge sits alone against a card, with no gridline to give it an edge. */
.badge.allowed[b-33ytx2wmnv],
.chip-badge.allowed[b-33ytx2wmnv] {
    color: var(--ob-primary);
    background: var(--ob-matrix-allowed);
    border: 1px solid var(--ob-primary-muted);
}

.badge.readonly[b-33ytx2wmnv],
.chip-badge.readonly[b-33ytx2wmnv] {
    color: var(--ob-text-soft);
    background: var(--ob-matrix-readonly);
    border: 1px solid var(--ob-matrix-edge);
}

/* Denied and unset both render empty, so their frames distinguish them: a solid well for a deliberate
   "no", a dashed outline for "never configured". Without this the two look identical while meaning
   different things — and colour alone would not carry it either. Both stay unfilled/surface-filled
   rather than taking the grid's hatch, because these badges also sit on tinted cards (an overridden
   module, an active chip) that a hard-coded hatch colour would paint over. */
.badge.denied[b-33ytx2wmnv],
.chip-badge.denied[b-33ytx2wmnv] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-matrix-edge);
}

.badge.unset[b-33ytx2wmnv],
.chip-badge.unset[b-33ytx2wmnv] {
    background: transparent;
    border: 1px dashed var(--ob-matrix-edge);
}

/* --- states --- */

.placeholder-card[b-33ytx2wmnv] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--ob-text-faint);
}

.retry[b-33ytx2wmnv] {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-primary);
    background: var(--ob-primary-soft);
    border: none;
    border-radius: var(--ob-radius);
    padding: 7px 16px;
    cursor: pointer;
}

.retry:hover[b-33ytx2wmnv] {
    background: var(--ob-primary-muted);
    color: #fff;
}

/* The badges are aria-hidden, so each cell carries its level as text for screen readers. */
.sr-only[b-33ytx2wmnv] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Registrations.razor.rz.scp.css */
.main[b-g6xyevblqb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.hint[b-g6xyevblqb] {
    padding: 10px 24px 0;
    font-size: 12.5px;
    color: var(--ob-text-faint);
    flex: none;
}

.hint strong[b-g6xyevblqb] {
    font-weight: 600;
    color: var(--ob-text-muted);
}

/* A caveat rather than an error: the values save fine, they just are not used by this tab's grid. */
.hint-warn[b-g6xyevblqb] {
    margin-left: 6px;
    color: #8f5624;
}

.content[b-g6xyevblqb] {
    flex: 1;
    padding: 12px 24px 24px;
    min-height: 0;
    overflow: auto;
}

/* Tablet widths: the gutters shrink with the client panel, so the grid gets the room both gave up.
   The breakpoint matches the grid's and the panel's default-folded viewport. */
@media (max-width: 1199px) {
    .hint[b-g6xyevblqb] {
        padding: 8px 14px 0;
    }

    .content[b-g6xyevblqb] {
        padding: 10px 14px 16px;
    }
}

.placeholder-card[b-g6xyevblqb] {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    padding: 70px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--ob-text-faint);
}

.ph-title[b-g6xyevblqb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ob-text-muted);
}

.ph-text[b-g6xyevblqb] {
    font-size: 13px;
    text-align: center;
    max-width: 420px;
}

.retry[b-g6xyevblqb] {
    margin-top: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ob-radius);
    border: 1px solid var(--ob-border-input);
    background: var(--ob-surface);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ob-text-soft);
    cursor: pointer;
}

.retry:hover[b-g6xyevblqb] {
    background: var(--ob-hover);
}

.spinner[b-g6xyevblqb] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--ob-border);
    border-top-color: var(--ob-primary);
    animation: spin-b-g6xyevblqb 1s linear infinite;
}

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