/* /Components/AccordionSection.razor.rz.scp.css */
/* Accordion visual standard — mirrors the permission-sets page's .pset-accordion family
   (the established look this component generalizes). Values deliberately identical:
   change them here and there together, or migrate that page to this component. */

.acc-section[b-uz163zn3cp] {
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.acc-heading[b-uz163zn3cp] {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.acc-header[b-uz163zn3cp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: #f8f9fa;
    border: none;
    padding: 0.65rem 1rem;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    transition: background 120ms;
}

.acc-header:hover[b-uz163zn3cp] {
    background: #eef0f2;
}

.acc-icon[b-uz163zn3cp] {
    display: flex;
    align-items: center;
    color: #6c757d;
    flex-shrink: 0;
}

.acc-sub[b-uz163zn3cp] {
    font-weight: 400;
    font-size: 12px;
    color: #6c757d;
}

.acc-count[b-uz163zn3cp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #dee2e6;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #495057;
}

/* Transparent body over the page ground — grids inside paint their sticky cells with
   --app-page-bg, so a coloured body here would need a --dg-surface override; keep it
   transparent instead. */
.acc-body[b-uz163zn3cp] {
    /* Republished so a DataGrid inside cancels THIS padding rather than the page article's —
       the properties mean "the horizontal padding of the box you are in", and the cascade
       hands a descendant the nearest declaration. Without it a ruled grid in an accordion
       would pull out by the article's 1.5rem and break out of its own card. Keep in step with
       the padding on the next line. See .dg-ruled in DataGrid.razor.css. */
    --content-pad-l: 1rem;
    --content-pad-r: 1rem;
    padding: 0.75rem 1rem 1rem;
}

/* ── Flat variant (opt-in via Flat="true") ─────────────────────────────────────────────────
   One collapsible ROW rather than one card, so several stacked sections read as a single
   bordered list whose border the CALLER draws. Measured on the shared reference\'s own accordion
   list (2026-09-12): the container is white with a 1px rgba(33,35,44,.14) border and an 8px
   radius; each entry is a 48px header row whose own wrapper carries the 1px separator, and the
   LAST entry draws none because the container\'s border already closes the list; the header is
   transparent while collapsed and rgb(245,245,246) while expanded; the chevron sits 12px in with
   a 12px gap before the label, which is 14px/600 in the body ink; the body is inset 2px top and
   bottom and carries no background of its own. */
.acc-section--flat[b-uz163zn3cp] {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.acc-section--flat:not(:last-child)[b-uz163zn3cp] {
    border-bottom: 1px solid rgba(33, 35, 44, .14);
}

.acc-section--flat .acc-header[b-uz163zn3cp] {
    gap: 12px;
    height: 48px;
    padding: 0 12px;
    background: transparent;
    font-size: var(--fs-body);
    color: #21232c;
}

.acc-section--flat .acc-header:hover[b-uz163zn3cp] {
    background: rgba(33, 35, 44, .03);
}

/* The expanded header keeps its tint through a hover, which is what the reference does too. */
.acc-section--flat.acc-section--open .acc-header[b-uz163zn3cp],
.acc-section--flat.acc-section--open .acc-header:hover[b-uz163zn3cp] {
    background: #f5f5f6;
}

.acc-section--flat .acc-icon[b-uz163zn3cp] {
    color: #21232c;
}

.acc-section--flat .acc-body[b-uz163zn3cp] {
    padding: 2px 0;
}

/* /Components/Activities/ActivityCard.razor.rz.scp.css */
/* An activity entry's card, measured on the reference's own record-drawer timeline
   (2026-09-12): white, 4px radius, the shared --elev-card three-layer shadow and NO border —
   the amber-bordered 5px card this used to draw was this file's own. The card itself carries
   no padding: its header block supplies 8px 16px, and the activity's note is a yellow strip
   attached inside the card's bottom (square corners clipped by overflow:hidden), exactly as
   the reference attaches a note to an activity in Focus.

   Deliberately still NOT the note card's yellow surface (.naf-note-card in
   NotesActivityFilesPanel.razor.css, scoped there and therefore unreachable from here): an
   activity is a task, not a journal entry, and the reference draws the same distinction. */
.activity-card[b-jewma3aj7k] {
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: var(--elev-card, 0 1px 2px rgba(16, 24, 40, 0.06));
    overflow: hidden;
}

.activity-card.activity-done[b-jewma3aj7k] {
    background: #fcfcfd;
}

.activity-card-head[b-jewma3aj7k] {
    padding: 8px 16px;
}

.activity-card-title-row[b-jewma3aj7k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
}

.activity-card-title[b-jewma3aj7k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-card-actions[b-jewma3aj7k] {
    flex-shrink: 0;
}

/* 24px, 6px radius — the reference's own card action buttons. */
.activity-icon-button[b-jewma3aj7k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #21232c;
}

.activity-icon-button:hover[b-jewma3aj7k],
.activity-icon-button:focus-visible[b-jewma3aj7k] {
    background: rgba(33, 35, 44, .06);
    color: #21232c;
}

/* .activity-done-toggle (the o/check button in the title row) is styled GLOBALLY in app.css:
   the central grid's Done cell renders the same button from a page-authored Cell delegate,
   which never carries this component's scope attribute — a rule here left that copy as a bare
   native button (a bordered box round the circle) until 2026-09-11. */

.activity-card-subject[b-jewma3aj7k] {
    font-size: var(--fs-title);
    font-weight: 600;
    color: #21232c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-done .activity-card-subject[b-jewma3aj7k] {
    color: #65686f;
    text-decoration: line-through;
    font-weight: 500;
}

/* The title is a button but reads as the heading it replaced. */
.activity-card-subject-btn[b-jewma3aj7k] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.activity-card-subject-btn:hover[b-jewma3aj7k] {
    text-decoration-line: underline;
}

/* A done activity keeps its strike while hovered: `text-decoration: underline` on its own would
   REPLACE the line-through above, so the hover state names both lines. */
.activity-done .activity-card-subject-btn:hover[b-jewma3aj7k] {
    text-decoration-line: line-through underline;
}

.activity-card-subject-btn:focus-visible[b-jewma3aj7k] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ONE meta line: the due text, then the assignee, then any manual links. 12px/450 in the
   secondary ink — the status colour below is the only colour on it, which is the brief's
   "status colour only where it means something". */
.activity-card-metaline[b-jewma3aj7k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: #65686f;
    font-size: var(--fs-meta);
    font-weight: 450;
}

.activity-card-due[b-jewma3aj7k] {
    flex-shrink: 0;
    white-space: nowrap;
}

.activity-card-due.activity-overdue[b-jewma3aj7k] {
    color: #b42318;
    font-weight: 600;
}

.activity-card-due.activity-today[b-jewma3aj7k] {
    color: #16a34a;
    font-weight: 600;
}

.activity-done .activity-card-due[b-jewma3aj7k] {
    color: #98a2b3;
    font-weight: 450;
}

/* The activity's note, attached inside the card's bottom edge. */
.activity-card-note[b-jewma3aj7k] {
    padding: 8px 16px;
    background: #fff6d6;
    color: #21232c;
    font-size: var(--fs-body);
    overflow-wrap: anywhere;
}

.activity-link-chip[b-jewma3aj7k] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #21232c;
    font-size: var(--fs-meta);
}
/* /Components/Activities/ActivityComposer.razor.rz.scp.css */
/* The activity form, measured on the shared reference's "Add activity" form (2026-09-11, 1920px
   viewport): form column 553px with 16px padding; a 24px icon gutter 16px left of every field;
   fields 32px tall on a 16px vertical rhythm (8px between Subject and the type row); Subject 40px
   at 23px/450; type buttons 33×32 fused into one segmented row (outer corners 8px); dates 132px,
   times 88px, 8px apart; 8px radius and rgba(33,35,44,.14) borders throughout; the action bar a
   56px strip under the form column only; the calendar column 297px behind a 1px rule. Colours are
   this app's own (accent #1b6ec2, the blue primary Save) where the reference uses its own. */

.ac-shell[b-k5sxogudjk] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    background: #fff;
    color: #21232c;
    font-size: var(--fs-body);
    text-align: left;
}

/* In the modal the shell is stretched by the modal body (a flex row) rather than given height:100%,
   because the modal now takes its height from the FORM column (2026-09-16, app.css .ac-modal). */
.ac-shell--modal[b-k5sxogudjk] {
    align-self: stretch;
}

/* The day calendar is 24 × 48px = 1152px of grid. Left to size itself it would push a content-sized
   modal straight to the viewport ceiling on open. `contain: size` makes the column contribute no
   height of its own: it is stretched to whatever the form column makes the modal, and its grid
   scrolls inside that, as the reference's does. `size` alone does not make it a containing block for
   fixed-position popovers (layout/paint/strict would). */
.ac-shell--modal .ac-cal[b-k5sxogudjk],
.ac-shell--inline .ac-cal[b-k5sxogudjk] {
    contain: size;
}

/* In place under the Notes/Activity/Files tabs. Sized by its CONTENT up to the viewport (2026-09-16),
   like the reference's own in-place form in its record drawer (measured: 652px for an empty note,
   `max-height: 897px` = the viewport minus 48px, the form scrolling inside once capped, the drawer's
   column scrolling around it). It used to be a fixed 640px card, so a note of a few lines already
   scrolled inside it however much room the column had. The calendar sizes nothing (see
   .ac-shell--inline .ac-cal below). The calendar drops out when the panel is too narrow to hold both
   columns. */
.ac-shell--inline[b-k5sxogudjk] {
    height: auto;
    max-height: calc(100vh - 48px);
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    overflow: hidden;
    container-type: inline-size;
}

.ac-shell--drawer[b-k5sxogudjk] {
    height: 100%;
}

.ac-form[b-k5sxogudjk] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.ac-form-scroll[b-k5sxogudjk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
}

.ac-cal[b-k5sxogudjk] {
    display: flex;
    flex-direction: column;
    flex: 0 0 297px;
    min-height: 0;
    border-left: 1px solid rgba(33, 35, 44, .14);
}

.ac-shell--inline .ac-cal[b-k5sxogudjk] {
    flex-basis: 304px;
}

.ac-shell--drawer .ac-cal[b-k5sxogudjk] {
    flex-basis: 400px;
}

@container (max-width: 719px) {
    .ac-cal[b-k5sxogudjk] {
        display: none;
    }
}

.ac-loading[b-k5sxogudjk] {
    padding: 8px 40px;
    color: #65686f;
}

.ac-error[b-k5sxogudjk] {
    margin: 0 0 12px 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef3f2;
    color: #b42318;
    font-size: var(--fs-control);
}

/* ── Rows ─────────────────────────────────────────────────────────────────────────────────── */

.ac-row[b-k5sxogudjk] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

.ac-row--first[b-k5sxogudjk] {
    margin-top: 0;
}

.ac-row--tight[b-k5sxogudjk] {
    margin-top: 8px;
}

.ac-gutter[b-k5sxogudjk] {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    color: #21232c;
}

.ac-gutter--tall[b-k5sxogudjk] {
    height: 40px;
}

.ac-field[b-k5sxogudjk] {
    flex: 1 1 auto;
    min-width: 0;
}

.ac-subject[b-k5sxogudjk] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 4px 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    background: #fff;
    color: #21232c;
    font-family: inherit;
    font-size: var(--fs-display);
    font-weight: 450;
    line-height: 1.2;
}

.ac-subject[b-k5sxogudjk]::placeholder {
    color: rgba(33, 35, 44, .4);
}

.ac-input[b-k5sxogudjk] {
    display: block;
    height: 32px;
    padding: 4px 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    background: #fff;
    color: #21232c;
    font-family: inherit;
    font-size: var(--fs-body);
}

.ac-input[b-k5sxogudjk]::placeholder {
    color: rgba(33, 35, 44, .48);
}

.ac-subject:focus[b-k5sxogudjk],
.ac-input:focus[b-k5sxogudjk] {
    outline: none;
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.ac-input--invalid[b-k5sxogudjk],
.ac-input--invalid:focus[b-k5sxogudjk] {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.ac-subject:disabled[b-k5sxogudjk],
.ac-input:disabled[b-k5sxogudjk] {
    background: #f8f9fa;
    color: #65686f;
}

.ac-wide[b-k5sxogudjk] {
    width: 100%;
}

.ac-textarea[b-k5sxogudjk] {
    height: auto;
    min-height: 72px;
    line-height: 1.4;
    resize: vertical;
}

/* ── Type buttons: one segmented row ─────────────────────────────────────────────────────── */

.ac-types[b-k5sxogudjk] {
    display: flex;
    flex-wrap: wrap;
}

.ac-type-btn[b-k5sxogudjk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 33px;
    height: 32px;
    margin-left: -1px;
    padding: 0 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 0;
    background: #fff;
    color: #21232c;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
}

.ac-type-btn:first-child[b-k5sxogudjk] {
    margin-left: 0;
    border-radius: 8px 0 0 8px;
}

.ac-type-btn:last-child[b-k5sxogudjk] {
    border-radius: 0 8px 8px 0;
}

.ac-type-btn:only-child[b-k5sxogudjk] {
    border-radius: 8px;
}

.ac-type-btn:hover:not(.ac-type-btn--active):not(:disabled)[b-k5sxogudjk] {
    background: rgba(33, 35, 44, .05);
}

.ac-type-btn--active[b-k5sxogudjk] {
    z-index: 1;
    border-color: #1b6ec2;
    background: #eff6ff;
}

.ac-type-btn:disabled[b-k5sxogudjk] {
    cursor: default;
}

/* ── Date and time ───────────────────────────────────────────────────────────────────────── */

/* One line, always: the four fields shrink from the reference's 132/88px before anything wraps
   (the in-place form's column is ~8px narrower than the modal's, and wrapping pushed the end
   date onto a second line — found live 2026-09-11). */
.ac-datetime[b-k5sxogudjk] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.ac-date-wrap[b-k5sxogudjk],
.ac-time-wrap[b-k5sxogudjk] {
    position: relative;
    min-width: 0;
}

.ac-date-wrap[b-k5sxogudjk] {
    flex: 0 1 132px;
    min-width: 104px;
}

.ac-time-wrap[b-k5sxogudjk] {
    flex: 0 1 88px;
    min-width: 72px;
}

.ac-date[b-k5sxogudjk] {
    width: 100%;
}

.ac-shell--drawer .ac-date-wrap[b-k5sxogudjk] {
    flex: 1 1 132px;
}

.ac-date-end[b-k5sxogudjk] {
    cursor: default;
}

.ac-date-end:focus[b-k5sxogudjk] {
    border-color: rgba(33, 35, 44, .14);
    box-shadow: none;
}

/* The native date input only supplies the picker (showPicker); it is never seen. */
.ac-date-native[b-k5sxogudjk] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.ac-time[b-k5sxogudjk] {
    width: 100%;
    padding-right: 26px;
}

.ac-time-clear[b-k5sxogudjk] {
    position: absolute;
    top: 6px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #21232c;
    cursor: pointer;
}

.ac-time-clear:hover[b-k5sxogudjk] {
    background: rgba(33, 35, 44, .08);
}

.ac-dash[b-k5sxogudjk] {
    line-height: 32px;
}

/* ── Select buttons (priority, free/busy, assignee) ──────────────────────────────────────── */

.ac-select-btn[b-k5sxogudjk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    background: #fff;
    color: #21232c;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
}

.ac-select-btn:hover:not(:disabled)[b-k5sxogudjk] {
    background: rgba(33, 35, 44, .03);
}

.ac-select-btn:disabled[b-k5sxogudjk] {
    background: #f8f9fa;
    color: #65686f;
    cursor: default;
}

.ac-select-btn--plain[b-k5sxogudjk] {
    font-weight: 450;
}

.ac-busy-btn[b-k5sxogudjk] {
    min-width: 96px;
    justify-content: space-between;
}

.ac-select-btn--wide[b-k5sxogudjk] {
    width: 100%;
    justify-content: space-between;
    font-weight: 450;
}

.ac-select-text[b-k5sxogudjk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-inline-group[b-k5sxogudjk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-info[b-k5sxogudjk] {
    display: inline-flex;
    color: #21232c;
    cursor: help;
}

/* The priority pills (.ac-pri, pastel, text only) were replaced on 2026-09-18 by
   ActivityPriorityBadge, which draws the reference's solid pill with an icon. */

/* ── "Add Location, Video call, Description" ─────────────────────────────────────────────── */

.ac-add[b-k5sxogudjk] {
    line-height: 32px;
}

.ac-link[b-k5sxogudjk] {
    padding: 0;
    border: 0;
    background: none;
    color: #1b6ec2;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
}

.ac-link:hover:not(:disabled)[b-k5sxogudjk] {
    text-decoration: underline;
}

.ac-link--row[b-k5sxogudjk] {
    line-height: 32px;
}

/* A saved SRN (2026-09-18): its label as a link, then a pencil that reopens the input. The label is
   the URL itself when the link does not end in a request number, so it may be long — it truncates
   rather than widening the form. */
.ac-srn[b-k5sxogudjk] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 32px;
}

.ac-srn-link[b-k5sxogudjk] {
    min-width: 0;
    overflow: hidden;
    color: #1b6ec2;
    font-size: var(--fs-body);
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-srn-link:hover[b-k5sxogudjk] {
    text-decoration: underline;
}

.ac-srn-edit[b-k5sxogudjk] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #65686f;
    cursor: pointer;
}

.ac-srn-edit:hover[b-k5sxogudjk] {
    background: rgba(33, 35, 44, .06);
    color: #21232c;
}

/* ── Links ───────────────────────────────────────────────────────────────────────────────── */

.ac-links[b-k5sxogudjk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Wraps the record field only to carry its title (why it is read-only or kept). A block, so the
   field inside keeps the full-width row it had as a direct child of .ac-links. */
.ac-link-slot[b-k5sxogudjk] {
    display: block;
}

/* ── Action bar ──────────────────────────────────────────────────────────────────────────── */

.ac-footer[b-k5sxogudjk] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border-top: 1px solid rgba(33, 35, 44, .14);
    background: #fff;
}

.ac-footer-start[b-k5sxogudjk],
.ac-footer-end[b-k5sxogudjk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-icon-btn[b-k5sxogudjk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #21232c;
    text-decoration: none;
}

.ac-icon-btn:hover[b-k5sxogudjk] {
    background: rgba(33, 35, 44, .06);
    color: #21232c;
}

.ac-done[b-k5sxogudjk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 0 0;
    color: #21232c;
    font-size: var(--fs-body);
    cursor: pointer;
    user-select: none;
}

.ac-done input[b-k5sxogudjk] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1b6ec2;
    cursor: pointer;
}

.ac-btn[b-k5sxogudjk] {
    height: 32px;
    font-size: var(--fs-body);
    font-weight: 600;
}

/* ── the time pickers (2026-09-13) ────────────────────────────────────────────────────────
   The start list is all 96 quarter hours, so it has to scroll; the reference's own list does
   too. Narrow, because both fields are ~88px and the panel is anchored to them. */
.ac-time-popover[b-k5sxogudjk] {
    min-width: 132px;
}

.ac-time-list[b-k5sxogudjk] {
    max-height: 208px;
    overflow-y: auto;
}

/* The end list shows the resulting time on the left and how long that makes the activity on the
   right ("20:30   30min") — the duration is the thing being chosen, the time is its consequence. */
.ac-time-duration[b-k5sxogudjk] {
    margin-left: auto;
    padding-left: 12px;
    color: #667085;
    font-size: var(--fs-meta);
    white-space: nowrap;
}
/* /Components/Activities/ActivityDayCalendar.razor.rz.scp.css */
/* Day calendar geometry measured on the shared reference's activity form (2026-09-11, 1920px):
   56px heading row with 32px ghost arrow buttons, a 40px all-day strip, hour labels 12px at
   rgba(33,35,44,.48) in a 56px gutter, 48px per hour, faint rgba(33,35,44,.08) hour rules,
   the "now" line/label in rgb(200,38,39). Entry colours use this app's accent (#1b6ec2) for the
   draft rather than the reference's own blue.

   Entry colours re-measured 2026-09-14 on the rpm reference together with the week grid
   (CalendarWeekGrid.razor.css, BACKLOG 144 h): #e1eeff for chips and blocks, blocks square with a
   2px rgb(43,116,218) inset bar on the left and 450 text. The two calendars share this language —
   change both or they drift. */
.adc[b-5v9iknfpdh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    color: #21232c;
    font-size: var(--fs-body);
}

.adc-header[b-5v9iknfpdh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 12px 8px 12px 12px;
}

.adc-title[b-5v9iknfpdh] {
    font-size: var(--fs-body);
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adc-nav[b-5v9iknfpdh] {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.adc-nav-btn[b-5v9iknfpdh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #21232c;
    cursor: pointer;
}

.adc-nav-btn:hover[b-5v9iknfpdh] {
    background: rgba(33, 35, 44, .06);
}

.adc-allday[b-5v9iknfpdh] {
    flex: 0 0 auto;
    min-height: 40px;
    max-height: 112px;
    overflow-y: auto;
    padding: 8px 8px 7px 56px;
    border-bottom: 1px solid rgba(33, 35, 44, .08);
}

.adc-allday-list[b-5v9iknfpdh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 24px;
    padding-left: 8px;
    border-left: 1px solid rgba(33, 35, 44, .08);
    margin-left: -8px;
}

.adc-chip[b-5v9iknfpdh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 25px;
    padding: 2px 4px 2px 8px;
    border-radius: 3px;
    background: #e1eeff;
    color: #21232c;
    font-size: var(--fs-body);
    font-weight: 600;
}

.adc-chip--draft[b-5v9iknfpdh] {
    background: #1b6ec2;
    color: #fff;
}

.adc-chip--done .adc-chip-text[b-5v9iknfpdh] {
    text-decoration: line-through;
    color: #65686f;
}

.adc-chip-text[b-5v9iknfpdh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adc-scroll[b-5v9iknfpdh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.adc-grid[b-5v9iknfpdh] {
    position: relative;
    margin-right: 8px;
}

.adc-hour[b-5v9iknfpdh] {
    position: absolute;
    left: 56px;
    right: 0;
    height: 48px;
    border-top: 1px solid rgba(33, 35, 44, .08);
}

.adc-hour-label[b-5v9iknfpdh] {
    position: absolute;
    left: -44px;
    top: -10px;
    width: 32px;
    font-size: var(--fs-meta);
    line-height: 20px;
    color: rgba(33, 35, 44, .48);
    background: #fff;
}

.adc-events[b-5v9iknfpdh] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 56px;
    right: 0;
    border-left: 1px solid rgba(33, 35, 44, .08);
}

.adc-block[b-5v9iknfpdh] {
    position: absolute;
    overflow: hidden;
    padding: 2px 4px 2px 8px;
    border-radius: 0;
    background: #e1eeff;
    color: #21232c;
    box-shadow: inset 2px 0 0 rgb(43, 116, 218);
}

.adc-block--draft[b-5v9iknfpdh] {
    z-index: 1;
    background: #1b6ec2;
    color: #fff;
    box-shadow: none;
}

.adc-block--done .adc-block-text[b-5v9iknfpdh] {
    text-decoration: line-through;
}

.adc-block-title[b-5v9iknfpdh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--fs-body);
    font-weight: 450;
    line-height: 18px;
}

.adc-block-text[b-5v9iknfpdh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adc-block-range[b-5v9iknfpdh] {
    font-size: var(--fs-meta);
    line-height: 16px;
    white-space: nowrap;
}

.adc-now[b-5v9iknfpdh] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 0;
    border-top: 1px solid rgb(200, 38, 39);
    margin-left: 56px;
    pointer-events: none;
}

.adc-now-label[b-5v9iknfpdh] {
    position: absolute;
    left: -56px;
    top: -9px;
    width: 52px;
    padding-right: 6px;
    text-align: right;
    font-size: var(--fs-meta);
    line-height: 16px;
    color: rgb(200, 38, 39);
    background: #fff;
}

.adc-now-dot[b-5v9iknfpdh] {
    position: absolute;
    left: -2px;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(200, 38, 39);
}
/* /Components/Activities/ActivityNoteEditor.razor.rz.scp.css */
/* The reference's note box: rgb(255,246,214) ground, rgba(33,35,44,.14) border, 6px radius,
   ~93px tall at rest; its toolbar shows only while the box has focus. */
.ane[b-uedanmit5u] {
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 6px;
    background: #fff6d6;
}

.ane:focus-within[b-uedanmit5u] {
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, .15);
}

.ane--disabled[b-uedanmit5u] {
    opacity: .7;
}

/* No max-height (2026-09-16): the box grows with every line, like the reference's, which never scrolls
   inside (measured 432px for 24 lines, scrollHeight = clientHeight). What scrolls instead is the form
   column around it, once the modal has reached the viewport. It used to stop at 240px and scroll. */
.ane-editor[b-uedanmit5u] {
    min-height: 91px;
    padding: 6px 8px;
    outline: none;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: #21232c;
    overflow-wrap: anywhere;
}

.ane-editor:empty[b-uedanmit5u]::before {
    content: attr(data-placeholder);
    color: rgba(33, 35, 44, .48);
}

.ane-toolbar[b-uedanmit5u] {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 6px 6px;
    border-top: 1px solid rgba(33, 35, 44, .08);
}

.ane:focus-within .ane-toolbar[b-uedanmit5u] {
    display: flex;
}

.ane-btn[b-uedanmit5u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #21232c;
    font-size: var(--fs-body);
    cursor: pointer;
}

.ane-btn:hover[b-uedanmit5u] {
    background: rgba(33, 35, 44, .08);
}

.ane-sep[b-uedanmit5u] {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(33, 35, 44, .14);
}

.ane-info[b-uedanmit5u] {
    display: inline-flex;
    margin-left: auto;
    color: #21232c;
    cursor: help;
}
/* /Components/Activities/ActivityPriorityBadge.razor.rz.scp.css */
/* ActivityPriorityBadge (2026-09-18). Geometry measured on the shared reference's priority label:
   16px tall, 6px corners, no padding on the pill itself; the icon is 16x16 with a 4px left margin,
   the text has 2px left and 4px right padding. The text is 600 weight, uppercase, on --fs-chip
   (10.5px, the app's stand-in for the reference's 10px, as .label-pill records), and uses the same
   optical correction as .label-pill: a 15px line under 1px of top padding in the 16px box. */

.apb[b-dd6tz57ne8] {
    display: inline-flex;
    align-items: center;
    height: 16px;
    border-radius: var(--btn-radius-sm);
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
}

.apb-icon[b-dd6tz57ne8] {
    flex-shrink: 0;
    margin-left: 4px;
}

.apb-text[b-dd6tz57ne8] {
    padding: 1px 4px 0 2px;
    font-size: var(--fs-chip);
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
}
/* /Components/Activities/ActivityQuickAdd.razor.rz.scp.css */
/* Card chrome + control sizing measured on the reference's own quick-add widget
   (`.UpcomingQuickActivitiesstyles__*`), re-measured 2026-09-12: it is a 390px card CENTRED in
   the drawer's right column — not a full-width band — sitting 24px below the last Focus entry,
   with 12px padding, an 8px radius and the shared --elev-card shadow. Inside it, row one is the
   24px type selector and the 24px subject input 8px apart; row two is the chips, left-aligned
   with the INPUT rather than the card (52px in), 24px tall at 12px/600 with the app's own
   neutral rgba(33,35,44,.14) border. "+ Other" is a borderless blue link, not a chip.

   Colours are this app's own tokens where the reference's already coincide with them; the
   full-width card with pill chips this replaced was this file's own first pass. */
.activity-quick-add[b-8fzxrupv7n] {
    width: 390px;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--elev-card, 0 1px 2px rgba(16, 24, 40, 0.06));
}

.activity-quick-add-row[b-8fzxrupv7n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.activity-quick-add-input[b-8fzxrupv7n] {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    padding: 4px 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 6px;
    font-size: var(--fs-meta);
}

/* Aligned with the subject input above it (24px selector + 8px gap + a 20px optical inset the
   reference leaves for its own selector's caret), never with the card edge. */
.activity-quick-add-chips[b-8fzxrupv7n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: 52px;
}

.activity-chip[b-8fzxrupv7n] {
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    background: #fff;
    color: #21232c;
    font-size: var(--fs-meta);
    font-weight: 600;
}

.activity-chip:hover:not(:disabled)[b-8fzxrupv7n] {
    background: rgba(33, 35, 44, .05);
}

.activity-chip:disabled[b-8fzxrupv7n] {
    opacity: 0.6;
}

.activity-chip-other[b-8fzxrupv7n] {
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #1b6ec2;
}

.activity-chip-other:hover:not(:disabled)[b-8fzxrupv7n] {
    background: transparent;
    text-decoration: underline;
}
/* /Components/Activities/ActivityTypeIcon.razor.rz.scp.css */
/* The icon is a FIXED box wherever it is placed, and `Size` is the only thing that decides how
   big it is — the same rule ChevronToggle's geometry follows.

   Without this it is not: an <svg> is an ordinary flex item, its width/height attributes are only
   a starting size, and `flex-shrink` defaults to 1. So in any flex row that shares its width with
   text — the /activities Subject cell, the composer's day-preview block, a calendar chip — a long
   subject takes width off the icon, and `preserveAspectRatio` then scales the whole glyph down
   inside the narrower box. The same icon rendered 16px on one row and 10.7px on the next, with
   nothing but the length of its neighbour's text to explain it (reported 2026-09-17: the type icon
   shrank on /activities as soon as an activity was renamed off its type's default name, while the
   drawer's tab strip drew the same icon at full size).

   A few call sites had already written `flex-shrink: 0` for their OWN elements (the picker caret,
   the day calendar's nav group, a card's actions) and none of them covered the icon, which is why
   the fix belongs here once rather than in each row that happens to host it. */
.ati-icon[b-7b26n5kb5m] {
    flex-shrink: 0;
}
/* /Components/Activities/ActivityTypeModal.razor.rz.scp.css */
.atm-icon-grid[b-g5o7hzzho0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.atm-icon-btn[b-g5o7hzzho0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #344054;
}

.atm-icon-btn:hover[b-g5o7hzzho0] {
    background: #f2f4f7;
}

.atm-icon-btn.selected[b-g5o7hzzho0] {
    background: #eff6ff;
    color: #1b6ec2;
}

/* /Components/Activities/ActivityTypePicker.razor.rz.scp.css */
.atp-wrap[b-uopr8hus8h] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.atp-trigger[b-uopr8hus8h] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
}

.atp-caret[b-uopr8hus8h] {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
}

.atp-wrap--compact[b-uopr8hus8h] {
    width: auto;
    flex-shrink: 0;
}

/* 44×24 — measured on the reference's own quick-add type selector (2026-09-12). The height is
   what keeps the whole quick-add row at 24px, and the width is what the chip row beneath it
   aligns to. */
.atp-trigger-compact[b-uopr8hus8h] {
    display: inline-flex;
    width: 44px;
    height: 24px;
    gap: 2px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 6px;
    background: #fff;
    color: #21232c;
}

.atp-trigger-compact:hover:not(:disabled)[b-uopr8hus8h],
.atp-trigger-compact:focus-visible[b-uopr8hus8h] {
    background: #e8f1fc;
    color: #1b6ec2;
}

.atp-popover[b-uopr8hus8h] {
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.atp-option[b-uopr8hus8h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    text-align: left;
    font-size: var(--fs-body);
    color: #344054;
}

.atp-option:hover[b-uopr8hus8h],
.atp-option:focus-visible[b-uopr8hus8h] {
    background: #e8f1fc;
    color: #1b6ec2;
}

.atp-option.selected[b-uopr8hus8h] {
    background: #eff6ff;
    font-weight: 600;
}
/* /Components/Activities/CalendarEntryPopover.razor.rz.scp.css */
/* Details popover, measured on the rpm reference (2026-09-14, BACKLOG 144 i): 376px wide, 12px
   radius; the type icon (24px) centred in a 56px gutter; the title var(--fs-title)/600 over a
   var(--fs-meta)/450 date line; icon rows for Free/Busy and the assignee; a footer with the trash on
   the left and Mark as done + Edit on the right. Shadow: --elev-overlay, the app's one elevation for
   surfaces over the page. */

.cep[b-86risjm60o] {
    width: 376px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--elev-overlay);
    color: #21232c;
    font-size: var(--fs-body);
}

.cep-body[b-86risjm60o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 12px 0;
}

.cep-row[b-86risjm60o] {
    display: flex;
    align-items: center;
    min-height: 24px;
    min-width: 0;
}

.cep-row--head[b-86risjm60o] {
    align-items: flex-start;
}

.cep-gutter[b-86risjm60o] {
    flex: 0 0 56px;
    display: inline-flex;
    justify-content: center;
    color: #65686f;
}

.cep-head[b-86risjm60o] {
    min-width: 0;
}

.cep-title[b-86risjm60o] {
    font-size: var(--fs-title);
    font-weight: 600;
    line-height: 24px;
    overflow-wrap: anywhere;
}

.cep-date[b-86risjm60o] {
    font-size: var(--fs-meta);
    font-weight: 450;
    line-height: 16px;
    color: #65686f;
}

.cep-value[b-86risjm60o] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cep-error[b-86risjm60o] {
    margin-left: 56px;
    font-size: var(--fs-meta);
    line-height: 16px;
    color: #b42318;
}

.cep-footer[b-86risjm60o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(33, 35, 44, .14);
}

.cep-spacer[b-86risjm60o] {
    flex: 1 1 auto;
}

.cep-icon-btn[b-86risjm60o],
.cep-done-btn[b-86risjm60o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #21232c;
    font: inherit;
    cursor: pointer;
}

.cep-icon-btn[b-86risjm60o] {
    width: 32px;
    padding: 0;
    color: #65686f;
}

.cep-done-btn[b-86risjm60o] {
    gap: 8px;
    padding: 0 8px;
}

.cep-icon-btn:hover[b-86risjm60o],
.cep-done-btn:hover[b-86risjm60o] {
    background: rgba(33, 35, 44, .06);
}

/* The same three states as every other done control in the app (neutral ring, green on hover,
   filled green when done) — one control, one look. */
.cep-ring[b-86risjm60o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(33, 35, 44, .24);
    border-radius: 50%;
    background: #fff;
    color: #fff;
}

.cep-done-btn:hover .cep-ring[b-86risjm60o] {
    border-color: #16a34a;
}

.cep-ring--on[b-86risjm60o] {
    border-color: #16a34a;
    background: #16a34a;
}
/* /Components/Activities/CalendarQuickAddPopover.razor.rz.scp.css */
/* Quick add, measured on the rpm reference (2026-09-14, BACKLOG 144 e): a 322px panel, 12px radius,
   16px padding; a segmented row of 34x32 type icons in one 1px .14 frame with an 8px outer radius,
   the selected one rgb(236,236,237); a 32px subject input with an 8px radius; a divider over
   Details… and Add. The shadow is this app's --elev-overlay rather than the reference's own stack:
   the app has exactly two elevations, and a popover is a surface OVER the page. */

.cqa[b-0lo1rsgeth] {
    width: 322px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--elev-overlay);
    color: #21232c;
    font-size: var(--fs-body);
}

.cqa-body[b-0lo1rsgeth] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.cqa-types[b-0lo1rsgeth] {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    overflow: hidden;
}

.cqa-type-btn[b-0lo1rsgeth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(33, 35, 44, .14);
    background: #fff;
    color: #21232c;
    cursor: pointer;
}

.cqa-type-btn:first-child[b-0lo1rsgeth] {
    border-left: 0;
}

.cqa-type-btn:hover[b-0lo1rsgeth] {
    background: rgba(33, 35, 44, .06);
}

.cqa-type-btn--active[b-0lo1rsgeth],
.cqa-type-btn--active:hover[b-0lo1rsgeth] {
    background: rgb(236, 236, 237);
}

.cqa-type-more[b-0lo1rsgeth] {
    width: auto;
    min-width: 34px;
    padding: 0 6px;
}

.cqa-more[b-0lo1rsgeth] {
    display: flex;
    flex-direction: column;
    max-height: 176px;
    overflow-y: auto;
    padding: 4px 0;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
}

.cqa-more-item[b-0lo1rsgeth] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #21232c;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cqa-more-item:hover[b-0lo1rsgeth] {
    background: rgba(33, 35, 44, .06);
}

.cqa-more-item--active[b-0lo1rsgeth] {
    background: rgb(236, 236, 237);
}

.cqa-subject[b-0lo1rsgeth] {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    border: 1px solid rgba(33, 35, 44, .14);
    border-radius: 8px;
    background: #fff;
    color: #21232c;
    font: inherit;
}

.cqa-subject:focus[b-0lo1rsgeth] {
    outline: none;
    border-color: #0d68c5;
    box-shadow: 0 0 0 1px #0d68c5;
}

.cqa-date[b-0lo1rsgeth] {
    font-size: var(--fs-meta);
    line-height: 16px;
    color: #65686f;
}

.cqa-error[b-0lo1rsgeth] {
    font-size: var(--fs-meta);
    line-height: 16px;
    color: #b42318;
}

.cqa-footer[b-0lo1rsgeth] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(33, 35, 44, .14);
}
/* /Components/Calendar/CalendarWeekGrid.razor.rz.scp.css */
/* Week grid — rebuilt 2026-09-14 against the rpm reference (BACKLOG 144), measured at a 1920px
   viewport and drawn on this app's tokens wherever one exists:

     surface     flush with the navigation rail and the window's right and bottom edges (the list
                 grid's own full-bleed rule, .dg-ruled), no border, no radius, no shadow, #fff
     rules       header top + bottom and every column rule rgba(33,35,44,.14); hour rules a 1px
                 line just ABOVE each hour — the reference paints .24 fading to white across that
                 pixel, which renders as ~.12
     corner      the week's month, var(--fs-body)/600, centred in the 56px gutter
     day header  var(--fs-body)/600 #21232c, weekday and date one colour; today a 24px
                 rgb(43,116,218) circle; no tint on today's column
     alignment   the header and the all-day strip reserve the hour grid's scrollbar gutter, so the
                 seven columns line up (the reference's header is 1849px over a 1864px scroller)
     all-day     40px when empty, growing with its busiest day; 25px #e1eeff chips; "N MORE" /
                 "SHOW LESS" rows var(--fs-control)/600 uppercase; expanded = its own scroll box
                 capped at 380px; no transition anywhere
     hour grid   starts 24px below the strip, so midnight's rule is visible
     timed       #e1eeff with a 2px rgb(43,116,218) inset bar on the left, radius 0, text 450
     now label   rgb(200,38,39)/600 at var(--fs-chip) — 10.5px for the reference's 10px, the nearest
                 step on the type scale

   ActivityDayCalendar.razor.css (the activity form's day preview) carries the same entry colours:
   change both or the two calendars drift. */

.cwg[b-ojtkjj9hkq] {
    --cwg-rule: rgba(33, 35, 44, .14);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Edge to edge, by the same custom properties a ruled DataGrid cancels (DataGrid.razor.css
       .dg-ruled): MainLayout's article publishes its own horizontal padding, and cancelling exactly
       that much keeps the toolbar and chips above in their places — the List/Calendar vertical
       rhythm is untouched because nothing vertical changes. */
    margin-left: calc(-1 * var(--content-pad-l, 0px));
    margin-right: calc(-1 * var(--content-pad-r, 0px));
    background: #fff;
    color: #21232c;
    font-size: var(--fs-body);
    overflow: hidden;
}

/* The reference swaps its chevron icons instantly; nothing on this surface animates. */
.cwg[b-ojtkjj9hkq]  .cv-toggle {
    transition: none;
}

/* ── day headers ─────────────────────────────────────────────────────────────────────── */

.cwg-head[b-ojtkjj9hkq] {
    flex: 0 0 auto;
    display: flex;
    min-height: 40px;
    border-top: 1px solid var(--cwg-rule);
    border-bottom: 1px solid var(--cwg-rule);
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.cwg-head-gutter[b-ojtkjj9hkq] {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwg-month[b-ojtkjj9hkq] {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 20px;
    color: #21232c;
}

.cwg-head-day[b-ojtkjj9hkq] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-left: 1px solid var(--cwg-rule);
    font-size: var(--fs-body);
    font-weight: 600;
    color: #21232c;
}

/* Today's DATE is circled, not the whole column header — the reference marks the number. */
.cwg-head-day--today .cwg-head-num[b-ojtkjj9hkq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgb(43, 116, 218);
    color: #fff;
}

/* ── all-day strip ───────────────────────────────────────────────────────────────────── */

.cwg-allday[b-ojtkjj9hkq] {
    flex: 0 0 auto;
    display: flex;
    /* 40px with nothing in it; with entries, 8px + chips + 5px + the 1px rule — which lands on the
       reference's 146px for four chips and an "N MORE" row. */
    min-height: 40px;
    border-bottom: 1px solid var(--cwg-rule);
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.cwg-allday--open[b-ojtkjj9hkq] {
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Sticky so the collapse button stays in reach while the expanded list is scrolled. */
.cwg-allday-gutter[b-ojtkjj9hkq] {
    flex: 0 0 56px;
    align-self: flex-start;
    position: sticky;
    top: 0;
    padding: 8px 0 0 16px;
}

.cwg-allday-toggle[b-ojtkjj9hkq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--cwg-rule);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 54, 71, .05);
    color: #21232c;
    cursor: pointer;
}

.cwg-allday-toggle:hover[b-ojtkjj9hkq] {
    background: #f5f5f6;
}

.cwg-allday-toggle[b-ojtkjj9hkq]  .cv-toggle {
    color: inherit;
}

.cwg-allday-day[b-ojtkjj9hkq] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 8px 5px;
    border-left: 1px solid var(--cwg-rule);
}

.cwg-allday-row[b-ojtkjj9hkq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 100%;
    height: 24px;
    padding: 2px 4px 2px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: rgb(43, 116, 218);
    font-size: var(--fs-control);
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.cwg-allday-row:hover[b-ojtkjj9hkq] {
    background: rgba(33, 35, 44, .06);
}

.cwg-allday-row[b-ojtkjj9hkq]  .cv-toggle {
    color: inherit;
}

/* Shown on hover over an EMPTY day only — the reference's own affordance for "this cell adds". */
.cwg-add-hint[b-ojtkjj9hkq] {
    display: block;
    text-align: center;
    font-size: var(--fs-meta);
    font-weight: 450;
    line-height: 16px;
    color: rgb(147, 148, 154);
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.cwg-allday-day:hover .cwg-add-hint[b-ojtkjj9hkq] {
    visibility: visible;
}

/* ── the hour grid ───────────────────────────────────────────────────────────────────── */

.cwg-scroll[b-ojtkjj9hkq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 24px above midnight, as in the reference: its scroll content is 24 hours plus 24px with 00:00
   drawn 24px down, so the midnight rule shows under the all-day strip instead of vanishing into
   its border. A margin, not padding, so every offset inside a day column still starts at 00:00 —
   the drag math and the slot click both measure from the column's own top. */
.cwg-grid[b-ojtkjj9hkq] {
    position: relative;
    display: flex;
    margin-top: 24px;
}

.cwg-gutter[b-ojtkjj9hkq] {
    position: relative;
    flex: 0 0 56px;
}

.cwg-hour-label[b-ojtkjj9hkq] {
    position: absolute;
    /* 8px, the reference's own inset: its gutter is 56px wide (ours too) and its hour labels end
       8px before the first day column's edge, not 6px. Measured 2026-09-13. */
    right: 8px;
    transform: translateY(-50%);
    font-size: var(--fs-meta);
    line-height: 16px;
    color: rgba(33, 35, 44, .48);
    white-space: nowrap;
}

.cwg-days[b-ojtkjj9hkq] {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
}

/* Drawn in the pixel just ABOVE the hour, where the reference draws it, so a block starting on
   the hour sits below its rule rather than covering it. */
.cwg-hour-rule[b-ojtkjj9hkq] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    margin-top: -1px;
    border-top: 1px solid rgba(33, 35, 44, .12);
    pointer-events: none;
}

.cwg-day[b-ojtkjj9hkq] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid var(--cwg-rule);
}

/* The column rule continues through the 24px band above midnight. */
.cwg-day[b-ojtkjj9hkq]::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -24px;
    height: 24px;
    border-left: 1px solid var(--cwg-rule);
    pointer-events: none;
}

/* ── entries ─────────────────────────────────────────────────────────────────────────── */

.cwg-chip[b-ojtkjj9hkq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    height: 25px;
    padding: 2px 4px 2px 8px;
    border-radius: 3px;
    background: #e1eeff;
    color: #21232c;
    /* On the chip, not only on its text: the title is a <button> whose `font: inherit` would
       otherwise reset a weight set on the text class back to the chip's 400. Measured 400 on
       2026-09-14 before this moved here. */
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
}

.cwg-block[b-ojtkjj9hkq] {
    position: absolute;
    display: block;
    overflow: hidden;
    padding: 2px 4px 2px 8px;
    border-radius: 0;
    background: #e1eeff;
    color: #21232c;
    box-shadow: inset 2px 0 0 rgb(43, 116, 218);
    cursor: pointer;
}

/* The draft — what quick add is composing — in the reference's draft blue. */
.cwg-chip--draft[b-ojtkjj9hkq],
.cwg-block--draft[b-ojtkjj9hkq] {
    background: #0d68c5;
    color: #fff;
    box-shadow: none;
    cursor: default;
}

.cwg-block--draft[b-ojtkjj9hkq] {
    z-index: 4;
}

.cwg-draft-range[b-ojtkjj9hkq] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* A redacted entry says only that the slot is taken: no icon, no title, no link. Hatched rather
   than solid so it reads as "someone else's time" instead of an unnamed activity of your own. */
.cwg-block--busy[b-ojtkjj9hkq],
.cwg-chip--busy[b-ojtkjj9hkq] {
    background: repeating-linear-gradient(135deg,
        rgba(33, 35, 44, .07) 0 6px,
        rgba(33, 35, 44, .03) 6px 12px);
    box-shadow: none;
    color: #65686f;
    cursor: default;
}

.cwg-block-title[b-ojtkjj9hkq] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--fs-body);
    font-weight: 450;
    line-height: 18px;
}

