@charset "UTF-8";
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
#main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content > #preFooter {
  margin-top: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   Bootstrap .btn → Syncfusion SfButton parity
   ─────────────────────────────────────────────────────────────────────────── */
/* Plain HTML <button class="btn"> elements should render identically to the
   Syncfusion SfButton they replaced (April 2026 sweep). Values mirror Syncfusion's
   Material 3 theme (.e-btn) so admin pages don't have a mix of compact Syncfusion
   controls and oversized Bootstrap buttons sitting next to each other. */
.btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0;
  padding: 5px 16px;
  text-transform: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Admin primary action — flat vivid blue, squared corners. Matches the legacy
   SfButton primary look the admin app shipped with before the brand-teal sweep. */
.btn-primary,
.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #fff;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
  color: #fff !important;
}

/* Outlined primary — used by the editor-header Save button (mirrors the legacy
   SfProgressButton "e-outline + IsPrimary" look: white bg, blue border + text). */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
  background-color: #fff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  color: #0d6efd;
  background-color: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
}

.btn-sm {
  font-size: 12px;
  padding: 3px 10px;
}

/* Default / btn-light → SfButton flat-gray look (Edit, Add Participant, etc.) */
.btn-light {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  color: rgba(0, 0, 0, 0.87);
}

.btn-light:hover {
  background-color: #e0e0e0;
  border-color: #d4d4d4;
  color: rgba(0, 0, 0, 0.87);
}

.btn-light:focus,
.btn-light:focus-visible {
  background-color: #e0e0e0;
  border-color: #d4d4d4;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 0 0 0.15rem rgba(0, 166, 199, 0.2);
}

.btn-light:active,
.btn-light.active {
  background-color: #d4d4d4 !important;
  border-color: #c8c8c8 !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

.btn-outline-secondary {
  color: rgba(0, 0, 0, 0.87);
  border-color: #c8c8c8;
  background-color: #fff;
}

.btn-outline-secondary:hover {
  background-color: #f5f5f5;
  border-color: #b8b8b8;
  color: rgba(0, 0, 0, 0.87);
}

.btn-outline-warning {
  color: #f57c00;
  border-color: #f57c00;
  background-color: #fff;
}

.btn-outline-warning:hover {
  color: #fff;
  background-color: #f57c00;
  border-color: #f57c00;
}

/* Syncfusion SfButton primary — vivid blue + squared corners so SfButton and
   .btn-primary render identically across the admin app. */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
  border-radius: 0;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #fff;
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

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

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.req {
  color: red !important;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.dropdown-menu {
  left: -80px;
}

.dropdown-menu[data-bs-popper] {
  left: -80px;
}

.form-row {
  margin-bottom: 10px;
}

.report-table-wrapper {
  max-width: 1200px;
}

textarea { /* for all text* area elements */
  resize: none !important;
}

/* Payment strip — shared between OpenedCaseDetail and ScheduledCaseEditor.
   Inline <style> blocks in .razor aren't scoped but still bind per-component, so keeping
   this in site.css avoids the copy-paste drift that was building up between the two pages. */
.payment-strip {
  border-left: 4px solid #ced4da;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.payment-strip-paid {
  border-left-color: #28a745;
  background-color: #f8f9fa;
}

.payment-strip-unpaid {
  border-left-color: #dc3545;
  background-color: #f8d7da;
}

.payment-strip-partial {
  border-left-color: #ffc107;
  background-color: #fff3cd;
}

.payment-strip-heading {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.35rem;
}

/* Session card on ScheduledCaseEditor (Edit Case tab): groups the editable Start/End
   time pickers with the Case Meeting Mode + Venue dropdowns inside one neutral card
   surface. Same look as the Payment strip — light gray bg with a thin left accent —
   but contents are fully editable controls, not a read-only summary. */
.case-schedule-card {
  border: 1px solid #e0e4ea;
  border-left: 4px solid #6c757d;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background-color: #f8f9fa;
}

/* Inline "saving…" spinner pinned over a Save button. The wrapper's
   relative positioning is what anchors the overlay's `inset: 0`. */
.save-button-wrapper {
  position: relative;
  display: inline-block;
}

.save-spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  pointer-events: none;
}

/* "N unsaved change(s)" chip shown beside the Save button when the deferred (Save-button) fields are dirty.  */
.unsaved-changes-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0rem 0.55rem;
  border-bottom-left-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #856404;
  background-color: var(--user-chip-hover-bg);
  border-bottom: 1px solid #ffe69c;
  font-style: italic;
}