.cwg-block-text[b-ojtkjj9hkq],
.cwg-chip-text[b-ojtkjj9hkq] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.cwg-chip-text[b-ojtkjj9hkq] {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 18px;
}

/* The title is a button so the entry can be reached from the keyboard, but it must look and point
   exactly like the card it sits on: the reference changes nothing on hover. */
.cwg-title-btn[b-ojtkjj9hkq] {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: inherit;
}

.cwg-block--done .cwg-block-text[b-ojtkjj9hkq],
.cwg-chip--done .cwg-chip-text[b-ojtkjj9hkq] {
    text-decoration: line-through;
    color: #65686f;
}

.cwg-block-range[b-ojtkjj9hkq] {
    font-size: var(--fs-meta);
    line-height: 16px;
    color: #65686f;
    white-space: nowrap;
}

.cwg-done[b-ojtkjj9hkq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    /* Same three states as the central list's Done cell and the activity card's toggle — one
       control, one look (2026-09-12). The ring is NEUTRAL at rest on every surface, green on
       hover as a preview of completing, and filled green when done; the values are the list's,
       which were measured off the reference. */
    border: 1px solid rgba(33, 35, 44, .24);
    border-radius: 50%;
    background: #fff;
    color: #fff;
    cursor: pointer;
}

.cwg-done:hover[b-ojtkjj9hkq],
.cwg-done:focus-visible[b-ojtkjj9hkq] {
    border-color: #16a34a;
}

.cwg-done--on[b-ojtkjj9hkq] {
    border-color: #16a34a;
    background: #16a34a;
}

/* ── dragging an entry (2026-09-13) ──────────────────────────────────────────────────────
   A timed block keeps the reference's POINTER cursor at rest (its card opens on click and drags on
   movement); the bottom 8px are a separate `row-resize` grip. An all-day chip is `grab`, as the
   reference's is. Only an entry whose SOURCE allows rescheduling gets either affordance. */

/* 8px like the reference, but never more than a third of a short block: a half-hour activity is
   only 24px tall, and a fixed grip there would leave almost nothing to grab for MOVING it. */
.cwg-block--draggable .cwg-block-grip[b-ojtkjj9hkq] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(8px, 33%);
    cursor: row-resize;
}

.cwg-chip--draggable[b-ojtkjj9hkq] {
    cursor: grab;
}

/* An all-day chip dragged INTO the hour grid stays where it is, faded, while a ghost of the
   half-hour block it would become follows the pointer (calendar-drag.js placeGhost). Nothing
   tints the target column: that read as "the whole day is selected" (BACKLOG 144 j). */
.cwg-chip--draggable.cwg-block--moving[b-ojtkjj9hkq] {
    cursor: grabbing;
    opacity: .55;
}

.cwg-drop-ghost[b-ojtkjj9hkq] {
    position: absolute;
    left: 1px;
    width: calc(100% - 3px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 2px 4px 2px 8px;
    background: #e1eeff;
    box-shadow: inset 2px 0 0 rgb(43, 116, 218), 0 6px 16px rgba(16, 24, 40, .18);
    color: #21232c;
    font-size: var(--fs-body);
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
}

.cwg-drop-ghost-text[b-ojtkjj9hkq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cwg-drop-ghost-range[b-ojtkjj9hkq] {
    flex: 0 0 auto;
}

/* The reverse gesture (2026-09-14): a TIMED block dragged onto the all-day strip goes back to where
   it started, faded, while a chip ghost in the target day shows the all-day entry it would become.
   Compound selectors so they outrank .cwg-block--moving and the empty day's hover hint. */
.cwg-block.cwg-block--moving.cwg-block--to-allday[b-ojtkjj9hkq] {
    opacity: .55;
    box-shadow: inset 2px 0 0 rgb(43, 116, 218);
}

.cwg-chip.cwg-allday-ghost[b-ojtkjj9hkq] {
    box-shadow: 0 6px 16px rgba(16, 24, 40, .18);
    pointer-events: none;
}

.cwg.cwg-dragging .cwg-allday-day .cwg-add-hint[b-ojtkjj9hkq] {
    visibility: hidden;
}

/* While a gesture is running the pointer must not select text or flip to a text caret as it
   passes over titles, and the block being dragged rides above its neighbours. */
.cwg-dragging[b-ojtkjj9hkq],
.cwg-dragging .cwg-block[b-ojtkjj9hkq] {
    user-select: none;
}

.cwg-dragging .cwg-title-btn[b-ojtkjj9hkq] {
    pointer-events: none;
}

.cwg-block--moving[b-ojtkjj9hkq],
.cwg-block--resizing[b-ojtkjj9hkq] {
    z-index: 3;
    cursor: grabbing;
    box-shadow: inset 2px 0 0 rgb(43, 116, 218), 0 6px 16px rgba(16, 24, 40, .18);
    opacity: .92;
}

.cwg-block--resizing[b-ojtkjj9hkq] {
    cursor: row-resize;
}

/* ── the "now" line ──────────────────────────────────────────────────────────────────── */

.cwg-now[b-ojtkjj9hkq] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 0;
    border-top: 1px solid rgb(200, 38, 39);
    pointer-events: none;
}

.cwg-now-label[b-ojtkjj9hkq] {
    position: absolute;
    left: -56px;
    top: -8px;
    width: 56px;
    padding-right: 8px;
    text-align: right;
    font-size: var(--fs-chip);
    font-weight: 600;
    line-height: 16px;
    color: rgb(200, 38, 39);
    background: #fff;
}

.cwg-now-dot[b-ojtkjj9hkq] {
    position: absolute;
    left: -2px;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(200, 38, 39);
}

/* Seven columns need room. Below this the grid scrolls sideways inside its own box rather than
   squeezing day columns to illegibility — the same escape hatch a wide table gets. */
@media (max-width: 900px) {
    .cwg-scroll[b-ojtkjj9hkq],
    .cwg-head[b-ojtkjj9hkq],
    .cwg-allday[b-ojtkjj9hkq] {
        overflow-x: auto;
    }

    .cwg-head-day[b-ojtkjj9hkq],
    .cwg-allday-day[b-ojtkjj9hkq],
    .cwg-day[b-ojtkjj9hkq] {
        flex: 0 0 120px;
    }
}
/* /Components/ChevronToggle.razor.rz.scp.css */
/* Geometry is fixed here on purpose — a call site passes colour via Class and nothing else,
   so a collapsible section can never drift to its own chevron size or rotation again. */
.cv-toggle[b-z3bhtsjag0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #6c757d;
    transition: transform 200ms;
}

/* The one second size (see ChevronToggle.razor). */
.cv-toggle--lg[b-z3bhtsjag0] {
    width: 24px;
    height: 24px;
}

/* The disclosure arrow (see ChevronToggle.razor): 24px, in the heading's own ink, and two icons
   swapped rather than one rotated — so nothing animates. */
.cv-toggle--disclosure[b-z3bhtsjag0] {
    width: 24px;
    height: 24px;
    color: inherit;
    transition: none;
}

/* 180°, not 90°: collapsed points down, expanded points up (reference behaviour). */
.cv-open[b-z3bhtsjag0] {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .cv-toggle[b-z3bhtsjag0] {
        transition: none;
    }
}
/* /Components/CopyButton.razor.rz.scp.css */
/* Icon-only copy button with an animated "Copy" / "Copied!" bubble (no icon darkening). */
.copy-btn[b-nrbi5mk49q] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--btn-radius-sm);
    background: transparent;
    cursor: pointer;
}

.copy-btn:hover[b-nrbi5mk49q] {
    background: rgba(0, 0, 0, .06);
}

.copy-tip[b-nrbi5mk49q] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* 1100 is the app's popover band. Inside a modal body this is NOT a competition with
       .fm-modal (1300/1301): .fm-modal creates its own stacking context, so this tooltip
       stacks within it and lands above the modal's content either way. */
    z-index: 1100;
    background: #3f3f3f;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.copy-btn:hover .copy-tip[b-nrbi5mk49q],
.copy-btn.copied .copy-tip[b-nrbi5mk49q] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .copy-tip[b-nrbi5mk49q] {
        transition: none;
    }
}
/* /Components/DataFieldAvailabilityModal.razor.rz.scp.css */
/* "Edit field" dialog (ADR-030, 2026-09-18). This markup is authored in this component's own
   .razor file, so it carries this file's scope — the ModalForm footer trap does not apply. */

.dfa-notes[b-r2py2rp7so] {
    margin: 0 0 4px;
    font-size: var(--fs-meta);
    color: #667085;
}

.dfa-summary[b-r2py2rp7so] {
    margin-bottom: 10px;
    font-size: var(--fs-control);
    font-weight: 600;
    color: #1d2939;
}

.dfa-check[b-r2py2rp7so] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: var(--fs-control);
    color: #344054;
    cursor: pointer;
}

.dfa-check--all[b-r2py2rp7so] {
    font-weight: 600;
    margin-bottom: 8px;
}

/* The per-type boxes sit one step in from "All activity types", as they do in the reference. */
.dfa-types[b-r2py2rp7so] {
    padding-left: 22px;
}
/* /Components/DataFieldsGrid.razor.rz.scp.css */
/* DataFieldsGrid (ADR-030, 2026-09-18). Only its own two lines: the switch (.seg-switch), the grid,
   its row menu (.dg-menu-item) and the outcome line (.status-line) are the app's shared chrome. */

.dfl-grid[b-8w19dq4eon] {
    margin-top: 4px;
}

/* The immutable key reads as an identifier, not as prose. Colour and size from the app's own
   tokens — Bootstrap's <code> pink and its .875em (relative to the parent) are both overridden. */
.dfl-key[b-8w19dq4eon] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-meta);
    color: #344054;
    background: transparent;
}
/* /Components/DataGrid.razor.rz.scp.css */
.data-grid-toolbar[b-suoaqarg9s] {
    display: flex;
    justify-content: flex-end;

    /* The gap between the toolbar row (filters + search) and the grid: 25px, about three
       quarters of the 33px row pitch (2026-08-31, product decision — first set to a row and a
       half, halved the same day because 50px read as too much air). Bootstrap's mb-2 used to
       sit in the markup and rendered as 7px at this app's 14px root, close enough that the
       toolbar read as part of the grid's header rather than as its own band of controls.

       Deliberately a constant, not calc() on --dg-row-height: that property is declared on
       .dg-container, which is this element's SIBLING, so it is not in scope here — and a
       per-grid RowHeight override should change the rows, not the page's rhythm. Set here
       rather than as a utility class in the markup so every grid gets it from one place. */
    margin-bottom: 25px;
}

/* ToolbarStart present: left content (e.g. a page section title) vs. the right-aligned
   search box, instead of the search box alone filling/owning the row. */
.data-grid-toolbar--split[b-suoaqarg9s] {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Right-aligned end group: ToolbarEnd content (filter buttons) + the search box. Grows to
   fill the row (also the leftover space next to a ToolbarStart title in --split mode) so
   .data-grid-search's percentage width resolves against a definite size. */
.data-grid-toolbar-end[b-suoaqarg9s] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* SubToolbar present: the toolbar's 25px gap is replaced by the reference's own rhythm —
   16px toolbar → chip row, 17px chip row → header (measured 2026-09-11 on its activities
   list: toolbar 72–104, chips 120–144, header 161). The row itself is a space-between flex
   line so a page can put one chip group left and another right. */
.data-grid-toolbar--has-sub[b-suoaqarg9s] {
    margin-bottom: 16px;
}

.data-grid-subtoolbar[b-suoaqarg9s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 17px;
}

/* Selection action toolbar — swaps in for the whole toolbar row while rows are selected
   (reference behaviour): page-authored bulk-action buttons left, the grid-owned
   "N selected ✕" clear pill right. */
.dg-selectbar[b-suoaqarg9s] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 32px;
}

.dg-selectbar-actions[b-suoaqarg9s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dg-selectbar-pill[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 26px;
    padding: 0 0.7rem;
    border: none;
    border-radius: var(--pill-radius);
    background: #0d6efd;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.dg-selectbar-pill:hover[b-suoaqarg9s] {
    background: #0b5ed7;
}

/* Grows to the familiar 620px cap when there is room, but yields to its siblings instead of
   pushing them off the row. The previous `width: min(100%, 620px)` could not do the latter:
   a flex container assigns items to LINES using their hypothetical size before it shrinks
   anything, so a search box claiming 100% of the end group always wrapped whatever shared
   that group (the owner filter) onto a second line — visibly staggering the toolbar once a
   ToolbarStart scope bar left the end group narrow. A small flex-basis plus a max-width cap
   is equivalent to the old rule whenever the box is alone (basis grows to the same 620px, or
   to the container below that), and only differs when it now has to share. */
.data-grid-search[b-suoaqarg9s] {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 620px;
}

.data-grid-search .form-control[b-suoaqarg9s] {
    min-width: 4rem;
}

/* Search-scope trigger ("All fields" / a column name) — same visual family as the .gf-btn
   filter triggers, but sized/bordered explicitly rather than via that shared class: it
   lives fused inside the input-group (.data-grid-search > :first-child gives it the left
   8px corner; Bootstrap's own structural input-group rules square its right side and drop
   the adjoining border regardless of class — see llm-wiki/06-patterns/dropdown-pattern.md
   "Surface Chrome" for why this replaced a native <select>: its open list was an
   OS-rendered popup no CSS could restyle. */
.dg-search-scope-btn[b-suoaqarg9s] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    max-width: 180px;
    /* padding-top carries the cap-band correction the rest of the 0.875rem control family
       gets from app.css — the rule has to live HERE because this class is only ever
       written by a scoped stylesheet, so app.css's plain .dg-search-scope-btn would lose
       to the shorthand above on specificity. Doubled because the height is stretched by
       the toolbar row and cannot grow: see app.css "Optical vertical centring". */
    padding: calc(var(--ctl-optical-shift) * 2) 0.5rem 0 0.65rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.dg-search-scope-btn:hover[b-suoaqarg9s],
.dg-search-scope-btn:focus-visible[b-suoaqarg9s] {
    background: #f1f5f9;
}

/* Push the caret back up: the padding above moves the whole content box down, and an icon
   is a geometric shape that was already centred. */
.dg-search-scope-btn svg[b-suoaqarg9s] {
    position: relative;
    top: calc(var(--ctl-optical-shift) * -1);
    flex-shrink: 0;
    color: #64748b;
}

.dg-search-scope-label[b-suoaqarg9s] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Align the search bar with the .gf-btn filter buttons sharing the toolbar row: same 8px
   outer corner radius, same 32px height, same #cbd5e1 border on the field controls —
   without this the two read as unrelated chrome side by side. Inner corners stay squared
   by Bootstrap's own input-group rules; :last-child keeps working when the conditional
   Clear button appears. */
.data-grid-search > :first-child[b-suoaqarg9s] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.data-grid-search > :last-child[b-suoaqarg9s] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.data-grid-search > *[b-suoaqarg9s] {
    height: 32px;
}

.data-grid-search .form-select[b-suoaqarg9s],
.data-grid-search .form-control[b-suoaqarg9s] {
    border-color: #cbd5e1;
}

.data-grid-sort[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
    letter-spacing: inherit;
    text-transform: inherit;
}

.data-grid-sort:hover[b-suoaqarg9s],
.data-grid-sort:focus-visible[b-suoaqarg9s] {
    color: #334155;
    text-decoration: none;
    opacity: 0.75;
}

.data-grid-sort-indicator[b-suoaqarg9s] {
    min-width: 1ch;
    font-size: 0.75rem;
    line-height: 1;
}

.dg-container[b-suoaqarg9s] {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    /* Collapsed (icon-only) width of the pinned utility lane. Declared here (not on
       .dg-table) specifically so .dg-actions-expanded below — a class toggled on THIS
       element by ResizeObserver in datagrid-resize.js — can actually override it: a custom
       property set directly on a descendant (.dg-table) always wins over an ancestor's
       value regardless of the ancestor's own specificity, so the override has to target
       the same element that declares the default. */
    --dg-actions-width: 32px;
    /* Ground colour for every OPAQUE cell of the grid — the sticky ones: selection lane,
       Pinned columns, filler, utility lane, and the sticky header under .dg-scroll-y. They
       have to be opaque (data columns scroll underneath them) but must READ as transparent,
       because the grid body IS transparent (--bs-table-bg: transparent) over whatever ground
       the page has — so an opaque cell painted any other colour shows up as a strip of a
       different colour cutting through every row. That was exactly the case until
       2026-08-16: these cells were hard-coded #fff (copied from the white-on-white reference
       target, never a decision) while the app page is #f7f9fc, so the selection lane — and,
       less noticed, the filler + actions lane at the far right — rendered as white columns
       through an otherwise uniform grid. Resolution order: --dg-surface (a host wrapper's
       override for a grid sitting on a differently coloured surface, e.g. a white card) →
       --app-page-bg (declared on MainLayout's .page, the one place the page ground is
       decided, inherited by everything inside it) → #fff (a grid outside MainLayout). */
    --dg-sticky-bg: var(--dg-surface, var(--app-page-bg, #fff));
}

.dg-container.dg-actions-expanded[b-suoaqarg9s] {
    --dg-actions-width: 116px;
}

.dg-container.dg-scroll-y[b-suoaqarg9s] {
    overflow-y: auto;
    /* No scrollbar-gutter reservation on purpose: reserving space (even a thin one) pushes
       the whole table — and therefore the sticky actions column — away from the container's
       true right edge, visibly detaching it from other flush-right page elements (buttons,
       headers). The original bug this used to guard against was Windows' classic scrollbar
       painting its grip-dot texture on top of the kebab icon; the custom flat thumb below
       has no such texture, so a plain thin overlay scrollbar is a non-issue in comparison. */
    scrollbar-width: thin; /* Firefox */
}

.dg-container.dg-scroll-y[b-suoaqarg9s]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dg-container.dg-scroll-y[b-suoaqarg9s]::-webkit-scrollbar-track {
    background: transparent;
}

.dg-container.dg-scroll-y[b-suoaqarg9s]::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.22);
    border-radius: 4px;
}

.dg-container.dg-scroll-y[b-suoaqarg9s]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.35);
}

.dg-table[b-suoaqarg9s] {
    table-layout: fixed;
    width: 100%;
    --bs-table-border-color: #dde3ea;
    --bs-table-bg: transparent;
}

/* Sticky header — only meaningful (and only applied) once the grid has its own bounded
   vertical scrollbar via FillViewport or MaxHeight; otherwise the whole page scrolls and
   a sticky header would stick to the browser viewport instead, which looks broken. */
.dg-scroll-y thead th[b-suoaqarg9s] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--dg-sticky-bg);
}

/* Pinned left/right lanes — plain per-cell position:sticky (a real <table>/<tr> already
   gives correct row alignment for free; no need to reproduce it with manual offsets). */
.dg-th-pinned[b-suoaqarg9s],
.dg-td-pinned[b-suoaqarg9s] {
    position: sticky;
    z-index: 1;
    background-color: var(--dg-sticky-bg);
}

.dg-scroll-y .dg-th-pinned[b-suoaqarg9s] {
    z-index: 2;
}

/* Plain thin border only, no drop-shadow — the reference's own pinned-column divider
   (per the technical audit of the live target) is just a hairline border, not a shadow. */
.dg-th-pinned-left[b-suoaqarg9s],
.dg-td-pinned-left[b-suoaqarg9s] {
    box-shadow: 1px 0 0 0 var(--bs-table-border-color);
}

/* The filler is ALSO sticky — offset from the right edge by the actions lane's own width,
   so it rides along with the actions column as a single fixed unit. Deliberately carries
   NO border/background overrides of its own beyond what .dg-th-pinned/.dg-td-pinned (and
   the base .dg-table td rules) already give every other cell: same row border-bottom, same
   hover tint, same opaque white background — so it reads as a plain continuation of the
   row rather than a separate, visually "detached" block between the data and the actions
   lane. The divider that marks "scrollable data ends here" lives on ITS left edge, not the
   actions column's — the actions column no longer needs one, since filler+actions together
   are the single fixed tail. */
.dg-filler[b-suoaqarg9s] {
    right: var(--dg-actions-width);
    box-shadow: 1px 0 0 0 var(--bs-table-border-color);
}

.dg-th-pinned-right[b-suoaqarg9s],
.dg-td-pinned-right[b-suoaqarg9s] {
    right: 0;
    width: var(--dg-actions-width);
    min-width: var(--dg-actions-width);
    /* Right-aligned, not centered — matches the reference exactly: when the lane widens
       (expanded customise-columns label), its content stays flush against the true right
       edge instead of drifting to the middle of the now-wider cell. */
    text-align: right;
    padding-right: 4px;
}

.dg-th-actions[b-suoaqarg9s] {
    width: var(--dg-actions-width);
    min-width: var(--dg-actions-width);
    text-align: right;
    padding-right: 4px;
    transition: width 0.15s ease;
}

/* Row hover on opaque cells: the SAME translucent tint the transparent cells get (see
   .dg-table tbody tr:hover below), layered over the same ground via a gradient overlay —
   so the tint is identical across the whole row regardless of what --dg-sticky-bg
   resolves to, instead of a hand-blended hex that only matches one ground colour. */
.dg-table tbody tr:hover .dg-td-pinned[b-suoaqarg9s] {
    background-image: linear-gradient(rgba(13, 110, 253, 0.035), rgba(13, 110, 253, 0.035));
}

/* ── Selection lane (grid-owned; see DataGrid.Selectable) ────────────────────────────
   32px wide — MUST equal SelectLaneWidth in DataGrid.razor, which offsets any following
   Pinned column's sticky `left` by it — the same width as the collapsed utility lane on the
   right, so the two grid-owned lanes frame the data columns symmetrically. Zero padding and
   centred content: the 16px box sits with 8px on either side, as in the reference target's
   own checkbox lane (measured 32px, content centred). Not a data column: never resizable
   (no data-col-key), searched, sorted, dragged, or listed in Customise columns. */
.dg-table th.dg-th-select[b-suoaqarg9s],
.dg-table td.dg-td-select[b-suoaqarg9s] {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* ── Selection checkbox ───────────────────────────────────────────────────────────────
   Modelled on the reference target's grid checkbox — 16px box, 4px radius, hairline inset
   ring, filled square with a white glyph when on, dash when mixed — but on the APP palette,
   not the reference's blue: ON is the app primary #1b6ec2 (hover #175ea5) and keyboard focus
   is the same 2px #0d68c5 ring ToggleSwitch uses, so the two immediate-effect controls that
   share a row (Status toggle, select box) read as one family. Structure: the NATIVE input
   stays on top, transparent, as the real click/keyboard/focus target (native semantics for
   free); the sibling .dg-check-box paints every state from the input's :checked/:disabled/
   :hover/:focus-visible and the label's .dg-check--mixed — no JS in the visual path. */
.dg-check[b-suoaqarg9s] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    line-height: 0;
    cursor: pointer;
}

.dg-check input[type="checkbox"][b-suoaqarg9s] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.dg-check input[type="checkbox"]:disabled[b-suoaqarg9s] {
    cursor: not-allowed;
}

.dg-check-box[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(33, 35, 44, 0.24);
    color: #fff;
    transition: background-color 100ms ease, box-shadow 100ms ease;
}

.dg-check-icon[b-suoaqarg9s] {
    display: none;
    width: 12px;
    height: 12px;
}

/* OFF: hover strengthens the ring to primary; pressed adds a light primary tint. */
.dg-check:not(.dg-check--mixed) input:not(:disabled):not(:checked):hover ~ .dg-check-box[b-suoaqarg9s] {
    box-shadow: inset 0 0 0 1px #1b6ec2;
}

.dg-check:not(.dg-check--mixed) input:not(:disabled):not(:checked):active ~ .dg-check-box[b-suoaqarg9s] {
    background-color: #e8f1fc;
    box-shadow: inset 0 0 0 1px #1b6ec2;
}

/* ON and MIXED: filled primary square; exactly one glyph shows. */
.dg-check input:checked ~ .dg-check-box[b-suoaqarg9s],
.dg-check--mixed input:not(:checked) ~ .dg-check-box[b-suoaqarg9s] {
    background-color: #1b6ec2;
    box-shadow: inset 0 0 0 1px #1b6ec2;
}

.dg-check input:checked ~ .dg-check-box .dg-check-icon--check[b-suoaqarg9s] {
    display: block;
}

.dg-check--mixed input:not(:checked) ~ .dg-check-box .dg-check-icon--mixed[b-suoaqarg9s] {
    display: block;
}

.dg-check input:not(:disabled):checked:hover ~ .dg-check-box[b-suoaqarg9s],
.dg-check--mixed input:not(:disabled):not(:checked):hover ~ .dg-check-box[b-suoaqarg9s] {
    background-color: #175ea5;
    box-shadow: inset 0 0 0 1px #175ea5;
}

/* Keyboard focus — the ToggleSwitch ring. */
.dg-check input:focus-visible ~ .dg-check-box[b-suoaqarg9s] {
    outline: 2px solid #0d68c5;
    outline-offset: 2px;
}

/* Disabled (CanSelect false, or select-all with nothing selectable): muted, no hover. */
.dg-check input:disabled ~ .dg-check-box[b-suoaqarg9s] {
    background-color: #ececed;
    box-shadow: inset 0 0 0 1px rgba(33, 35, 44, 0.24);
}

.dg-check input:disabled:checked ~ .dg-check-box[b-suoaqarg9s] {
    background-color: #8fb9e8;
    box-shadow: inset 0 0 0 1px #8fb9e8;
}

.dg-kebab-anchor[b-suoaqarg9s] {
    position: relative;
    display: inline-flex;
}

/* 24x24 button / 16x16 icon glyph — matches the reference's own button exactly (measured
   on the live target: aria-label="Customise columns"/"Actions" buttons are both 24x24 with
   a 16x16 icon inside). */
.dg-kebab-btn[b-suoaqarg9s],
.dg-gear-btn[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 0;
    border-radius: var(--btn-radius-sm);
    background: transparent;
    color: #64748b;
    line-height: 1;
    cursor: pointer;
}

.dg-kebab-btn span:first-child[b-suoaqarg9s],
.dg-gear-btn span:first-child[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 16px;
    line-height: 1;
}

/* Column-customise control expands to icon+label when there's enough filler space to show
   it comfortably (ResizeObserver-driven, see initActionsResponsive in datagrid-resize.js —
   this is a pure client-side responsive toggle, no Blazor round-trip). .dg-th-actions'
   width already follows --dg-actions-width (116px once .dg-actions-expanded is set on the
   container, see above) — nothing to redeclare here. The row kebab never expands — only
   the header control does; the "Actions" affordance stays icon-only in every state,
   matching the reference. */
.dg-actions-expanded .dg-gear-btn[b-suoaqarg9s] {
    width: auto;
    padding: 0 4px 0 8px;
    gap: 6px;
}

.dg-gear-label[b-suoaqarg9s] {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: #21232c;
    white-space: nowrap;
}

.dg-actions-expanded .dg-gear-label[b-suoaqarg9s] {
    display: inline;
}

.dg-kebab-btn:hover[b-suoaqarg9s],
.dg-kebab-btn:focus-visible[b-suoaqarg9s],
.dg-gear-btn:hover[b-suoaqarg9s],
.dg-gear-btn:focus-visible[b-suoaqarg9s],
.dg-kebab-btn[aria-expanded="true"][b-suoaqarg9s],
.dg-gear-btn[aria-expanded="true"][b-suoaqarg9s] {
    background-color: #eef2f7;
    color: #1e293b;
}

.dg-kebab-btn:focus-visible[b-suoaqarg9s],
.dg-gear-btn:focus-visible[b-suoaqarg9s] {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

/* The .dg-popover chrome (background, border, shadow, z-index 1100, typography reset)
   is GLOBAL in app.css — it gained a second consumer outside this component (the
   Visibility Groups page's anchored menus), and global classes reach DismissiblePanel
   content without ::deep. Only the column-panel internals below stay scoped here. */

/* Column panel layout follows the reference target: edge-to-edge section bands and a
   full-width footer divider, so the panel itself carries NO padding — every block pads
   itself horizontally instead. (.dg-popover's base 0.35rem padding is overridden here.) */
[b-suoaqarg9s] .dg-column-panel {
    width: 320px;
    max-width: calc(100vw - 16px);
    padding: 0;
}

/* Column header (i) info popover — same .dg-popover chrome, its own compact content
   layout: a bold title over an explanatory sentence, as in the reference pattern. */
[b-suoaqarg9s] .dg-info-popover {
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 0.75rem 0.85rem;
}

[b-suoaqarg9s] .dg-info-popover-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.3rem;
}

[b-suoaqarg9s] .dg-info-popover-body {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
}

[b-suoaqarg9s] .dg-cp-title {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 0.75rem 0.5rem;
}

/* Search box with an inline magnifier icon, as in the reference. */
[b-suoaqarg9s] .dg-cp-search-wrap {
    position: relative;
    padding: 0 0.75rem 0.6rem;
}

[b-suoaqarg9s] .dg-cp-search-icon {
    position: absolute;
    left: calc(0.75rem + 10px);
    top: 9px;
    width: 14px;
    height: 14px;
    color: #64748b;
    pointer-events: none;
}

[b-suoaqarg9s] .dg-cp-search {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 32px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
}

[b-suoaqarg9s] .dg-cp-search:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

[b-suoaqarg9s] .dg-cp-error {
    font-size: 0.8rem;
    color: #b02a37;
    padding: 0 0.75rem 0.4rem;
}

[b-suoaqarg9s] .dg-cp-list {
    max-height: 320px;
    overflow-y: auto;
    /* No scroll chaining: reaching the list's end must not start scrolling the grid/page
       underneath (which would move the anchor under the open panel). */
    overscroll-behavior: contain;
    border-top: 1px solid #edf0f4;
}

/* "VISIBLE (n/total)" / "NOT VISIBLE" bands — sticky so the active section stays
   labelled while its items scroll under; the next band pushes the previous one out,
   standard grouped-list behaviour. */
[b-suoaqarg9s] .dg-cp-section {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
}

[b-suoaqarg9s] .dg-cp-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    cursor: pointer;
    margin: 0;
}

[b-suoaqarg9s] .dg-cp-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: #0d6efd;
    cursor: inherit;
}

/* Reference hover: the whole row floods primary blue and the text goes white. */
[b-suoaqarg9s] .dg-cp-item:not(.dg-cp-item-disabled):hover {
    background: #0d6efd;
    color: #fff;
}

[b-suoaqarg9s] .dg-cp-item:not(.dg-cp-item-disabled):hover .dg-cp-required {
    color: #dbeafe;
}

[b-suoaqarg9s] .dg-cp-item-disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

[b-suoaqarg9s] .dg-cp-item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-suoaqarg9s] .dg-cp-required {
    font-size: 0.7rem;
    color: #94a3b8;
}

[b-suoaqarg9s] .dg-cp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid #edf0f4;
    padding: 0.6rem 0.75rem;
}