.unsaved-changes-badge-icon {
  font-size: 0.75rem;
}

/* Side-by-side path tiles on OpenedCaseDetail Scheduling tab — Propose Dates (left)
   vs. Schedule directly (right). Schedule directly gets the card treatment to read
   as a self-contained primary path; Propose Dates is an expanded multi-stage workflow
   (propose → approve → send → results) and stays flat. On lg+ screens both sit at
   equal height; on smaller screens they stack via Bootstrap col-12 col-lg-6. */
.scheduling-path-card {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 1.25rem;
  background-color: #f8f9fb;
}

.scheduling-path-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Disabled-state wrapper inside a tile — rendered when a precondition (e.g. mediators
   saved) hasn't been met. Subdues the form and blocks interaction; an explicit banner
   inside the tile explains what's required. */
.scheduling-path-disabled {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* Subdued in-tile notice — used by the "📤 Poll sent…" status block inside the
   Propose Dates tile. Bootstrap's alert-info reads as too loud for a passive status
   line, so we use the same gray palette as .btn-light to blend with the surrounding
   form chrome. */
.scheduling-path-notice {
  background-color: #fafafa;
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: rgba(0, 0, 0, 0.87);
}

/* "Before scheduling:" precondition checklist inside the Schedule directly card.
   `.checklist-done` and `.checklist-todo` are scoped under the checklist so the colour
   tokens don't leak to other ✓/○ glyph usage elsewhere on the page. */
.scheduling-path-checklist li {
  padding: 0.15rem 0;
  font-size: 0.9rem;
}
.scheduling-path-checklist .checklist-done {
  color: var(--bs-success);
}
.scheduling-path-checklist .checklist-todo {
  color: #6c757d;
}

/* Inline "✓ Docs Received" confirmation label on party summary and interpreter cards. */
.docs-received {
  color: var(--bs-success);
  font-size: 0.85rem;
}

/* Status cell coloring for grids. B3 DataGrid escapes HTML, so the class is applied
   post-render by the observer in _Layout.cshtml that matches known cell-text patterns
   (Paid "P1: x | P2: x", "Sent" / "Not sent", "review poll results", etc.).
   Convention: "good" states get NO color — silence is success. We only paint the cells
   that need attention, so the eye is drawn to exceptions instead of skimming a sea of
   green. The signal is a thin left-edge stripe (inset shadow) so it doesn't compete
   with chip avatars or other inline color in the same row. */
.e-rowcell.status-cell-bad {
  color: var(--status-bad-text);
  box-shadow: inset 3px 0 0 var(--status-bad-stripe);
  font-weight: 600;
}

.e-rowcell.status-cell-warn {
  color: var(--status-warn-text);
  box-shadow: inset 3px 0 0 var(--status-warn-stripe);
  font-weight: 600;
}

/* Muted "starting state" cells (e.g. Date Poll = "Not started"). No stripe — this
   isn't a problem state — but we de-emphasize it so the operator's eye is drawn to
   the actionable rows above/below it. */
.e-rowcell.status-cell-muted {
  color: var(--status-muted-text);
  font-style: italic;
}

/* Dynamic status color band (StatusColorCell.razor sets --status-band-color inline).
   The stripe has to sit flush against the cell's left edge and span its full height, but
   a column template can only render inside the cell — so the cell becomes the containing
   block and the stripe is an absolutely-positioned pseudo-element. That avoids hard-coding
   Syncfusion's cell padding to cancel it out. white-space: normal overrides Syncfusion's
   nowrap/ellipsis so a long label wraps instead of truncating. */
.e-rowcell:has(> .status-color-band) {
  position: relative;
  white-space: normal;
}

.status-color-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--status-band-color, #9CA3AF);
}