/* "Default columns" is a plain text action in the reference — no border, quiet hover. */
[b-suoaqarg9s] .dg-cp-default {
    border: 0;
    background: transparent;
    padding: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    border-radius: var(--btn-radius-sm);
}

[b-suoaqarg9s] .dg-cp-default:hover {
    background: #f1f5f9;
}

[b-suoaqarg9s] .dg-cp-footer-actions {
    display: flex;
    gap: 0.5rem;
}

[b-suoaqarg9s] .dg-cp-footer .btn {
    border-radius: var(--btn-radius);
}

.dg-table td[b-suoaqarg9s] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 0;
    color: #1e293b;
}

.dg-table tbody tr[b-suoaqarg9s] {
    transition: background-color 100ms ease;
}

.dg-table tbody tr:hover[b-suoaqarg9s] {
    background-color: rgba(13, 110, 253, 0.035) !important;
    --bs-table-accent-bg: transparent;
}

/* Header typography matches the reference exactly (measured via computed styles on the
   live People.html target): 14px/600, near-black, normal case/spacing — not the small
   uppercase/letter-spaced "table caption" look we had before, which the reference doesn't
   use at all. */
thead th[b-suoaqarg9s] {
    position: relative;
    overflow: hidden;
    line-height: 1.25;
    vertical-align: middle;
    white-space: nowrap;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    color: #21232c;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    border-bottom: 1px solid #e4e7ec !important;
}

.dg-th-content[b-suoaqarg9s] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.dg-col-label[b-suoaqarg9s] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.dg-col-info-anchor[b-suoaqarg9s] {
    flex: 0 0 auto;
    display: inline-flex;
}

/* Mirrors the app's shared page-title info button (.info-btn in app.css) so every
   "(i) opens an explanation" trigger in the app looks and behaves the same, whether it sits
   next to a page title, a toolbar control, or a column header. */
.dg-col-info-btn[b-suoaqarg9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.dg-col-info-btn:hover[b-suoaqarg9s],
.dg-col-info-btn:focus-visible[b-suoaqarg9s],
.dg-col-info-btn[aria-expanded="true"][b-suoaqarg9s] {
    background: rgba(15, 23, 42, 0.06);
    color: #1b6ec2;
}

th[draggable="true"][b-suoaqarg9s] {
    user-select: none;
}

.dg-drag-handle[b-suoaqarg9s] {
    opacity: 0;
    font-size: 0.75rem;
    color: #adb5bd;
    margin-right: 0.25rem;
    transition: opacity 0.15s;
    cursor: grab;
}

.dg-drag-handle:active[b-suoaqarg9s] {
    cursor: grabbing;
}

th[draggable="true"]:hover .dg-drag-handle[b-suoaqarg9s] {
    opacity: 1;
}

.dg-resize-handle[b-suoaqarg9s] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    opacity: 0;
    z-index: 2;
    pointer-events: all;
    transition: opacity 0.15s, background-color 0.15s;
}

thead th:hover .dg-resize-handle[b-suoaqarg9s] {
    opacity: 1;
    background-color: #dee2e6;
}

.dg-resize-handle:hover[b-suoaqarg9s] {
    background-color: #0d6efd !important;
    opacity: 1 !important;
}

.dg-th-dragging[b-suoaqarg9s] {
    opacity: 0.4;
}

.dg-th-drag-over[b-suoaqarg9s] {
    border-left: 2px solid #94a3b8;
    background-color: #f8fafc;
}

/* Under Ruled the drop target is marked by the INSERTION EDGE alone, not by tinting the whole
   header. `#f8fafc` was invisible against the old grey page and reads as a colour change now
   that the page is white — and a header left tinted by an interrupted drag looks exactly like
   a column that has permanently changed colour. The accent edge says the same thing without
   that failure mode. */
.dg-ruled .dg-th-drag-over[b-suoaqarg9s] {
    border-left: 2px solid var(--dg-edit-accent);
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Ruled appearance (2026-08-30) — everything below is scoped to .dg-ruled, so a grid that
   has not opted in renders exactly as it did before. Measured off the shared reference and
   re-expressed on our own tokens; see llm-wiki/02-components/tables/table-pattern.md.

   The idea in one line: a Classic grid is a list of text separated by lines, a Ruled grid
   is a sheet of cells. That is why the hover moves from the ROW to the CELL — in a sheet
   the cell is the unit you act on, and a row-wide tint says nothing about where you are.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.dg-container.dg-ruled[b-suoaqarg9s] {
    /* One rule colour for both axes. Classic used two near-identical greys (#dde3ea under
       rows, #e4e7ec under the header); with vertical rules in play that difference reads as
       a mistake rather than a nuance. */
    --dg-rule: rgba(33, 35, 44, 0.14);
    /* The cell-hover outline: the same blue the selection checkbox already focuses with, so
       the grid keeps ONE accent rather than gaining a second for this feature. */
    --dg-edit-accent: #0d68c5;
    /* Row pitch, kept in one place because Virtualize's ItemSize in DataGrid.razor has to
       equal it — a mismatch shows up as dead space at the end of a fast scroll. 4px padding
       + a 24px control (kebab / pencil) + 4px + the 1px rule.
       A grid whose cells stack more than one line overrides BOTH from one place with
       DataGrid's RowHeight parameter, which republishes this property on the container and
       feeds ItemSize the same number. Never override it from a page's own CSS: the CSS would
       move and the virtualizer's arithmetic would not. */
    --dg-row-height: 33px;
    /* How far a hovered cell may grow past its column to show text the column has truncated.
       The reference's own cap, measured. A cap rather than "as wide as it needs" because a
       long value would otherwise blank out most of the row it is sitting in. */
    --dg-cell-expand-max: 364px;
}

/* border-collapse: separate is load-bearing, not tidiness. Under `collapse` the border is
   painted by the TABLE rather than by the cell, so it does not travel with a
   position: sticky cell — which is exactly why the pinned lanes below draw their divider
   with a box-shadow instead of a border. Vertical rules on sticky lanes need the borders to
   belong to the cells, so this appearance separates them; border-spacing: 0 keeps the cells
   flush. Only bottom and right widths are ever set, so nothing doubles up. */
/* The grid is a white SHEET, not white-only-where-something-is-painted. Body cells are
   transparent (--bs-table-bg) over whatever is behind them, so without this the ruled grid
   showed the page ground between its rules and turned white only under a hover box. Painting
   the container means the transparent cells and the opaque sticky lanes end up the same
   colour by construction, which is the point of the token. */
.dg-ruled.dg-container[b-suoaqarg9s] {
    background: var(--dg-sticky-bg);
}

/* EVERY ruled grid runs edge to edge inside whatever contains it — the page article, an
   accordion body, a tab panel. Never a gutter between the grid and its container's edge.

   The mechanism is one pair of custom properties describing "the horizontal padding of the box
   I am in". `MainLayout`'s article declares them; any other padded container that can host a
   grid redeclares its own (`.acc-body`). Cascade resolution then picks the NEAREST one, so a
   grid in an accordion cancels the accordion's 1rem and stays inside its card, while a grid
   sitting directly on the page cancels the article's asymmetric 1.5rem/1.25rem and reaches the
   window. One rule, no per-page arithmetic, and it follows the mobile breakpoint for free.
   Falls back to 0 for a grid rendered outside any of them.

   Applied here rather than by each page: eighteen grids would otherwise each need a wrapper,
   and the nineteenth would forget it. It is unconditional — `FillViewport` and `MaxHeight`
   grids alike, since "flush with my container" is true of a grid embedded among other page
   content just as much as of one that owns the viewport. */
.dg-ruled[b-suoaqarg9s] {
    margin-left: calc(-1 * var(--content-pad-l, 0px));
    margin-right: calc(-1 * var(--content-pad-r, 0px));
}

.dg-ruled .dg-table[b-suoaqarg9s] {
    border-collapse: separate;
    border-spacing: 0;
    --bs-table-border-color: var(--dg-rule);
}

/* 2px of gutter on the left so the FIRST column's hover ring has somewhere to be drawn: the
   container clips at its padding box, so without it the ring's left segment is cut off on the
   leftmost column.
   ONLY when there is no selection lane. With checkboxes the lane itself is the leftmost cell —
   it is grid chrome and never gets a hover ring — so the first cell that does is already 32px
   in, and a gutter would only push the grid off the navigation it is meant to sit flush
   against. The reference has exactly this arrangement: a 33px checkbox lane and no gutter.
   Deliberately a table margin rather than container padding: sticky offsets resolve against
   the scrollport, so padding would push the sticky header and the pinned lanes 2px inwards and
   open a strip for content to scroll through. */
.dg-ruled:not(.dg-has-select-lane) .dg-table[b-suoaqarg9s] {
    margin-left: 2px;
    width: calc(100% - 2px);
}

.dg-ruled .dg-table > :not(caption) > * > *[b-suoaqarg9s] {
    border-right: 1px solid var(--dg-rule);
}

/* No rule against the container's own right edge — the grid ends there, a line would read
   as a column boundary with nothing after it.

   SELECTOR SHAPE IS LOAD-BEARING, and this rule was inert until 2026-08-31 because of it.
   Written as `.dg-ruled .dg-td-pinned-right` it is two classes (0,2,0), while the general rule
   above — `.dg-ruled .dg-table > :not(caption) > * > *` — is (0,2,1), because `:not()` takes
   the specificity of its argument and `caption` is an element. The general rule therefore won
   and the lane kept a 1px right rule.
   What that looked like: the actions lane sticks to the SCROLLPORT edge, so on any grid with a
   vertical scrollbar it sits ~10px short of the container's visible edge — leaving a 1px line
   stranded beside every kebab, chopped into 33px pieces by the row rules. Reported as "an extra
   dot next to the ⋯". It was invisible on grids without a scrollbar, where the stray line lands
   on the container border, which is why it looked page-specific.
   Matching the general rule's shape puts this at (0,3,1) and it applies. Do not shorten it. */
.dg-ruled .dg-table > :not(caption) > * > .dg-th-pinned-right[b-suoaqarg9s],
.dg-ruled .dg-table > :not(caption) > * > .dg-td-pinned-right[b-suoaqarg9s] {
    border-right: 0;
}

/* The top edge only. Cells carry right/bottom rules, so the grid had no line above its header
   either — invisible while the page was grey-on-white, obvious once the page went white. It
   goes on the HEADER CELLS rather than the table so it travels with the sticky header instead
   of scrolling away.

   There is deliberately NO left edge. Measured on the reference: its first column's cells carry
   `border-left: 0`, and the grid runs straight out of the navigation with nothing between them.
   A line there would draw a seam exactly where the two surfaces are meant to read as one. A
   left rule was added here briefly and removed for that reason. */
.dg-ruled thead th[b-suoaqarg9s] {
    border-top: 1px solid var(--dg-rule);
    border-bottom: 1px solid var(--dg-rule) !important;
    height: var(--dg-row-height);
}

/* A selected row is tinted end to end, including the opaque sticky lanes — those paint
   --dg-sticky-bg, so the rule has to out-specify them or half the row would stay white.
   #eff6ff is the reference's own selected-row colour (measured rgb(239,246,255)) and is
   already this app's accent tint, the one .gf-btn--active uses for a live filter. */
.dg-ruled tbody tr.dg-tr-selected > td[b-suoaqarg9s] {
    background-color: #eff6ff;
}

/* ── Row activation (record detail drawer, 2026-09-08) ────────────────────────────────────
   The ACTIVE row is the one whose record is open in the drawer — a different state from the
   ticked (selected) row above, and the two can coexist. #e1eeff is rgb(225,238,255), the
   colour the active secondary-nav item already uses, so the grid gains no new colour; it is
   deliberately a shade stronger than the #eff6ff tick so "open" reads over "ticked" when both
   apply (this rule comes AFTER the selected one at equal specificity for that reason). The
   sticky lanes paint --dg-sticky-bg, so they get the same value as a gradient layer — the same
   arrangement the row hover uses further down. */
.dg-ruled tbody tr.dg-tr-active > td[b-suoaqarg9s] {
    background-color: #e1eeff;
}

.dg-ruled tbody tr.dg-tr-active .dg-td-pinned[b-suoaqarg9s] {
    background-image: linear-gradient(#e1eeff, #e1eeff);
}

/* Whole-row click: every data cell is a target, so every data cell says so. The grid-owned
   lanes and the interactive elements inside cells keep their own cursors — they are the
   exclusions, and the pointer must not promise a row-open where a click does something else. */
.dg-ruled.dg-clickable-rows .dg-table td.dg-td-cell[b-suoaqarg9s] {
    cursor: pointer;
}

/* The row is focusable when it is activatable (tabindex from DataGrid.razor) — the drawer
   returns focus here on close, and Enter/Space open it again. An INSET ring: an outline on a
   <tr> is not painted reliably across browsers, and an inset shadow on the cells travels with
   the sticky lanes too. Same accent as every other focus ring in the grid. */
.dg-ruled tbody tr[tabindex]:focus-visible[b-suoaqarg9s] {
    outline: none;
}

.dg-ruled tbody tr[tabindex]:focus-visible > td[b-suoaqarg9s] {
    box-shadow: inset 0 2px 0 var(--dg-edit-accent), inset 0 -2px 0 var(--dg-edit-accent);
}

.dg-ruled tbody tr[tabindex]:focus-visible > td:first-child[b-suoaqarg9s] {
    box-shadow: inset 2px 2px 0 var(--dg-edit-accent), inset 2px -2px 0 var(--dg-edit-accent);
}

.dg-ruled .dg-table td[b-suoaqarg9s] {
    height: var(--dg-row-height);
}

/* Padding is for DATA cells only. The grid-owned lanes — the selection checkbox lane, the
   filler and the right-pinned utility lane — set their own (0, and 4px on the right for the
   kebab) and are chrome, not content: a blanket `td { padding }` here outranked them at equal
   specificity and squeezed the 16px checkbox into a 16px content box, which broke its
   alignment against the header's select-all. Left-pinned DATA columns are excluded too and
   keep the Classic padding, for the same reason their overflow is left alone. */
.dg-ruled thead th:not(.dg-th-select):not(.dg-filler):not(.dg-th-actions)[b-suoaqarg9s] {
    padding: 0 8px;
}

/* ── The two hover treatments ─────────────────────────────────────────────────────────
   A ruled grid gets ONE of two, decided by DataGrid.HasInlineEditing (see its comment):
   the per-cell lifted box on grids where a cell can be edited, and a plain row tint on
   grids where it cannot. Both come from the reference, which draws exactly this line
   between its editable data grids and its read-only admin grids.

   #f5f5f6 is the reference's own value, measured on its manage-users row (rgb(245,245,246)),
   not the translucent blue Classic uses. A selected row keeps its #eff6ff — the selection is
   the more important state of the two, and letting a grey hover paint over it would make a
   ticked row look unticked while the pointer sits on it. */
.dg-ruled.dg-row-hover .dg-table tbody tr:hover:not(.dg-tr-selected):not(.dg-tr-active) > td[b-suoaqarg9s] {
    background-color: #f5f5f6;
}

/* The gradient twin for the opaque sticky lanes — they paint --dg-sticky-bg, so a background
   COLOUR on the row never shows through them. Same value, layered, so the tint is identical
   across the whole row. Without this half of every hovered row would stay white. */
.dg-ruled.dg-row-hover .dg-table tbody tr:hover:not(.dg-tr-selected):not(.dg-tr-active) .dg-td-pinned[b-suoaqarg9s] {
    background-image: linear-gradient(#f5f5f6, #f5f5f6);
}

/* No row hover on a grid that has the per-cell box — the two would fight for the same
   rectangle. Both halves have to go: the tint on transparent cells AND the gradient twin
   that reproduces it on the opaque sticky lanes. Leaving either behind would light up half
   a row. */
.dg-ruled:not(.dg-row-hover) .dg-table tbody tr:hover[b-suoaqarg9s] {
    background-color: transparent !important;
}

.dg-ruled:not(.dg-row-hover) .dg-table tbody tr:hover .dg-td-pinned[b-suoaqarg9s] {
    background-image: none;
}

/* These hairlines were standing in for vertical rules that could not exist under
   border-collapse: collapse. They can now, and keeping the box-shadow would paint a second
   line 1px away from a real one. */
.dg-ruled .dg-th-pinned-left[b-suoaqarg9s],
.dg-ruled .dg-td-pinned-left[b-suoaqarg9s],
.dg-ruled .dg-filler[b-suoaqarg9s] {
    box-shadow: none;
}

/* ── Column header menu ──────────────────────────────────────────────────────────────── */

/* Full width so the sort arrow lands at the FAR end of the header cell, as the reference's
   does (measured 9px from its right edge = our 8px padding + the 1px rule), rather than
   trailing the label. */
.dg-ruled .dg-col-menu-btn[b-suoaqarg9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dg-ruled .dg-col-menu-label[b-suoaqarg9s] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-ruled .dg-sort-arrow[b-suoaqarg9s] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: inherit;
}

/* The base rule's 8px right padding would push the sort arrow 17px in from the header's edge;
   the reference sits its arrow at 9px, which is the cell padding plus the rule. The label
   already truncates on its own, so the padding was only ever separating it from a trailing
   indicator that is now flush right by design. */
.dg-ruled .dg-col-label[b-suoaqarg9s] {
    padding-right: 0;
}

/* No drag grip at all under Ruled, and no resize bar until the pointer is actually on the
   handle. Both used to appear on th:hover, which is why hovering a header looked like it
   changed colour: a grey ⠿ materialised to the left of the label and a grey bar at its right
   edge. The ⠿ glyph is a 2x3 braille dot pattern, so at 12px it reads as loose dots rather
   than a handle.

   Neither earns its place now that the whole header is the drag source again (the reference's
   header carries only a label and a 3px resize strip — measured). A grip advertising "you can
   drag from here" is misleading when you can drag from anywhere, and the resize affordance is
   the col-resize cursor, which arrives exactly where it applies. Header hover is now what the
   reference does and nothing more: the label underlines. */
.dg-ruled .dg-drag-handle[b-suoaqarg9s] {
    display: none;
}

.dg-ruled thead th:hover .dg-resize-handle[b-suoaqarg9s] {
    opacity: 0;
    background-color: transparent;
}

.dg-ruled .dg-resize-handle:hover[b-suoaqarg9s] {
    opacity: 1 !important;
    background-color: var(--dg-edit-accent) !important;
}

/* Header hover is a TINT ON THE CELL, measured on the reference: rgba(33,35,44,.05) on the
   header cell, with the label's own colour and decoration unchanged. An underline shipped here
   first, from reading a screenshot instead of measuring; the label never changes at all.

   Beats the sticky-header background rule on specificity, so it works on a scrolled grid too.
   Not bound to :focus-visible — choosing a menu item returns focus to the trigger, and a
   focus-bound hover state stays lit for the rest of the session. Keyboard focus has its own
   outline below. */
.dg-ruled thead th:hover[b-suoaqarg9s],
.dg-ruled.dg-scroll-y thead th:hover[b-suoaqarg9s] {
    background-color: rgba(33, 35, 44, 0.05);
}

/* The sorted column keeps a permanent tint, which is how the reference marks it alongside the
   arrow (measured: rgb(236,236,237) against white neighbours). Two signals rather than one,
   and the surviving one is visible from across the table where a 16px arrow is not. */
.dg-ruled thead th.dg-th-sorted[b-suoaqarg9s],
.dg-ruled.dg-scroll-y thead th.dg-th-sorted[b-suoaqarg9s] {
    background-color: #ececed;
}

.dg-ruled thead th.dg-th-sorted:hover[b-suoaqarg9s],
.dg-ruled.dg-scroll-y thead th.dg-th-sorted:hover[b-suoaqarg9s] {
    background-color: #e4e4e6;
}

.dg-ruled .dg-col-menu-btn:focus-visible[b-suoaqarg9s] {
    outline: 2px solid var(--dg-edit-accent);
    outline-offset: 2px;
}

/* ::deep because the menu body is written HERE but rendered inside DismissiblePanel, which
   carries its own scope attribute — the same reason the .dg-cp-* rules above are ::deep. */
[b-suoaqarg9s] .dg-col-menu {
    min-width: 208px;
    padding: 0.25rem;
}

[b-suoaqarg9s] .dg-col-menu .dg-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

[b-suoaqarg9s] .dg-menu-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #64748b;
}

[b-suoaqarg9s] .dg-menu-item:hover .dg-menu-icon,
[b-suoaqarg9s] .dg-menu-item--active .dg-menu-icon {
    color: inherit;
}

/* ── Data cells and the hover box ────────────────────────────────────────────────────── */

/* The box IS the cell. The <td> gives up its padding to .dg-cell and keeps only the rules,
   so the hover outline sits ON the cell boundary instead of inset from it by the padding —
   which is the whole difference between "this cell is lifted" and "something is drawn inside
   this cell". Measured on the reference: its cell carries padding:0 and the box inside it
   carries padding:4px, with the box spanning the cell edge to edge.

   overflow:visible so the outline can paint over the surrounding rules and 1px beyond them,
   as the reference's does. max-width:0 STAYS — that is what makes table-layout:fixed honour
   per-column widths, and dropping it would break resizing on every column. */
.dg-ruled .dg-table td.dg-td-cell[b-suoaqarg9s] {
    padding: 0;
    overflow: visible;
    position: relative;
}

/* Absolute, always — not only on hover. Two reasons: switching position on hover would make
   the row twitch, and this way the box fills the cell exactly with no percentage-height
   guesswork. The row keeps its height from the explicit `height: var(--dg-row-height)` on the
   td, so taking the content out of flow costs nothing. */
.dg-cell[b-suoaqarg9s] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 2px;
}

/* Truncation moves here with the padding. Same three declarations the <td> used to carry,
   now on the element that actually clips. */
.dg-cell-content[b-suoaqarg9s] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The lift. An OUTLINE, so it takes no part in layout — nothing reflows when the mouse
   arrives — and it draws OUTSIDE the box, over the rules on all four sides and 1px past them.

   z-index 2 — the same value the sticky header carries, which is what the reference does
   (measured: its header container and its hover box are both 2). At equal z-index the later
   element in DOM order wins, and <tbody> follows <thead>, so the box paints OVER the header.
   That is not a mistake to correct: without it the TOP segment of the topmost visible row's
   ring is hidden behind the header, which is exactly the missing-line bug this replaced.

   The cost, and it is the reference's cost too: a cell only partly scrolled under the header
   can still be hovered by its visible half, and its box then paints over the header for its
   full height. And a hovered middle cell now paints over the pinned lanes by the 2px of its
   ring during horizontal scroll. Both were weighed against a permanently missing ring on the
   first row; no ordering satisfies all three at once inside a single <table>, because it
   would need box > header > pinnedBody > box. Revisit when a Ruled grid first has a pinned
   column — none does today. ADR-018's band (grid internals 1-2) still holds. */
.dg-ruled:not(.dg-row-hover) td.dg-td-cell:hover .dg-cell[b-suoaqarg9s],
.dg-ruled td.dg-td-cell:focus-within .dg-cell[b-suoaqarg9s],
.dg-ruled td.dg-td-editing .dg-cell[b-suoaqarg9s] {
    z-index: 2;
    background: var(--dg-sticky-bg);
    outline: 2px solid var(--dg-edit-accent);

    /* A hovered cell GROWS to show text its column is too narrow for, spilling over its
       neighbours — measured on the reference: `min-width: 100%`, `max-width: 364px`, and a
       width that resolves to the content's own. Releasing `right` is what lets it: the box is
       pinned by `inset: 0` at rest, so both edges are fixed and it can only ever be the cell's
       width.

       No truncation detection is needed and none is used. max-content is smaller than the cell
       for text that already fits, so `min-width: 100%` wins and nothing moves; it is larger
       only when the column is actually cutting the value off. That is also why this replaced
       the old truncated-cell hover preview rather than sitting beside it — one overlay, and
       this one carries the row's edit affordance with it. */
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: var(--dg-cell-expand-max);
}

.dg-cell-edit-btn[b-suoaqarg9s] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(33, 35, 44, 0.14);
    border-radius: var(--btn-radius-sm);
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 54, 71, 0.05);
    color: #475569;
    cursor: pointer;
    /* Hidden by opacity, not display or visibility: the 24px stays reserved so the content
       beside it does not reflow when the mouse arrives, AND the button stays in the tab
       order, so an editable cell is reachable without a mouse. */
    opacity: 0;
}

.dg-ruled:not(.dg-row-hover) td.dg-td-cell:hover .dg-cell-edit-btn[b-suoaqarg9s],
.dg-ruled td.dg-td-cell:focus-within .dg-cell-edit-btn[b-suoaqarg9s],
.dg-ruled td.dg-td-editing .dg-cell-edit-btn[b-suoaqarg9s] {
    opacity: 1;
}

.dg-cell-edit-btn:hover[b-suoaqarg9s] {
    background: #f8f9fa;
    border-color: rgba(33, 35, 44, 0.24);
    color: #1e293b;
}

.dg-cell-edit-btn:focus-visible[b-suoaqarg9s] {
    opacity: 1;
    outline: 2px solid var(--dg-edit-accent);
    outline-offset: 1px;
}

[b-suoaqarg9s] .dg-cell-editor {
    width: 330px;
    max-width: calc(100vw - 16px);
    padding: 0;
}

/* ── Links inside ruled cells ────────────────────────────────────────────────────────── */

/* A column of permanently underlined blue is the loudest thing in a Classic grid. Under
   Ruled the link carries its affordance through the cursor and a hover underline instead.
   ::deep because the <a> is written by the PAGE inside its Cell delegate, so it never
   carries this component's scope attribute.

   `.dg-cell-link` is the same treatment for a cell whose click OPENS something in place —
   a modal, a panel — rather than navigating. That is a <button>, not an <a>: there is no URL
   behind it, so an anchor would be a lie to the keyboard, the screen reader and the middle
   mouse button alike. It shares this declaration block deliberately, so the two can never
   drift into looking like different kinds of clickable text. */
[b-suoaqarg9s] .dg-ruled .dg-table td a,
[b-suoaqarg9s] .dg-ruled .dg-table td .dg-cell-link {
    color: #21232c;
    text-decoration: none;
}

[b-suoaqarg9s] .dg-ruled .dg-table td a:hover,
[b-suoaqarg9s] .dg-ruled .dg-table td a:focus-visible,
[b-suoaqarg9s] .dg-ruled .dg-table td .dg-cell-link:hover,
[b-suoaqarg9s] .dg-ruled .dg-table td .dg-cell-link:focus-visible {
    color: #21232c;
    text-decoration: underline;
}

/* Button chrome off, so it reads as text in a cell and inherits the row's typography rather
   than the browser's button font. */
[b-suoaqarg9s] .dg-ruled .dg-table td .dg-cell-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Column group band ───────────────────────────────────────────────────────────────── */

/* A second header row that says once what several columns are variations of — "Permission
   sets" over one column per module, rather than three sibling columns whose relationship the
   reader has to infer. Measured on the reference: 32px tall, 14px/600 for the band, and the
   grouped column labels below it drop to 12px/450 so the band reads as the heading and they
   read as its variants. Ungrouped columns on the same grid keep the full 14px/600. */
/* Only the BAND cell is styled here. Everything else in this row is an ordinary column
   header that happens to be spanning two rows, and it must keep the header styling it has
   everywhere else — centring it, or handing it the 8px padding, would restyle User and
   Global just because a band exists two columns away. The padding matters more than it
   looks: at this selector's specificity a blanket `padding: 0 8px` also outranks the
   selection lane's own `padding: 0`, which is exactly the bug that squeezed the 16px
   checkbox out of alignment once before (2026-08-30). /settings/users has no selection lane,
   so it would have sat here unnoticed until the first banded grid that does. */
.dg-ruled thead tr.dg-group-row th.dg-th-group--named[b-suoaqarg9s] {
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #21232c;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--dg-rule);
}

/* NO rule suppression here. An earlier version blanked `border-right` on every band-row cell
   that was not a named band, on the assumption that those cells would be EMPTY placeholders
   above ungrouped columns. They are not: an ungrouped column moves INTO this row with
   rowspan=2 and brings its real header with it, so the rule was erasing the vertical line
   between User and Global, and between Visibility Group and Authentication, on the only page
   that has a band (reported 2026-08-31). Every cell in this row is a real header and rules
   like one. */


/* The label row loses its top rule once a band sits above it — the band already draws that
   edge for the whole width. */
.dg-ruled thead tr.dg-group-row + tr th[b-suoaqarg9s] {
    border-top: 0;
}

/* But only the labels UNDER a band shrink. Scoped by class rather than by "the row after the
   band", which was the first attempt and shrank every header on the grid including the
   ungrouped ones — the band is supposed to make its own columns read as variants of it, not
   to demote their neighbours. */
.dg-ruled thead th.dg-th-grouped[b-suoaqarg9s] {
    font-size: 12px;
    font-weight: 450;
}

/* Two sticky rows: the band pins to the top, the labels pin below it. Without the offset the
   label row would slide under the band on a scrolled grid. */
.dg-ruled.dg-scroll-y thead tr.dg-group-row th[b-suoaqarg9s] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--dg-sticky-bg);
}

.dg-ruled.dg-scroll-y thead tr.dg-group-row + tr th[b-suoaqarg9s] {
    top: 32px;
}

/* ── Multi-level sort indicator ───────────────────────────────────────────────────────
   The small number before a sorted header's arrow, saying which level it is. It renders
   ONLY when there is more than one level: on a single-sorted grid a "1" would be noise,
   and with two levels it is the only thing that tells the user which column is breaking
   the other's ties. Tabular-nums so 1 and 2 occupy the same width and the arrow beside
   them does not shift between headers. */
.dg-ruled .dg-sort-level[b-suoaqarg9s] {
    margin-right: 2px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dg-edit-accent);
    line-height: 1;
}

/* ── Tabular figures on numeric columns ───────────────────────────────────────────────
   Opt-in per column via DataGridColumn.Numeric, never table-wide. Tabular figures are
   WIDER — measured in Inter, ten "1"s go from 65px to 90.7px — so a blanket rule would
   inflate every date and count and push columns whose saved width has little slack into
   truncation. Applied where digits are meant to be compared DOWN the column.

   A deliberate divergence from the shared reference, which uses proportional figures
   everywhere (measured: all 697 digit-bearing elements on its persons grid read
   font-variant-numeric: normal). Alignment down a column of quantities was judged worth
   more here than matching it. */
.dg-ruled .dg-table td.dg-td-num[b-suoaqarg9s] {
    font-variant-numeric: tabular-nums;
}

/* FillParent: the grid is the flexing child of a flex-column parent (ModalForm's
   .fm-body--fill). flex:1 takes the remaining height; min-height:0 is the load-bearing half —
   flexbox's default min-height:auto keeps the box content-sized, so without it the grid never
   actually shrinks and the PARENT grows a second scrollbar around the grid's own (.dg-scroll-y
   overflow). */
.dg-container.dg-fill-parent[b-suoaqarg9s] {
    flex: 1 1 auto;
    /* A FLOOR, not 0: on a short effective viewport (small window, browser zoom) the summary
       content above the grid can eat the whole shell — with min-height:0 the grid collapsed
       to a 24px sliver (measured at 150% zoom). Below the floor the grid stops shrinking and
       .fm-body's own overflow-y:auto takes over, so the degradation is "body scrolls" rather
       than "grid vanishes". Still far below any real content height, so normal viewports never
       hit it and flex shrinking keeps working. */
    min-height: 12rem;
}
/* /Components/FormField.razor.rz.scp.css */
.fm-field[b-qihwtj0fb8] {
    margin-bottom: 1rem;
}

.fm-field--full[b-qihwtj0fb8] {
    grid-column: 1 / -1;
}

.fm-label[b-qihwtj0fb8] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

/* /Components/JsonCodeBlock.razor.rz.scp.css */
.jcb[b-7i09kkubao] {
    position: relative;
    border: 1px solid #2b3440;
    border-radius: 6px;
    background: #1b1f23;
    overflow: hidden;
}

.jcb-toolbar[b-7i09kkubao] {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
    display: flex;
    gap: 4px;
}

.jcb-pre[b-7i09kkubao] {
    margin: 0;
    padding: 0.85rem 1rem;
    overflow: auto;
    color: #e6edf3;
    background: transparent;
    font-family: var(--app-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    tab-size: 2;
    scrollbar-color: #404752 #1b1f23;
}

.jcb--compact .jcb-pre[b-7i09kkubao] {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
}

.jcb-pre code[b-7i09kkubao] {
    font-family: inherit;
    color: inherit;
    white-space: pre;
}

/* Token colours — deliberately calm; the block should read, not glow. */
.jcb-pre[b-7i09kkubao]  .j-key { color: #ffb689; }
.jcb-pre[b-7i09kkubao]  .j-str { color: #a3c9ff; }
.jcb-pre[b-7i09kkubao]  .j-num { color: #7ee787; }
.jcb-pre[b-7i09kkubao]  .j-bool { color: #d2a8ff; }
.jcb-pre[b-7i09kkubao]  .j-null { color: #8b949e; font-style: italic; }
.jcb-pre[b-7i09kkubao]  .j-punct { color: #8b949e; }

.jcb-pre[b-7i09kkubao]::-webkit-scrollbar { width: 8px; height: 8px; }
.jcb-pre[b-7i09kkubao]::-webkit-scrollbar-track { background: #1b1f23; }
.jcb-pre[b-7i09kkubao]::-webkit-scrollbar-thumb { background: #404752; border-radius: 4px; }
.jcb-pre[b-7i09kkubao]::-webkit-scrollbar-thumb:hover { background: #5f6570; }
/* /Components/LabelPillCell.razor.rz.scp.css */
.lpc-container[b-0bkujlkyik] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
    align-items: center;
    min-width: 0;
}

/* Geometry, colour and the always-uppercase rule come from the global .label-pill (app.css) — the
   one label pill every surface shares since 2026-09-16. These two only add the cell's own
   behaviour: a pill may shrink with an ellipsis, the "+N" badge never does. .lpc-pill and
   .lpc-overflow are also the hooks label-pills.js measures. */
.lpc-pill[b-0bkujlkyik] {
    flex: 0 1 auto;
    min-width: 0;
}

/* "+N": the neutral Gray palette colour, so it reads as a count and not as one more label. */
.lpc-overflow[b-0bkujlkyik] {
    flex: 0 0 auto;
    background-color: #e4e5e5;
    color: #21232c;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Auth shell — the chrome-free frame around the .auth-card pages. The card and form
   styles live in app.css (.auth-* family): three pages share them and @Body content
   never carries this file's CSS-isolation scope anyway. Sizing follows the same
   physical-parity spec recorded on the .auth-* block (reference measurements scaled
   by the measured zoom differential). */

.auth-shell[b-f42qiee7b5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* The brand sits where the reference's logo sits: ~10.8% in from the left, ~28px down
   (measured off the reference header at 1920 CSS px; the percentage keeps the ratio
   across window widths). The 32px tile matches the reference logo's measured height. */
.auth-header[b-f42qiee7b5] {
    padding: 28px 24px 0 10.8%;
}

.auth-brand[b-f42qiee7b5] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* The rail's .brand-mark recipe (solid tile, white initial, optical nudge for Inter's
   cap band) scaled to the reference logo's height. */
.auth-brand-mark[b-f42qiee7b5] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #211C52;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    padding-top: 1px;
}

/* Uploaded login logo (Company Settings -> General -> Branding) — replaces .auth-brand-mark;
   the title text beside it is unchanged. height is FIXED (not max-height): a max-height with
   width/height:auto only clamps images LARGER than the box, so a small upload (a real logo
   might genuinely be a tiny square) would render at native pixel size instead of filling it.
   Fixed height + width:auto always scales to 48px tall; max-width guards a very wide upload,
   with object-fit: contain preserving its aspect ratio once that clamp kicks in. */
.auth-brand-mark-img[b-f42qiee7b5] {
    height: 48px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    border-radius: 6px;
}

.auth-brand-title[b-f42qiee7b5] {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}

.auth-main[b-f42qiee7b5] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 34px 16px 32px;
}

.auth-footer[b-f42qiee7b5] {
    padding: 16px 28px 20px;
    text-align: center;
    font-size: 13px;
    color: #6c757d;
}
/* /Components/Layout/Breadcrumb.razor.rz.scp.css */
.breadcrumb-bar[b-7pir54hs24] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.35rem;
}

.bc-toggle-control[b-7pir54hs24] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.bc-toggle-btn[b-7pir54hs24] {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #65686f;
    background: transparent;
    cursor: pointer;
    transition: color 100ms ease-out, background-color 100ms ease-out;
}

.bc-toggle-btn:hover[b-7pir54hs24],
.bc-toggle-btn:focus-visible[b-7pir54hs24] {
    color: #21232c;
    background: #eeeeee;
}

.bc-toggle-btn:focus-visible[b-7pir54hs24] {
    outline: 2px solid #0d68c5;
    outline-offset: -2px;
}

.bc-toggle-tooltip[b-7pir54hs24] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    visibility: hidden;
    padding: 6px 9px;
    border-radius: 4px;
    color: #fff;
    background: #21232c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 80ms ease-out 300ms, visibility 0s linear 380ms;
}

.bc-toggle-control:hover .bc-toggle-tooltip[b-7pir54hs24],
.bc-toggle-control:focus-within .bc-toggle-tooltip[b-7pir54hs24] {
    visibility: visible;
    opacity: 1;
    transition-delay: 300ms, 300ms;
}

.bc-nav[b-7pir54hs24] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    font-size: 16px;
    line-height: 24px;
}

/* Parents may carry object names since the customer-scoped trail arrived (2026-09-08) —
   five levels × long Azure names × the secondary panel open × 1280 px has to fit — so each
   parent gets a cap and an ellipsis; the full text stays in its title. */
.bc-parent[b-7pir54hs24] {
    flex: 0 1 auto;
    max-width: 16rem;
    overflow: hidden;
    color: #65686f;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A parent with a destination is a link, styled like the plain parent so the trail reads as
   one line of text; the underline appears on hover only. MainLayout's generic top-row anchor
   rule (margin-left 1.5rem) explicitly excludes .bc-link. */
.bc-link[b-7pir54hs24] {
    color: #65686f;
    text-decoration: none;
}

.bc-link:hover[b-7pir54hs24],
.bc-link:focus-visible[b-7pir54hs24] {
    color: #21232c;
    text-decoration: underline;
}

.bc-link:focus-visible[b-7pir54hs24] {
    outline: 2px solid #0d68c5;
    outline-offset: 2px;
    border-radius: 2px;
}

.bc-sep[b-7pir54hs24] {
    flex-shrink: 0;
    color: #9ca3af;
    line-height: 1;
    user-select: none;
}

.bc-current[b-7pir54hs24] {
    overflow: hidden;
    color: #21232c;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .bc-toggle-btn[b-7pir54hs24],
    .bc-toggle-tooltip[b-7pir54hs24] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1565invs1z] {
    position: relative;
    display: flex;
    min-height: 100vh;
    /* The page ground, declared as a custom property HERE (the one place it's decided) so
       it inherits to everything rendered inside the layout: DataGrid paints its opaque
       sticky cells (selection lane, pinned columns, filler, utility lane, sticky header)
       with it so they read as transparent over the same ground the transparent body rows
       show — see --dg-sticky-bg in DataGrid.razor.css. Change the colour only here.

       White since 2026-08-30. It was #f7f9fc, a faint grey chosen when the grid was a
       borderless list that needed something to sit ON. The ruled grid supplies its own
       structure, so the page tint stopped separating anything and started reading as a seam:
       the grid has no rule above its header, so a grid on a grey page looked like it was
       missing its top edge. The reference's page is white for the same reason. */
    --app-page-bg: #fff;
    background: var(--app-page-bg);
}

main[b-1565invs1z] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.sidebar[b-1565invs1z] {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 56px;
    height: 100vh;
    flex: 0 0 56px;
    overflow: visible;
    background: #211c52;
}

/* The app's top band reads as the topmost LAYER, not as a hairline-divided strip: the
   reference's own header (measured live 2026-09-12) draws no border-bottom at all and carries
   the shared low elevation instead, which is what makes the page look like it passes UNDER the
   header rather than butting against it.

   z-index 960 puts it above the record drawer (950) — the drawer starts at y=56 so the two
   never overlap geometrically, but a sticky element with a z-index is a STACKING CONTEXT, and
   at 900 it trapped everything inside the header beneath the drawer: the profile menu opens
   position:fixed at z-index 1100 and was still painted under an open drawer (reported
   2026-09-12). Raising the header fixes that, and RecordDrawer now renders its Overlays slot
   OUTSIDE the drawer element in the same pass, so drawer modals and popovers land in the root
   stacking context at their own 1100/1300 and still cover the header. */
.top-row[b-1565invs1z] {
    position: sticky;
    top: 0;
    z-index: 960;
    display: flex;
    height: 56px;
    flex: 0 0 56px;
    align-items: center;
    background-color: #ffffff;
    box-shadow: var(--elev-card);
}

.top-row-actions[b-1565invs1z] {
    margin-left: auto;
}

.workspace[b-1565invs1z] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.content[b-1565invs1z] {
    min-width: 0;
    flex: 1 1 auto;
}

.top-row[b-1565invs1z]  a:not(.menu-item):not(.menu-item-inner):not(.bc-link),
.top-row[b-1565invs1z]  .btn-link {
    margin-left: 1.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.top-row[b-1565invs1z]  a:not(.menu-item):not(.menu-item-inner):not(.bc-link):hover,
.top-row[b-1565invs1z]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-1565invs1z]  a:not(.menu-item):not(.menu-item-inner):not(.bc-link):first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The page's horizontal padding, deliberately asymmetric. Published as custom properties so
   a full-bleed element inside the article can cancel exactly this much and stay in step at the
   breakpoint below — see .dg-ruled.dg-fill in DataGrid.razor.css, which is what cancels them.
   Change the values here only. */
.top-row[b-1565invs1z],
article[b-1565invs1z] {
    --content-pad-l: 1.5rem;
    --content-pad-r: 1.25rem;
    padding-right: var(--content-pad-r) !important;
    padding-left: var(--content-pad-l) !important;
}

@media (max-width: 640.98px) {
    .top-row[b-1565invs1z],
    article[b-1565invs1z] {
        --content-pad-l: 1rem;
        --content-pad-r: 1rem;
    }
}

#blazor-error-ui[b-1565invs1z] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    padding: 0.6rem 1.25rem 0.7rem;
    color-scheme: light only;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss[b-1565invs1z] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .workspace[b-1565invs1z] {
        scroll-behavior: auto;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ================================================================
   Sidebar — fixed 84 px, icon-only, #211C52 background
   ================================================================ */

.nav-shell[b-qsroi8w2ue] {
    --nav-bg:     #211C52;
    --nav-active: #A78BFA;
    /* Hover is deliberately LIGHTER than active (reference behaviour): "you're over it"
       must read weaker than "you're in it". Product decision 2026-08-27. */
    --nav-hover:  #B198FA;
    --nav-icon:   #FFFFFF;

    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 56px;
    height: 100vh;
    background: var(--nav-bg);
    color: var(--nav-icon);
    overflow: visible;
}

/* ── Header (brand mark) ────────────────────────────────────────── */

/* ── Logo Area ──────────────────────────────────────────────────────
   The rail's FIRST RHYTHM SLOT (official region name, 2026-08-27): the 44×44 brand
   tile sits 6px from the top and the rail rhythm continues 12px below it (see
   .primary-nav-scroll's top padding). The old 3rem header band (darker bg +
   border-bottom) is gone — a 44px tile never fit its 42px height, and the reference
   rail is one continuous surface with the logo as just another rhythm tile. */
.nav-logo-area[b-qsroi8w2ue] {
    box-sizing: border-box;
    display: flex;
    width: 56px;
    align-items: center;
    justify-content: center;
    padding: 6px 6px 0;
}

.navbar-brand[b-qsroi8w2ue] {
    box-sizing: border-box;
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    transition: background-color 120ms ease-out;
}

.navbar-brand:hover[b-qsroi8w2ue] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.navbar-brand:focus-visible[b-qsroi8w2ue] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid #a78bfa;
    outline-offset: -2px;
}

.brand-mark[b-qsroi8w2ue] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    /* Optical nudge, same family as --chip-optical-shift in app.css: flex centres the
       LINE box, and Inter's cap band sits high inside it, so the letter measured 9.25px
       above / 10px below in this 28px square and snapped to 9/10. box-sizing is
       border-box, so 1px of padding-top moves the centred content down half of it.
       Re-measure by rasterising if the typeface changes. */
    padding-top: 1px;
    flex-shrink: 0;
}

/* Uploaded nav logo (Company Settings -> General -> Branding) — same 28px box/radius as
   .brand-mark, swapped in for it when a logo is set. object-fit: contain is the whole
   "auto-sizing" story here; there's no image library in this project to resize server-side. */
.brand-mark-img[b-qsroi8w2ue] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

/* brand-text and mobile-close are always hidden in the fixed icon-only layout */
.brand-text[b-qsroi8w2ue] {
    display: none;
}

.sidebar-mobile-close[b-qsroi8w2ue] {
    display: none;
}

/* ── Scroll container ───────────────────────────────────────────── */

.primary-nav-scroll[b-qsroi8w2ue] {
    flex: 1 1 auto;
    /* Top padding = the Logo Area's 12px rhythm gap (logo tile → first nav item). */
    padding: 12px 0 9px;
    overflow: visible;
}

.primary-nav[b-qsroi8w2ue] {
    display: flex;
    flex-direction: column;
    /* The rail rhythm: 44px tiles with a constant 12px gap (56px pitch) — matches the
       reference rail exactly (was 4px until 2026-08-27). */
    gap: 12px;
}

/* ── Nav item wrapper ───────────────────────────────────────────── */

.nav-item[b-qsroi8w2ue] {
    position: relative;
    padding: 0 6px;
    font-size: 0.92rem;
}

/* ── Nav link / trigger — the 66 × 66 interactive box ──────────── */

.nav-item[b-qsroi8w2ue]  .nav-link,
.nav-trigger[b-qsroi8w2ue] {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 6px;
    color: var(--nav-icon);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
}

.nav-trigger[b-qsroi8w2ue] {
    width: 44px;
}

/* ── Hover ──────────────────────────────────────────────────────── */

.nav-item[b-qsroi8w2ue]  .nav-link:hover,
.nav-item[b-qsroi8w2ue]  .nav-link:focus-visible,
.nav-trigger:hover[b-qsroi8w2ue],
.nav-trigger:focus-visible[b-qsroi8w2ue] {
    background: var(--nav-hover);
    transform: scale(1.02);
    color: var(--nav-icon);
}

/* Pressed (mouse down): snaps to the committed accent — the click previews the color the
   tile keeps once selected. Declared AFTER the hover rule so it wins while both apply. */
.nav-item[b-qsroi8w2ue]  .nav-link:active,
.nav-trigger:active[b-qsroi8w2ue] {
    background: var(--nav-active);
}

/* icon stays white on hover — no filter change */
.nav-item[b-qsroi8w2ue]  .nav-link:hover .bi,
.nav-item[b-qsroi8w2ue]  .nav-link:focus-visible .bi,
.nav-trigger:hover .bi[b-qsroi8w2ue],
.nav-trigger:focus-visible .bi[b-qsroi8w2ue] {
    filter: none;
}

/* ── Active / selected ──────────────────────────────────────────── */

.nav-item[b-qsroi8w2ue]  a.active,
.nav-trigger.active[b-qsroi8w2ue] {
    background: var(--nav-active);
    transform: none;
    color: var(--nav-icon);
    font-weight: 600;
    box-shadow: none;
}

.nav-item[b-qsroi8w2ue]  a.active .bi,
.nav-trigger.active .bi[b-qsroi8w2ue] {
    filter: none;
}

/* ── Labels — always hidden (icon-only layout) ─────────────────── */

.nav-label[b-qsroi8w2ue],
.nav-chevron[b-qsroi8w2ue] {
    display: none;
}

/* ── Section divider ────────────────────────────────────────────── */

/* Rail mode: the section separator is a 1px hairline sitting a full rhythm gap (12px)
   below the tile above it and 11px above the tile below — FileOps→Settings totals 24px,
   exactly TWO rhythm gaps, so the boundary is emphatic yet still on the 12px metric.
   Product decision 2026-08-27 (mid-gap 6/5 read too subtle; 12/5 = 18px sat off-metric). */
.nav-section-label[b-qsroi8w2ue] {
    height: 1px;
    padding: 0;
    margin: 0 0 -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-section-label-text[b-qsroi8w2ue] {
    display: none;
}

.nav-section-label[b-qsroi8w2ue]::after {
    display: block;
    content: '';
    height: 1px;
    width: 44px;
    background: rgba(255, 255, 255, 0.14);
}

/* ── Icons ──────────────────────────────────────────────────────── */

.bi[b-qsroi8w2ue] {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: filter 160ms ease, opacity 160ms ease;
}

/* individual icon images */
/* Dashboard (2026-09-02): the second two-artwork rail icon, added on the product owner's
   EXPLICIT ask — and mid-session the owner REJECTED replacing the artwork ("eski icon
   iyidi"): the resting glyph stays the ORIGINAL `house-door-fill`, byte-identical, and the
   active artwork is that same filled glyph with ONE small window KNOCKED OUT of the fill
   (`fill-rule=evenodd` subpath — the tile colour shows through the hole). So the state
   change is "a window lights up in the house you already know", never a new house. Customers,
   Settings and FileOps got their pairs the same day, each with its own recipe (see their
   rules below) — every rail item now has one. The swap keys on the NavLink's
   `active` class, which MainLayout downgrades to `route-active-suppressed` while a
   flyout panel is open — so the window appears and disappears together with the purple
   tile behind it. */
.bi-home-nav-menu[b-qsroi8w2ue]                { background-image: url("/assets/icons/nav/home.svg"); }
.nav-item[b-qsroi8w2ue]  a.active .bi-home-nav-menu { background-image: url("/assets/icons/nav/home-active.svg"); }

/* Customers (2026-09-02, later the same day): the owner's ask — the SAME icon, only its
   outline/hollow states. This glyph is already a hollow outline, so the pair runs the
   OTHER way round from Dashboard: the resting artwork is the outline UNCHANGED, and the
   active artwork is the same geometry FILLED, its stroke windows becoming knockout pills
   (`fill-rule=evenodd`, ground line still a stroke) — the Azure direction (outline at
   rest, solid when active) but derived from the exact glyph users already know, never new
   artwork. Same `active`/`route-active-suppressed` mechanics as Dashboard above. */
.nav-item[b-qsroi8w2ue]  a.active .bi-company-nav-menu { background-image: url("/assets/icons/nav/companies-active.svg"); }
/* Activities (2026-09-10, ADR-025) — the rail's third plain item, single-artwork: a
   calendar-check silhouette. Unlike Dashboard/Customers it has no separate active-state
   artwork yet (those pairs came from explicit PO asks on specific icons the reference already
   used); this is a phase-1 simplification, not a design decision — BACKLOG if requested. */
.bi-activities-nav-menu[b-qsroi8w2ue]          { background-image: url("/assets/icons/nav/activities.svg"); }
.bi-plus-square-fill-nav-menu[b-qsroi8w2ue]    { background-image: url("/assets/icons/nav/plus.svg"); }
.bi-list-nested-nav-menu[b-qsroi8w2ue]         { background-image: url("/assets/icons/nav/list-nested.svg"); }
.bi-azure-connect-nav-menu[b-qsroi8w2ue]       { background-image: url("/assets/icons/nav/azure-connect.svg"); }
.bi-az-subscriptions-nav-menu[b-qsroi8w2ue]    { background-image: url("/assets/icons/nav/az-subscriptions.svg"); }
.bi-service-principals-nav-menu[b-qsroi8w2ue]  { background-image: url("/assets/icons/nav/service-principals.svg"); }
.bi-role-assignments-nav-menu[b-qsroi8w2ue]    { background-image: url("/assets/icons/nav/role-assignments.svg"); }
.bi-lifecycle-nav-menu[b-qsroi8w2ue]           { background-image: url("/assets/icons/nav/list-nested.svg"); }
.bi-azure-resources-nav-menu[b-qsroi8w2ue]     { background-image: url("/assets/icons/nav/modules.svg"); }
.bi-company-nav-menu[b-qsroi8w2ue]             { background-image: url("/assets/icons/nav/companies.svg"); }
.bi-manage-users-nav-menu[b-qsroi8w2ue]        { background-image: url("/assets/icons/nav/account-users.svg"); }
.bi-authentication-nav-menu[b-qsroi8w2ue]      { background-image: url("/assets/icons/nav/authentication.svg"); }
.bi-visibility-groups-nav-menu[b-qsroi8w2ue]   { background-image: url("/assets/icons/nav/visibility-groups.svg"); }
.bi-organizational-settings-nav-menu[b-qsroi8w2ue] { background-image: url("/assets/icons/nav/account-gear.svg"); }
.bi-licence-nav-menu[b-qsroi8w2ue]             { background-image: url("/assets/icons/nav/modules.svg"); }
.bi-data-fields-nav-menu[b-qsroi8w2ue]         { background-image: url("/assets/icons/nav/data-fields.svg"); }
.bi-security-rules-nav-menu[b-qsroi8w2ue]      { background-image: url("/assets/icons/nav/list-nested.svg"); }
.bi-security-nav-menu[b-qsroi8w2ue]            { background-image: url("/assets/icons/nav/shield.svg"); }
.bi-fileops-nav-menu[b-qsroi8w2ue]               { background-image: url("/assets/icons/nav/fileops.svg"); }
/* FileOps (2026-09-02): the fifth two-artwork icon, completing the rail. The owner's design:
   the cloud never changes; the up-arrow knocked out of it gets BOLDER when active
   (stroke 1.0 — the Bootstrap original — to 1.8 on the same centerlines). The active
   file rebuilds the knockout as an SVG mask (cloud subpath only + the arrow drawn as a
   black stroke in the mask) because hand-authoring a thicker arrow OUTLINE path is
   error-prone while the centerlines are exact. Trigger item, so the swap keys on
   `.nav-trigger.active` like Azure and Settings. */
.nav-trigger.active .bi-fileops-nav-menu[b-qsroi8w2ue] { background-image: url("/assets/icons/nav/fileops-active.svg"); }
.bi-fileops-files-nav-menu[b-qsroi8w2ue]         { background-image: url("/assets/icons/nav/fileops-files.svg"); }
.bi-fileops-instances-nav-menu[b-qsroi8w2ue]     { background-image: url("/assets/icons/nav/fileops-instances.svg"); }

/* Settings icon — mask so it respects the icon color. Since 2026-09-03 the artwork is
   PURE VECTOR (settings.svg / settings-active.svg): the wrench is the reference's own
   short-stub tools-and-apps glyph (lifted verbatim from its user-menu SVG), and the five
   boxes are stroke rects redrawn to the PNG's measured geometry (32px outer, 7px stroke,
   ~8px corners) at the owner's widened spacing. The old settings.png went through three
   generations (raw mask → PNG-embedding composite → vector) because its box strokes
   were only ~87% ALPHA — next to a fully-opaque vector wrench they read visibly dimmer
   through the mask, which the owner caught ("kutular silik"). settings.png remains on
   disk as historical reference only; nothing loads it. */
.bi-settings-nav-menu[b-qsroi8w2ue] {
    background-color: white;
    background-image: none;
    mask: url("/assets/icons/nav/settings.svg") center / contain no-repeat;
    -webkit-mask: url("/assets/icons/nav/settings.svg") center / contain no-repeat;
}

/* Settings (2026-09-02): the fourth two-artwork icon. The owner's design: the wrench is
   untouched and four of the five hollow boxes FILL when active — the hollow survivor is
   the top-middle box, the one the wrench's jaw points at. The active artwork redraws
   nothing: settings-active.svg EMBEDS settings.png as a data URI (an SVG used as a CSS
   mask image may not reference external files) and overlays four solid rounded rects
   INSIDE the measured box bounds, so the alpha union fills the boxes while every original
   pixel — wrench and box silhouettes included — stays put. */
.nav-trigger.active .bi-settings-nav-menu[b-qsroi8w2ue] {
    mask: url("/assets/icons/nav/settings-active.svg") center / contain no-repeat;
    -webkit-mask: url("/assets/icons/nav/settings-active.svg") center / contain no-repeat;
}

/* Azure icon — a two-artwork icon (the rail's FIRST; the other four rail items
   followed on 2026-09-02, completing the set). Most items change state through the tile behind them while their glyph
   stays put; Azure swaps the glyph as well: bare outline mark at rest, solid disc with
   the mark knocked out when active (product decision, 2026-08-31). History: an
   outline/filled swap was TRIED on Dashboard and FileOps on 2026-09-01 and reverted the
   same day on the product owner's call. On 2026-09-02 the owner EXPLICITLY asked for
   two-state icons again with a DIFFERENT recipe (the ORIGINAL glyph kept as-is, the
   active artwork adding one small knocked-out detail to it) — see the Dashboard rule
   above. Each further item
   still needs its own ask (see 10-changelog/2026-09.md for the trial and the new ask).

   "Active" is `.nav-trigger.active`, set on `IsAzureActive || AzurePanelOpen` — the filled
   artwork shows both while the flyout is open and anywhere under /azure. Specificity
   (0,3,0) beats the base rule's (0,1,0); the swap is NOT a `filter`, so it is unaffected
   by "icon stays white on hover" below. */
.bi-azure-nav-menu[b-qsroi8w2ue]               { background-image: url("/assets/icons/nav/azure.png"); }
.nav-trigger.active .bi-azure-nav-menu[b-qsroi8w2ue] { background-image: url("/assets/icons/nav/azure-active.png"); }

/* THE ONLY RAIL ICON WITH ITS OWN BOX: 26px, not the standard 20px (2026-09-01, measured
   decision, revised the same day). The UNSELECTED artwork is now the bare Azure mark — its
   enclosing ring was removed on the product owner's call after two rounds of "still reads
   small": a ring eats the box, so the legible mark was only 66.7% of the canvas while every
   ring-less neighbour's whole bbox IS its mark (home 16.3px, companies 17.5px in the 20px
   box). The mark occupies 72.9% of its canvas, so 26px renders it at ~19px — deliberately a
   step ABOVE the neighbours' glyphs, which is what the two rounds of feedback were asking
   for. The SELECTED artwork keeps its solid disc (23.8px badge, 17.3px knockout mark): the
   state change is bare mark → filled badge, which carries more weight than any outline swap.
   The 44px trigger centres 26px with 9px clearance, so the rail's geometry does not move.
   If size comes up again, the levers in order are: scale the mark up inside the 48px canvas
   (it has 27% headroom), then the box — never past 30px in a 44px trigger. */
.bi-azure-nav-menu[b-qsroi8w2ue] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

/* ── Tooltip — shown on hover for all items ─────────────────────── */

.nav-tooltip[b-qsroi8w2ue] {
    position: absolute;
    left: calc(100% + 7px);
    top: 50%;
    z-index: 1100;
    display: none;
    max-width: 14rem;
    padding: 0.4rem 0.7rem;
    border: none;
    border-radius: 6px;
    color: #fff;
    background: #1e2535;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    pointer-events: none;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Show tooltip for all items on hover (not just collapsed) */
.nav-item:hover .nav-tooltip[b-qsroi8w2ue],
.nav-item:has(:focus-visible) .nav-tooltip[b-qsroi8w2ue] {
    display: block;
}

/* ── Secondary nav flyout (Azure panel) ─────────────────────────── */

.secondary-nav-flyout[b-qsroi8w2ue] {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1080;
    width: 240px;
    height: 100vh;
    padding: 1rem;
    color: #1f2937;
    background: #fff;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 1rem 0 2rem rgba(15, 23, 42, 0.16);
    animation: secondary-nav-in-b-qsroi8w2ue 180ms ease-out;
}

.secondary-nav-header[b-qsroi8w2ue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.secondary-nav-title[b-qsroi8w2ue] {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.secondary-nav-close[b-qsroi8w2ue] {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--btn-radius);
    color: #475569;
    background: #f8fafc;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.secondary-nav-close:hover[b-qsroi8w2ue],
.secondary-nav-close:focus-visible[b-qsroi8w2ue] {
    color: #111827;
    background: #eef2f7;
}

.secondary-nav-group-label[b-qsroi8w2ue] {
    margin: 0;
    padding: 0.75rem 0.65rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.secondary-nav-group-label:first-child[b-qsroi8w2ue] {
    padding-top: 0.15rem;
}

.secondary-nav-list[b-qsroi8w2ue] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.75rem;
}

.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link {
    display: flex;
    min-height: 2.35rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.65rem;
    border-radius: var(--btn-radius-sm);
    color: #334155;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link .bi {
    filter: brightness(0) saturate(100%) invert(38%) sepia(10%) saturate(1048%) hue-rotate(176deg) brightness(91%) contrast(88%);
}

.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link:hover,
.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link:focus-visible {
    color: #0f5fa8;
    background: rgba(13, 110, 253, 0.08);
}

.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link.active {
    color: #0f5fa8;
    background: rgba(13, 110, 253, 0.12);
    font-weight: 600;
}

.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link:hover .bi,
.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link:focus-visible .bi,
.secondary-nav-list[b-qsroi8w2ue]  .secondary-nav-link.active .bi {
    filter: brightness(0) saturate(100%) invert(33%) sepia(91%) saturate(1147%) hue-rotate(185deg) brightness(94%) contrast(93%);
}

@keyframes secondary-nav-in-b-qsroi8w2ue {
    from { opacity: 0; transform: translateX(-0.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 640.98px) {
    .nav-shell[b-qsroi8w2ue] {
        position: fixed;
        left: 0;
        top: 0;
        width: min(86vw, 300px);
        height: 100vh;
        z-index: 1040;
    }

    .primary-nav-scroll[b-qsroi8w2ue] {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar-mobile-close[b-qsroi8w2ue] {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--btn-radius);
        color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.08);
        line-height: 1;
        cursor: pointer;
        transition: background-color 160ms ease;
    }

    .nav-logo-area[b-qsroi8w2ue] {
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
    }

    .navbar-brand[b-qsroi8w2ue] {
        gap: 0.65rem;
    }

    .brand-text[b-qsroi8w2ue] {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.02rem;
        font-weight: 600;
    }

    .nav-item[b-qsroi8w2ue]  .nav-link,
    .nav-trigger[b-qsroi8w2ue] {
        width: 100%;
        height: auto;
        min-height: 2.75rem;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .nav-label[b-qsroi8w2ue] {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-section-label[b-qsroi8w2ue] {
        height: auto;
        margin: 0;
        padding: 0.65rem 1.4rem 0.15rem;
        justify-content: flex-start;
    }

    .nav-section-label-text[b-qsroi8w2ue] {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
    }

    .nav-section-label[b-qsroi8w2ue]::after {
        display: none;
    }

    .nav-tooltip[b-qsroi8w2ue] {
        display: none !important;
    }

    .secondary-nav-flyout[b-qsroi8w2ue] {
        position: static;
        width: auto;
        height: auto;
        margin: 0.2rem 0.75rem 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 10px;
        box-shadow: none;
    }
}

/* The primary rail remains fixed and icon-only on narrow viewports too. */
@media (max-width: 640.98px) {
    .nav-shell[b-qsroi8w2ue] {
        position: sticky;
        top: 0;
        left: auto;
        z-index: auto;
        width: 56px;
        height: 100vh;
    }

    .primary-nav-scroll[b-qsroi8w2ue] {
        overflow: visible;
    }

    .sidebar-mobile-close[b-qsroi8w2ue],
    .brand-text[b-qsroi8w2ue],
    .nav-label[b-qsroi8w2ue],
    .nav-section-label-text[b-qsroi8w2ue] {
        display: none;
    }

    .nav-logo-area[b-qsroi8w2ue] {
        justify-content: center;
        padding: 6px 6px 0;
    }

    .navbar-brand[b-qsroi8w2ue] {
        gap: 0;
    }

    .nav-item[b-qsroi8w2ue]  .nav-link,
    .nav-trigger[b-qsroi8w2ue] {
        width: 44px;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    .nav-section-label[b-qsroi8w2ue] {
        height: 1px;
        padding: 0;
        margin: 0 0 -1px;
        justify-content: center;
    }

    .nav-section-label[b-qsroi8w2ue]::after {
        display: block;
    }

    .nav-item:hover .nav-tooltip[b-qsroi8w2ue],
    .nav-item:has(:focus-visible) .nav-tooltip[b-qsroi8w2ue] {
        display: block !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1h2k6l4mby],
.components-reconnect-repeated-attempt-visible[b-1h2k6l4mby],
.components-reconnect-failed-visible[b-1h2k6l4mby],
.components-pause-visible[b-1h2k6l4mby],
.components-resume-failed-visible[b-1h2k6l4mby],
.components-rejoining-animation[b-1h2k6l4mby] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-1h2k6l4mby] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: var(--btn-radius);
}

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SecondaryNavPanel.razor.rz.scp.css */
.secondary-nav-panel[b-l37et1asoq] {
    position: sticky;
    top: 3rem;
    z-index: 880;
    align-self: flex-start;
    box-sizing: border-box;
    height: calc(100vh - 3rem);
    flex: 0 0 240px;
    width: 240px;
    overflow: hidden;
    color: #21232c;
    background: #f5f5f6;
    border-right: 1px solid #d9d9dc;
    transition: width 120ms ease-out, flex-basis 120ms ease-out;
}

.secondary-nav-panel.collapsed[b-l37et1asoq] {
    flex-basis: 29px;
    width: 29px;
}

.secondary-nav-content[b-l37et1asoq] {
    box-sizing: border-box;
    width: 240px;
    min-height: 100%;
    padding: 12px 8px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.secondary-nav-group + .secondary-nav-group[b-l37et1asoq] {
    margin-top: 24px;
}

.secondary-nav-group-label[b-l37et1asoq] {
    margin: 0 0 8px;
    padding: 0 16px;
    color: #65686f;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    white-space: nowrap;
}

.secondary-nav-list[b-l37et1asoq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link {
    box-sizing: border-box;
    display: flex;
    width: 270px;
    height: 48px;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    border-radius: var(--btn-radius-sm);
    color: #21232c;
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link:hover {
    color: #21232c;
    background: #ebebeb;
}

.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link:focus-visible {
    color: #21232c;
    background: #ebebeb;
    outline: 2px solid #0d68c5;
    outline-offset: -2px;
}

.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link.active {
    color: #0d68c5;
    background: #e1eeff;
    font-weight: 500;
}

/* Placeholder rows (customer panel's future resource kinds, ADR-022): same geometry as a
   link so the list rhythm holds, but muted, inert and never highlighted. Declared after the
   hover/active rules above so it wins while both apply. */
.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link.secondary-nav-link--disabled,
.secondary-nav-list[b-l37et1asoq]  .secondary-nav-link.secondary-nav-link--disabled:hover {
    color: #a3a6ad;
    background: transparent;
    cursor: default;
    user-select: none;
}

.secondary-nav-link-label[b-l37et1asoq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secondary-nav-icon[b-l37et1asoq] {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.bi-azure-connect-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/azure-connect.svg");
    -webkit-mask-image: url("/assets/icons/nav/azure-connect.svg");
}

.bi-az-subscriptions-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/az-subscriptions.svg");
    -webkit-mask-image: url("/assets/icons/nav/az-subscriptions.svg");
}

.bi-service-principals-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/service-principals.svg");
    -webkit-mask-image: url("/assets/icons/nav/service-principals.svg");
}

.bi-role-assignments-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/role-assignments.svg");
    -webkit-mask-image: url("/assets/icons/nav/role-assignments.svg");
}

.bi-lifecycle-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/list-nested.svg");
    -webkit-mask-image: url("/assets/icons/nav/list-nested.svg");
}

/* Azure Resources (2026-09-16): the modules glyph — a catalog of switchable parts, like /settings/modules. */
.bi-azure-resources-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/modules.svg");
    -webkit-mask-image: url("/assets/icons/nav/modules.svg");
}

.bi-profile-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/profile.svg");
    -webkit-mask-image: url("/assets/icons/nav/profile.svg");
}

.bi-password-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/key.svg");
    -webkit-mask-image: url("/assets/icons/nav/key.svg");
}

/* Manage users + Company settings share their glyphs with the profile dropdown's
   Company overview rows (2026-09-03, owner's call: the dropdown is the reference — the
   same destination must not wear two different icons). */
.bi-manage-users-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/account-users.svg");
    -webkit-mask-image: url("/assets/icons/nav/account-users.svg");
}

.bi-organizational-settings-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/account-gear.svg");
    -webkit-mask-image: url("/assets/icons/nav/account-gear.svg");
}

.bi-licence-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/modules.svg");
    -webkit-mask-image: url("/assets/icons/nav/modules.svg");
}

/* Data fields (ADR-030, 2026-09-18): two stacked field rows. Our own drawing on the 24px grid. */
.bi-data-fields-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/data-fields.svg");
    -webkit-mask-image: url("/assets/icons/nav/data-fields.svg");
}

.bi-security-rules-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/list-nested.svg");
    -webkit-mask-image: url("/assets/icons/nav/list-nested.svg");
}

.bi-security-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/shield.svg");
    -webkit-mask-image: url("/assets/icons/nav/shield.svg");
}

.bi-fileops-files-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/fileops-files.svg");
    -webkit-mask-image: url("/assets/icons/nav/fileops-files.svg");
}

.bi-fileops-upload-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/fileops-upload.svg");
    -webkit-mask-image: url("/assets/icons/nav/fileops-upload.svg");
}

.bi-fileops-instances-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/fileops-instances.svg");
    -webkit-mask-image: url("/assets/icons/nav/fileops-instances.svg");
}