/* Make expanded accordion items visually stand out with a stronger border
   (default Syncfusion border is a very light gray that's easy to miss). */
.e-accordion .e-acrdn-item.e-select.e-selected {
  border: 1px solid var(--color-brand-primary);
}

.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header {
  border-bottom: 1px solid var(--color-brand-primary);
}

/* User chip — outlined pill used by StaffAssignmentControl on case-detail pages. The
   leading user-avatar carries the per-user accent color, so the chip itself stays
   neutral (transparent fill, gray border) to avoid two competing color signals on
   the same element. Pair with Bootstrap's `badge rounded-pill`. */
.user-chip {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 400;
  background-color: transparent;
  color: var(--user-chip-text);
  border: 1px solid var(--user-chip-border);
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Button-like hover: subtle gray fill + slightly darker border. Matches Bootstrap's
   btn-outline-* hover semantics so the chip feels interactive (the × inside is the
   actual affordance, but signaling at the pill level is friendlier). */
.user-chip:hover {
  background-color: var(--user-chip-hover-bg);
  border-color: var(--user-chip-hover-border);
}

.user-chip .user-chip-remove {
  background: transparent;
  border: 0;
  color: inherit;
  line-height: 1;
  padding: 0;
  margin-left: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
}

.user-chip .user-chip-remove:hover {
  opacity: 1;
}

.notification-table td {
  vertical-align: middle;
}

.hr-line {
  height: 2px;
  background: gray;
}

.calendarevent-description {
  height: 100px;
  max-height: 100px;
}

.start-time-datepicker,
.end-time-datepicker {
  max-width: 320px;
}

.grid-pane {
  height: calc(100vh - 230px);
  overflow-y: auto;
}
.grid-pane .e-grid {
  height: 100% !important;
}
.grid-pane .e-gridcontent {
  overflow-y: auto;
}

.report-pane {
  height: calc(100vh - 300px);
}

.form-card {
  max-width: 700px;
}

.large-screenshot {
  max-width: 700px;
}

.report-summary-table {
  max-width: 600px;
}

.docsign-link-truncate {
  max-width: 150px;
}

.party-panel {
  flex: 1 1 280px;
}

.party-card {
  border: 1px solid rgba(28, 42, 55, 0.1);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px 18px;
}
.party-card .pc-header {
  color: #6c7780;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.party-card .pc-org {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: #1a2530;
  line-height: 1.25;
}
.party-card .pc-people {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.party-card .pc-person {
  display: flex;
  flex-direction: column;
}
.party-card .pc-name {
  font-weight: 600;
  color: #1a2530;
  font-size: 15px;
  line-height: 1.2;
}
.party-card .pc-sub {
  color: #6c7780;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 1px;
}
.party-card .pc-desc {
  margin-top: 10px;
  font-size: 14px;
  color: #3a4a55;
  line-height: 1.4;
}
.party-card .pc-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(28, 42, 55, 0.1);
  color: #6c7780;
  font-size: 13.5px;
}
.party-card .pc-foot b {
  color: #1a2530;
  font-weight: 600;
}

.notification-table th:first-child {
  min-width: 135px;
}

.case-accordion,
.case-accordion .e-acrdn-item {
  border: 0 !important;
  background: transparent !important;
}

.case-accordion .e-acrdn-item {
  margin-bottom: 8px !important;
}

.case-accordion .e-acrdn-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.case-accordion .acc-header-btn {
  display: block;
  width: 100%;
  background-color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.case-accordion .e-acrdn-item.e-select .acc-header-btn,
.case-accordion .e-acrdn-item.e-expand-state .acc-header-btn {
  background-color: #e9ecef;
  color: #212529;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.case-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
  padding: 12px 0 !important;
  border: 1px solid #ced4da !important;
  border-top: 0 !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.calendar-legend-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6c757d;
  margin-right: 4px;
}

.calendar-legend-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Per-user avatar circle showing 1–2 initials, painted with the user's `user_color`
   B3 Identity claim (see UserColorLookup). Used wherever a user is shown as assigned
   to a case — chip control on case detail pages and "Assigned to" grid cells. Inline
   `style="background-color: ..."` overrides the neutral gray default. White text is a
   compromise: it reads on most chosen colors; very light user picks lose contrast. */
.user-avatar {
  /* !important on the geometric properties because Syncfusion's .e-rowcell stylesheet
     sets `display: inline` on inline children, which collapses our flexbox sizing — the
     avatar would render as a tight pill around the initials text instead of a fixed
     circle. Specificity-bumping with `.e-rowcell .user-avatar` would also work; using
     !important keeps the avatar atom self-contained and lets it drop into any host. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem !important;
  height: 1.5rem !important;
  aspect-ratio: 1/1;
  flex: 0 0 1.5rem;
  border-radius: 50% !important;
  background-color: var(--user-color-default);
  color: var(--user-avatar-text);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px var(--user-avatar-ring);
}

/* In a grid cell the avatars stack horizontally with overlap (like GitHub assignees) so
   multi-assignee cases stay compact. The first avatar is full-position; subsequent ones
   tuck behind via negative margin. White ring (above) keeps overlap edges legible. */
.e-rowcell .assigned-staff-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.e-rowcell .assigned-staff-cell .user-avatar + .user-avatar {
  margin-left: -0.4rem;
}

/* In the chip control (case detail pages), the avatar leads each pill. The chip still
   shows the username and a remove button — same affordance as before, just with a
   richer leading visual. */
.user-chip .user-avatar {
  margin-right: 0.4rem;
}

/* Confidentiality banner on /MediatorCase. Edge-to-edge (cancels both axes of padding
   on MainLayout's `<article class="content px-md-4">`) and flush against the page header.

   The parent article has TWO sources of padding to cancel:
     1. `.content` sets `padding-top: 1.1rem` (always) → negate with `margin-top: -1.1rem`.
     2. `px-md-4` adds `padding-left/right: 1.5rem` at md and up → negate with -1.5rem.

   Scrolls with the page (no sticky) so it doesn't obscure content when the user scrolls down.
   When `.content`'s padding-top changes, update the negative margin here to match. */
.mediator-case-confidential-banner {
  border-radius: 0;
  margin-top: -1.1rem;
}
@media (min-width: 768px) {
  .mediator-case-confidential-banner {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

/* Read-only overlay for third-party components that don't expose a Disabled/Enabled
   parameter (e.g. B3's DefinedListDropDownSF). Wrap the control in a <div> with this
   class while the host is in read-only mode. Blocks click/keyboard interaction and
   greys the control so the user reads it as disabled. Remove once the underlying
   component gains a real disabled-state parameter (tech debt #83). */
.readonly-control-overlay {
  pointer-events: none;
  opacity: 0.6;
}

/* App-level toast positioning.
   - Desktop default (set in ToastHost.razor): top-right, narrow column.
   - Mobile (≤ 767px): override to bottom-center, full-width-ish. Top-right is bad mobile
     UX (out of the thumb zone, partly under the navbar, easy to miss). Bottom-center is
     the conventional snackbar anchor and matches Nielsen-Norman visibility-of-status on
     small screens. The Mediator Calendar runs predominantly on phones, so this matters
     for Confirm/Reject availability + Decline Assignment toasts in particular.

   Selector targets the SfToast container by its ID (set in ToastHost.razor as
   `app_toast`). Syncfusion renders the toasts inside `.e-toast-container`. */
@media (max-width: 767px) {
  #app_toast.e-toast-container,
  .e-toast-container[data-control=app_toast] {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 1rem !important;
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    max-width: 32rem;
  }
  #app_toast .e-toast,
  .e-toast-container[data-control=app_toast] .e-toast {
    width: 100%;
    max-width: 100%;
  }
}
/* Role pill — small filled badge for participant roles (Attorney / Primary).
   Shared by the admin participant grid (ParticipantDetailsEditor) and the mediator
   portal (MediatorCase). Reuses the .user-chip color tokens (filled light fill +
   border so it reads on white rows); no hover/interactive state. */
.role-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--user-chip-text);
  background-color: var(--user-chip-hover-bg);
  border: 1px solid var(--bs-primary);
  border-radius: 0.6rem;
  vertical-align: middle;
  white-space: nowrap;
}