/* Customer panel (ADR-022, 2026-09-08). Azure Gateway reuses .bi-az-subscriptions-nav-menu.
   The Virtual Machines / Disks / SQL Servers placeholder icons went with their rows on
   2026-09-17 (they are "Coming soon" subscription tabs now, which carry no icon); the svg
   assets stay for when those kinds are built. */
.bi-customer-overview-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/overview.svg");
    -webkit-mask-image: url("/assets/icons/nav/overview.svg");
}

.bi-storage-accounts-nav-menu[b-l37et1asoq] {
    mask-image: url("/assets/icons/nav/storage-accounts.svg");
    -webkit-mask-image: url("/assets/icons/nav/storage-accounts.svg");
}

.secondary-nav-rail[b-l37et1asoq] {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: #d3d4d5;
    background: #f5f5f6;
    cursor: pointer;
    transition: color 100ms ease-out, background-color 100ms ease-out;
}

.secondary-nav-rail:hover[b-l37et1asoq],
.secondary-nav-rail:focus-visible[b-l37et1asoq] {
    color: #72adff;
    background: #eff6ff;
    outline: none;
}

.secondary-nav-rail:focus-visible[b-l37et1asoq] {
    box-shadow: inset 0 0 0 2px #0d68c5;
}

.secondary-nav-handle[b-l37et1asoq] {
    display: block;
    width: 4px;
    height: 30px;
    border-radius: 999px;
    background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .secondary-nav-panel[b-l37et1asoq],
    .secondary-nav-list[b-l37et1asoq]  .secondary-nav-link,
    .secondary-nav-rail[b-l37et1asoq] {
        transition: none;
    }
}
/* /Components/Lifecycle/AccountWideRuleAssignModal.razor.rz.scp.css */
.arm-list[b-5sh8f2sibw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 22rem;
    overflow: auto;
}

.arm-option[b-5sh8f2sibw] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dee2e6;
    border-radius: var(--btn-radius-sm);
    cursor: pointer;
    background: #fff;
}

.arm-option:hover[b-5sh8f2sibw] {
    background: #f8f9fa;
}

.arm-option.selected[b-5sh8f2sibw] {
    border-color: #1b6ec2;
    background: rgba(27, 110, 194, 0.06);
}

.arm-option.disabled[b-5sh8f2sibw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.arm-option input[b-5sh8f2sibw] {
    margin-top: 0.2rem;
}

.arm-option-body[b-5sh8f2sibw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.arm-option-name[b-5sh8f2sibw] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    font-family: var(--app-font-mono);
}

.arm-option-summary[b-5sh8f2sibw] {
    font-size: 0.75rem;
    color: #667085;
}
/* /Components/Lifecycle/LifecycleBranchesPanel.razor.rz.scp.css */
.lbp[b-jdx5i59d3l] {
    margin-top: 1.5rem;
}

.lbp-heading[b-jdx5i59d3l] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
    margin: 0 0 0.5rem;
}

/* Tab strip — same underline language as the notes panel tabs */
.lbp-tabs[b-jdx5i59d3l] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.75rem;
}

.lbp-tab[b-jdx5i59d3l] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #667085;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--btn-radius-sm) var(--btn-radius-sm) 0 0;
}

.lbp-tab:hover[b-jdx5i59d3l] {
    color: #344054;
    background: #f1f5f9;
}

.lbp-tab.active[b-jdx5i59d3l] {
    color: #1b6ec2;
    border-bottom-color: #1b6ec2;
    background: rgba(27, 110, 194, 0.06);
}

.lbp-tab-pill[b-jdx5i59d3l] {
    font-size: 0.65rem;
    font-weight: 600;
}

/* Panel */
.lbp-card[b-jdx5i59d3l] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.lbp-card-header[b-jdx5i59d3l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.lbp-title[b-jdx5i59d3l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--app-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
}

.lbp-title svg[b-jdx5i59d3l] {
    color: #1b6ec2;
}

.lbp-actions[b-jdx5i59d3l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.lbp-meta[b-jdx5i59d3l] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #667085;
    white-space: nowrap;
}

.lbp-card-body[b-jdx5i59d3l] {
    padding: 0.9rem;
}

.lbp-summary[b-jdx5i59d3l] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-bottom: 0.9rem;
    font-size: 0.8125rem;
    color: #212529;
}

.lbp-summary-row[b-jdx5i59d3l] {
    display: contents;
}

.lbp-summary-label[b-jdx5i59d3l] {
    color: #667085;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    align-self: center;
}

.lbp-changes[b-jdx5i59d3l] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.lbp-empty[b-jdx5i59d3l] {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #667085;
    font-size: 0.8125rem;
    background: #fbfdff;
}

.lbp-commit[b-jdx5i59d3l] {
    font-weight: 600;
}
/* /Components/Lifecycle/PrefixMatchRuleAssignModal.razor.rz.scp.css */
.prm-list[b-g7ap8ylevk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 22rem;
    overflow: auto;
}

.prm-option[b-g7ap8ylevk] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dee2e6;
    border-radius: var(--btn-radius-sm);
    cursor: pointer;
    background: #fff;
}

.prm-option:hover[b-g7ap8ylevk] {
    background: #f8f9fa;
}

.prm-option.selected[b-g7ap8ylevk] {
    border-color: #1b6ec2;
    background: rgba(27, 110, 194, 0.06);
}

.prm-option.disabled[b-g7ap8ylevk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.prm-option input[b-g7ap8ylevk] {
    margin-top: 0.2rem;
}

.prm-option-body[b-g7ap8ylevk] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.prm-option-name[b-g7ap8ylevk] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    font-family: var(--app-font-mono);
}

.prm-option-summary[b-g7ap8ylevk] {
    font-size: 0.75rem;
    color: #667085;
    overflow-wrap: anywhere;
}
/* /Components/ModalForm.razor.rz.scp.css */
/* ===== Backdrop — sadece overlay ===== */
/* z-index 1300/1301, ABOVE the popover band at 1100 (2026-09-01). It was 1060/1061, i.e.
   below popovers, and that ordering was written down deliberately — it just predated any
   modal being opened FROM a popover. The first one that was (LabelFilter's delete
   confirmation, reached through the edit view inside the labels popover) opened UNDERNEATH
   the popover that spawned it.
   The rule is the hierarchy, not the numbers: a popover is a transient attachment to a
   control and closes when you look away; a MODAL blocks and demands an answer, so nothing may
   sit over it. 1300 also clears the breadcrumb tooltip at 1200, for the same reason.
   Descendants are unaffected: .fm-modal creates its own stacking context, so CopyButton's
   1100 tooltip inside a modal body still stacks within it. */
.fm-backdrop[b-ruc8rhqpvd] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, 0.45);
    outline: none;
    animation: fm-backdrop-enter-b-ruc8rhqpvd 260ms ease-out forwards;
}

.fm-backdrop.fm-closing[b-ruc8rhqpvd] {
    animation: fm-backdrop-exit-b-ruc8rhqpvd 200ms ease-in forwards;
    pointer-events: none;
}

/* ===== Modal — bağımsız fixed konumlandırma ===== */
/* Centred WITHOUT a transform at rest (2026-09-16). left:0 + right:0 + auto inline margins centre a
   fixed box of known width exactly like left:50% + translateX(-50%) did. The transform had a side
   effect: an element with one becomes the CONTAINING BLOCK of every position:fixed descendant, and
   with overflow:hidden below it clipped them. Every anchored popover inside a modal
   (DismissiblePanel, positioned by profile-dropdown.js) was therefore boxed into the modal. The
   activity form's Azure Record list, opened near the modal's bottom, was cut off after a few rows.
   The record drawer follows the same "no transform at rest" rule (ADR-023). The enter/exit
   keyframes below still slide with translateY while they run and end on `transform: none`.
   The centred variant keeps its transform: it hosts confirmations and native selects only. */
.fm-modal[b-ruc8rhqpvd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 1301;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    /* Docked to the top of the viewport (top: 0 above), so only the free BOTTOM edge is
       rounded. Never round the top — see --modal-radius in app.css for the standing rule. */
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
    box-shadow: var(--elev-overlay);
    width: 500px;
    max-width: calc(100vw - 24px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 16px);
    overflow: hidden;
    /* No fill-mode: after the slide the modal falls back to its own style, transform NONE. With
       `forwards` Chrome kept the interpolated last frame — a zero translate, matrix(1,0,0,1,0,0) —
       which is still a transform and still made the modal a containing block (measured
       2026-09-16). The keyframes start from the base offset, so nothing flashes before the run. */
    animation: fm-enter-b-ruc8rhqpvd 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fm-modal.fm-two-column[b-ruc8rhqpvd] {
    width: 820px;
}

/* ===== Centred — confirmations, not forms (2026-09-01) =====
   A form docks to the top: it is a work surface that can grow tall and wants the room below.
   A confirmation is short, never scrolls and asks one question, so it sits where the eye
   already is — and, opened from another modal, stops landing on top of that modal's header.
   Measured off the shared reference's delete dialog, which centres for the same reason.

   All four corners round here, which FOLLOWS the docked-edge rule rather than breaking it:
   a centred modal touches no viewport edge, so no edge has to give up its radius.

   Its own enter animation, because it centres with translate(-50%, -50%) and fm-enter's keyframes
   would replace that transform while they run — sliding the dialog from the top edge, half a
   height too low. It keeps its transform at rest (see .fm-modal): a confirmation hosts no
   anchored popovers. */
.fm-modal.fm-centered[b-ruc8rhqpvd] {
    top: 50%;
    left: 50%;
    right: auto;
    margin-inline: 0;
    transform: translate(-50%, -50%);
    border-radius: var(--modal-radius);
    animation: fm-enter-centered-b-ruc8rhqpvd 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fm-backdrop.fm-closing .fm-modal.fm-centered[b-ruc8rhqpvd] {
    animation: fm-exit-centered-b-ruc8rhqpvd 160ms ease-in forwards;
}

@keyframes fm-enter-centered-b-ruc8rhqpvd {
    from {
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes fm-exit-centered-b-ruc8rhqpvd {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0;
    }
}

/* ===== Large — the app's standard shell for a modal that hosts a grid or other wide content.
   Geometry measured off the shared reference at a 1920x945 viewport (its "linked records"
   modal): 1512px wide = viewport minus a 204px gutter each side, min 1512 / max 1856, flush
   to the TOP of the viewport, bottom corners only rounded (12px), no border, a four-layer
   shadow, and a 300ms decelerate slide down from the top edge.

   Two deliberate adaptations rather than a literal copy:
   - The reference's `min-width: 1512px` is dropped in favour of clamp(). Copying it verbatim
     would overflow every viewport narrower than ~1920px; the reference presumably relaxes it
     in media queries this page could not read (its stylesheets are cross-origin). clamp()
     reproduces the measured width exactly at 1920 and degrades instead of overflowing.
   - `max-height` stays the component's own calc(100vh - 16px) rather than the reference's
     100%, so a tall modal keeps a hair of breathing room and its rounded bottom stays visible.

   The motion needed no change at all: .fm-modal's existing keyframes were already a
   translateY(-100%) slide from the top edge — only the duration/easing are retuned here. */
.fm-modal.fm-large[b-ruc8rhqpvd] {
    /* 100%, not 100vw: for a fixed-position element a percentage resolves against the initial
       containing block, which EXCLUDES the page's scrollbar, whereas 100vw includes it. With
       100vw the modal came out the reference's exact 1512px but sat ~7px off centre (197/212
       gutters) whenever the page behind it had a scrollbar. The 204px gutter each side is the
       thing the reference is actually expressing, so symmetry wins over the literal width. */
    width: clamp(320px, calc(100% - 408px), 1856px);

    /* FIXED height, like the reference (measured: 768px, from a stylesheet rule — not inline,
       not content-driven). This is the point of a standard size: the shell is the same box
       every time it opens, so a 2-row and a 200-row job look like the same modal instead of
       the window resizing itself around the data. The component's own max-height still caps
       it on short viewports, and .fm-body already scrolls (flex:1 + overflow-y:auto), so
       taller-than-shell content lands inside the box rather than stretching it. */
    height: 768px;

    /* Radius inherited from .fm-modal — the docked-edge rule is identical at every size,
       so this variant deliberately does not restate it. */
    border: none;
    box-shadow:
        0 0 2px rgba(0, 0, 0, 0.24),
        0 16px 24px 2px rgba(0, 0, 0, 0.05),
        0 6px 30px 5px rgba(0, 0, 0, 0.06),
        0 8px 10px -5px rgba(0, 0, 0, 0.1);
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* The header/footer chrome that was trialled here on 2026-08-28 now lives on .fm-header /
   .fm-footer for EVERY modal size — see those rules. Nothing size-specific remains. */

/* exit: backdrop.fm-closing içindeki modal */
.fm-backdrop.fm-closing .fm-modal[b-ruc8rhqpvd] {
    animation: fm-exit-b-ruc8rhqpvd 200ms ease-in forwards;
}

/* ===== Header =====
   Chrome from the shared reference (measured 2026-08-28: 48px tall, 16px side padding, bottom
   rule rgba(33,35,44,.14)). Trialled on .fm-large first, then adopted for EVERY modal size —
   so the previous 1rem/1.25rem padding and the lighter rgba(15,23,42,.08) rule are gone.
   min-height, not height: a title that wraps grows the bar instead of being clipped.
   The reference's 48px RIGHT padding is deliberately not copied — it exists there to clear an
   absolutely-positioned close button, while ours is a flex child that lands in the same place
   from a symmetric 16px pad. */
.fm-header[b-ruc8rhqpvd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(33, 35, 44, 0.14);
    flex-shrink: 0;
}

.fm-title[b-ruc8rhqpvd] {
    font-size: 15px;
    font-weight: 600;
    color: #1a2332;
    line-height: 1.3;
}

/* Left group: the title plus any TitleActions. min-width: 0 so a long title shrinks here
   instead of pushing the close button off the right edge. The 8px gap matches the header's
   own 16px side padding halved, so an action sits closer to the title it belongs to than to
   the edge of the bar. */
.fm-header-start[b-ruc8rhqpvd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fm-close-btn[b-ruc8rhqpvd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--btn-radius-sm);
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}

.fm-close-btn:hover[b-ruc8rhqpvd] {
    background: rgba(15, 23, 42, 0.06);
    color: #212529;
}

/* ===== Body =====
   The 24px side padding is INTENTIONALLY wider than the header/footer's 16px, so body content
   starts 8px further in than the title above it. Decided 2026-08-28 after the header/footer
   chrome was adopted: the inset reads as depth — the chrome frames the modal, the body sits
   inside and slightly under it, which strengthens the sense that the modal is layered over the
   page behind rather than being flat with it. The shared reference aligns these two edges; we
   deliberately do not. Do NOT "fix" this to 16px for alignment — the mismatch is the point. */
.fm-body[b-ruc8rhqpvd] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

/* FillBody: the body becomes the flex column a FillParent DataGrid flexes inside (see
   ModalForm.razor's FillBody). min-height:0 for the same reason as .dg-fill-parent's —
   flexbox's min-height:auto would size the body to its content and burst the fixed .fm-large
   shell. overflow-y stays auto from .fm-body as a fallback for non-grid content. */
.fm-body--fill[b-ruc8rhqpvd] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fm-body--two-col[b-ruc8rhqpvd] {
    display: flex;
    gap: 1.5rem;
}

.fm-col-left[b-ruc8rhqpvd],
.fm-col-right[b-ruc8rhqpvd] {
    flex: 1;
    min-width: 0;
}

.fm-col-right[b-ruc8rhqpvd] {
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    padding-left: 1.5rem;
}

/* ===== Footer ===== */
/* Footer: 56px, 16px side padding, and NO top rule — in the reference the footer floats on the
   body rather than being fenced off from it. Same reference/trial/adoption story as .fm-header. */
.fm-footer[b-ruc8rhqpvd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0 16px;
    border-top: none;
    flex-shrink: 0;
}

/* .fm-btn / .fm-btn-primary / .fm-btn-secondary / .fm-spinner moved to app.css
   (2026-08-16) — they must style buttons declared in a custom <Footer>, which is markup
   written in the calling PAGE's .razor file and therefore never carries ModalForm's own
   CSS-isolation scope attribute; a scoped rule here silently never matched those buttons. */

/* ===== Keyframes ===== */
@keyframes fm-backdrop-enter-b-ruc8rhqpvd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fm-backdrop-exit-b-ruc8rhqpvd {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* The enter animations run WITHOUT a fill-mode (see .fm-modal): whatever their last frame computes
   to, the modal returns to its own `transform: none` when they end. The exit keeps `forwards` so a
   closing modal stays invisible until it is removed; nothing can be open inside it by then. */
@keyframes fm-enter-b-ruc8rhqpvd {
    from {
        transform: translateY(-100%);
        opacity: 0.6;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes fm-exit-b-ruc8rhqpvd {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* fm-spin keyframes moved to app.css alongside .fm-spinner (2026-08-16). */

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .fm-body--two-col[b-ruc8rhqpvd] { flex-direction: column; }
    .fm-col-right[b-ruc8rhqpvd] {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        padding-left: 0;
        padding-top: 1rem;
    }
    .fm-modal[b-ruc8rhqpvd] {
        width: calc(100vw - 24px);
    }
}

@media (max-width: 480px) {
    .fm-modal[b-ruc8rhqpvd] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        /* Mirrored: at this width the shell docks to bottom: 0, so the TOP edge is the free
           one and carries the radius. Same rule, not an exception. */
        border-radius: var(--modal-radius) var(--modal-radius) 0 0;
        animation: fm-enter-bottom-b-ruc8rhqpvd 300ms cubic-bezier(0.16, 1, 0.3, 1); /* no fill-mode, see .fm-modal */
    }
    .fm-backdrop.fm-closing .fm-modal[b-ruc8rhqpvd] {
        animation: fm-exit-bottom-b-ruc8rhqpvd 200ms ease-in forwards;
    }
}

@keyframes fm-enter-bottom-b-ruc8rhqpvd {
    from {
        transform: translateY(100%);
        opacity: 0.8;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes fm-exit-bottom-b-ruc8rhqpvd {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}
/* /Components/NotesActivityFilesPanel.razor.rz.scp.css */
/* No card around this area (2026-09-12). In the reference's own record drawer the tab strip
   sits flush on the right column's grey ground and every entry floats on it as its own
   surface; the bordered #f6f7f9 box this used to draw read as a second frame inside the
   drawer's own. The class stays as the ::deep anchor for the popover rules further down. */
.naf-panel[b-nui6qrph63] {
    background: transparent;
}

/* One card for the tab strip + the composer, 8px radius on the shared low elevation; overflow
   is hidden so the composer (and the in-place activity form) clip to the card's bottom
   corners. Measured on the reference 2026-09-12. */
.naf-composer-card[b-nui6qrph63] {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--elev-card);
}

.naf-tabs[b-nui6qrph63] {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 40px;
    padding: 0;
    border-bottom: 1px solid rgba(33, 35, 44, .14);
    background: transparent;
}

/* Measured on the shared reference's own record-drawer tab strip (`.cui5-tabs__tab`,
   2026-09-11): the active tab is a flat filled pill, not an underline, and is NOT bold —
   colour alone (plus the fill) carries the "selected" signal. Colours are this component's
   OWN existing accent pair (#eff6ff/#1b6ec2, already used throughout this file's hover
   states), not the reference's raw hex — structure copied, palette kept ours.

   Re-measured against the same strip 2026-09-12 and the last three differences corrected: the
   fill is FLUSH (0px radius — this is a tab, not a pill; the 6px was this file's own choice and
   the owner asked twice for the reference's own look), the strip itself has no white band and
   no bottom rule, and only the colour transitions, over 100ms. The reference's active tab
   carries NO underline — the manager's brief asks for one and the product it describes does not
   draw one, so the live reference wins (recorded in activities/ui-behaviour.md). */
.naf-tabs button[b-nui6qrph63] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    border: 0;
    border-radius: 0;
    padding: 6px 12px;
    color: #65686f;
    background: transparent;
    font-weight: 450;
    transition: color .1s cubic-bezier(.5, 0, .2, 1), background-color .1s cubic-bezier(.5, 0, .2, 1);
}

.naf-tabs button.active[b-nui6qrph63] {
    background: #eff6ff;
    color: #1b6ec2;
}

/* The active tab DOES carry a 2px underline — the reference draws it as the tab's own ::after
   (re-measured 2026-09-12: content "", height 2px, a blue fill), which is why a first pass
   reading only border-bottom and box-shadow concluded there was none and recorded a deviation
   from the manager's brief. The brief was right; the deviation is withdrawn. It sits on
   bottom:-1px so it covers the tab row's own rule rather than stacking on top of it. The blue
   is this app's accent, matching the fill and the label above it. */
.naf-tabs button.active[b-nui6qrph63]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #1b6ec2;
}

.naf-tabs button:hover:not(.active)[b-nui6qrph63] {
    background: rgba(33, 35, 44, .05);
}

.naf-message[b-nui6qrph63] {
    margin: 8px 0 0;
}

/* The tab strip, the composer and the timeline all sit on the drawer column's own 24px gutter
   now — the panel adds no inner padding of its own (2026-09-12, matching the reference's flush
   layout). Vertical rhythm comes from the composer's 8px offset and the sections' margins. */
.naf-notes[b-nui6qrph63],
.naf-activity[b-nui6qrph63],
.naf-composer-area[b-nui6qrph63] {
    margin-top: 0;
    padding: 0;
}

.naf-shared-body[b-nui6qrph63] {
    padding: 0;
}

.naf-composer-area:empty[b-nui6qrph63] {
    margin-top: 0;
}

/* The composer is the lower half of the card, not a box of its own: 60px tall with its text
   16px in, no border and no radius except the card's own bottom corners (re-measured on the
   reference 2026-09-12, whose composer row is 887x60 with a 16px left inset). */
.naf-composer-compact[b-nui6qrph63],
.naf-composer-readonly[b-nui6qrph63] {
    display: flex;
    width: 100%;
    min-height: 60px;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0 16px;
    border: 0;
    border-radius: 0 0 8px 8px;
    color: #65686f;
    background: transparent;
    text-align: left;
}

.naf-composer-compact:hover[b-nui6qrph63],
.naf-composer-compact:focus-visible[b-nui6qrph63] {
    background: rgba(33, 35, 44, .03);
}

/* Both expanded composers fill the card's lower half instead of drawing a second card inside
   it: the note editor shell (authored in this file) and the in-place activity form (a child
   component's own root element, hence ::deep). */
.naf-composer-card .naf-editor-shell[b-nui6qrph63] {
    border-radius: 0 0 8px 8px;
    box-shadow: none;
}

.naf-composer-card[b-nui6qrph63]  .ac-shell--inline {
    border: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
}

/* The Files tab's placeholder, plain inside the card. */
.naf-files-note[b-nui6qrph63] {
    padding: 16px;
    color: #65686f;
}

.naf-composer-readonly[b-nui6qrph63] {
    cursor: default;
}

/* Demoted 2026-09-12: the quota is a detail about the record, not a control — the reference
   keeps only the information icon at that end of the composer. */
.naf-note-count[b-nui6qrph63] {
    margin-left: auto;
    white-space: nowrap;
    color: rgba(33, 35, 44, .48);
    font-size: var(--fs-meta);
}

.naf-info[b-nui6qrph63],
.naf-editor-info[b-nui6qrph63] {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #b7c0ca;
    border-radius: 999px;
    color: #65686f;
    font-size: var(--fs-chip);
    font-weight: 700;
    flex-shrink: 0;
}

/* Note-level editor shell (composer / edit note): the sticky-note yellow, no border of
   its own — radius/shadow live on .naf-note-card or the composer's own rounded corners so
   the shell reads as a state of the card it's editing, not a separate boxed element. */
.naf-editor-shell[b-nui6qrph63] {
    border-radius: 5px;
    background: #fff6d6;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Comment-level editor shell: neutral white "reply" surface, distinct from the yellow
   note surface — matches the reference's own note-vs-comment visual distinction. */
.naf-comments .naf-editor-shell[b-nui6qrph63] {
    background: #fff;
    border: 1px solid rgba(33, 35, 44, 0.14);
    border-radius: 4px;
    box-shadow: none;
}

.naf-editor[b-nui6qrph63] {
    min-height: 6rem;
    padding: 0.9rem 1rem;
    outline: none;
    background: transparent;
}

.naf-comments .naf-editor[b-nui6qrph63] {
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
}

.naf-editor:empty[b-nui6qrph63]::before {
    content: attr(data-placeholder);
    color: #65686f;
}

/* Toolbar sits BELOW the editable text, on the same row as Cancel/Save — matches the
   reference's editor anatomy, not a top-mounted toolbar. */
.naf-editor-toolbar[b-nui6qrph63] {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem 0.6rem;
}

.naf-editor-toolbar-icons[b-nui6qrph63] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.naf-toolbar-btn[b-nui6qrph63] {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: #344054;
    font-weight: 700;
    font-size: var(--fs-meta);
    flex-shrink: 0;
}

.naf-toolbar-btn:hover[b-nui6qrph63],
.naf-toolbar-btn:focus-visible[b-nui6qrph63] {
    background: #e8f1fc;
    color: #1b6ec2;
}

.naf-editor-toolbar-end[b-nui6qrph63] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.naf-editor-actions[b-nui6qrph63] {
    display: inline-flex;
    gap: 0.4rem;
}

/* The Activity tab's "Click here to add an activity..." placeholder reuses
   .naf-composer-compact as-is (same shape as the Notes "Take a note..." button just above it
   in the markup) — no new class needed for the collapsed state. */

/* The in-place activity form (ActivityComposer, Inline layout) carries its own card chrome,
   action bar and day calendar. Its ✕ sits at the tab row's right end, like the reference's. */
.naf-tabs .naf-tabs-close[b-nui6qrph63] {
    margin-left: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    color: #21232c;
}

/* Focus's empty state — plain text, no dashed box (unlike .naf-empty, which is Files'
   placeholder box): the reference renders this as plain copy sitting above the quick-add
   card, not inside a bordered placeholder. */
.naf-focus-empty[b-nui6qrph63] {
    margin-top: 16px;
    color: #21232c;
}

/* History's own empty line is plain copy too (2026-09-12): the dashed .naf-empty box below is
   the Files PLACEHOLDER's chrome — a section that simply has nothing in it yet should not be
   framed, and the reference frames neither. */
.naf-history-empty[b-nui6qrph63] {
    margin-top: 16px;
    color: #65686f;
}

.naf-focus-empty-title[b-nui6qrph63] {
    font-size: var(--fs-body);
    font-weight: 600;
}

.naf-focus-empty-caption[b-nui6qrph63] {
    margin-top: 0.15rem;
    color: #65686f;
    font-size: var(--fs-meta);
}

/* Measured on the reference's own Focus / History headings (2026-09-12): a 40px row 32px below
   whatever precedes it, the label 16px/600 in the body ink with its chevron immediately after
   it — no chip, no fill, and not 700. */
.naf-section-header[b-nui6qrph63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin-top: 32px;
}

/* The Focus / History heading (re-measured on the reference's person page 2026-09-17): a 32px
   button, 4px padding and 8px corners, the 16px/600 title with the 24px disclosure arrow right
   after it — right while collapsed, down while expanded (ChevronToggle Disclosure). The button
   sits 4px left of the column so the TITLE lines up with the content below, as there. */
.naf-section-header button[b-nui6qrph63] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 32px;
    margin-left: -4px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #21232c;
    font-size: var(--fs-title);
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}

.naf-section-header button:focus-visible[b-nui6qrph63] {
    outline: 2px solid #1b6ec2;
    outline-offset: 0;
}

.naf-history-header[b-nui6qrph63] {
    margin-top: 32px;
}

/* History's filter row. The reference has one too (All · Activities · Notes · … · Changelog,
   measured 2026-09-17: 24px chips, 12px/600, a faint fill on the active one); ours keeps the
   24px/12px secondary-chip language of the quick-add chips on the app palette (2026-09-12)
   rather than reading as a second tab strip above the timeline. The chips are buttons since
   2026-09-17, so the browser's button chrome is reset here. */
.naf-history-tabs[b-nui6qrph63] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    font-size: var(--fs-meta);
    font-weight: 600;
}

.naf-history-tabs button[b-nui6qrph63] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #65686f;
    font: inherit;
    cursor: pointer;
}

.naf-history-tabs button:focus-visible[b-nui6qrph63] {
    outline: 2px solid #1b6ec2;
    outline-offset: 1px;
}

.naf-history-tabs .active[b-nui6qrph63] {
    color: #1b6ec2;
    background: #e8f1fc;
}

/* ── The timeline ──────────────────────────────────────────────────────────────────────────
   Focus and History are ONE timeline in the reference, measured live 2026-09-12 (887px column):
   each entry is a 40px white circle carrying a 16px icon, then a 16px gap, then the entry's own
   card in the remaining 831px. A 2px DASHED rgba(33,35,44,.14) rail runs down the circle's
   centre line and on into the next entry; the last entry of a section draws none. Entries are
   16px apart, supplied by each entry's own top padding so the first one also clears its section
   heading. Before this pass both sections were a flat stack of cards — which is the first thing
   the manager's brief calls out: build the right column as a timeline, not a card pile. */
.naf-list[b-nui6qrph63],
.naf-timeline[b-nui6qrph63] {
    display: block;
}

.naf-tl-entry[b-nui6qrph63] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-top: 16px;
}

.naf-tl-rail[b-nui6qrph63] {
    position: relative;
    flex: 0 0 40px;
}

.naf-tl-entry:not(:last-child) .naf-tl-rail[b-nui6qrph63]::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: -16px;
    left: 19px;
    border-left: 2px dashed rgba(33, 35, 44, .14);
}

.naf-tl-dot[b-nui6qrph63] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #21232c;
    box-shadow: var(--elev-card);
}

.naf-tl-body[b-nui6qrph63] {
    flex: 1 1 auto;
    min-width: 0;
}

/* A Changelog entry (ADR-028, measured on the reference's History 2026-09-17): no card. The node
   is a 16px white dot 12px in from the rail's edge — so it sits on the same centre line as the
   40px circles — and the rail runs on from the dot's top. The text starts 16px inside the body,
   where a card's own text starts: "Field: old → new" at 14px/21px #21232c over a 12px/18px
   #65686f meta line. */
.naf-tl-dot--small[b-nui6qrph63] {
    width: 16px;
    height: 16px;
    margin-left: 12px;
}

.naf-tl-entry--change:not(:last-child) .naf-tl-rail[b-nui6qrph63]::after {
    top: 16px;
}

.naf-change[b-nui6qrph63] {
    padding: 0 16px;
}

.naf-change-line[b-nui6qrph63] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    font-size: var(--fs-body);
    line-height: 21px;
    color: #21232c;
    overflow-wrap: anywhere;
}

/* The colon hugs its label, as in "Organization: empty". */
.naf-change-colon[b-nui6qrph63] {
    margin-left: -4px;
}

.naf-change-arrow[b-nui6qrph63] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #65686f;
}

.naf-change-sign--plus[b-nui6qrph63] {
    color: #077838;
    font-weight: 600;
}

.naf-change-sign--minus[b-nui6qrph63] {
    color: #b02a37;
    font-weight: 600;
}

.naf-change-meta[b-nui6qrph63] {
    margin-top: 4px;
    font-size: var(--fs-meta);
    line-height: 18px;
    color: #65686f;
}

/* NO hover treatment on the entry or its card (owner, 2026-09-12: "the card should stay as it
   is"). The reference DOES tint its card on row hover — measured, its token resolves to `#ececed`
   — and that tint shipped here for a few hours before being removed on the owner's call. The
   hover affordance this area needs is the one on the activity's TITLE: it underlines, takes
   `cursor: pointer` and opens the edit modal. Tinting the whole surface on top of that says
   nothing extra, and these cards are not rows in a list the reader is scanning.

   Do not re-add it from the reference measurement alone; it is a deliberate deviation. */

/* The note surface, re-measured 2026-09-12: rgb(255,246,214) at a 4px radius with the shared
   card elevation and NO border (the amber 1px outline was this file's own), its header band
   8px 16px 4px and its body 0 16px 12px — the card itself carries no padding. A pinned note in
   Focus is the same surface, so the old .focused border tint is gone with it. */
.naf-note-card[b-nui6qrph63],
.naf-activity-card[b-nui6qrph63] {
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #fff6d6;
    box-shadow: var(--elev-card);
}

/* Editing a note in place: the shell is already inside the yellow card, so it drops its own
   radius and shadow instead of drawing a second card edge inside the first. */
.naf-note-card .naf-editor-shell[b-nui6qrph63] {
    border-radius: 4px;
    box-shadow: none;
}

/* Header row stays IDENTICAL whether the card is collapsed or expanded — only the body
   below it changes shape. A hand-rolled second layout for the collapsed state (icon +
   reflowed meta/actions) is an anti-pattern here: it doubles the markup for no behavioural
   gain and drifts from the reference's own single-layout collapse. */
.naf-card-header[b-nui6qrph63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px 4px;
}

.naf-card-meta[b-nui6qrph63] {
    min-width: 0;
    color: rgba(33, 35, 44, .72);
    font-size: var(--fs-meta);
    font-weight: 450;
}

.naf-note-body[b-nui6qrph63] {
    padding: 0 16px 12px;
    overflow-wrap: anywhere;
    color: #21232c;
    font-size: var(--fs-body);
}

.naf-note-body-clamped[b-nui6qrph63] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.naf-note-actions[b-nui6qrph63] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.naf-add-comment-btn[b-nui6qrph63] {
    border: 0;
    background: transparent;
    color: #21232c;
    font-size: var(--fs-meta);
    font-weight: 600;
    white-space: nowrap;
    padding: 0 6px;
    height: 24px;
    border-radius: 6px;
}

.naf-add-comment-btn:hover[b-nui6qrph63],
.naf-add-comment-btn:focus-visible[b-nui6qrph63] {
    background: #e8f1fc;
    color: #1b6ec2;
}

/* 24px, 6px radius — the reference's own note-card action buttons (2026-09-12). */
.naf-icon-button[b-nui6qrph63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #21232c;
    flex-shrink: 0;
}

.naf-icon-button:hover[b-nui6qrph63],
.naf-icon-button:focus-visible[b-nui6qrph63] {
    background: #e8f1fc;
    color: #1b6ec2;
}

/* .naf-more's popover content (Edit/Pin/Delete) is rendered through DismissiblePanel using
   the app's shared, global .dg-popover / .dg-menu-item chrome (app.css) — not a bespoke
   .naf-more-menu — for ESC/outside-click support (ADR-006) and visual consistency with
   every other kebab menu in the app (DataGrid row menus, Visibility Groups row menus).
   Hover here is scoped to blue (::deep, anchored on .naf-panel which DOES carry this
   component's scope attribute even though the popover div itself is DismissiblePanel's own)
   instead of touching .dg-menu-item's shared grey default used by every other consumer —
   the reference's own note-action menu highlights blue on hover, and the app's grey default
   read as inconsistent here specifically (2026-08-16 user feedback). */
.naf-panel[b-nui6qrph63]  .dg-menu-item:hover,
.naf-panel[b-nui6qrph63]  .dg-menu-item:focus-visible {
    background-color: #e8f1fc;
    color: #1b6ec2;
}

.naf-panel[b-nui6qrph63]  .dg-menu-item--danger:hover,
.naf-panel[b-nui6qrph63]  .dg-menu-item--danger:focus-visible {
    background-color: #fdecea;
    color: #b02a37;
}

.naf-empty[b-nui6qrph63] {
    padding: 1rem;
    border: 1px dashed #cfd6df;
    border-radius: 6px;
    color: #65686f;
    background: #fff;
}

.naf-activity-card[b-nui6qrph63] {
    justify-content: flex-start;
    background: #fff;
    border-color: #dfe3e8;
}

.naf-activity-icon[b-nui6qrph63] {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #475467;
    background: #fff;
    font-weight: 700;
}

/* Comment thread — deliberately neutral (white avatar chip, no yellow) so a reply reads
   as a distinct, lighter-weight object from the note it hangs off. */
.naf-comments[b-nui6qrph63] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 16px 12px;
}

.naf-comment[b-nui6qrph63] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.naf-comment-avatar[b-nui6qrph63] {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e7fb;
    border-radius: 50%;
    background: #eef6ff;
    color: #374151;
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.naf-comment-body[b-nui6qrph63] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(33, 35, 44, 0.1);
    border-radius: 4px;
    background: #fff;
}

.naf-comment-meta[b-nui6qrph63] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
    color: #65686f;
    font-size: var(--fs-meta);
}

.naf-comment-author[b-nui6qrph63] {
    color: #344054;
    font-weight: 600;
}

.naf-comment-action[b-nui6qrph63] {
    border: 0;
    background: transparent;
    color: #65686f;
    font-size: var(--fs-meta);
    font-weight: 600;
    padding: 0;
    margin-left: 0.3rem;
}

.naf-comment-action:hover[b-nui6qrph63],
.naf-comment-action:focus-visible[b-nui6qrph63] {
    color: #1b6ec2;
    text-decoration: underline;
}

.naf-comment-action-danger:hover[b-nui6qrph63],
.naf-comment-action-danger:focus-visible[b-nui6qrph63] {
    color: #b42318;
}

.naf-comment-text[b-nui6qrph63] {
    overflow-wrap: anywhere;
    color: #111827;
    font-size: var(--fs-body);
}

.naf-modal-backdrop[b-nui6qrph63] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.35);
}

.naf-modal[b-nui6qrph63] {
    width: min(28rem, 100%);
    padding: 1rem;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.24);
}

.naf-modal h2[b-nui6qrph63] {
    margin: 0 0 0.5rem;
    font-size: var(--fs-title);
}

.naf-modal-actions[b-nui6qrph63] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .naf-card-header[b-nui6qrph63] {
        flex-wrap: wrap;
    }

    .naf-editor-actions[b-nui6qrph63] {
        width: 100%;
        justify-content: flex-end;
    }

    .naf-editor-toolbar-end[b-nui6qrph63] {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}
/* /Components/Pages/Activities/ActivitiesCalendar.razor.rz.scp.css */
/* The calendar page's own layout. The toolbar and chip CHROME is shared with the list view and
   lives in app.css (".act-* toolbar + chip chrome"); what is here is only how this page — which
   has no DataGrid to borrow a toolbar row from — arranges those controls, plus making the grid
   fill the viewport the way a top-level list page does. */

.acal[b-hr2jfuw07k] {
    display: flex;
    flex-direction: column;

    /* 16px, so the two views SHARE their vertical rhythm: switching List <-> Calendar must not
       shift the toolbar, the type chips or the header row under the pointer. Measured at
       1920x945 (2026-09-13) — the list and the reference's own calendar agree, and this view was
       the one out of step:

              toolbar top   chips top   header top
       ref calendar   72        120         160
       our list       71.4      119.4       160.4
       our calendar   71.4      111.4       144.1   <- 8px was the gap here

       A single gap does both bands because .acal is one flex column: toolbar -> chips -> grid. */
    gap: 16px;
    min-height: 0;
    /* No height here on purpose. The grid sizes ITSELF to the rest of the window through
       DataGrid's initFillHeight (see CalendarWeekGrid.OnAfterRenderAsync), which measures where
       the grid really starts instead of assuming how tall everything above it is. A
       calc(100vh - <constant>) here was measured 70px short. */
}

/* Mirrors DataGrid's own toolbar row: one space-between row, 8px gaps, wrapping rather than
   overflowing on a narrow viewport. */
.acal-toolbar[b-hr2jfuw07k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.acal-toolbar-end[b-hr2jfuw07k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.acal-week[b-hr2jfuw07k] {
    font-size: var(--fs-body);
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

/* Previous / Today / Next as one group, matching the reference's own grouping of the three. */
.acal-nav[b-hr2jfuw07k] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.acal-nav-btn[b-hr2jfuw07k] {
    padding: 0 8px;
}

.acal-chips[b-hr2jfuw07k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* The grid's own height is set inline by initFillHeight; all this does is stop flex from
   stretching or shrinking it afterwards. */
.acal[b-hr2jfuw07k]  .cwg {
    flex: 0 0 auto;
    min-height: 0;
}
/* /Components/Pages/Activities/ActivitiesIndex.razor.rz.scp.css */
/* The toolbar and chip chrome this page renders moved to app.css on 2026-09-12 (".act-* toolbar
   + chip chrome"), when /activities/calendar became a second page rendering the same controls:
   CSS isolation stamps each component with its own scope attribute, so an isolated rule silently
   never matches another component's markup. What is left here is genuinely page-only. */

/* Subject cell: type icon + text on one line with the reference's 6px gap (an <a> is inline by
   default, which glued the icon to the text). min-width:0 lets the grid's own ellipsis apply. */
.act-subject[b-q48hsu5wr7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.act-subject > span[b-q48hsu5wr7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Azure/AzureConnect.razor.rz.scp.css */
.ac-status[b-miaf76rg95] {
    margin-bottom: 0.85rem;
    color: #344054;
}

.ac-code[b-miaf76rg95] {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #f1f3f5;
    color: #344054;
    font-family: var(--app-font-mono);
    font-size: 0.85em;
}
/* /Components/Pages/Azure/AzureResources.razor.rz.scp.css */
/* /azuregw/azure-resources (2026-09-16). Only the page's own lines live here: the intro and the
   gap above the grid. The outcome line is the shared StatusLine (app.css .status-line*, which
   replaced this file's .azr-status copy of /settings/modules' line on 2026-09-17); the switch
   (.seg-switch), the grid and its row menu (.dg-menu-item) are the app's shared chrome. */

.azr-intro[b-t80rgbhtdh] {
    font-size: var(--fs-body);
}

.azr-grid[b-t80rgbhtdh] {
    margin-top: 16px;
}
/* /Components/Pages/Customers/CustomersIndex.razor.rz.scp.css */
.cu-header[b-3g3tx3t5l1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cu-header-copy[b-3g3tx3t5l1] {
    min-width: 0;
}

.cu-title[b-3g3tx3t5l1] {
    margin: 0;
}

.cu-description[b-3g3tx3t5l1] {
    color: #667085;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    max-width: 720px;
}

/* Recents */
.cu-recents-section[b-3g3tx3t5l1] {
    margin-bottom: 1.25rem;
}

.cu-recents-toggle[b-3g3tx3t5l1] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.cu-recents-toggle:hover[b-3g3tx3t5l1] {
    color: #101828;
}

.cu-recents-strip[b-3g3tx3t5l1] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.cu-recent-tile[b-3g3tx3t5l1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    min-width: 72px;
    max-width: 80px;
}

.cu-tile-avatar[b-3g3tx3t5l1] {
    width: 48px;
    height: 48px;
    background: #e4e7ec;
    color: #344054;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.cu-recent-tile:hover .cu-tile-avatar[b-3g3tx3t5l1] {
    background: #d0d5dd;
}

.cu-tile-name[b-3g3tx3t5l1] {
    font-size: 0.7rem;
    color: #667085;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Tabs */
.cu-tabs[b-3g3tx3t5l1] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e4e7ec;
    margin-bottom: 1rem;
}

.cu-tab[b-3g3tx3t5l1] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    /* The two vertical paddings trade the cap-band correction the rest of the 0.875rem
       control family gets from app.css, so the tab's height is unchanged and the active
       tab's 2px underline stays where it is. Written here rather than in app.css because
       .cu-tab is only ever produced by this scoped stylesheet. */
    padding: calc(0.4rem + var(--ctl-optical-shift)) 1rem calc(0.4rem - var(--ctl-optical-shift));
    font-size: 0.875rem;
    color: #667085;
    cursor: pointer;
    margin-bottom: -1px;
}

.cu-tab:hover[b-3g3tx3t5l1] {
    color: #344054;
}

.cu-tab-active[b-3g3tx3t5l1] {
    color: #101828;
    border-bottom-color: #344054;
    font-weight: 600;
}

/* Alphabetical filter */
/* A-Z filter — lives in the grid's ToolbarStart slot (see CustomersIndex.razor), so it has
   to line up on a 32px toolbar row next to the label/owner filter buttons and the search box
   rather than sit as a strip of its own above the grid. No bottom margin for that reason:
   the toolbar row owns the spacing now.

   Deliberately NOT given the 32px/#cbd5e1 chrome those filter buttons carry. Twenty-eight
   bordered boxes would read as twenty-eight controls competing with the two real ones; the
   letters are one control whose parts happen to be clickable, so they stay borderless and
   let the active letter's tint do all the signalling.

   It is the ONLY thing in ToolbarStart since 2026-08-31 — the result count and the page-size
   picker that used to flank it are gone — so it needs no .dg-toolbar-group wrapper and no
   separator. */
.cu-alpha-bar[b-3g3tx3t5l1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 32px;
}


.cu-alpha-btn[b-3g3tx3t5l1] {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 0.8rem;
    color: #667085;
    cursor: pointer;
    border-radius: var(--btn-radius-sm);
    min-width: 1.6rem;
    text-align: center;
}

.cu-alpha-btn:hover[b-3g3tx3t5l1] {
    background: #f2f4f7;
    color: #344054;
}

.cu-alpha-active[b-3g3tx3t5l1] {
    background: #f2f4f7;
    color: #101828;
    font-weight: 700;
}





@media (max-width: 640px) {
    .cu-header[b-3g3tx3t5l1] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Settings/AdminGroups.razor.rz.scp.css */
/* Visibility Groups — card-tree design modelled on the reference capture in
   Raw/Prompts/10082026/visibility_groups/ (colors mapped to app palette, not the
   reference's own brand colors). */

.vg-intro[b-1q2d19kztw] {
    max-width: 920px;
}

.vg-toolbar[b-1q2d19kztw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem;
}

.vg-chip[b-1q2d19kztw] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #eef1f5;
    border-radius: var(--pill-radius);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
    white-space: nowrap;
}

.vg-node[b-1q2d19kztw] {
    position: relative;
    margin-top: 12px;
}

.vg-node-default[b-1q2d19kztw] {
    margin-top: 0;
}

.vg-card[b-1q2d19kztw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.55rem 1rem;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
}

.vg-left[b-1q2d19kztw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.vg-name[b-1q2d19kztw] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #21232c;
    white-space: nowrap;
}

.vg-subchip[b-1q2d19kztw] {
    padding: 1px 9px;
    border: 1px solid #cfd6de;
    border-radius: var(--pill-radius);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
    white-space: nowrap;
}

.vg-desc[b-1q2d19kztw] {
    font-size: 0.78rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vg-right[b-1q2d19kztw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.vg-warn[b-1q2d19kztw] {
    display: inline-flex;
}

.vg-count[b-1q2d19kztw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #64748b;
}

.vg-count-empty[b-1q2d19kztw] {
    color: #b02a37;
}

.vg-anchor[b-1q2d19kztw] {
    position: relative;
    display: inline-flex;
}

.vg-overview-btn[b-1q2d19kztw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: var(--btn-radius);
    font-size: 0.85rem;
    font-weight: 500;
    color: #21232c;
    cursor: pointer;
}

.vg-overview-btn:hover[b-1q2d19kztw],
.vg-overview-btn[aria-expanded="true"][b-1q2d19kztw] {
    background: #eef2f7;
}

.vg-add-btn[b-1q2d19kztw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: var(--btn-radius);
    font-size: 1.1rem;
    line-height: 1;
    color: #21232c;
    cursor: pointer;
}

.vg-add-btn:hover[b-1q2d19kztw] {
    background: #eef2f7;
}

.vg-overview-btn:focus-visible[b-1q2d19kztw],
.vg-add-btn:focus-visible[b-1q2d19kztw] {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.vg-section[b-1q2d19kztw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.vg-section-label[b-1q2d19kztw] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.vg-section-count[b-1q2d19kztw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #eef1f5;
    border-radius: var(--pill-radius);
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
}

.vg-section-rule[b-1q2d19kztw] {
    flex: 1 1 auto;
    height: 1px;
    background: #e4e7ec;
}

/* Tree connectors — vertical rail on the children container, horizontal stub into each
   child card (the reference's L-shaped lines). */
.vg-children[b-1q2d19kztw] {
    margin-left: 16px;
    padding-left: 24px;
    border-left: 1px solid #d9dde3;
}

.vg-children > .vg-node[b-1q2d19kztw]::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 28px;
    width: 24px;
    border-top: 1px solid #d9dde3;
}

.vg-empty[b-1q2d19kztw] {
    color: #64748b;
    margin-top: 0.75rem;
}
/* /Components/Pages/Settings/AdminLicence.razor.rz.scp.css */
/* /settings/modules — the module card's text column. The toggle's outcome line under the
   description (2026-09-14) is the shared StatusLine since 2026-09-17; its rules (.status-line*)
   live in app.css, grown out of this file's former .mod-status. */

.mod-text[b-op655ywo56] {
    flex: 1 1 auto;
    min-width: 0; /* lets the one-line status ellipsize inside the flex row */
}
/* /Components/Pages/Settings/DataFieldsActivity.razor.rz.scp.css */
/* /settings/fields/activity (ADR-030, 2026-09-18). The page only frames DataFieldsGrid. */

.dfl-intro[b-cc3xh6bedo] {
    font-size: var(--fs-body);
    max-width: 860px;
}
/* /Components/ProfileDropdownMenu.razor.rz.scp.css */
.pdm-container[b-djck921xkn] {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.pdm-trigger[b-djck921xkn] {
    display: inline-flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 280px;
    padding: 0 4px 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.pdm-trigger:hover[b-djck921xkn],
.pdm-trigger.open[b-djck921xkn] {
    background: #f1f5fb;
}

.pdm-trigger:focus-visible[b-djck921xkn] {
    outline: 2px solid #0d68c5;
    outline-offset: 2px;
}

.pdm-avatar[b-djck921xkn] {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e7fb;
    border-radius: 50%;
    color: #374151;
    background: #eef6ff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.pdm-identity[b-djck921xkn] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-align: left;
}

.pdm-name[b-djck921xkn] {
    max-width: 180px;
    overflow: hidden;
    color: #21232c;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdm-company[b-djck921xkn] {
    max-width: 180px;
    overflow: hidden;
    color: #65686f;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdm-panel[b-djck921xkn] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 276px;
    min-width: 260px;
    max-width: 320px;
    height: auto;
    max-height: min(60vh, calc(100vh - 80px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    border: 0;
    /* App-wide popover radius standard (llm-wiki/06-patterns/dropdown-pattern.md
       "Surface Chrome") — radius only; border:0 and this panel's own soft shadow
       are kept, unlike every other popover which borrows .dg-popover wholesale. */
    border-radius: var(--popover-radius);
    color: #21232c;
    background-color: #ffffff;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24),
        0 8px 10px 1px rgb(0 0 0 / 5%),
        0 3px 14px 2px rgb(0 0 0 / 6%),
        0 5px 5px -3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 450;
    line-height: 21px;
}

.menu-section[b-djck921xkn] {
    padding: 0;
}

.menu-section + .menu-section[b-djck921xkn] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(33, 35, 44, 0.12);
}

.menu-section-title[b-djck921xkn] {
    padding: 12px 24px 8px;
    color: #65686f;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}

.menu-item-row[b-djck921xkn] {
    display: flex;
    width: 100%;
    height: 44px;
    align-items: center;
    padding: 1px 8px;
    box-sizing: border-box;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner,
.pdm-panel[b-djck921xkn]  .menu-item-inner:link,
.pdm-panel[b-djck921xkn]  .menu-item-inner:visited,
.pdm-panel[b-djck921xkn]  .menu-item-inner:hover,
.pdm-panel[b-djck921xkn]  .menu-item-inner:active,
.pdm-panel[b-djck921xkn]  .menu-item-inner:focus,
.pdm-panel[b-djck921xkn]  .menu-item-inner:focus-visible,
.pdm-panel .menu-item-inner[b-djck921xkn] {
    display: flex;
    width: 100%;
    height: 42px;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--btn-radius-sm);
    color: #21232c;
    background: transparent;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 450;
    line-height: 21px;
    margin: 0;
    text-align: left;
    text-decoration: none !important;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner *,
.pdm-panel .menu-item-inner *[b-djck921xkn] {
    text-decoration: none !important;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner:hover,
.pdm-panel[b-djck921xkn]  .menu-item-inner:focus-visible,
.pdm-panel .menu-item-inner:hover[b-djck921xkn],
.pdm-panel .menu-item-inner:focus-visible[b-djck921xkn] {
    color: inherit;
    background-color: rgb(33 35 44 / 5%);
    text-decoration: none !important;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner:active,
.pdm-panel[b-djck921xkn]  .menu-item-inner.active,
.pdm-panel .menu-item-inner:active[b-djck921xkn],
.pdm-panel .menu-item-inner.active[b-djck921xkn] {
    color: inherit;
    background-color: rgb(33 35 44 / 8%);
    text-decoration: none !important;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner:focus-visible,
.pdm-panel .menu-item-inner:focus-visible[b-djck921xkn] {
    outline: 2px solid #0d68c5;
    outline-offset: 1px;
}

.menu-item-icon[b-djck921xkn] {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #65686f;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 24px 24px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 24px 24px;
}

.pdm-panel[b-djck921xkn]  .menu-item-inner:hover .menu-item-icon,
.pdm-panel[b-djck921xkn]  .menu-item-inner:focus-visible .menu-item-icon,
.pdm-panel[b-djck921xkn]  .menu-item-inner:active .menu-item-icon,
.pdm-panel[b-djck921xkn]  .menu-item-inner.active .menu-item-icon,
.pdm-panel .menu-item-inner:hover .menu-item-icon[b-djck921xkn],
.pdm-panel .menu-item-inner:focus-visible .menu-item-icon[b-djck921xkn],
.pdm-panel .menu-item-inner:active .menu-item-icon[b-djck921xkn],
.pdm-panel .menu-item-inner.active .menu-item-icon[b-djck921xkn] {
    color: #21232c;
}

.menu-item-label[b-djck921xkn] {
    min-width: 0;
    overflow: hidden;
    color: #21232c;
    font-size: 14px;
    font-weight: 450;
    line-height: 21px;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdm-logout-form[b-djck921xkn] {
    width: 100%;
    margin: 0;
}

.menu-section-actions[b-djck921xkn] {
    padding-bottom: 0;
}

.menu-icon-profile[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/profile.svg");
    -webkit-mask-image: url("/assets/icons/nav/profile.svg");
}

.menu-icon-password[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/key.svg");
    -webkit-mask-image: url("/assets/icons/nav/key.svg");
}

.menu-icon-company-settings[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/account-gear.svg");
    -webkit-mask-image: url("/assets/icons/nav/account-gear.svg");
}

.menu-icon-manage-users[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/account-users.svg");
    -webkit-mask-image: url("/assets/icons/nav/account-users.svg");
}

.menu-icon-modules[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/modules.svg");
    -webkit-mask-image: url("/assets/icons/nav/modules.svg");
}

.menu-icon-logout[b-djck921xkn] {
    mask-image: url("/assets/icons/nav/logout.svg");
    -webkit-mask-image: url("/assets/icons/nav/logout.svg");
}
/* /Components/ToggleSwitch.razor.rz.scp.css */
.toggle-switch[b-peq940pfdp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    /* Anchor for the visually-hidden checkbox below: without this the absolutely
       positioned input resolves against an outer ancestor and its focus paint can
       surface as stray pixels far from the control (reported on /fileops/jobs,
       2026-09-03, after the first toggle click). */
    position: relative;
}

.toggle-switch--disabled[b-peq940pfdp] {
    cursor: not-allowed;
}

.toggle-switch--sm[b-peq940pfdp] {
    --ts-track-w: 24px;
    --ts-track-h: 12px;
    --ts-thumb-d: 8px;
    --ts-icon: 10px;
    --ts-icon-left: 3px;
}

.toggle-switch--md[b-peq940pfdp] {
    --ts-track-w: 32px;
    --ts-track-h: 16px;
    --ts-thumb-d: 12px;
    --ts-icon: 12px;
    --ts-icon-left: 4px;
}

.toggle-switch--lg[b-peq940pfdp] {
    --ts-track-w: 48px;
    --ts-track-h: 24px;
    --ts-thumb-d: 20px;
    --ts-icon: 16px;
    --ts-icon-left: 6px;
}

.toggle-switch__input[b-peq940pfdp] {
    position: absolute;
    /* Its own focus ring stays off — the control's visible focus indicator is the
       track ring (:focus-visible ~ .toggle-switch__track below); a ring around a
       clipped 1px box renders as meaningless pixels. */
    outline: none;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-switch__track[b-peq940pfdp] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--ts-track-w);
    height: var(--ts-track-h);
    border-radius: 999px;
    background: #cacacd;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch__check[b-peq940pfdp] {
    position: absolute;
    top: 50%;
    left: var(--ts-icon-left);
    width: var(--ts-icon);
    height: var(--ts-icon);
    transform: translateY(-50%);
    color: #fff;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

.toggle-switch__thumb[b-peq940pfdp] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--ts-thumb-d);
    height: var(--ts-thumb-d);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch__label[b-peq940pfdp] {
    font-size: 14px;
    color: #21232c;
}

/* Checked state */
.toggle-switch__input:checked ~ .toggle-switch__track[b-peq940pfdp] {
    background: #1b6ec2;
}

.toggle-switch__input:checked ~ .toggle-switch__track .toggle-switch__check[b-peq940pfdp] {
    opacity: 1;
}

.toggle-switch__input:checked ~ .toggle-switch__track .toggle-switch__thumb[b-peq940pfdp] {
    transform: translateX(calc(var(--ts-track-w) - var(--ts-thumb-d) - 4px));
}

/* Hover */
.toggle-switch:not(.toggle-switch--disabled):hover .toggle-switch__input:not(:checked) ~ .toggle-switch__track[b-peq940pfdp] {
    background: #95969a;
}

.toggle-switch:not(.toggle-switch--disabled):hover .toggle-switch__input:checked ~ .toggle-switch__track[b-peq940pfdp] {
    background: #175ea5;
}

/* Disabled */
.toggle-switch__input:disabled ~ .toggle-switch__track[b-peq940pfdp] {
    opacity: 0.6;
}

/* Focus ring */
.toggle-switch__input:focus-visible ~ .toggle-switch__track[b-peq940pfdp] {
    outline: 2px solid #0d68c5;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .toggle-switch__track[b-peq940pfdp],
    .toggle-switch__thumb[b-peq940pfdp],
    .toggle-switch__check[b-peq940pfdp] {
        transition: none;
    }
}